Använda sättet Människor behandlar visuell information i webbdesign

Att utforma webbplatser och användargränssnitt har blivit mycket enklare de senaste åren. Det finns så många verktyg där ute som du kan använda som gör det meningslöst att börja från början när du utvecklar användargränssnitt (kolla in vår fria UI-sammanställning). Men jag är inte här för att argumentera för död av webbdesign.

Istället är det jag ska försöka förklara de grundläggande, psykologibaserade koncepten bakom de många visuella designverktygen (från de mest grundläggande CSS-kit till de mest avancerade premiumtema). Du ska inte bara använda dem, men förstår också dem. Jag är övertygad om att det här också kommer att göra det lättare att ändra befintliga med framgång också.

Låt oss undersöka hur människa och kropp fungerar när det gäller att bearbeta visuell information och hur denna kunskap tolkas för att designa för webben.

Principerna för perceptuell organisation

Enligt Gestaltpsykologi, hela är annorlunda än summan av dess delar. Efterföljare av denna tankegang hävdar att det finns några principer om hur de mänskliga sinnena föremål. Det här är inte bara teorier, tänker på dig, men faktiska praktiska fakta om hur man organiserar visuella grupper.

Nedan hittar du några av lagarna och de mer populära och välkända användningarna av dessa principer. Du kanske till och med kan hitta några nya idéer för din nästa design.

Lagen om likhet

Den första principen säger att Små föremål som liknar varandra uppfattas som en grupp, snarare än flera instanser av samma lilla objekt. Likhet kan baseras på form, färg, skuggning eller annan kvalitet. Denna princip är grunden för mönster design såväl som många geometriska och minimalistiska logotyper.

Till exempel visar denna bild som en cirkulär logotyp istället för separata trianglar. Den triangulära formen längst ner på örnen får oss att tro att formen är en del av bilden.

Du har antagligen också utnyttjat denna lag omedvetet när du skapar några, same-sized featured innehållslådor för din webbplats. Om du vill visa att vissa innehållsämnen har samma betydelse eller dela liknande information, skapa en specifik form bara för det ändamålet. På detta sätt kommer din användare att omedelbart associera den specifika formen med ett visst informationsområde.

Lagen om närhet

Enligt denna lag objekt som är närmare till varandra är anses vara av samma grupp. Samma rutor, när de görs nära varandra i nära, regelbunden närhet, skapar en känsla av gruppering.

Denna princip har använts i stor utsträckning på webben på senare tid, särskilt när man arbetar med innehållslingor, t.ex. på bloggar och webbshops.

Du kan omedelbart gruppera titeln, den presenterade bilden, metadata och utdraget tillsammans även utan gränser eller bakgrunder. Du kanske kan rensa onödiga linjer och färger från din design för att göra det mer minimalistiskt, men ändå fullt begripligt.

För din bekvämlighet, citerar jag Wikipedia också som säger:

Lag om god form

Kallas även lagen om Pragnanz eller Good Gestalt, säger denna lag att vi tenderar att gruppera objekt tillsammans om de bilda ett mönster som är enkelt, regelbundet och ordnat. Vårt sinne försöker separera komplexa och perceptuellt svåra former i många grupper av helt enkelt begripliga former. detta ledde till betydelse av korthet.

Detta är också en av de möjliga orsakerna till framgången för nätbaserad design och detta gjorde bord- och rambaserade (tack och lov saker av den mörka tiden av design) webbstrukturer så populära.

Om du håller denna princip i åtanke kommer du förmodligen inte att sluta skapa en webbplats fylld med komplexa former av innehållsblock som skulle kopplas i åtanke via de andra lagarna ovan. Fortfarande kan du gruppera dina föremål tillsammans på ett intressant sätt, t.ex. i en diamant- eller kiteform, eftersom de fortfarande uppfattas som ordnade och koncisa former.

Färgteori, uppfattning och användning

