Visuelle hierarkiprinsipper for designere

Visuelle hierarkiprinsipper for designere er et designkonsept som brukes til å veilede hvordan betrakterens øyne beveger seg gjennom et design og bestemme hvilke elementer som er viktigst eller visuelt tiltalende.

Først var det steintavler, papyrusruller og papir. Så kom dataskjermer og elektroniske nettbrett. Ettersom sidevisningsteknologien utvikler seg, sitter designere igjen med en klar måte å organisere innhold på. Men hvilken er bedre? Kort sagt , visuelt hierarki.

Her er definisjonen av visuelt hierarki: Visuelt hierarki er arrangementet grafiske elementer i design i rekkefølge etter viktighet av hvert element. Visuell vekt avgjør elementets betydning i designhierarkiet, forteller seeren hva den skal fokusere på og i hvilken rekkefølge.

Ressurser for designere. 50 gratis

Dette blir en stadig viktigere sak ettersom responsive rammeverk tvinger designere til å tenke på mange forskjellige sider samtidig. Stilt overfor tett tekst og korte oppmerksomhetsspenn, utviklet designere 6 prinsipper for å rette leserens blikk til den viktigste informasjonen.

Disse 6 prinsippene for visuelt hierarki vil hjelpe deg med å designe alt fra brosjyrer til apper, og sikre at sluttbrukeren får en positiv leseopplevelse for designere.

Alle kulturer leses fra topp til bunn, og de fleste kulturer leses fra venstre til høyre. Men selv om denne kunnskapen er viktig for sidedesign, designere vet at oppgaven er mye vanskeligere.

Nyere studier har vist at folk skanner en side først for å se om de er interessert i den før de leser den. Skannemønstre har en tendens til å ha en av to former, "F" og "Z", og du kan dra nytte av dette i designet.

F-mønstre. Prinsipper for visuelt hierarki

F-maler gjelde tradisjonelle tekstsider som artikler eller blogginnlegg. Leseren skanner venstre side side ser etter interessante søkeord i venstrejusterte overskrifter eller innledende emnesetninger, og stopper deretter og leser (til høyre) når han eller hun kommer over noe interessant. Resultatet ser ut som en F (eller en E, eller noe med enda flere horisontale striper; men begrepet "F" satt fast).

Hvordan kan du bruke dette? Juster viktig informasjon til venstre og bruk korte, fete overskrifter, kuler og andre lignende elementer som vekker oppmerksomhet for å bryte opp avsnittsblokker.

Z-modell. Prinsipper for visuelt hierarki

Z-mønstre gjelde andre typer sider, for eksempel annonser eller nettsteder, der informasjon ikke nødvendigvis presenteres i blokkavsnitt. Leseren skanner først toppen av siden, hvor viktig informasjon sannsynligvis vil bli funnet, flytter deretter til motsatt hjørne diagonalt og gjør det samme nederst på siden.

Webdesignere designer vanligvis sidene sine for å eksplisitt matche denne oppførselen, plasserer den viktigste informasjonen i hjørnene og orienterer annen viktig informasjon langs topp- og bunnlinjen og kobler sammen diagonalen.

Nedenfor I utformingen av konferansen i 2010 er logoen viktige elementer (øverst til venstre), en "registrer nå"-knapp (øverst til høyre), og en liste over høyttalere (nederst), som er strategisk plassert i fine Z-mønsterflekker.

2. Størrelse betyr noe. Prinsipper for visuelt hierarki
_

Det er ganske enkelt: folk leser store ting først. Hvis øynene dine trekkes til "forestillingen" før du "deler" deg inn i annonsen nedenfor for Young Vic, bør du kontakte en perseptuell psykolog umiddelbart: du kan sannsynligvis tjene gode penger ved å bli testet som en sjelden anomali.

Det som er interessant er at denne tendensen faktisk er sterk nok til å avvise ovenfra-ned-regelen. I bildet ovenfor overstyrer "hack" "tid til å handle" fordi det er større og til venstre (så venstre til høyre-regelen hjelper).

Men på neste side av Årsrapporten: Menneskerettighetskampanjen 2012 (utviklet i den femte mediespalten) leser vi i stort font «Kampen for likhet på kampanjestien» før teksten rett over «Valget 2012». Prinsipper for visuelt hierarki

"Valg 2012" er den høyeste informasjonsrekkefølgen: den forteller oss det generelle temaet som informasjonen nedenfor gjelder. Men designeren bestemte at tittelen på artikkelen var mer interessant for leserne, og vurderte den derfor slik at den ble lest først.

3. Plass og tekstur. Prinsipper for visuelt hierarki

En annen måte å få oppmerksomhet på er gi innholdet nok plass til å puste . Hvis det er betydelig negativ plass rundt knappen eller linjene i tekstblokken følges mye, vil disse elementene være lettere synlige for leserne.

