Hvordan designere kan bruge visuelt hierarki

Kald os overfladiske, men når det kommer til grafisk design, handler det virkelig kun om udseende.

Grafisk design handler om visuelle elementer, og det er vigtigt at bruge dine designfærdigheder og din viden til at sikre, at dit arbejde er letfordøjeligt og æstetisk tiltalende.

En måde at gøre det på er at følge reglerne for visuelt hierarki. Visuelt hierarki sikrer, at dine designs skaber en smidig brugergrænseflade for rigtige brugere på web eller mobil.

Designtrends kommer og går, men de grundlæggende principper for design og brugeroplevelse er evige.

I denne artikel vil vi diskutere visuelt hierarki, give nogle designtips til brug af det og give nogle designeksempler og yderligere ressourcer, som du kan tjekke ud.

Hvad er visuelt hierarki?

Visuelt hierarki er princippet om at arrangere de enkelte elementer i rækkefølge efter deres betydning i et design eller kunstværk.

Efter dette nøgleprincip organiserer designere visuelle komponenter og elementer for at sikre, at seerne let kan forstå deres betydning.

Når det visuelle hierarki er korrekt udført, vil det påvirke, hvordan dit arbejde og dine designelementer opfattes og forstås af brugerne, og det vil lede dem til at foretage bestemte handlinger.

Gestaltprincipper er designprincipper, der drejer sig om menneskets opfattelse af visuelle elementer. Disse principper analyserer, hvordan det menneskelige øje grupperer ens objekter, ser mønstre og forenkler billeder.

Designere bør være opmærksomme på og bruge disse principper, når de skaber reklamer, websteder og digitale grænseflader.

Ifølge gestaltpsykologien skaber visuelt hierarki mønstre i seernes synsfelt, som får nogle elementer til at skille sig ud for det menneskelige øje. Dette er det, der antyder eller skaber et visuelt hierarki af betydning.

Lad os nu tale om, hvorfor visuelt hierarki er vigtigt for designere.

Hvorfor visuelt hierarki er vigtigt

Nu hvor du ved, hvad visuelt hierarki er, er det sikkert blevet klart, hvorfor designere bør kende og bruge dette princip i deres arbejde.

Grafisk design har altid været en digital kunstart, men på det seneste er hele branchen blevet mere "online", hvilket betyder, at grafisk design ofte ses og distribueres online via websteder, sociale medier eller annoncer.

Brugeroplevelsen er en afgørende faktor at huske på, når man laver grafisk design til internettet. I modsætning til en plakat eller et trykt værk bruges online-design ofte funktionelt til at guide brugerne gennem et websted, lokke dem til at klikke på købsknapper og tilskynde dem til at klikke på andre links.

Her er et godt eksempel på, hvordan det typiske øje vil bevæge sig hen over en landingsside eller webside baseret på lovene om visuelt hierarki.

Brugeroplevelse i design er den samlede oplevelse af en bruger, der interagerer med et produkt som f.eks. en webside eller en app, især med hensyn til hvor funktionelt det er at bruge.

Den måde, som en kunde interagerer med og oplever en brugergrænseflade på, ændrer drastisk deres mening om et mærke eller et produkt.

Det betyder, at mobildesigns og webdesigns skal være meget optimerede, og en af de bedste måder at gøre dette på er at bruge de grundlæggende principper for visuelt hierarki.

Så lad os gå ind i detaljerne omkring visuelt hierarki og tale i detaljer om hvert enkelt princip og hvordan de relaterer sig til grafisk designarbejde.

De grundlæggende principper for visuelt hierarki

Principperne for visuelt hierarki minder meget om de grundlæggende principper for grafisk design.

Du ønsker grundlæggende, at dine designs skal være æstetisk tiltalende. Grundlæggende designprincipper kræver omhyggelig brug af farver, afstand, kontraster og mønstre.

De grundlæggende principper for visuelt hierarki, som vi har udvalgt til denne artikel, ligner hinanden med visse nuancer. Der er naturligvis flere principper, der har indflydelse på visuelt hierarki, men disse er et godt sted at starte, hvis det er din første gang, at du kaster dig ud i begrebet visuelt hierarki.

Det menneskelige øje skaber et øjeblikkeligt hierarki, når du ser et stykke kunst, tekst eller visuelt design. Visse individuelle elementer vil stikke ud for dig, og som designer er det vigtigt at kontrollere, hvordan dit arbejde opfattes.

Lad os begynde med vores første princip: farve.

Farve

Farver er en af de vigtigste byggesten i design. Varemærker bruger farver og symboler til at gøre deres produkter let genkendelige og mindeværdige.

Tænk på den berømte McDonald's-bue eller Starbucks' havfrue-billede - eksempler på, hvor indgroede visse logoer kan blive i vores kollektive hukommelse.

