Waar zijn alle grids gebleven?
In deze blog post vraagt designer Kyle Lambert zich af waar alle grids zijn gebleven. Zijn vermoeden is dat het komt omdat onze design tools steeds geavanceerder zijn geworden en er daarom voor zorgen dat alles min of meer netjes naast of onder elkaar komt te staan.
Ik denk dat dat grids verdwenen zijn omdat ze niet meer nodig zijn of zelfs voor problemen kunnen zorgen. We leven in een wereld waar we rekening moeten houden met duizenden verschillende schermbreedtes.
Natuurlijk kunnen we onze ogen sluiten en zeggen dat 320 pixels voor mobiel, 768 pixels voor tablet en 1280 - 1920 pixels voor desktop voldoende is. Maar de realiteit is anders. Want sinds we telefoontjes in elkaar kunnen vouwen is 320 pixels niet klein genoeg meer en moeten we weer ontwerpen en ontwikkelen voor schermen die 240 pixels breed kunnen zijn. En de schermen worden ook steeds groter. Ze kunnen in Virtual Reality namelijk oneindig groot zijn.
Een grid volstaat niet meer. Als designer moet je ontwerpen voor elke schermbreedte. En gelukkig wordt dat tegenwoordig steeds makkelijker.
Dus hoe zorg je ervoor dat alles wel netjes uitgelijnd is?
Door designers en developers de juiste tools en richtlijnen te bieden. Hanteer in een Design System een uniform systeem met afgesproken afstanden (padding en margin) en maximale breedtes. Door slim gebruik te maken van wat er technisch mogelijk is, namelijk de ingebouwde grid en flexbox functies van CSS, kun je ervoor zorgen dat de bezoeker altijd een mooi uitgelijnd scherm te zien krijgt. Ongeacht hoe groot of klein het scherm ook is.
In het Design system waar ik nu aan werk hebben we afstanden vastgelegd in zogenaamde tokens:
- --spacing-3xs: 2px
- --spacing-2xs: 4px
- --spacing-xs: 8px
- --spacing-sm: 12px
- --spacing-md: 16px
- --spacing-lg: 18px
- --spacing-xl: 24px
- --spacing-2xl: 32px
- --spacing-3xl: 64px
- --spacing 4xl: 128px
Het is mogelijk om deze tokens te combineren om tot een bepaalde specifieke afstand te komen.
Daarnaast hebben we een aantal maximale breedtes bepaald (608, 912, 1280 pixels of de volledige breedte). Op deze manier kunnen we voorkomen dat de layout niet meer klopt op grotere schermen.
Onze design tools worden ook steeds flexibeler en groeien steeds meer richting wat er al mogelijk is in CSS. De auto layout functie in Figma is in wezen gewoon flexbox in vermomming. Het biedt grotendeels dezelfde opties en mogelijkheden om elementen te plaatsen en ordenen. Je kan daarmee een layout maken, die bij het vergroten en verklein van het canvas, automatisch mee beweegt.
Daarnaast is het ook mogelijk om de design tokens van je Design System te koppelen aan je Figma bestand, met bijvoorbeeld Tokens Studio. Dit zorgt voor synergie tussen ontwerp en ontwikkeling en maakt het mogelijk dat iedereen dezelfde waardes voor afstanden gebruikt.
Zoals je ziet hebben de designers en developers in ons Design System veel vrijheid. We bieden de tools en de richtlijnen om te ontwerpen en bouwen voor elke schermbreedte en vertrouwen erop dat de gebruikers van het Design System weten wat ze doen.
Laat het los
Kyle sluit zijn blog af met een advies voor designers om weer eens een grid te gebruiken in hun volgende ontwerp. Mijn advies is het tegenovergestelde. Laat het grid eens lekker los en kijk hoe je jouw ontwerp zo flexibel mogelijk kan maken zodat het er op elke schermbreedte goed uitziet.