Webdesign is een creatief vak; daar passen woorden als 'systeem', 'regels' of 'wetten' toch niet bij…? Nee, als ontwerper ben je vrij om te doen wat je wil! Het lege canvas voor je en verder de vrijheid.

Oké, aan de ene kant wil een ontwerper graag vrijheid, toch is het ook als webdesigner handig om je soms regels op te stellen en je eraan te houden. Toch, regels…zullen we ze richtlijnen noemen. Dat vinden wij creatieve types fijner.

Een designsysteem is een set richtlijnen waarmee je zorgt voor een consistente look-and-feel voor producten. Of jouw publiek nou op Instagram, via je website of – dat het nog bestaat! – in het echte leven je ontwerpen tegenkomt, door te ontwerpen aan de hand van een designsysteem zorg je dat ze overal dezelfde ervaring hebben.

Zo'n designsysteem helpt je om jouw ontwerpproces te stroomlijnen en verzekert je ervan dat je voor elke uiting van een project dezelfde uitstraling hanteert. Werken met richtlijnen zorgt dat je efficiënt en gestructureerd te werk gaat. Want dankzij een designsysteem vind je niet elke keer het wiel opnieuw uit, maar kun je direct aan de slag.

Een designsysteem bevat twee onderdelen:

• Foundations: Hierin worden de richtlijnen van alle ontwerpen gedefinieerd. Het is de kern van het systeem; een merk tot de kern teruggebracht. Denk hierbij aan het kleurpalet, typografie, iconen, shadows etc.

• Componenten: Dit zijn de basisblokken voor je designsysteem en het zijn veelal herbruikbare elementen. Het gaat om een bibliotheek met bijvoorbeeld buttons, navigatie(balken), formulieren en andere componenten die je helpen met een uniforme uitstraling.

De voordelen van het gebruik van een designsysteem is dat je snel en gemakkelijk zorgt voor consistentie in je ontwerpen. Belangrijk, want voor moderne merken is het belangrijk dat gebruikers altijd weten met welk merk ze interacteren – een designsysteem helpt hierbij. Daarbij helpen de kaders van een designsysteem om elke keer tot de beste ontwerpoplossingen te komen. Met een designsysteem wordt je creativiteit niet beperkt, maar leer je kleuren binnen de lijntjes.

Bekijk eens mijn gratis te downloaden Figma Starter Design System. Een starter kit die je elke keer kunt gebruiken wanneer je een nieuw project start in Figma. Het omvat kleuren, grids, iconsn, shadows, avatars, badges, buttons en zelfs local variables!