12 Visual Hierarchy Principles Every Non-Designer Needs to Know

Visuele hiërarchie is een methode om ontwerpelementen te ordenen in volgorde van belangrijkheid. Met andere woorden, het is een reeks principes die van invloed zijn op de volgorde waarin we opmerken wat we zien.

In deze gids zetten we 12 principes van visuele hiërarchie op een rij die elke beginnende ontwerper moet kennen.

We hebben een hoop te bespreken, dus laten we beginnen.

Inhoudsopgave

Wat is visuele hiërarchie?

Principe #1: Grootte beïnvloedt zichtbaarheid

Principe #2: Perspectief creëert een illusie van diepte

Principe #3: Kleur en Contrast trekken de aandacht

Principe #4: Lettertypen ordenen het ontwerp

Principe #5: Ruimte zorgt voor nadruk en beweging

Principe #6: Nabijheid suggereert relaties

Principe #7: Negatieve ruimte benadrukt

Principe #8: Uitlijning richt de blik

Principe #9: Oneven genummerde groepen creëren focus

Principe #10: Herhaling verenigt een compositie

Principe #11: Lijnen suggereren beweging

Principe #12: Rasters ordenen een ontwerp

Visuele hiërarchie Infographic

Wat is visuele hiërarchie?

Visuele hiërarchie is een ontwerpprincipe dat verwijst naar hoe elementen in een ontwerp zijn gerangschikt. Visuele hiërarchie helpt ontwerpers en ontwikkelaars om elk element op een logische manier te rangschikken, zodat het visueel goed te verteren is.

In een ontwerp betekent dit dat de koptekst bovenaan komt te staan in het grootste lettertype, met elk volgend element in grootte op basis van belangrijkheid. Dit helpt de gebruiker de stroom beter te begrijpen, zodat hij weet waar hij eerst moet kijken.

De reden dat visuele hiërarchie zo’n belangrijk principe is om te begrijpen, is dat het aan de ontwerper is om de hiërarchie zo te maken dat de kijker niet eens hoeft na te denken over waar hij eerst moet kijken. Hun oog wordt automatisch naar elk element getrokken, precies in de volgorde waarin ze het moeten zien.

We hebben ook een videoversie van deze blogpost gemaakt om je te helpen visuele hiërarchie verder te begrijpen. U kunt de video hieronder bekijken.

1 Size Impacts Visibility

Groot is beter, toch? Hoewel dit klassieke adagium nog steeds ter discussie staat, is grootte waarschijnlijk de meest effectieve manier om visuele elementen te benadrukken. Simpel gezegd, grotere elementen trekken meer aandacht dan kleinere elementen.

Het is precies de reden waarom krantenkoppen in grotere lettertypen verschijnen, en belangrijke verhalen vaak zelfs grotere koppen hebben dan artikelen op de rest van de pagina. In elk ontwerp vallen grotere elementen – of het nu woorden of afbeeldingen zijn – niet alleen het meest op, maar ze dragen ook de sterkste boodschap uit.

Merk in het bovenstaande voorbeeld op dat het grootste woord ook het meest opvallend en emotioneel is. Lezers zullen veel sneller reageren op het woord “kraken” dan op het op een na grootste woord, het basiswoord “prestatie”. Het ontwerp zou lang niet zo effectief zijn als de woorden even groot waren of als een ander woord op de pagina, zoals “act” of “time” nog groter was.

Een ander belangrijk principe in verband met dit concept is schaal, dat is de grootte van een object in verhouding tot een ander. Een enkel object, hoe groot of klein ook, heeft geen schaal totdat het wordt vergeleken met een ander. Het stelt ons in staat evenwicht te scheppen in een ontwerp en ons te concentreren op dominante elementen. Hoe groter de schaal, hoe meer nadruk.

2 Perspectief creëert een illusie van diepte