Som du kan se på bildet nedenfor (en del av DrawtoClicks side), kan mellomrom være et elegant alternativ eller komplement til bruk av størrelse. Her er salgsargumentet, "Notre agence vouscompagne...", skrevet med svært liten skrift, men det er omgitt av en overflod av hvite områder, noe som indikerer viktigheten. Nedenfor får setningene "Le Compendre", "Le Réaliser" og "Le Partager" ekstra vekt, da de er løsrevet fra det omkringliggende rommet.

Når folk snakker om "tekstur" i forhold til visuelt hierarki, mener de ikke de grafiske effektene av tekstur. Snarere refererer denne typen "tekstur" til det overordnede arrangementet eller strukturen av plass, tekst og andre detaljer på en side. Dette eksemplet fra Bright Pink illustrerer konseptet godt:

På det første bildet er ordet «Sport» høyere i hierarkiet enn «badminton» fordi det er høyere, større og dristigere. På bilde 2 er de to ordene omtrent likeverdige, takket være det svarte rektangelet som får "badminton" til å skille seg ut og plasserer det i sin egen plass.

I det tredje bildet avbryter bakgrunnsskriblingen «Sports»-plassen, men ikke «badminton»-plassen, og resulterer derfor i en reversering der «badminton» er den høyeste i hierarkiet. Denne utviklingen er vanskelig å forutsi, så designere forbinder den ofte med en helhetlig følelse av "tekstur".

4. Skriftvekt og sammenkobling. Prinsipper for visuelt hierarki

Fontvalg er avgjørende for å etablere visuelt hierarki. Blant de viktigste egenskapene til en font er vekt, bredden på strekene som utgjør bokstavene, og stil, for eksempel serif og sans serif. Andre modifikasjoner, for eksempel kursiv, kan også spille en rolle.

Legg merke til hvordan hodetelefoner påvirker rekkefølgen av ordhierarkiet i nettdesignet nedenfor for The Tea Factory: "perfekte teer for å hjelpe deg med å varme opp" er navnet på spillet, men forskjeller i skriftvekt og kursiv, i tillegg til ordplassering, skaper en mer dynamisk, mindre lineær, leseopplevelse. "://azbyka.com.ua/foto/tea-factory.jpg" />

I noen tilfeller er målet å presentere en rekke opplysninger som like presserende. Å sette alle til samme størrelse og vekt vil sikre ekvivalens, men vil også få det til å se monotont ut. Skriftdifferensiering er en måte å unngå dette på, som forsiden av magasinet Trendi nedenfor. Prinsipper for visuelt hierarki

Forbereder en brosjyre for utskrift.

Her er de fem teaserne rundt periferien av siden de samme i hierarkiet, men oppnår variasjon ved å endre to godt sammenkoblede fonter – den ene en middels tung serif og den andre en lett, men høy sans-serif.

5. Farge og nyanse. 

Her er en annen enkelt: lyse farger skiller seg ut fra dempede farger eller nyanser av grått, mens lysere nyanser virker mer "fjerne" og dermed faller lavere i hierarkiet enn rikere, mørkere nyanser. Nettstedet Where Are They kontrasterer sterkt lys og farget bakgrunnsbelysning med en svart-hvitt rutenetteffekt til effekten av lysstyrke:

Guggenheim-nettstedet bruker farger for å fremheve viktig informasjon som stedsvalg, en liste over utstillinger som vises for øyeblikket og lenker til spesialutstillinger. Prinsipper for visuelt hierarki

Beste font for tilpasset emballasje

Whitney Museums nettsted, derimot, etablerer et hierarki innenfor én skrifttype, vekt og tone (svart) ved å bruke fargetone (som betyr å legge til hvitt til grunntonen, noe som gjør den lysere). «Cory Archangel on Pop Culture» er klart under «New on Whitney Stories» i det visuelle hierarkiet, ikke bare fordi den er lavere, men også fordi nyansen er lysere, noe som gjør den mindre iøynefallende mot den hvite bakgrunnen. Prinsipper for visuelt hierarki

Farge har en spesiell betydning i mobil design applikasjoner der liten skjermstørrelse begrenser muligheten til å bruke andre strategier som størrelsesvariasjon og stor avstand. I Grainger Industrial Supply-appen er "Fortsett til kassen"-knappen farget rød, slik at den skiller seg ut på alle sider der den vises. Panelet Smale søkeresultater er derimot grått, noe som gjør det omtrent likeverdig i hierarkiet med andre elementer som søkefeltet og produktlenker.

6. Retning for designere.

Sideoppsett er vanligvis utformet for å følge et rutenett med vertikale og horisontale linjer, både etter konvensjon og fordi det er det mest lesbare formatet. I et slikt system er det en ny måte å etablere hierarki på: bryte rutenettet.

Tekst som er plassert langs en kurve eller diagonal, skiller seg automatisk ut mot den omkringliggende rutenettblokkerte teksten, og står i sentrum. Dette har lenge vært en effektiv strategi i reklame, som Frost Designs bussholdeplassplakat.