Storybook: de brug tussen ontwerp en ontwikkeling

Door Quentin Buiteman

3 minuten

Bij SchaapOntwerpers zijn we pas tevreden als een ontwerp pixel perfect overgenomen is bij de ontwikkeling van een website. Dit betekent dat we regelmatig moeten schakelen tussen ontwerp en ontwikkeling. Om dit proces te versimpelen maken we gebruik van Storybook. Dit is de perfecte tool om componenten in isolatie te bouwen, testen en te reviewen door een ontwerper.

Componenten en stories

Elke website is opgebouwd uit componenten. Een component is als het ware een bouwblok van een pagina, of meerdere pagina’s. Dit kan zo klein zijn als een paragraaf, of zo groot als een overzicht van blogartikelen of zoekresultaten. In Storybook kunnen we elk component in isolatie opzetten: dat noemen we dan een story. In isolatie betekent dat het component buiten de paginastructuur wordt opgezet. Zo staat elk bouwblokje van een pagina los.

Chromatic

Elke story kan vervolgens geüpload worden naar Chromatic. Dit is de online omgeving waar een story getest en gereviewed kan worden door UX en UI ontwerpers. Het voordeel hiervan is dat de ontwerper op zijn eigen computer en locatie het component kan bekijken, zonder dat er een aparte hostingomgeving opgezet en ingericht hoeft te worden. Dit scheelt tijd en zorgt ervoor dat er snel geschakeld kan worden tussen ontwerp en ontwikkeling.

Design review

In Chromatic kan de ontwerper direct het component reviewen en eventueel feedback achterlaten. Als de ontwikkelaar dan een nieuwe versie uploadt, worden ook gelijk de verschillen zichtbaar tussen de oude en nieuwe versie, zodat de ontwerper direct kan zien of zijn feedback goed verwerkt is. Zodra de ontwerper de story goedkeurt in Chromatic, wordt dit zichtbaar voor de ontwikkelaar in het versiebeheersysteem van de code.

Visueel testen

Je kunt een story ook attributen meegeven. Op die manier kan de ontwerper het component aanpassen en visueel testen in verschillende scenario’s. Denk hierbij bijvoorbeeld aan het aanpassen van de lettertypegrootte van een paragraaf of de tekst van een knop. Deze attributen staan gelijk aan de attributen die we het component uiteindelijk ook in WordPress geven, oftewel de attributen die elke klant straks zelf aan kan passen. Zo zorgen we ervoor dat de visuele tests aangesloten zijn op de uiteindelijke toepassing van het component in WordPress. Daarnaast kun je het component ook gelijk op verschillende schermgroottes en apparaten testen, doordat Chromatic gewoon een web-based tool is.

Conclusie

Storybook (in combinatie met Chromatic) stelt ons in staat om snel te schakelen tussen ontwerp en ontwikkeling. Daardoor kunnen we tijdens het ontwikkelingsproces ervoor zorgen dat elk component na initiële ontwikkeling direct bekeken, gereviewd en getest wordt door een ontwerper. Waar nodig wordt de feedback direct verwerkt, per story. De voordelen van deze manier van werken zijn groot: ontwerpers zijn aangehaakt tijdens het bouwproces en waar nodig kan er tijdig worden bijgestuurd. Dat kan zowel een aanpassing in het ontwerp als een aanpassing in de code betekenen. Als dit relatief vroeg in het ontwikkelproces wordt gedaan, werk je uiteindelijk sneller én beter.