Richtlijnen NL Design System voor ruimte

Ruimte (Spacing in het Engels) helpt bij het organiseren van inhoud. Door ruimte op een voorspelbare manier toe te passen kun je visueel verbanden leggen en orde scheppen. Dit geldt voor componenten maar ook voor de algehele opmaak van een pagina ofwel layout

Overzicht richtlijnen

Spacing scale

Om ruimte consistent toe te passen is het verstandig om te werken met een vaste set aan waardes die oplopen in grootte. Een zogenoemde spacing scale.

Box model

Om ruimte consistent toe te passen is het verstandig om te werken met een vaste set aan waardes die oplopen in grootte. Een zogenoemde spacing scale.

Spacing concepten

Binnen het NL Design System is ruimte conceptueel opgezet door vijf herbruikbare spacing scales, dit zijn Inline, Block, Text, Column en Row.

Relaties tussen elementen

Gebruik kleine afstanden om elementen samen te groeperen en grotere afstanden om ze te scheiden. Elementen die dicht bij elkaar staan lijken meer met elkaar verbonden te zijn dan dingen die verder uit elkaar staan.

Hiërarchie tussen elementen

Om ruimte consistent toe te passen is het verstandig om te werken met een vaste set aan waardes die oplopen in grootte. Een zogenoemde spacing scale.

Ruim of compact

Veel ruimte werkt goed bij het lezen van langere teksten en het creëren van een bepaalde sfeer (branding). Compacte ruimte is geschikt voor het efficiënt uitvoeren van taken.

Interactieve elementen

Om ruimte consistent toe te passen is het verstandig om te werken met een vaste set aan waardes die oplopen in grootte. Een zogenoemde spacing scale.

Gerelateerde WCAG-succescriteria:

• 1.4.12 Tekstafstand (niveau AA)
• 2.5.8 Grootte van het aanwijsgebied (minimum) (niveau AA)
• 2.5.8 Grootte van het aanwijsgebied (uitgebreid) (niveau AAA)

Bronnen

• Visual Perception And The Principles Of Gestalt - Steven Bradley
  Artikel waarin de verschillende gestalt principes worden beschreven.
• Space in design systems - Nathan Curtis
  Artikel waarin het toepassen van ruimte binnen een design system wordt beschreven.
• Hand tremors and the giant-button-problem - Hampus Sethfors
  Artikel, en video, waarin duidelijk wordt waarom het van belang is om voldoende witruimte bij grote interactieve elementen toe te voegen.
• Use White Spacing - Supplemental Guidance to WCAG 2.

Deel je gebruikersonderzoek

Er is nog veel te onderzoeken over het gebruik van spacing. Doe je gebruikersonderzoek? Deel dan alsjeblieft je bevindingen op gebruikersonderzoeken.nl zodat we hiervan allemaal kunnen leren.

Over deze richtlijnen

Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.

We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.