UX COACH
  • UX design opleiding
    • UX/UI design basisopleiding
    • Korte individuele UX/UI design opleiding
    • Korte individuele UX research opleiding
    • UX coaching
  • UX design bureau
    • Portfolio
    • Chique website laten ontwerpen of bouwen
    • Experience design bureau
  • Blog
  • Nieuwsbrief

UI/UX design tips: visuele hiërarchie

Home > Blog >
5 min leestijd - Laatste aanpassing: 21 mei 2025
Hieronder vind je zes UI/UX design tips voor het gebruik van visuele hiërarchie. Wanneer gebruikers kennismaken met een pagina die jij ontwerpt, wil je dat ze de belangrijkste elementen eerst bekijken. Je moet hun oog dus leiden naar die elementen op de pagina. Bijvoorbeeld de belangrijkste titel van de pagina of een belangrijke knop (een call-to-action). Hoe zorg je nu dat gebruikers zien wat jij wilt dat ze zien? Dat doe je door visuele hiërarchie te gebruiken. 

Wat is visuele hiërarchie?

Voordat we aan de slag gaan met zes UI/UX design tips, toon ik een voorbeeld dat direct duidelijk maakt wat visuele hiërarchie is. Lees eens luidop de zinnen op de volgende afbeelding voor:
visuele hierarchie illustratie
De kans is groot dat je als eerst de zwarte tekst hebt gelezen. Daarna de 2 witte tekstjes eronder, en tenslotte de witte tekst helemaal bovenaan. De meeste mensen lezen de tekst in die volgorde. Blijkbaar zijn sommige tekstjes net wat belangrijker dan andere. Maar hoe komt dat? Je hebt vast wel een idee. Er zijn verschillende designfactoren die hier een rol spelen....
🔎  Visuele hiërarchie is het principe van het ordenen en vormgeven van elementen om hun volgorde van belangrijkheid te tonen.
Hieronder volgen zes UI/UX design tips voor het gebruik van die factoren. De design tips zijn allemaal gericht op het creëren van een visuele hiërarchie op je pagina, of het nu gaat om een website, een web applicatie of een mobiele app is. Je kunt dit toepassen op elke pagina. ​

UI/UX design tip #1: afmeting

De afmeting van je tekst of de grootte van een knop bepalen voor een deel hoe snel gebruikers deze lezen of zien. Hieronder zie je een voorbeeld van 2 dezelfde zinnen, in hetzelfde lettertype. Waarschijnlijk lees je de tekst aan de rechterkant eerder dan die aan de linkerkant. Waarom? Omdat die tekst het grootst is. Niet alleen de hoogte van de letters, ook de dikte van de letters is anders. Daardoor heeft die tekst een grotere oppervlakte, en wordt je oog ernaar toegetrokken.
ui ux design tip #1: afmeting

UI/UX design tip #2: kleur

Door opvallende kleuren te kiezen, springen sommige elementen op je pagina meer in het oog dan andere. In het voorbeeld hieronder zie je dat Youtube rood gebruikt als accentkleur. Hoewel de afbeeldingen op de pagina heel verschillend van kleur zijn, wordt je oog getrokken naar de grote rode bol met het icoon erop, waardoor je de titel "Movies" die daar rechts van staat ook leest. De afmeting speelt hier dus een rol (de grote bol), maar ook de kleur die opvalt bij de rest van de user interface. Overigens zie je hier waarschijnlijk ook snel de rode boog op de afbeelding van "Smile 2" die ook heel hard opvalt, en daarna het logo in de linker bovenhoek.
ui ux design tip #2: kleur

UI/UX design tip #3: contrast

Behalve afmeting en kleur kun je ook gebruik maken van contrast. Contrast is het verschil tussen de achtergrond- en de voorgrondkleur van een element of een tekst. Hieronder zie je bijvoorbeeld een witte knop op een zwarte achtergrond en een witte knop op een groene achtergrond. De contrast ratio van wit en groen is 3,17:1 en de contrast ratio van wit en zwart is 21:1. Dit laatste is het hoogste contrast dat mogelijk is. Door een hoger contrast te gebruiken, lijkt de knop links veel meer 'van de pagina' los te komen, dan de witte knop rechts, op de groene achtergrond. 
ui ux design tip #3: contrast

UI/UX design tip #4: witruimte

De vierde designfactor die ik als UI/UX design tip wil meegeven is het gebruik van witruimte. In het voorbeeld hieronder zie je de homepagina van een website, die daar goed gebruikt van maakt. Het eerste wat je (waarschijnlijk) leest is "Stay curious." Dat komt niet alleen door de grootte van de letters, de kleur of het contrast van de voor- en achtergrond. Het komt ook doordat er rondom heel wat lege ruimte, ook wel 'witruimte' (of in dit geval geelruimte), is voorzien. Je oog wordt daardoor echt geleid naar het object dat middenin die ruimte staat: de H1 titel van de pagina. Overigens zien veel mensen de M-metjes aan de rechterkant ook snel staan, evental de zwarte knop 'Start reading', de knop rechtsboven 'Get started' en het logo in de linkerbovenhoek. 
ui ux design tip #4: witruimte