Door gebruik te maken van perspectief kunnen ontwerpers een illusie van diepte creëren, variërend van een paar centimeter tot enkele kilometers. Omdat we in de echte wereld vergelijkbare illusies zien, zien we grotere objecten over het algemeen als dichterbij dan vergelijkbare kleinere objecten en daarom trekken ze meestal eerder de aandacht dan andere objecten op een pagina.

Een illustratie van een weg zal bijvoorbeeld meestal breder zijn op het laagste punt en geleidelijk smaller worden naarmate het hoger op het doek komt te liggen. Evenzo zal een object dat zich het dichtst bij de kijker bevindt altijd groter lijken dan hetzelfde object dat zich verder weg bevindt.

Proper perspectief maakt gebruik van zowel schaal als proportie om nauwkeurig de juiste afstand aan te geven. Een tekening van een stuk weg van vijf mijl zal veel verder weg liggen dan een stuk van een halve mijl dat op hetzelfde formaat doek is getekend.

3 Kleur en contrast trekken de aandacht

Net zoals grotere elementen als belangrijker worden ervaren dan kleinere, trekken heldere kleuren doorgaans meer aandacht dan doffere tinten. Als bijvoorbeeld een enkele zin in een blok tekst wordt geaccentueerd met een felle kleur, trekt dat onmiddellijk de aandacht van de lezer.

Kijk eens naar het bovenstaande ontwerp. Merk op hoe het veel meer aandacht trekt wanneer de natuurlijke tinten werden geaccentueerd tot neonkleuren? Het kleurenschema staat bekend als een duotoon, een steeds populairdere trend in web-design. Het effect, waarbij een paar contrasterende kleuren over een foto worden gelegd, leent zich voor opvallende ontwerpen die figuurlijk van de pagina of het scherm knallen.

Dramatisch contrasterende kleuren kunnen ook specifieke elementen benadrukken dan een spectrum op een zachtere schaal. Een rood voorwerp tegen een groene of zwarte achtergrond zal meer aandacht trekken dan hetzelfde rode voorwerp op een oranje of paarse achtergrond.

De kleurencombinaties die in een ontwerp worden gebruikt, en hoe ze zich tot elkaar verhouden, staan bekend als het kleurenschema. De keuze van een ontwerper voor een kleurenschema kan eenheid, harmonie, ritme en evenwicht in een creatie scheppen, maar het kan ook contrast en nadruk scheppen.

Een ontwerp dat te veel contrasterende kleuren gebruikt, zal vaak ongeorganiseerd en onsamenhangend overkomen. Hetzelfde kan soms worden gezegd van ontwerpen die een kleurenschema gebruiken dat zich niet aan de kleurentheorie houdt. Maar bij het kiezen van het beste palet komt veel meer kijken dan het willekeurig kiezen van een monochrome, complementaire of tetradische combinatie.

Gelijksoortige kleuren kunnen worden gebruikt om verwante elementen in een ontwerp te groeperen, en de kleurkeuze kan zelfs gewicht en afstand suggereren. Warme kleuren, zoals rood en geel, treden op de voorgrond in een ontwerp met een donkere achtergrond, terwijl koele kleuren, zoals blauw of groen, zich meestal terugtrekken op de achtergrond. Het tegenovergestelde gebeurt bij een ontwerp op een lichte achtergrond: Koele kleuren zoals blauw en groen lijken dichterbij dan warme kleuren. Het is maar net hoe het menselijk oog het waarneemt.

Kleurkeuze kan dus echt van invloed zijn op het vermogen van kijkers om een figuur te onderscheiden van de achtergrond binnen een ontwerp. Het mengen van warme en koele kleuren kan diepte creëren, net als perspectief.

Effectieve kleurencombinaties zijn niet alleen afhankelijk van de positie van elke tint op het kleurenwiel, maar ook van de warmte en het contrast met omringende kleuren. Bekijk Visme’s tutorial over het kiezen van impactvolle kleurenschema’s.

4 Fonts Organize Design

