Spacing scale ​
De spacing scale binnen het Campus Experience System (CXS) biedt een gestandaardiseerde manier om ruimte te gebruiken binnen onze interfaces. Door gebruik te maken van een consistente schaal, creëren we een heldere, overzichtelijke en intuïtieve omgeving voor gebruikers. Dit systeem zorgt ervoor dat ontwerpers en ontwikkelaars dezelfde maatvoering toepassen, wat bijdraagt aan een uniforme en gebruiksvriendelijke ervaring in onze leeromgevingen.
Doel van de spacing scale ​
De spacing scale helpt ons de afstanden tussen elementen te organiseren op een manier die:
- visuele samenhang versterkt, zodat gebruikers informatie snel kunnen begrijpen;
- de interface overzichtelijk houdt, waardoor leesbaarheid en interactie intuïtiever worden;
- toegankelijkheid bevordert, door consistente afstanden die voldoen aan de WCAG-richtlijnen.
Door een vaste schaal te hanteren, zorgen we ervoor dat gebruikerservaring en esthetiek consistent blijven, zowel binnen als tussen de verschillende platformen die wij ontwikkelen, zoals Kabas en Polpo.
De spacing scale ​
Onze spacing scale is opgebouwd uit vaste waarden, die variëren van kleine tot grote afstanden. Dit biedt flexibiliteit voor uiteenlopende toepassingen, van compacte UI-componenten tot grotere layout-structuren.
| Token | Waarde |
|---|---|
| --cds-sys-spacing-3xs | 4px |
| --cds-sys-spacing-2xs | 8px |
| --cds-sys-spacing-xs | 12px |
| --cds-sys-spacing-s | 16px |
| --cds-sys-spacing-m | 24px |
| --cds-sys-spacing-l | 32px |
| --cds-sys-spacing-xl | 48px |
| --cds-sys-spacing-2xl | 64px |
| --cds-sys-spacing-3xl | 96px |
Gebruik van de scale ​
De spacing scale is geïntegreerd in onze design- en ontwikkelingsworkflows en werkt samen met onze fluid typescaling. Dit betekent dat zowel spacing als tekstgroottes dynamisch worden aangepast aan de schermgrootte en apparaatresolutie, wat zorgt voor een vloeiende, consistente gebruikerservaring op elk apparaat.
Toepassing in componenten en layout:
- Component spacing: Gebruik kleinere afstanden (3xs tot s) voor compacte elementen zoals knoppen, iconen en labels.
- Layout spacing: Grotere afstanden (m tot 3xl) zijn bedoeld voor layouts en de ruimte tussen secties, zodat de pagina overzichtelijk blijft en visuele rust uitstraalt.
Praktische tips voor ontwerpers en ontwikkelaars ​
Voor een consistente toepassing van de spacing scale volgen hier enkele aanbevelingen:
- Gebruik gestandaardiseerde spacing classes: Maak gebruik van classes als
p-xs,m-s, etc., voor padding en margin om afstanden eenvoudig toe te passen. - Voorkom overlap: Zorg dat er genoeg ruimte is tussen componenten om visuele verwarring te voorkomen en een heldere leesstroom te behouden.
- Blijf binnen de schaal: Probeer af te zien van handmatige pixelwaardes buiten de scale, zodat consistentie binnen het design gewaarborgd blijft.
- Test op diverse apparaten: Onze fluid-scaling zorgt voor responsiviteit, maar testen op verschillende schermgroottes zorgt ervoor dat spacing optimaal werkt op ieder formaat.