design

Design wordt schaalbaar met design systems

Lees artikel voor
4 minuten
Aantal lezers
0X
Auteur
Stephan
Auteur

Ons leven speelt zich steeds meer online af en bedrijven investeren volop in digitalisering. Veel organisaties hebben niet alleen een website, maar bijvoorbeeld ook een app en een portal. Soms hebben aparte divisies binnen een bedrijf zelfs elk hun eigen digitale producten. Zodra je als bedrijf meer dan één digitaal product hebt duiken er vaak een aantal problemen op. Allereerst heb je mensen nodig die deze producten kunnen ontwikkelen (die ook nog eens duur en lastig te vinden zijn). Heb je die mensen gevonden, dan ontstaat er een nieuw probleem. Want als zoveel verschillende mensen en teams aan je producten werken, hoe zorg je dan voor een consistente ervaring voor je gebruikers? De oplossing: schaalbaarheid. In plaats van steeds vanaf 0 te beginnen pak je bestaande onderdelen en creëer je hier nieuwe producten mee. Dat maakt zowel het design- als het ontwikkelingsproces vele malen effectiever. En laat dit nu precies zijn wat een design system mogelijk maakt! Wat ons betreft gaan design systems de manier waarop we kijken naar softwareontwikkeling blijvend veranderen.

Over design systems is van alles te vinden. Toch zijn er ook veel misverstanden over wat een design system nou echt is. Daarom eerst even wat een design system niet is:

  • Het is géén stijlgids of huisstijlhandboek
  • Het is géén richtlijnen document
  • Het is géén UI toolkit of set UX principles
  • Het is géén reeks met code-richtlijnen

Een design system is veel meer. Het is zelfs meer dan alle bovenstaande onderdelen samen!

Wat is het dan wel?

Een centrale hub

Een design system is een centrale hub waarin allerlei richtlijnen en herbruikbare onderdelen worden verzameld. Development en design komen hierin bij elkaar. Bij elk herbruikbare design pattern hoort een corresponderend, herbruikbaar stuk code. Beiden worden in het design system opgenomen. Dit zorgt ervoor dat een groot deel van de producten die je ontwikkelt als lego kan worden opgebouwd. Het resultaat is meer consistentie én een veel efficiënter ontwikkelproces. Bovendien gaan development en design op deze manier veel meer als één team samenwerken. Doordat de processen soepeler verlopen en het wiel niet steeds opnieuw hoeft worden uitgevonden bespaar je enorm veel tijd. Die tijd kan mooi worden ingezet om je digitale producten naar een hoger niveau te tillen.

Design systems komen in vele soorten en maten, maar de volgende onderdelen zie je vaak terug:

  • UI patterns
  • Implementatierichtlijnen
  • Code snippets
  • Kleurenpaletten
  • Iconen
  • Grids & layouts
  • Richtlijnen typografie
  • Design principles
  • Merkrichtlijnen

Samen bepalen deze onderdelen het uniforme gevoel van alle digitale producten van een bedrijf.

Er zijn inmiddels al een heleboel bedrijven die design systems succesvol inzetten. Goede voorbeelden zijn die van Salesforce, Airbnb, Google, Shopify, Atlassian, Wonderbly en IBM.

Een ecosysteem dat zich blijft ontwikkelen

Een design system is geen eenmalig project. Het is een product op zichzelf, van waaruit de overige producten worden gevoed. Je kunt klein beginnen en steeds onderdelen aanscherpen, vervangen en toevoegen. Zo ontstaat er een ecosysteem dat zich blijft ontwikkelen. Alles staat met elkaar in verbinding. Onderdelen die op meerdere plekken terugkomen kunnen op deze manier in één keer worden geüpdatet. Deze nieuwe manier van werken betekent dat er allereerst een transitie moet plaatsvinden qua mindset. De project-mindset zal moeten veranderen in een product-mindset!

“A design system is basically the story of how an organization builds a digital product”
~ Brad Frost
Brad Frost on Let’s Work Together! at SmashingConf Barcelona 2017
Atomic design
Atomic design: deel designs op in elementaire deeltjes

Wil je een design system gaan opzetten? Realiseer je dan dat je dit niet doet door direct te beginnen met het ontwerpen van een losse verzameling componenten zoals buttons, formulieren en iconen. Dan ga je namelijk volledig aan het doel voorbij.

Om alle onderdelen in een design system ook impactvol te laten zijn, is het belangrijk om eerst een visie te creëren. Het is de visie die zorgt voor duidelijkheid, de relaties tussen losse componenten context geeft en zorgt dat het hele team, product of bedrijf weet wat het probeert te bereiken en ook waarom. Je kunt een design system ook wel zien als de taal die jullie als organisatie gaan spreken. De samenhang tussen alle onderdelen is wat deze methode zo krachtig maakt.

Ik hoor je denken, klinkt leuk, maar hier gaat een hele hoop werk in zitten. Klopt! Maar het gaat je ook heel veel opleveren.

De voordelen op een rij:

  1. Bespaart tijd en geld: standaardisering en consistentie zorgen voor sneller en efficiënter designen, ontwikkelen en testen.
  2. Je kunt sneller ontwikkelen dan de concurrent: design systems maken het mogelijk om veel sneller te werken. Misschien zelfs sneller dan de concurrent die groter is en meer mensen in dienst heeft.
  3. Bevordert de UI-consistentie voor de gebruikers: betere samenhang en gebruiksvriendelijkheid binnen alle digitale producten. Dit zorgt ervoor dat gebruikers hun weg gemakkelijker kunnen vinden en meer vertrouwen in je krijgen. Dat leidt vervolgens tot meer conversie.
  4. Design wordt schaalbaar: met alle efficiëntievoordelen ontstaat het vermogen om te schalen. Design systems maken automatisering in het ontwerpproces mogelijk - dat betekent dat je de mogelijkheid hebt om meer te bouwen met minder middelen.
  5. Eén centraal punt: binnen het design system worden nieuwe updates uitgerold en vervolgens naar de live-producten gesynct.
  6. Vereenvoudigt de overdracht naar interne en externe partijen: door de basisstijlen vast te leggen, kunnen teams sneller aan de slag met minimale input.
  7. Minder verwarring: laat iedereen dezelfde taal spreken, dus meer tijd om aan verbeteringen te werken!
  8. Sneller inwerken nieuw personeel: alle afspraken en assets zijn vastgelegd en op één plek te vinden.
  9. Het is een toekomst vriendelijk systeem

In deze video’s zie je hoe snel het design- en ontwikkelproces kan gaan wanneer je gebruik maakt van een design system:

Designen met een design system:

Ontwikkelen met een design system:

Bij Webtraders zijn we ervan overtuigd dat design systems onmisbaar zijn voor bedrijven met veel digitale producten en/of meerdere product teams. Nu wij steeds meer eigen producten ontwikkelen wordt ook voor ons het belang van consistentie en efficiëntie steeds groter. Daarom zetten wij voor een aantal projecten al design systems in. Via onze blog zullen we de inzichten die we gaandeweg opdoen met je delen. Stay tuned dus.

Neem contact op

Meer weten over design systems?

Stephan vertelt je er graag meer over!

Stephan