Färgsyn och uppfattning om färg är till stor del subjektiv baserat på hur tittarnas hjärnor reagerar till ljusvågorna reflekteras av färgglada föremål eller former. Regeln är att olika människor, även utan några synförluster, ser samma föremål i olika färger (du kanske kommer ihåg klänningen).

Färgegenskaper

Fortfarande finns det tre objektiva egenskaper av färg; nyans, värde och intensitet.

Nyans är namnet på färgen som märkt på ett färghjul eller i en regnbåge. Det finns sex (eller tolv beroende på vem du pratar med) grundläggande nyanser: röd, orange, gul, grön, blå och violett.

Gult, blått och rött är primär, orange, grön och violett är sekundär nyanser; det finns också tertiär nyanser som är de direkta blandningarna av två primära och sekundära nyanser (t ex gulgrön eller rödviolett).

Värde är ljusets eller mörkets färg, hänvisad till som högt värde för ljusa färger eller lågt värde för mörka färger.

Intensitet hänvisar till ljusstyrka eller dimma av en färg; det betyder att en färg med samma färgton och samma värde fortfarande kan dämpas eller ljusas genom att ändra intensiteten och skapa olika färgutgångar.

Den högsta intensiteten i varje färg är den färg som de visar på färghjulet (se nedan), medan den lägsta är färgen grå.

Färgkontrast

Med hänvisning till ovannämnda lagar av likhet skapar perceivers sinnen grupper av små föremål som de ser utifrån liknande och olika egenskaper - ofta färger.

När du valde din färgpalett för din webbplats, speciellt om du går för ett minimalistiskt synsätt eller om du designar ett texthaltigt innehållsområde, t.ex. bloggar eller annonser, borde du var medveten om olika färgkontraster Det kan hjälpa dig att hitta rätt färgvärden för bästa resultat.

Det finns 7 färgkontraster enligt Johannes Itten, även om jag bara nämner 3.

1. Kontrast av nyans

Gul, röd och blå vid full intensitet är direkta och levande kontraster. Sekundära nyanser gör en mindre skarp skillnad, men arbetar fortfarande, precis som tertiära nyanser gör, men inte heller producerar som fantastiska resultat som med primära nyanser.

2. Komplementär kontrast

Två färger är i komplementär kontrast, om de blandas tillsammans skapar de en neutral grå. Dessa kallas också konstiga par. Om de angränsar, förbättrar de livlighet och intensitet, medan de blandas tillsammans avbryter de varandra. Varje färg har en enda komplementär; På färghjulet är paren diagonalt motsatta varandra.

3. Mörk kontrast

Om du vill experimentera med en enda färgwebbplats, använder olika värden av samma färgton kan ge fantastiska resultat. Används ofta i minimalistisk webbdesign, du kan också producera bra resultat baserat på ljus mörk kontrast om du vill ge temat färgalternativ till din användare. Denna kontrast används också för gråskaledesign.

Om du vill fortsätta med de återstående 4 färgkontrasterna kan du hitta dem här.

Skapa paletter och kolla efter kontraster

Att veta teorin är bra, att tolka dina idéer är en annan sak helt och hållet. Du borde inte oroa dig, men webben ger ett bra stöd för dina behov av färgsjuggling. Det finns en mängd verktyg som hjälper dig att skapa anpassade färgmönster baserat på färgkontrastregler, t.ex. Paletton eller Adobe Kuler.

För webbändamål kanske du vill kontrollera kontraster som du valde att använda på webAIM, på Jonathan Snooks webbplats eller ladda ner en förekomst av Color Contrast Analyzer av Paciello Group här.

Slutsats

När du börjar arbeta med ett nytt tema eller börja ändra på befintliga, försök att tänka på uppfattningsprinciperna för att organisera ditt innehåll och kom ihåg att överväga färgreglerna när du ger din design sin slutliga form och nyans.

Redaktörens anteckning: Denna gästpost är skrivet till Hongkiat.com av Marton Fekete. Marton är en ungerska webbplatsutvecklare som nyligen är ansluten till WordPress. Han är en redesign entusiast och frilans innehållsförfattare som gillar att spela RPG på fritiden.