Design System: De brug tussen designers en developers

Een Design System kan als een brug fungeren tussen de totaal verschillend denkende designers en developers. 
Robert Roose
Door Robert Roose

Design System: De brug tussen designers en developers

Het verschil tussen een designer en een developer

Er is een verschil tussen designers en developers. Designers functioneren namelijk met de rechterhersenhelft en developers met de linkerkant van hersenen.

De rechterhersenhelft wordt voornamelijk gebruikt voor dingen waar ‘gevoel’ bij komt kijken. Waarbij het gaat om een onderbuikgevoel wanneer iets mooi is of er visueel bevredigend uitziet. Oftewel het designen of ontwerpen.

De linkerhersenhelft daarentegen houdt zich liever bezig met logische en analytische dingen. Zoals met code een systematische volgorde van stappen programmeren zodat een applicatie iets kan uitvoeren, ook wel development genoemd.

De botsing tussen de hersenhelften

Het is daarom logisch dat dit soort type mensen botsen. Ze hebben een andere kijk op de wereld. Waar de designer roept: ‘Maar dat ziet er niet uit!’ roept de developer ‘Maar het werkt toch?!’.

Neem bijvoorbeeld het volgende vaak voorkomende scenario:
Een team gaat aan de slag om een nieuwe functionaliteit voor de website te ontwikkelen. Eerst zijn de designers aan zet. Zij inventariseren wat er precies nodig is om een werkend prototype te maken welke meestal bestaat uit enkele klikbare plaatjes. Hiermee kan een bezoeker de flow doorlopen. Dit prototype wordt dan getest bij een selecte groep eindgebruikers. Naar aanleiding van de resultaten van deze test wordt het prototype verder verfijnd totdat de designers zeker weten dat ze de meest ideale oplossing hebben gecreëerd. Ze zorgen ervoor dat alles keurig netjes in de ontwerpen is uitgewerkt en sturen het dan door naar de developers.

Nu gebeuren er meestal twee dingen:

  1. De developers sturen de ontwerpen linea recta terug met de melding dat dit technisch niet haalbaar is. De designers moeten nu  de ontwerpen aanpassen zodat het functioneel te implementeren is. Hierdoor gaat hun harde werk verloren, omdat er concessies gedaan moeten worden aan de  oplossing die ze zo zorgvuldig met de eindgebruiker hebben ontwikkeld.
  2. De developers gaan aan de slag en komen na een tijdje terug met het eindresultaat. De designers weten niet wat ze zien. Alles staat schots en scheef, de kleuren kloppen niet en de witruimtes zijn veel te klein. De developers halen hun schouders op. Het werkt dus waarom zouden we daar nog moeilijk over doen?

De oplossing: Een Design System

Om deze scenario’s te voorkomen moet er beter gecommuniceerd worden tussen de designers en developers. Het is belangrijk dat ze over hetzelfde praten. Hiervoor kan een Design System gebruikt worden. Een Design System zorgt ervoor dat de designers en developers altijd met dezelfde bouwblokken (ook wel components genoemd) werken. 

De designers krijgen een omgeving waar ze deze bouwblokken kunnen ontwerpen en (her)gebruiken (zoals Figma). Via een Graphical User Interface (GUI) kunnen ze snel nieuwe prototypes ontwikkelen en tonen aan de eindgebruiker.

De developers krijgen een omgeving waar de bouwblokken technisch gereed staan en die ze makkelijk in hun code kunnen (her)gebruiken (zoals Storybook). Op deze manier kunnen ze sneller ontwikkelen omdat ze het wiel niet elke keer opnieuw hoeven uit te vinden.

Constante feedback loop

Designers en developers moeten het samen eens worden over welke componenten er in het Design System komen te staan. Hoe deze eruit zien en hoe deze precies werken. Daarom is het belangrijk een constante feedback loop te maken waarbij Designers en Developers ideeën, verbeteringen en aanpassingen kunnen aandragen. Alleen componenten die door alle partijen zijn goedgekeurd worden opgenomen in het Design System en door vertaald naar zowel de grafische als de technische omgeving.

Nog meer bruggen

Naast dat het Design System een brug vormt tussen designers en developers kan het ook een brug zijn naar andere Design Systems. Door afspraken met elkaar te maken, zoals bij het NL Design System initiatief gebeurt, kunnen organisaties onderling componenten uitwisselen. 

Ook is het een brug naar andere stakeholders. Door de volledige transparantie van het Design System kunnen zij zien waar de designers en developers mee bezig zijn. 

Nooit meer discussie

Wanneer een Design System succesvol geïmplementeerd is kan er nooit meer discussie ontstaan tussen designers en developers wanneer er prototypes ontwikkeld en doorgestuurd worden. Het kan natuurlijk wel dat er onenigheid bestaat over bepaalde componenten maar die kunnen dan in een vroeg stadium beslecht worden waar het minder tijd en geld kost.

Heb je vragen over het bovenstaande? Of wil je meer weten of een Design System? Laat het mij weten door hieronder een reactie achter te laten.

Meer over Design Systems

De inhoud van dit veld is privé en zal niet openbaar worden gemaakt.

Beperkte HTML

  • Toegelaten HTML-tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Regels en alinea's worden automatisch gesplitst.