UI/UX design tip #5: beweging (animatie)

De gebruikers die je pagina bekijken zullen ook aangetrokken worden door zaken die bewegen. Je kunt dan heel groot denken: een carrousel die automatisch naar een volgende afbeelding 'slide', of een video in de achtergrond van je header. Maar misschien is het wel beter om dit toe te passen op een subtiele manier: door een menu dat uit- of inklapt om je aandacht te trekken, een oplichtende knop in de navigatie, of een icoon waar een kleine beweging in zit (bijvoorbeeld een alarmbelletje dat 'klingelt'). In het onderstaande voorbeeld van Youtube, zit er beweging in het icoon, het vlammetje (bekijk het zelf op Youtube).
ui ux design tip #5: beweging (animatie)

UI/UX design tip #6: typografie

Tenslotte geef ik je de UI design tip mee van het gebruik van typografie. Ook door het gebruik van speciale en ongebruikelijke lettertypes, kun je de aandacht van je gebruiker trekken. Denk aan een heel strak lettertype, een brutaal lettertype of juist een romantisch lettertype zoals het voorbeeld hieronder.

Let wel op: bijzondere lettertypes kunnen moeilijk leesbaar zijn, en dat heeft een nadelig effect op de gebruikerservaring (UX). Je wilt je gebruikers niet ontmoedigen, je wilt ze juist helpen en ondersteunen in het gebruik van je website, web applicatie of mobile app. Denk dus goed na over de keuze van je lettertypes. 
ui ux design tip #6: typografie

Conclusie

Wanneer gebruikers jouw ontwerp zien, wil je dat ze de belangrijkste elementen eerst bekijken. Je moet hun oog dus leiden naar die elementen die jij in de picture wilt zetten. Je wilt namelijk dat de gebruiker haar/zijn doel bereikt, en dat de gezochte informatie of de actie die uitgevoerd moet worden snel gevonden wordt. Je kunt hiervoor zorgen door een visuele hiërarchie aan te brengen op je pagina. Gebruik daarvoor de zes designfactoren Afmeting, Kleur, Contrast, Witruimte, Beweging (animatie) en Typografie. 
Afbeelding

Kom je er niet uit?

Heb je tijdens je dagelijks werk een sparring partner nodig? Of wil je je verder verdiepen in je rol als UX designer of werken aan een carrière als designer? UX Coach wordt graag jouw coach! Neem vrijblijvend contact op om de mogelijkheden van coaching te bespreken. 

Contact

Neem contact op voor een vrijblijvende kennismaking, op kantoor in Antwerpen of op afstand.
+32 (0)487 424 713
[email protected]
Marjan Geerts

​Marjan

Senior UX designer met 15+ jaar ervaring in de combinatie design en onderzoek. Ze gelooft dat empathie voor de klant betere en aantrekkelijkere producten en diensten oplevert. Ze is founder van UX Coach, een UX design studio in Antwerpen.
+32 (0)487 424 713
Afbeelding

Hoe breng je visuele hiërarchie aan als UX/UI designer?

Visuele hiërarchie is een manier om de belangrijkste elementen op een pagina in het oog te laten springen. Ik leg het uit aan de hand van voorbeelden, en geef je de zes factoren die een rol spelen als je zelf ontwerpt: afmeting, kleur, contrast, witruimte, beweging en typografie.
Wil je bijleren over UX/UI design en UX research of interesse in opleidingen? Abonneer je dan op de nieuwsbrief van UX Coach.
Bekijk op Youtube

Lees meer over User Experience (UX) design

UX design
7 UX onderwerpen voor het opzetten van een interview met gebruikers

Lees in 2 min

UX design
De betekenis van UX design

Lees in 1 min

UX design
Gebruikersonderzoek en gebruiksvriendelijkheid

Lees in 3 min
Foto
UX DESIGN OPLEIDING
UX DESIGN BUREAU
BLOG
NIEUWSBRIEF
CONTACT
CONTACT
BOOMSESTEENWEG 440
2020 ANTWERPEN
BELGIË
+32 (0)487 424 713
Afbeelding
Afbeelding
UX COACH IS ONDERDEEL VAN STUDIO NEO BV - PRIVACYBELEID - COOKIE BELEID - SITEMAP
  • UX design opleiding
    • UX/UI design basisopleiding
    • Korte individuele UX/UI design opleiding
    • Korte individuele UX research opleiding
    • UX coaching
  • UX design bureau
    • Portfolio
    • Chique website laten ontwerpen of bouwen
    • Experience design bureau
  • Blog
  • Nieuwsbrief