Denk aan een outline, een traditioneel cv of een inhoudsopgave. Over het algemeen bestaan ze allemaal uit verschillende lettergroottes, met grote koppen in een grotere puntgrootte dan subsecties en kleinere details. Het gebruik van verschillende lettergroottes benadrukt niet alleen wat het belangrijkst is, maar ordent ook het algehele ontwerp van het document.

Hiërarchieën in lettertypen kunnen worden gecreëerd met tekst van verschillende groottes, gewichten en spatiëring – of een combinatie van elk element. Zelfs als in een ontwerp één lettertype wordt gebruikt, kun je door de grootte en het gewicht ervan te variëren niet alleen de aandacht vestigen op belangrijkere elementen, maar ook een algemene compositie creëren die gemakkelijk te lezen en te begrijpen is.

Stelt u zich eens een cv voor waarin voor referenties een groter, vetter lettertype wordt gebruikt dan voor de naam van de sollicitant. Dat zou niet alleen slordig overkomen, maar waarschijnlijk ook veel verwarring veroorzaken bij degenen die snel een berg sollicitaties doornemen.

Ook een ontwerp met lettertypes die allemaal dezelfde grootte, hetzelfde lettertype en hetzelfde gewicht hebben, zal de aandacht niet echt op iets vestigen – een uitdaging die snel moet worden aangegaan, omdat veel mensen in een fractie van een seconde de kwaliteit van je ontwerp moeten inschatten.

Om deze reden bieden de meeste webdesign programma’s niet alleen een handmatige selectie van lettertype attributen, maar ook een vooraf ingestelde hiërarchie bestaande uit titel, ondertitel en gegradeerde heading lettertypen, naast de basis copy tekst.

Kijk eens naar het bovenstaande ontwerp? Ziet het er overzichtelijker en leesbaarder uit wanneer alle woorden even groot zijn, of wanneer de hiërarchieprincipes worden toegepast?

5 Ruimte zorgt voor nadruk en beweging

Regel van de ruimte

Een van de basisprincipes van visuele compositie heeft te maken met wat je weglaat in je ontwerp. Volgens de regel van de ruimte moet een esthetisch aantrekkelijk ontwerp beschikken over voldoende ruimte zonder rommel, ook wel “witruimte” genoemd, ongeacht de feitelijke achtergrondkleur van het ontwerp.

Bij het rangschikken van de elementen van een compositie kunnen ontwerpers de ruimte rond de inhoud gebruiken om de aandacht te vestigen op bepaalde elementen – denk aan een enkel element op een lege pagina – of om een geheel eigen visuele boodschap over te brengen, zoals de verborgen “pijl” in het beroemde FedEx-logo.

Strategische spatiëring kan zelfs de ogen van kijkers in een gerichte volgorde over de pagina leiden, door bij te dragen aan pagina-scanningpatronen.

Page-scanningpatronen

Lezers hebben de neiging pagina’s te scannen op basis van bepaalde patronen, waarneembaar via hun oogbewegingen. Als ontwerpers willen dat het publiek elementen in een bepaalde volgorde opmerkt, vertrouwen ze vaak op de meest voorkomende patronen.

Native English speakers, bijvoorbeeld, lezen van links naar rechts. Daarom hebben ze meestal een soortgelijk scanpatroon als ze een pagina tekst zien. Arabisch daarentegen wordt van rechts naar links geschreven. Mensen die gewend zijn die taal te lezen, zullen eerder geneigd zijn pagina’s in deze “omgekeerde” richting te scannen. Ontwerpers moeten deze verschillen in gedachten houden bij het maken van content voor een wereldwijd publiek.

F-patronen

Het meest voorkomende oogbewegingspatroon van Engelse lezers is het F-patroon. Waarom? Omdat dat precies is hoe we een boek, een brief of een webpagina lezen. We scannen de pagina van links naar rechts langs de bovenkant en opnieuw voor elke regel tekst tot we de onderkant van de pagina bereiken.