Farve i et visuelt hierarki bestemmer det område, som øjet straks drages mod i et design.

En variation i farverne er typisk bedst, men du skal ikke gå for vidt med dine farvevalg.

For mange kontrastfarver eller lyse farver kan være overvældende og skabe en kaotisk designoplevelse, men for mange dæmpede farver kan forhindre designet i at skille sig visuelt ud.

Det er også vigtigt at overveje farvelære og bruge komplementære farvekombinationer.

I et visuelt hierarki er varme farver typisk i forgrunden i designet, mens kolde farver falder i baggrunden.

Men hvis du placerer dit design på en lys baggrund, er denne effekt omvendt. Ved at blande farvetemperaturer og skabe et design med både kolde og varme farver kan du skabe dybde i designet.

Når man ved det, er det let at forstå, hvordan farvevalg kan have stor indflydelse på, hvordan det menneskelige øje opfatter dit design.

Mønstre

Sjovt faktum: Alle har et visningsmønster, som de bruger til at absorbere information og indhold.

De to mest almindelige former for visningsmønstre er Z-mønsteret og F-mønsteret.

Z-mønster:

• Øjet følger en bane som et Z, øverst fra venstre til højre, derefter ned til venstre og over til højre.
• Bedst egnet til et design, der ikke er indholdstungt
• Hjælper seerne med at scanne hurtigt gennem elementerne

F-mønster:

• Øjet følger en bane som et F, fra øverst til venstre til øverst til højre, derefter ned til den følgende linje fra venstre til højre, og det gentager sig langs vandrette linjer.
• Bedst til indholdstunge designs
• Hjælper seerne med at scanne billeder og overskrifter

Som designer er det vigtigste at vide, at sider med meget indhold er bedst med et F-mønster, mens sider med mindre indhold er bedst med et Z-mønster.

Begge designmønstre tjener et formål og udnytter det naturlige mønster, som øjet følger, når det læser information. Hvis du følger disse mønstre og bruger dem til din fordel, vil dine seere bedre kunne forstå dit indhold og dine intentioner.

Kontrast

Brug af kontrasterende farver og symboler er den bedste måde at fremhæve information og tiltrække opmærksomhed til en bestemt del af et design.

At bruge en mørk baggrund eller lys baggrund til at fremhæve oplysningerne i dine designs er en god måde at udnytte visuelt hierarki på en enkel, men effektiv måde.

Dette element af visuelt hierarki spiller en afgørende rolle for, hvordan design opfattes, og det er stærkt knyttet til farver. Kontrast skabes ofte ved hjælp af farver for at fremhæve.

Ethvert fremtrædende element, du ønsker at fremhæve, bør være i en fed farve eller omgivet af dæmpede farver for at få det til at skille sig ud.

Afstand

Beliggenhed, beliggenhed, beliggenhed.

Ligesom på boligmarkedet er placeringen afgørende for dine designs. Hvor og hvordan du placerer tingene i dit arbejde, vil være afgørende for, hvordan dit værk bliver konstrueret.

Hvid plads kan bruges til at skabe et minimalistisk design, der fremhæver én ting. Denne tomme plads kan være en god måde at skabe en kontrast til det kraftige centrale billede i dit design.

Du kan også gå den anden vej og bruge mange forskellige genstande for at skabe et maksimalistisk design. Når det er gjort korrekt, er disse designs iøjnefaldende og sjove at se på.

Den måde, du justerer teksten på i et design, har også stor betydning for det overordnede udseende af dit indhold. Her er nogle eksempler på, hvordan det kan se ud.

Og som du kan se nedenfor, kan størrelsen og placeringen af objekter få dem til at virke større og vigtigere eller mindre og mere diskrete.

Det har også betydning for, om du skal sætte objekter på række, organisere dem i en form eller lade dem være sporadiske.

Sådan bruger du visuelt hierarki i grafisk design

Nu hvor vi har gennemgået, hvad visuelt hierarki er, skal vi se på nogle designeksempler, der perfekt viser visuelle relationer og visuel organisering.

Designere bruger hele tiden de grundlæggende principper for visuelt hierarki, f.eks. hvidt rum og bevidst afdæmpede farver kombineret med et visuelt slående objekt.

Nedenfor er der nogle eksempler på, hvordan visuelt hierarki fungerer i forskellige former for grafisk design: typografi, infografik, webdesign, reklamer og trykte materialer.

Typografi

Typografi er et vigtigt element i design, som det kan være svært at mestre.

Type af skrifttype, versaler, størrelse, fremhævelse og placering kan alle have en drastisk indflydelse på, hvordan din tekst læses af en beskuer.

