9 principes van visuele hiërarchie
Om effectieve communicatiemiddelen te maken is een pakkende grafische vormgeving heel belangrijk. Bij het maken van deze ontwerpen is het belangrijk om de principes van visuele hiërarchie toe te passen. Deze principes gelden zowel voor offline als online communicatiemiddelen.
Wat is visuele hiërarchie?
Visuele hiërarchie is geïnspireerd op het Gestalt-principe, dat stelt dat de menselijke geest orde wil scheppen in wanorde en van nature patronen wil maken en afzonderlijke elementen wil groeperen tot één geheel. Elementen van visuele hiërarchie zijn bijvoorbeeld kleur, contrast, grootte, positie en uitlijning. Grafisch ontwerpers rangschikken deze elementen strategisch zodat het menselijk oog ze gemakkelijk kan zien en verwerken. We spreken daarom ook wel over strategische vormgeving.
Waarom is visuele hiërarchie zo belangrijk?
Visuele hiërarchie zorgt ervoor dat kijkers een ontwerp op de juiste manier bekijken en helpt ze om de boodschap te begrijpen. Effectieve visuele hiërarchie houdt de aandacht van de kijker vast en is dus van groot belang in reclame-uitingen en merkcommunicatie. Om visuele hiërarchie te kunnen toepassen is het belangrijk om te begrijpen hoe het menselijk oog informatie waarneemt.
Twee manieren om visuele informatie te ordenen
Visuele hiërarchie leidt de ogen van de kijker over de pagina. De meeste mensen zullen visuele informatie op twee manieren lezen, wat ontwerpers helpt bij het ordenen van pagina-elementen om de aandacht van de kijker vast te houden.
F-patroon
Dit leespatroon volgt de vorm van de letter F, waarbij het oog van de gebruiker linksboven begint en horizontaal naar rechtsboven leest voor trefwoorden en vetgedrukte zinnen. Vervolgens herhalen ze dit proces door de linkerkant van de pagina naar beneden te scannen en naar rechts te gaan als ze iets zien dat hen interesseert. Ontwerpen met veel tekst, zoals krantenartikelen en nieuwsberichten, zijn meestal ontworpen in een F-patroon.
Z-patroon
Dit leespatroon volgt de vorm van de letter Z. De kijker begint linksboven en beweegt horizontaal over de pagina, op zoek naar belangrijke informatie, en beweegt dan diagonaal naar beneden naar de linkerbenedenhoek om vervolgens naar rechts te lezen. Het Z-patroon is voor ontwerpen met minder tekst, zoals advertenties, posters, webpagina’s en infographics.
9 principes van visuele hiërarchie
De volgende design elementen helpen bij het vormen van visuele hiërarchie:
1. Kleur
Heldere kleuren trekken meer aandacht dan fletse kleuren. Complementaire kleuren kunnen samenhang aan een ontwerp toevoegen, terwijl contrasterende kleuren één element kunnen laten opvallen.
2. Contrast
Contrasterende elementen, zoals afwijkende kleuren, vormen of lettertypen, zorgen voor een onderscheidend effect en trekken de aandacht.
3. Compositie
Zet de belangrijkste teksten of afbeeldingen bovenaan en alle andere informatie daaronder, op volgorde van belangrijkheid. Ontwerpers gebruiken verschillende compositietechnieken om focuspunten in een ontwerp toe te voegen. Dit zijn bijvoorbeeld ‘Rule of Thirds’, waarbij de focus bewust niet in het midden van het beeld ligt; ‘Rule of Odds’, waarbij een oneven aantal objecten een interessanter beeld vormen; ‘Beweging’, waarbij objecten zo zijn gerangschikt dat ze lijken te bewegen; en ‘Gelaagdheid’, wat zorgt voor een illusie van diepte.
4. Grootte
Grotere elementen hebben meer visueel gewicht en krijgen meer aandacht dan kleinere elementen. De grootte geeft ook hiërarchie aan, alleen maar grote elementen zorgt voor verwarring. Maak groot wat belangrijk is en plaats minder belangrijke onderdelen kleiner.
5. Symmetrie
Symmetrische items die op elkaar zijn uitgelijnd, zijn visueel aantrekkelijker. Je kunt juist weer iets laten opvallen door het net niet te laten uitlijnen.
6. Gelijkheid
Het herhalen van informatie zorgt ervoor dat de boodschap blijft hangen. Het herhalen van visuele stijlen kan de kijker ook helpen specifieke elementen te groeperen.
7. Nabijheid
Plaats samenhangende informatie dicht bij elkaar. Elementen die geen relatie hebben worden juist verder uit elkaar geplaatst.
8. Textuur
Een verscheidenheid aan visuele elementen zal textuur toevoegen en het ontwerp interessanter maken. Extra texturen kunnen de aandacht trekken naar functies die niet bijzonder groot of helder zijn.
9. Witruimte
Negatieve ruimte rond elementen helpt ze op te vallen en zorgt voor een minder rommelig ontwerp. Een design dat te vol staat leest niet prettig en zorgt voor onrust. Witruimte hoeft ook niet wit te zijn. Er hoeft alleen maar lege ruimte te zijn rond afzonderlijke ontwerp-elementen, zodat elk onderdeel opvalt. Het oog moet ruimte hebben om te kunnen focussen.
Welke verandering probeer jij teweeg te brengen?
Heeft het artikel je geholpen? Heb je gevonden waar je naar op zoek was? Hebben wij je aan het denken gezet? Dan hebben we ons doel bereikt.
Wat je reden ook was om ons artikel over visuele hiërarchie te lezen, onze grafische vormgevers staan voor je klaar. Of het nu gaat om een nieuwe huisstijl, effectieve online of offline communicatiemiddelen vormgeven, een creatieve campagne of een onderscheidend logo, de mogelijkheden zijn eindeloos.
Heb je vragen, opmerkingen, advies of feedback naar aanleiding van ons artikel? Neem dan contact met ons op via sparren@pp-company.nl, het contactformulier of bel met +31 (0) 46 - 437 73 11.