Omwille van deze natuurlijke neiging maken ontwerpers het vaakst gebruik van het F-patroon bij het samenstellen van websites en andere illustraties die sterk op tekst zijn gebaseerd. Omdat lezen in een andere richting gewoon ongemakkelijk is als het niet is wat we gewend zijn.

Z-patronen

Ontwerpen die meer op beelden steunen, worden vaak in een Z-patroon samengesteld. Omdat de hersenen beelden sneller verwerken dan tekst, kunnen lezers de pagina snel scannen door van links naar rechts over de bovenkant van de pagina te kijken, vervolgens diagonaal naar beneden te bladeren en vervolgens weer van links naar rechts te scannen (of van rechts naar links als het publiek meestal in die richting leest)

Ontwerpers kunnen bepaalde elementen van een compositie benadrukken door ze langs dit veelgebruikte “Z”-oogbewegingspatroon te plaatsen. Denk aan een kop, een afbeelding en een subkop.

6 Nabijheid suggereert relaties

Bijheid, of waar elementen ten opzichte van elkaar staan, is een van de meest elementaire elementen van compositie. Simpel gezegd, het plaatsen van gerelateerde elementen dicht bij elkaar suggereert aan de lezers dat ze, in feite, gerelateerd zijn.

Denk aan een wit scherm met een groep van vijf stippen aan de ene kant en een enkele stip aan de andere kant. Onze eerste veronderstelling zal altijd zijn dat de vijf inderdaad een groep vormen.

Elementen dicht bij elkaar plaatsen kan ook andere boodschappen afgeven. Door elementen bijvoorbeeld op bepaalde plaatsen op een kaart te plaatsen, kan het publiek een idee krijgen van de afstand, dichtbij of veraf. Natuurlijk hangt dit ook af van de grootte en schaal van de kaart. Een centimeter is niet altijd een mijl.

Door elementen in elkaars nabijheid te plaatsen, kunnen extra beelden en boodschappen worden gecreëerd. Denk maar aan hoe vaak je drie cirkels en een lijn zo geplaatst ziet dat ze de vorm van een blij of verdrietig gezicht suggereren. Het gesuggereerde beeld krijgt dan vaak meer aandacht dan de afzonderlijke elementen. Ziet u een blij gezicht, of ziet u drie cirkels en een lijn?

7 Negatieve ruimte benadrukt

Net zoals het groeperen van items in elkaars nabijheid hun relatie suggereert, maakt het opnemen van witruimte rond elementen hen duidelijk als afzonderlijke groepen informatie. Negatieve, lege ruimte maakt het niet alleen gemakkelijker voor de lezer om informatie te verteren door deze te groeperen in compartimenten, maar het creëert ook focus omdat het de ogen helpt zich te concentreren op afzonderlijke items.

Samenstellingen zonder veel negatieve ruimte kunnen resulteren in een rommelig, verwarrend en chaotisch ontwerp. Met andere woorden, minder is meer. Slimme ontwerpers kunnen de lege ruimte zelfs gebruiken om een extra visuele boodschap te suggereren. Denk maar aan de “pijl” in het midden van het beroemde FedEx logo, of het Coca-Cola ontwerp hierboven.

8 Uitlijning stuurt de ogen

De uitlijning maakt deel uit van de structuur waarmee elementen in een ontwerp worden geplaatst. Het schrijft voor dat visuele componenten, of het nu gaat om tekst of afbeeldingen, niet willekeurig in een compositie worden geplaatst. Een doorsnee pagina met tekst is bijvoorbeeld links uitgelijnd, zodat objecten een linkermarge delen.

Veel visuele ontwerpen zijn gecentreerd of gerechtvaardigd, wat betekent dat ze over een pagina zijn verdeeld, zodat ze zowel een linker- als rechtermarge delen. Als woorden willekeurig in alle richtingen over een pagina zouden worden verspreid, zou dat een verwarrend scenario opleveren.

