De korte versie
- Visuele hiërarchie is de volgorde waarin mensen de onderdelen van een ontwerp opmerken en lezen.
- Hiërarchie stuur je met vijf gereedschappen: grootte, gewicht, kleur en contrast, positie en ruimte.
- De meeste ontwerpen hebben niet meer dan drie niveaus nodig: één ding dat eerst wordt gezien, een paar dingen daarna, en details als laatste.
- Het element met het meeste contrast met zijn omgeving wordt meestal eerst gezien, ongeacht de grootte, dus accentkleuren besteed je aan één ding.
- De knijptest, waarbij je je blik vervaagt tot alleen vormen overblijven, laat in één oogopslag zien welk element echt leidt.
Op deze pagina
Visuele hiërarchie is de volgorde waarin mensen de onderdelen van een ontwerp opmerken en lezen. Je stuurt die met vijf gereedschappen: grootte, gewicht, kleur en contrast, positie en ruimte. Een duidelijke hiërarchie heeft één ding dat eerst wordt gezien, een paar dingen die daarna worden gezien, en details die alleen worden gevonden als iemand ernaar zoekt. Zonder hiërarchie concurreert alles en lezen mensen niets.
De vijf gereedschappen van visuele hiërarchie
Elk gereedschap werkt op dezelfde manier: het maakt één element anders dan zijn buren. Hoe groter het verschil, hoe eerder het element wordt gezien. Meerdere gereedschappen op hetzelfde element versterken het; op verschillende elementen laten ze die met elkaar concurreren.
| Gereedschap | Hoe het nadruk geeft | Voorbeeld |
|---|---|---|
| Grootte | Groter wordt eerder gezien | Een kop die twee keer zo groot is als de tekst eromheen |
| Gewicht | Zwaardere streken vallen op | Een vette datum in een regel gewone tekst |
| Kleur en contrast | De meest afwijkende kleur wint | Eén gouden accent op een donker, rustig ontwerp |
| Positie | Bovenaan en het begin van de leesrichting komen eerst | De kop linksboven |
| Ruimte | Geïsoleerde elementen trekken het oog | Eén enkele regel met brede marges eromheen |
Bepaal de volgorde voordat je ontwerpt
Problemen met hiërarchie zijn meestal problemen met beslissen. Heb je niet bepaald wat het belangrijkst is, dan kan het ontwerp het niet laten zien. Rangschik de inhoud voordat je een ontwerptool opent.
- 1
Zet alles op een rij
Elk stuk tekst en elk beeld dat het ontwerp moet bevatten.
- 2
Kies het ene ding
Als mensen maar één element onthouden, welk moet dat dan zijn? Dat is niveau één.
- 3
Groepeer de ondersteunende feiten
De twee tot vier dingen die mensen daarna nodig hebben, zoals een datum, een plek of een korte uitleg. Dat is niveau twee.
- 4
Al het andere is detail
Accountnamen, kleine lettertjes, logo’s. Dat is niveau drie, klein en stil.
- 5
Schrap wat niet past
Vindt iets geen niveau, dan hoort het waarschijnlijk in het bijschrift of op de volgende dia.
Drie niveaus: eerst de naam van het evenement, dan de datum erboven en de details eronder, elk een duidelijke stap kleiner.
Grootte en gewicht
Grootte is het sterkste gereedschap, en het makkelijkst fout te doen door te voorzichtig te zijn. Is een kop maar een beetje groter dan de tekst eronder, dan ogen de twee als een fout en niet als een hiërarchie. Maak de stappen tussen niveaus duidelijk; een typeschaal, zoals beschreven in basis van typografie, houdt ze consistent.
Vlakke hiërarchie
- Kop nauwelijks groter dan de lopende tekst
- Alles vet, dus niets valt op
- Vier verschillende groottes die bijna gelijk zijn
- Twee koppen met hetzelfde gewicht
Duidelijke hiërarchie
- Kop minstens ongeveer twee keer zo groot als de lopende tekst
- Vet bewaard voor de paar woorden die moeten leiden
- Drie groottes met duidelijke stappen ertussen
- Eén kop, één ondersteunende regel
Kleur en contrast
Het oog gaat eerst naar wat het meest afwijkt van zijn omgeving. Een klein vlakje felle kleur op een donker, rustig ontwerp wint het van een groter element in een gedempte toon. Dat maakt accentkleur een budget: besteed het aan het ene ding dat moet leiden, of aan de actie die je van mensen wilt, en nergens anders.
Met minder contrast duw je dingen naar achteren zonder ze te verkleinen: een zachtere inkt voor bijschriften en labels houdt ze leesbaar, maar achter de kop. Houd zelfs de stilste tekst boven de minimumwaarden in kleurcontrast. De 60-30-10-regel is een andere manier om na te denken over hoeveel je van elke kleur gebruikt.
Positie en leesrichting
In talen die van links naar rechts worden gelezen, beginnen mensen meestal linksboven en bewegen ze naar rechts en naar beneden, dus elementen die daar staan worden vroeg gezien. In talen van rechts naar links draait de beginhoek om. Gecentreerde, symmetrische lay-outs beginnen in het midden en werken naar buiten, wat past bij korte ontwerpen met één boodschap, zoals posters, citaten en aankondigingen.
Positie kan ook tegen je werken. Op social formaten bedekken de knoppen van het platform delen van het beeld, en op thumbnails staat een badge in de hoek. Houd het eerste element weg van die gebieden; YouTube-thumbnails ontwerpen laat zien hoe.
Ruimte
Ruimte doet twee dingen. Rond één enkel element isoleert ze het, en isolatie leest als belang: één regel met royale marges kan een veel groter tekstblok overtreffen. Tussen elementen groepeert ze: dingen die dicht bij elkaar staan, worden gelezen als bij elkaar horend. Zet de datum en de plek dicht bij elkaar en verder van de kop, en mensen lezen ze als één eenheid van detail.
Woorden leiden: de kop draagt het nieuws en het detail ondersteunt het.
Een getal leidt: dezelfde inhoud, opnieuw gerangschikt zodat het cijfer eerst wordt gezien.
Dezelfde inhoud kan verschillende hiërarchieën dragen. Welke je kiest hangt af van wat je mensen wilt laten onthouden: het idee, of het getal.
Zo test je visuele hiërarchie
- De knijptest. Knijp je ogen half dicht of vervaag het ontwerp. De vorm die nog steeds opvalt is je echte niveau één. Is dat niet wat je had gekozen, pas het dan aan.
- De twee-secondentest. Laat het ontwerp twee seconden aan iemand zien en vraag dan wat er stond. Die persoon zou je niveau één moeten herhalen.
- De thumbnailtest. Verklein het tot de grootte waarop het op een telefoon verschijnt. Niveau twee en drie mogen verdwijnen, en dat is prima; niveau één niet.
- De grijswaardentest. Haal de kleur weg. Stort de hiërarchie in, dan leunde ze op tint in plaats van op contrast in lichtheid.
Hiërarchie wordt lastiger als de achtergrond druk of kleurrijk is, omdat het contrast onder de woorden verandert; tekst op een kleurverloop beschrijft hoe je niveau één leesbaar houdt, waar het ook staat. Voor aankondigingen, waar hiërarchie het meest telt, zie hoe je een aankondigingspost ontwerpt.
Vragen die mensen stellen
Wat is visuele hiërarchie?
Visuele hiërarchie is de volgorde waarin mensen de onderdelen van een ontwerp opmerken en lezen, gestuurd met grootte, gewicht, kleur en contrast, positie en ruimte.
Hoeveel niveaus van hiërarchie moet een ontwerp hebben?
Meestal drie: één element dat eerst wordt gezien, een paar ondersteunende elementen daarna, en details als laatste.
Wat is de knijptest?
Knijp je ogen half dicht of vervaag het ontwerp tot alleen vormen overblijven. Wat dan nog opvalt, is wat mensen het eerst opmerken.
Is grootte de enige manier om hiërarchie te maken?
Nee. Gewicht, contrast, kleur, positie en ruimte geven allemaal nadruk, en een klein element in een felle accentkleur kan een groter, gedempt element overtreffen.
Geschreven door Gradiently
Het team achter Gradiently, een ontwerptool rond Marks: levende kleurverlopen die alles wat je ontwerpt op jou laten lijken.
Bekijk ons profiel
