Waarom gestructureerde designprocessen het verschil maken voor jouw organisatie.

UX/UI design is geen kunstje – het begint met de juiste vragen.

"Je kunt pas goed ontwerpen als je snapt wat het probleem is," zegt Joost. Daarom begint elk designproces bij Cube met het scherp krijgen van de scope, zoals bijvoorbeeld de user stories. Want bij Cube beginnen we niet aan een project zonder een goede set aan user stories die in hoofdlijnen de gewenste functionaliteiten van het te maken digitale product beschrijven.

Daarnaast stellen we vragen: welke stijl past bij het product? En wat is er al aan huisstijlelementen aanwezig? Denk aan lettertypes, kleuren, iconen, tone of voice en visuele voorbeelden – allemaal nodig om vanaf het begin de juiste toon te zetten. Ontbreekt er iets? Dan maken we dat gewoon. Met ons multidisciplinaire team vullen we aan waar nodig, zonder de focus te verliezen op waar we goed in zijn: het ontwerpen van sterke, functionele interfaces.

"Design is meer dan iets moois maken," vervolgt Joost. "Het gaat erom dat elk element functioneel is en dat gebruikers intuïtief snappen wat ze moeten doen." Juist daarom is structuur zo belangrijk. Denk aan styleguides, boilerplates en het toepassen van onze eigen variant op Atomic Design. Door vooraf vast te leggen wat de visuele en functionele bouwstenen zijn, ontstaat een consistent en begrijpelijk design systeem. Dat draagt uiteindelijk bij aan een overzichtelijke gebruikerservaring, die volledig in lijn ligt met de huisstijl en doelen van de organisatie.

Sneller en consistenter ontwerpen met vaste bouwstenen.

Op basis van deze input maakt het team een wireframe. Bij Cube gebeurt dat met een Figma-library, gebaseerd op componenten van Relume. Door met vaste bouwstenen te werken, wordt er sneller én consistent een passend wireframe opgebouwd. Zo kunnen we zo efficiënt mogelijk de gewenste features in kaart brengen en daaropvolgend verder met het klaarzetten van de design boilerplate. “Waar het kan, zetten we AI in om automatisch wireframes te genereren op basis van een sitemap en prompts. Dat bespaart flink wat tijd,” vertelt Joost.

Werken met een boilerplate.

Daarna volgt de boilerplate: een interactief basisbestand waarin alle componenten, stijlen en richtlijnen samenkomen. “Je werkt met één centrale bron van waarheid,” legt Joost uit. “Pas je iets aan in de boilerplate, dan wordt dat automatisch doorgevoerd op alle plekken waar het gebruikt wordt." De update wordt dus automatisch meegenomen in alle designs waarin het component verwerkt is, dat voorkomt fouten en bespaart tijd.

In de praktijk: zo werkt het designteam van Cube.

De boilerplate is de kern van het designproces bij Cube. "Het is ons vertrekpunt bij elk project," legt Joost uit. "We vullen hem met de juiste merkkleuren, tekststijlen, iconen en spacing-variabelen. Alles wat je nodig hebt voor een design dat klopt én schaalbaar is."

Het designteam werkt volgens een aangepaste variant van atomic design. Niet met atomen en moleculen, maar met vijf heldere lagen die aansluiten bij het CMS van opdrachtgevers:

Koken en designen: beide beginnen met een schone werkplek.

Ook versiebeheer is goed geregeld bij Cube. Designers werken niet met losse kopieën, maar met branches en één centrale master, ook wel Single Source of Truth genoemd. “Net als een kok die zijn werkblad schoon houdt, houden wij onze bestanden opgeruimd en consistent.”

Een ander belangrijk onderdeel is de checklist. Voor elk designproject werkt het team met een up-to-date checklist waarmee wordt gecontroleerd of het bestand volledig en correct is opgebouwd. “Die checklist helpt niet alleen designers, maar ook developers. Alles wat zij nodig hebben om een design om te zetten naar een functioneel werkende software oplossing, staat er in.”

Samenwerking: designers en developers op één lijn.

Een gestructureerde aanpak stopt niet bij het design. “We zorgen ervoor dat developers makkelijk kunnen werken met onze designs,” vertelt Joost. “Figma wordt doorgezet in Dev Mode, waarbij front-end developers direct toegang hebben tot alle styling, componenten en CSS.”

Daarbij maken we gebruik van Tailwind CSS-variabelen. Denk aan vaste waardes voor tussenruimtes, lettertypes, schaduwen en andere stijlelementen. Omdat we vanaf het begin met diezelfde basis werken, sluiten design en development direct op elkaar aan.

Wijken we toch af van deze basis, omdat de klant bijvoorbeeld al andere waardes heeft opgenomen binnen de bestaande huisstijl? Dan passen we deze waardes aan in het design system en voegen we zo nodig een opmerking toe om dit duidelijk over te brengen naar onze front-end developers.

Ook is er een duidelijke checklist voor oplevering. Deze wordt continu bijgewerkt en is bedoeld om zowel designers als developers op één lijn te houden. Denk aan layer naming, variants en accessibility. Daarbij zorgen we er ook voor dat de designs voldoen aan relevante richtlijnen, zoals de WCAG-standaarden en het Privacy by Design-principe.

Zo helpt gestructureerd design jouw organisatie groeien.

Waarom zou een organisatie kiezen voor een designteam dat werkt met design systems? Omdat het meer is dan alleen een mooi design. “Het versnelt de ontwikkeling, maakt doorontwikkeling eenvoudiger en zorgt voor een sterkere merkbeleving,” legt Joost uit.

Een goed design is niet willekeurig opgebouwd. Er wordt tot op micro-niveau gekeken naar het digitale product. Alles moet kloppen – tot in het kleinste detail. Dat wil je, als je kwaliteit serieus neemt. Design wordt zo geen sluitpost, maar een strategisch middel. Met slimme design systems kun je snel keuzes maken, zonder kwaliteit in te leveren. Het beweegt mee met de snelheid van je organisatie én de verwachtingen van je doelgroep. 

Bovendien maken goed ingerichte design systems je minder afhankelijk van losse specialisten. Nieuwe teamleden kunnen sneller aanhaken dankzij de duidelijke structuur. Iedereen weet wat er is opgebouwd, waarom het zo is ingericht en hoe je ermee verder kunt bouwen.

Tot slot: design als strategisch middel.

Joost benadrukt dat design niet los staat van de rest van de organisatie. “Het moet passen bij je merkverhaal, je doelgroep én je digitale strategie.” Een goed design beweegt mee met je organisatie, zonder dat je steeds opnieuw hoeft te beginnen. Design systems helpen daarbij: het biedt structuur, maar blijft een middel – geen doel op zich. Zo blijft er ruimte voor creativiteit, binnen duidelijke kaders. Bij Cube is dat de standaardaanpak voor elk project.

Design systems zijn meer dan een visuele handleiding. Ze zijn een strategisch hulpmiddel waarmee organisaties hun digitale product naar een hoger niveau tillen. Overweeg je om hiermee aan de slag te gaan? Bij Cube is het werken met design systems verweven in elke stap van het proces: vanaf de eerste schetsen tot aan de uiteindelijke interfaces zorgen ze voor structuur, herbruikbaarheid en herkenning. Dat levert niet alleen betere producten op maar versnelt ook het proces, verhoogt de kwaliteit en versterkt je merk.