In F-patroonontwerpen worden objecten meestal links uitgelijnd, terwijl Z-patronen vaak een combinatie van links, midden en rechts uitlijnen, zoals in de bovenstaande advertentie.

Eenvoudige visuele ontwerpen worden meestal in het midden van het kader uitgelijnd, een indeling die zorgt voor evenwicht en harmonie, en die ook esthetisch aantrekkelijk is.

De meeste westerse lezers zijn gewend om van links naar rechts op een pagina te lezen. Daarom worden ontwerpen met tekst vaak op dezelfde manier aan de linkerkant uitgelijnd.

Rechtse uitlijningen worden vaak gebruikt om evenwicht te brengen in een ontwerp dat visueel zwaarder is aan de linkerkant. De linker uitlijning kan hetzelfde effect hebben in het omgekeerde scenario.

9 Groepen met oneven nummers creëren focus

De regel van oneven nummers stelt ontwerpers in staat bepaalde afbeeldingen te benadrukken door ze in het midden van een groep te plaatsen. Door een gelijk aantal naburige objecten aan weerszijden van het belangrijkste aandachtspunt te plaatsen – en zo een groep met oneven nummers te creëren – wordt duidelijk gewezen op het belangrijkste visuele element, dat zich in het midden bevindt.

Een groep van een of drie elementen valt bijvoorbeeld meer op dan een enkel paar. Evenzo worden groepen met een oneven aantal objecten bijna altijd interessanter en esthetischer gevonden dan groepen met even nummers. Waarom? Mensen voelen zich prettiger bij evenwicht.

10 Herhaling verenigt een compositie

Net zoals contrast ontwerpelementen benadrukt en de aandacht trekt, schept herhaling eenheid, wat het begrip en de herkenning bevordert.

Denk maar aan de meeste gepubliceerde teksten. De pagina’s zijn zo ingedeeld dat de hoofdtekst één lettertype heeft, de hoofdstuktitels een ander en de voetnoten een derde ander lettertype – allemaal consistent door de hele publicatie heen. Deze stijlherhaling creëert een samenhangend werk, dat als een geheel wordt herkend.

Voor een uniform ontwerp herhaalt u een element – of het nu lettertype, kleur, vorm of grootte is – door de hele compositie heen. Consequente stijlen helpen om de visuele hiërarchie van een ontwerp duidelijk te definiëren.

Neem bijvoorbeeld de infographic in de inleiding met onze 12 principes voor visuele hiërarchie. Door in het hele document dezelfde lettertypen en stijlen te gebruiken, wordt de lijst eenduidig en wordt de lezer duidelijk gemaakt dat elk onderdeel deel uitmaakt van een geheel.

Herhaling kan elementen ook een nieuwe betekenis geven. Hoe vaak zie je niet dat blauw onderstreepte tekst opvalt op een pagina? Zo vaak dat je het lettertype meteen herkent als een hyperlink, toch? Het herhalen van deze stijl in een ontwerp vertelt je publiek waar ze moeten klikken voor meer info. Welke andere populaire stijlen kunnen uw ontwerp extra betekenis geven?

11 Lijnen suggereren beweging

Beweging is een van de meest effectieve manieren om de aandacht van de kijker te trekken, vooral als het wordt geïmpliceerd in een stilstaand ontwerp. Lijnen zijn natuurlijk efficiënt om nadrukpunten aan te geven – denk maar aan een pijl – maar ze hoeven niet fysiek op de pagina te verschijnen om de truc uit te voeren.

Hoofdlijnen kunnen worden geïmpliceerd door het gebruik van herhaalde elementen – denk aan een rij stippen -, de nabijheid van objecten of vormen, en de verhouding tussen positieve en negatieve ruimte. Door een object bijvoorbeeld schuin omhoog of omlaag te laten lopen, kunnen lijnen worden gecreëerd die een vlucht of afdaling suggereren.

