Een design system helpt bij het samenbrengen van verschillende disciplines en zorgt voor verbeterde cohesie en consistentie tussen verschillende uitingen en producten van een organisatie. Daarnaast draagt een uitgewerkt design system bij aan de efficiëntie waarmee een front-end kan worden gebouwd. Ook verbeterd het de kwaliteit van interfaces wanneer deze gebouwd worden door developers die minder thuis zijn in het frontend landschap.
Een design system is niet hetzelfde als een merk of huisstijl. Je zou een design system kunnen beschouwen als een product dat volgt uit een huisstijl; het is dus meer dan een logo, lettertype en kleurstelling. Het bevat bijvoorbeeld ‘assets’, documentatie en processen die beschrijven hoe digitale uitingen moeten worden vormgegeven.
Deze guide zal je stap voor stap begeleiden bij het implementeren van een design system in je front-end. We zullen bespreken wat een design system is, waarom het belangrijk is en hoe het kan bijdragen aan de cohesie en consistentie van je digitale uitingen. We zullen ook de principes van Atomic Design introduceren en laten zien hoe je een component library kunt bouwen die het design system implementeert met behulp van Stencil.JS, Storybook en Docusaurus. We zullen dieper ingaan op elk van deze onderwerpen en je stap voor stap begeleiden bij het opzetten van je eigen front-end design system en component library.
Deze guide zal je stap voor stap begeleiden bij het opzetten van een component library als product van het design system. We zullen bespreken wat een design system is, waarom het belangrijk is en hoe het kan bijdragen aan de cohesie en consistentie van je digitale uitingen. We zullen ook de principes van Atomic Design introduceren en laten zien hoe je een design system kunt bouwen met behulp van Stencil.JS, Storybook en Docusaurus. We zullen dieper ingaan op elk van deze onderwerpen en je stap voor stap begeleiden bij het opzetten van je eigen front-end design system en component library.
Design System !== Component LibraryWat is dit niet? Deze guide gaat niet in op het proces van het maken van een design system, maar richt zich op het begrijpen en vertalen van een design system naar een product dat door jou en andere developers gebruikt kan worden. Het doel is om je inzicht te geven in de principes en concepten achter een design system, zodat je beter in staat bent om het toe te passen in je eigen projecten. Daarnaast duiken we in tips, uitleg en voorbeelden om je te helpen bij het implementeren van een design system in je softwaretoepassingen.
Atomic Design (Brad Frost, 2016) beschrijft een ontwerpmethode aan de hand van scheikunde, waar gesproken wordt in atomen, moleculen en uiteindelijk organismen. Frost deelt zijn methode op in vijf individuele stappen die uiteindelijk samen een hiërarchisch design system vormen. Deze vijf stappen, van Atomic Design, zijn:
In de scheikunde zijn atomen de bouwstenen van alle materie, dan geldt in Atomic Design dat atomen de bouwstenen zijn waaruit alle gebruikersinterfaces bestaan. Neem bijvoorbeeld labels, inputs, buttons, paragraven, headers en alle andere elementen die niet verder opgesplitst kunnen worden zonder dat de functionaliteit verdwijnt.
Elk atoom heeft zijn eigen unieke eigenschappen, zo bevat bijvoorbeeld waterstof één electron en helium twee. Hier zijn die eigenschappen nu net wat anders, denk aan stijlen zoals lettergrootte, breedte, hoogte en kleur.
Een groep atomen die aan elkaar verbonden zijn, worden in de scheikunde een molecuul genoemd. Een water molecuul bestaat zo uit twee waterstof atomen en één zuurstof atoom. Hier zouden we kunnen stellen dat een een ‘form-entry’-molecuul bestaat uit een ‘label’-atoom en een ‘input’-atoom.
In interfaces is een molecuul een relatief simpele groep van UI elementen (atomen) die samen eenzelfde doel willen vervullen. Door deze elementen (atomen) later te ‘verbinden’, waarborg je het ‘single responsibility principe’. Waardoor je zorgt dat elk atoom één zo specifiek mogelijke taak heeft, en die goed vervuld.