I reklamer og webdesign er teksten ofte det vigtigste for dine seere at opfatte, så det er vigtigt at sikre, at du får det rigtigt.

Dette eksempel viser, hvordan du kan placere teksten kreativt for at fremhæve og gruppere begreber og ord og sikre, at de vigtige ord læses først og er let forståelige.

Du ønsker, at seerne hurtigt skal kunne forstå, hvad du kommunikerer, selv om de kun kigger på dit design i et par sekunder.

Infografikker

Infografikker er en fantastisk måde at vise og organisere fakta og oplysninger på.

Et design med en blanding af ord og symboler gør informationerne lettere fordøjelige og mere interessante at se på.

Men du skal være forsigtig, for du må ikke forenkle for meget og gå ud fra, at dit publikum forstår visse nichesymboler.

Og da du bruger færre ord, skal du gøre alt, hvad du kan, for at få dine fakta til at skille sig ud på siden. Her er et godt eksempel på, hvordan du kan gøre det.

Du kan se, at i den første version er alle symbolerne ensfarvede, hvilket ikke hjælper beskueren med at forstå, hvad der bliver sagt.

I det andet eksempel er et af symbolerne blevet farvet meget lysere, hvilket skaber kontrast og vægt, som straks tiltrækker dit øje.

På denne måde kan du skabe effektive designs med blot en lille ændring af farverne for at forbedre brugeroplevelsen.

Webdesign

Inden for webdesign er brugergrænsefladen alt afgørende.

Hvis en besøgende på dit websted ikke nemt kan finde rundt på det, vil han/hun straks forlade stedet og vil sandsynligvis ikke komme tilbage.

Det er her, at mange af principperne for visuelt hierarki, som vi har diskuteret, kommer i spil. Kontrast, afstand og mønstre kan gøre det nemt (eller svært) for besøgende at bevæge sig gennem et websted.

Her er et eksempel på både godt og dårligt visuelt hierarki på en simpel landingsside.

Ved at fremhæve de vigtige elementer og skabe en klar brugerrejse er der større sandsynlighed for at få brugerne til at købe et produkt, læse dit indhold eller tilmelde sig en tjeneste.

Annonce

Reklamer er overalt, men kun nogle få skiller sig ud og efterlader et indtryk.

Hvis du vil skabe en annonce, der gør indtryk på dine seere, kan du bruge visuelt hierarki til at sikre, at du fanger deres opmærksomhed med det samme og beholder den længe nok til at kommunikere dit budskab.

Ved at bruge alle de elementer, vi har diskuteret ovenfor, kan du sikre, at din annonce skiller sig ud fra resten og er let at forstå og forstå.

Her er et godt eksempel på, hvordan afstand, farve og kontrast kan påvirke den måde, dit design opfattes på.

Billedet er lidt for spredt i den første version, og farverne er ikke så effektfulde. Den anden version løser begge problemer og skaber et mere effektfuldt billede.

Trykte materialer

Visuel hierarki er ikke kun et krav til digitale billeder, men også til trykte materialer.

Trykte materialer som plakater, visitkort og magasiner bruger alle de grundlæggende regler for visuelt hierarki til at lokke og informere deres publikum.

Her er et eksempel på, hvordan visuelt hierarki ændrer et visitkorts udseende.

I det første forsøg hjælper de anvendte mellemrum og farver ikke læseren med at identificere de vigtige oplysninger på kortet med det samme. Når det er rettet, finder øjet straks navnet på kortet og kender dets betydning.

Få mere at vide om visuelt hierarki

Grafiske designere, som alle andre erhverv, lærer og styrker hele tiden deres færdigheder.

Grundlæggende designelementer som minimalistisk design vil sandsynligvis ikke ændre sig pludseligt, men der er altid nye måder at gribe dine designs og din kreative tilgang an på.

• Lær om det grundlæggende i farveteori, som kan bruges til at forbedre dit visuelle hierarki i design.
• Få flere oplysninger om farvekontraster.
• Visme har udarbejdet denne visuelle vejledning til brug af hierarki i design.
• Se en glimrende vejledning i at bruge hierarki i webdesign.
• Denne gratis e-bog går mere i dybden med visuelt hierarki, og hvordan det kan påvirke dine designs, og giver nogle eksempler.

Med disse ressourcer og din viden om visuelt hierarki vil du helt sikkert kunne skabe nogle fantastiske og visuelt smukke designs.

Nu er du sikkert ved at være ivrig efter at bruge denne viden i et rigtigt design, så kom i gang! Download Vectornator gratis i dag! Vi glæder os til at se, hvad du skaber.

Download Vectornator for at komme i gang

Løft dine designs til det næste niveau.

(Kilde til omslagsbillede: Unsplash )