Principer för visuell hierarki för designers

Visuella hierarkiprinciper för designers är ett designkoncept som används för att styra hur betraktarens ögon rör sig genom en design och avgöra vilka element som är viktigast eller visuellt tilltalande.

Till en början fanns det stentavlor, papyrusrullar och papper. Sedan kom datorskärmar och elektroniska surfplattor. I takt med att sidvisningstekniken utvecklas har designers ett tydligt sätt att organisera innehåll. Men vilket är bättre? Kort sagt , visuell hierarki.

Här är definitionen av visuell hierarki: Visuell hierarki är arrangemanget grafiska element i design i ordning efter betydelse för varje element. Visuell vikt avgör elementets betydelse i designhierarkin, tala om för tittaren vad den ska fokusera på och i vilken ordning.

Resurser för designers. 50 gratis

Detta blir en allt viktigare fråga eftersom responsiva ramverk tvingar designers att tänka på många olika sidor samtidigt. Inför tät text och kort uppmärksamhet utvecklade designers 6 principer för att rikta läsarens blick mot den viktigaste informationen.

Dessa 6 principer för visuell hierarki hjälper dig att designa allt från broschyrer till appar, vilket säkerställer att slutanvändaren får en positiv läsupplevelse för designers.

Alla kulturer läses uppifrån och ner, och de flesta kulturer läses från vänster till höger. Men även om denna kunskap är viktig för siddesign, designers vet att uppgiften är mycket svårare.

Nyligen genomförda studier har visat att människor skannar en sida först för att se om de är intresserade av den innan de läser den. Skanningsmönster tenderar att ha en av två former, "F" och "Z", och du kan dra fördel av detta i din design.

F-mönster. Principer för visuell hierarki

F-mallar gälla traditionella textsidor som artiklar eller blogginlägg. Läsaren skannar den vänstra sidan sida letar efter intressanta nyckelord i vänsterjusterade rubriker eller inledande ämnesmeningar, stannar sedan och läser (till höger) när han eller hon stöter på något intressant. Resultatet ser ut som ett F (eller ett E, eller något med ännu fler horisontella ränder, men termen "F" har fastnat).

Hur kan du använda detta? Justera viktig information till vänster och använd korta, feta rubriker, punkter och andra liknande uppmärksammade element för att bryta upp styckeblock.

Z-modell. Principer för visuell hierarki

Z-mönster gäller andra typer av sidor, såsom annonser eller webbplatser, där information inte nödvändigtvis presenteras i blockstycken. Läsaren skannar först av toppen av sidan, där viktig information sannolikt finns, förflyttar sig sedan diagonalt till det motsatta hörnet och gör samma sak längst ner på sidan.

Webbdesigners designar vanligtvis sina sidor för att explicit matcha detta beteende, placerar den viktigaste informationen i hörnen och orienterar annan viktig information längs de övre och nedre fälten och kopplar ihop diagonalen.

I nedanstående I utformningen av konferensen 2010 är logotypen viktiga inslag (överst till vänster), en "registrera nu"-knapp (överst till höger) och en lista med högtalare (nederst), som är strategiskt placerade i snygga Z-mönster.

2. Storleken spelar roll. Principer för visuell hierarki
_

Det är ganska enkelt: folk läser stora saker först. Om dina ögon dras till "prestandan" innan du "delar" dig i annonsen nedan för Young Vic, bör du kontakta en perceptuell psykolog omedelbart: du skulle förmodligen kunna tjäna bra pengar på att testas som en sällsynt anomali.

Vad som är intressant är att denna tendens faktiskt är stark nog att förkasta top-down-regeln. I bilden ovan åsidosätter "hack" "tid att agera" eftersom det är större och till vänster (så vänster till höger-regeln hjälper).

Men på nästa sida i årsrapporten: Mänskliga rättigheter kampanj 2012 (utvecklad i den femte mediakolumnen) läser vi i stort font "The Fight for Equality on the Campaign Trail" före texten direkt ovanför "Val 2012." Principer för visuell hierarki

"Val 2012" är den högsta informationsordningen: den berättar för oss det allmänna temat som informationen nedan avser. Men designern bestämde sig för att artikelns titel var mer intressant för läsarna och betygsatte den därför så att den skulle läsas först.

3. Utrymme och textur. Principer för visuell hierarki

Ett annat sätt att få uppmärksamhet är ge innehållet tillräckligt med utrymme att andas . Om det finns betydande negativt utrymme runt knappen eller raderna i textblocket följs i stor utsträckning, kommer dessa element att vara lättare synliga för läsarna.