12 Rasters organiseren een ontwerp

De meest effectieve ontwerpen zijn opgebouwd uit een of ander raster. Het meest typische raster is de klassieke modulaire compositie van kruisende verticale en horizontale lijnen.

Artiesten, fotografen en grafisch ontwerpers gebruiken al lang de regel van derden om de algehele balans van hun composities te verbeteren. De regel houdt in dat een compositie mentaal wordt verdeeld in een raster van twee horizontale en twee verticale lijnen, oftewel negen afzonderlijke secties.

Belangrijke visuele elementen worden langs de lijnen geplaatst, waarbij de nadruk ligt op de vier punten waar de lijnen samenkomen. Composities die uit het midden zijn geplaatst, worden over het algemeen esthetischer gevonden dan ontwerpen waarin het belangrijkste focuspunt in het midden van het kader is geplaatst. De regel moedigt het gebruik van negatieve ruimte, slimme nabijheid van elementen en effectieve uitlijning aan.

Niet alleen komt het het meest voor, maar het modulaire raster is over het algemeen ook het meest leesbare ontwerp. Toch is de beste manier om nadruk te leggen soms het breken van de regels.

Alternatieve rasterontwerpen

In plaats van het klassieke verticaal-horizontale raster kunnen ontwerpers kiezen voor een diagonaal gerichte compositie om ervoor te zorgen dat hun creatie opvalt op een pagina en de algehele aandacht van de kijker trekt.

Breaking the Grid

Sommige ontwerpers zullen ervoor kiezen om het raster volledig te breken, waarbij ze visuele elementen willekeurig over een pagina plaatsen om zo goed mogelijk af te steken tegen de omringende rastertekst. Die omringende tekst kan in hetzelfde ontwerp staan of op een omliggende pagina.

Laat je niet misleiden door het concept van willekeurigheid. Het willekeurig verspreiden van elementen over een achtergrond zonder specifieke reden of strategie zal niet op miraculeuze wijze veranderen in een Jackson Pollock meesterwerk. Bij het breken van het raster moet elke keuze nog steeds berekend zijn en een doel hebben.

Visuele-hiërarchie-principes behoren tot de meest effectieve strategieën om elementen van een ontwerp te benadrukken en een visuele boodschap te verduidelijken. Maar zoals met zoveel dingen in het leven, kun je te veel van het goede hebben.

Ontwerpers moeten verstandig kiezen welke principes ze toepassen, anders lopen ze het risico dat de nadruk verwatert en de visuele hiërarchie afbrokkelt. Als alles opvalt, dan valt niets op.

Ben je niet zeker of je hiërarchie effectief is? Test het dan. Staar naar de ruimte voor uw pagina of scherm en laat het eigenlijke ontwerp naar de achtergrond verdwijnen tot het een waas van vormen en kleuren wordt. Wat springt eruit?

Of, om te voorkomen dat je scheel gaat kijken, kun je de vervagingstest doen door een screenshot van je ontwerp te maken, dat in Photoshop te openen en de Gaussian Blur-filter toe te passen.

Als de belangrijkste attractie nog steeds het (de) element(en) is (zijn) die je wilde benadrukken, dan is je visuele hiërarchie effectief.

Visual Hierarchy Infographic

Get an at-a-glance understanding of what visual hierarchy means and how it can be implemented by scrolling through this infographic below.

Embed on your site:
<script src=”//my.visme.co/visme.js”></script><div class=”visme_d” data-url=”ep88eydm-12-visual-hierarchy-principles-every-non-designer-needs-to-know” data-w=”800″ data-h=”6404″></div><p style=”font-family: Arial; font-size: 10px; color: #333333″ >Created using <a href=”http://www.visme.co/make-infographics” target=”_blank” style=”color: #30a0ea”><strong>Visme</strong></a>. An easy-to-use Infographic Maker.</p>