Som du kan se i bilden nedan (en del av DrawtoClicks sida) kan mellanrum vara ett elegant alternativ eller komplement till att använda storlek. Här är försäljningsargumentet, "Notre agence vouscompagne...", skrivet med mycket finstilt, men det är omgivet av ett överflöd av vitt utrymme, vilket indikerar dess betydelse. Nedan får fraserna "Le Compendre", "Le Réaliser" och "Le Partager" ytterligare betoning, eftersom de är fristående från det omgivande rummet.

När människor talar om "textur" i relation till visuell hierarki, menar de inte de grafiska effekterna av textur. Snarare hänvisar denna typ av "textur" till det övergripande arrangemanget eller strukturen av utrymme, text och andra detaljer på en sida. Detta exempel från Bright Pink illustrerar konceptet väl:

På den första bilden är ordet "Sport" högre i hierarkin än "badminton" eftersom det är högre, större och djärvare. På bild 2 är de två orden ungefär likvärdiga, tack vare den svarta rektangeln som gör att "badminton" sticker ut och sätter det i sitt eget utrymme.

I den tredje bilden avbryter bakgrundsklottern "Sport"-utrymmet men inte "badminton"-utrymmet, och resulterar därför i en vändning där "badminton" är högst i hierarkin. Denna utveckling är svår att förutsäga, så designers associerar det ofta med en holistisk känsla av "textur".

4. Teckensnittsvikt och parning. Principer för visuell hierarki

Val av teckensnitt är avgörande för att upprätta visuell hierarki. Bland de viktigaste egenskaperna för ett teckensnitt är vikt, bredden på strecken som utgör bokstäverna och stil, som serif och sans serif. Andra modifieringar, såsom kursiv stil, kan också spela en roll.

Lägg märke till hur headset påverkar ordhierarkins ordning i webbdesignen nedan för The Tea Factory: "perfekta teer som hjälper dig att värma upp" är namnet på spelet, men skillnader i teckensnittsvikt och kursiv stil, förutom ordplacering, skapar en mer dynamisk, mindre linjär läsupplevelse. "://azbyka.com.ua/foto/tea-factory.jpg" />

I vissa fall är målet att presentera en mängd information som lika brådskande. Att ställa in alla på samma storlek och vikt kommer att säkerställa likvärdighet, men kommer också att få det att se monotont ut. Teckensnittsdifferentiering är ett sätt att undvika detta, som Trendi tidningens omslag nedan. Principer för visuell hierarki

Förbereder en broschyr för tryckning.

Här är de fem teasers runt sidans periferi desamma i hierarkin, men uppnår variation genom att ändra två välparade typsnitt – en en medelviktig serif och den andra en lätt men hög sans-serif.

5. Färg och nyans. 

Här är en annan no-brainer: ljusa färger sticker ut från dämpade färger eller nyanser av grått, medan ljusare nyanser verkar mer "avlägsen" och därmed faller lägre i hierarkin än rikare, mörkare nyanser. Webbplatsen Where Are They kontrasterar starkt ljus och färgad bakgrundsbelysning med en svart och vit rutnätseffekt till effekten av ljusstyrka:

Guggenheims webbplats använder färg för att framhäva viktig information som val av plats, en lista över utställningar som för närvarande visas och länkar till specialutställningar. Principer för visuell hierarki

Bästa teckensnitt för anpassade förpackningar

Whitney Museums webbplats, å andra sidan, etablerar en hierarki inom ett typsnitt, vikt och ton (svart) med hjälp av nyans (vilket innebär att lägga till vitt till bastonen, vilket gör den ljusare). "Cory Archangel on Pop Culture" ligger klart under "New on Whitney Stories" i den visuella hierarkin, inte bara för att den är lägre, utan också för att dess nyans är ljusare, vilket gör den mindre iögonfallande mot den vita bakgrunden. Principer för visuell hierarki

Färg har en speciell betydelse i mobil design applikationer där liten skärmstorlek begränsar din förmåga att använda andra strategier som storleksvariationer och stort avstånd. I Grainger Industrial Supply-appen är knappen "Fortsätt till kassan" färgad röd, vilket gör att den sticker ut på alla sidor där den visas. Panelen Smal sökresultat är däremot grå, vilket gör den ungefär likvärdig i hierarkin med andra element som sökfältet och produktlänkar.

6. Riktning för designers.

Sidlayouter är vanligtvis utformade för att följa ett rutnät av vertikala och horisontella linjer, både enligt konvention och eftersom det är det mest läsbara formatet. I ett sådant system finns det ett nytt sätt att etablera hierarki: att bryta rutnätet.

Text som är placerad längs en kurva eller diagonal sticker automatiskt ut mot den omgivande rutnätsblockerade texten och står i centrum. Detta har länge varit en effektiv strategi i reklam, som Frost Designs busshållplatsaffisch.