Op 12 juni 2018 hielden we CodeCuisine®LIVE, ons kennisevenement voor klanten en relaties van Enrise. Onderwerp: Design Systems & Component Libraries. Een verslag.
We trappen onze zesde editie van CodeCuisine®LIVE af met een prikkelend statement: Minder designers! Met een publiek dat uit developers en designers bestaat heb je op dat moment de aandacht.
Iwan Cuijpers is UX designer en eigenaar van Keen Design. Zijn verhaal gaat over Design Systems. Over wat het is en waarom het nuttig is. Het is de theorie die nodig is om straks het praktische verhaal en demonstratie van Enrisers Christiaan en Daan beter te begrijpen.
Design Systems versus component library versus styleguide
Laten we beginnen bij het begin. Wat is een design system eigenlijk? In het kort komt het neer op ‘een verzameling van herbruikbare visuele componenten, geleid door duidelijke richtlijnen, die samen kunnen worden geassembleerd tot vele toepassingen’. Dat klinkt dus als een stijlgids of een bibliotheek met componenten, maar wat maakt een design system anders dan deze twee?
Styleguide
Een stijlgids is veelal merkgebonden. Het bevat de basisset aan kleuren, lettertypes, vormen, fotografie en icoontjes. Heb je als organisatie meerdere producten en services, zoals een app, een website, een intern systeem, dan maken die wel gebruik van deze basis, maar technisch kunnen ze onderling sterk verschillen.
Component library
Een componentenbibliotheek bevat lay-outs, artikelen, headers, carroussels en meer onderdelen die je verwerkt in een site of app. Elk component is gecategoriseerd, goed gedocumenteerd en responsive. Componenten kunnen aan elkaar worden gekoppeld, maar ze zijn niet afhankelijk van elkaar. De componentenbieb zorgt ervoor dat je meerdere producten kunt ontwikkelen met dezelfde, herkenbare functionaliteit. Je kunt dus sneller opschalen door in kortere tijd een nieuw online product te bouwen.
Design system
Een design system gaat een stap verder. Het is de blauwdruk voor een componentenbibliotheek of stijlgids, compleet met alle onderliggende keuzes en principes. Deze bevat de elementen van atomic design (atoms, molecules, organisms en templates) en is met design en interactie gericht op een consistente gebruikerservaring (user experience, ux) over alle producten en services van een organisatie.
Het Atomic design volgens Brad Frost
Voordeel van een design system is dat de hele organisatie er gemak van heeft:
- Designers hoeven niet bij elk product opnieuw te beginnen of opnieuw uit te leggen wat ze doen en waarom. Bovendien zullen zij tevreden zijn met de consistente uitstraling en uniforme werking van alle digitale producten. Een designwijziging is nu maar op 1 plek nodig;
- Developers begrijpen waarom bepaalde keuzes zijn gemaakt in de designfase en wat daarvan het logische vervolg is op de werking van een digitaal product. Ze kunnen ontwikkelen voor alle devices zonder het wiel te hoeven uitvinden en ook als developer hoef je maar op 1 plek een technische wijziging door te voeren. Een design system geeft developers de vrijheid om meer met nieuwe uitdagingen bezig te zijn;
- Marketeers en andere collega’s besparen tijd en kosten, omdat ze niet elke keer een nieuw designproject hoeven te volgen, maar vooral omdat zij niet complexe briefing moeten maken voor zowel designers als developers. Een design system is de creatieve en technische briefing zelf. En dankzij het systeem blijft de kwaliteit van code gewaarborgd voor toekomstige projecten en producten.
Nut en noodzaak van design systems voor designers, developers en de rest van je organisatie
3 redenen voor een succesvol design system
Vraag die overblijft is alleen: gaat het werken? Want het vergt wel een andere aanpak dan de aanpak die we gewend zijn, waarbij we voor elk project binnen dezelfde organisatie opnieuw designers aan het werk zetten en developers nieuwe code laten schrijven. Iwan noemt 3 redenen voor het slagen van een design system in je organisatie:
- Omarm de juiste filosofie, zoals het Atomic Design principe;
- Kijk naar de goede voorbeelden, zoals Atlassian, Google’s Material Design en Salesforce;
- Gebruik goede tooling, van design tools als Sketch en Invision tot frameworks als Bootstrap.
Heb je dan echt minder designers nodig, zoals het begin van dit artikel suggereert? Dat niet perse. Je designers (of designbureau, als je het ontwerpproces uitbesteedt) kunnen echter wel putten uit de basis die er al ligt. Onderzoek en herontwikkeling is niet meer nodig als een design system de leidraad is in al je visuele uitingen. Designers zullen nodig blijven, al is het maar voor het bewaken, beheren, implementeren en doorontwikkelen van het systeem met oog voor witruimte, kleur, typografie, vormtaal en de harmonie daarin.
Next step: Component Library
Nu we weten wat design systems zijn en welke voordelen ze bieden, zijn we toe aan de volgende stap. Want je wilt het systeem namelijk in de praktijk toepassen op je bestaande of nieuwe online producten en diensten. Het is daarbij essentieel dat niet alleen design, maar ook techniek daarin meegenomen wordt.
Na een korte break vertellen Enrisers Christiaan van Bemmel en Daan Houweling over hun praktijkervaring bij Justlease. De private lease-tak van Terberg Leasing. Daar hadden met name developers het gevoel dat ze telkens het wiel opnieuw aan het uitvinden waren, met nieuwe code voor hetzelfde resultaat. Als ook jouw developers die ervaring hebben, dan is het dus tijd om aan de slag te gaan met een component library!
Terberg vroeg Enrise bij de opzet van een componentbibliotheek, ter versterking van hun eigen development team. Het doel was een oplossing die zowel marketeers als developers tevreden stelt, met minder herhaalwerkzaamheden en snellere time-to-market. Anders gezegd: marketeers willen snel een nieuw product in de markt zetten en campagnes starten en developers hebben daarbij de juiste tools nodig om dat in die korte tijd te kunnen realiseren.
Nieuwe start
In mei 2017 begon de ontwikkeling van Moovler, een nieuw Terberg-initiatief met leasevormen voor zelfstandige ondernemers. Al bij de start werd het uitgangspunt dat design en techniek een stabiele basis moesten vormen voor toekomstige nieuwe initiatieven. De site werd opgezet met het voor de marketeers al bekende CMS WordPress. Voor de front-end is gekozen voor React, een development framework dat is opgezet vanuit een componentengedachte. Zo hoef je niet elke regel code te bedenken en te schrijven, maar kun je een bestaand component benoemen en de properties aanpassen om heel snel te kunnen ontwikkelen.
Al vrij snel werd duidelijk dat dit de uitrol van nieuwe labels, acties en initiatieven enorm kan versnellen. De basis die met Moovler is neergezet, werd vervolgens ook toegepast op de nieuwe site van Justlease. Dat werd geen 1-op-1-kopie, maar het gebruikte wel dezelfde basis, met wat nieuwe toevoegingen.
De overeenkomstige en nieuwe componenten van Moovler en Justlease werden samengevoegd tot een centrale plek: de component library werd geboren. Het kreeg net als bij een echte geboorte ook een eigen naam: Listo. Dankzij Listo:
- Kunnen meerdere sites gebruikmaken van dezelfde design- en technische componenten;
- Is alles vanuit WordPress in te stellen voor de marketeers;
- Kan elke site zijn eigen thema krijgen in kleur, typografie en lay-out;
- Groeit de bibliotheek dankzij de kruisbestuiving van meerdere sites.
De componentenbibliotheek van Justlease, waarbij automerk, type, uitvoering, actielabels, foto, knop, details en levertijden worden samengevoegd tot een component met afgeronde hoeken en een schaduwrand.
Een ander voorbeeld van een component, de PackageSlider. Dit toont de verschillende uitvoeringen van het gekozen merk en type.
Externe partners
Met Listo heeft Justlease een ijzersterke tool in handen bij het ‘opspinnen’ van nieuwe websites. De marketingafdeling zet het nu in bij partners zoals Mediamarkt en de Belgische supermarkt Carrefour. Daarbij behouden deze partijen hun eigen merkuitstraling, waarbij ze dankbaar gebruik maken van de elementen en componenten die al bestaan.
De bibliotheek is doorzoekbaar en gedocumenteerd. Waardoor je als developer bij een nieuw project snel de juiste bouwblokken en properties te pakken hebt.
Learnings
Wat kunnen we nu leren van de opzet van design systems en component libraries? Beide talks noemden vergelijkbare adviezen daarin:
1. Afdelingen moeten samenwerken
Designers, developers, marketeers en andere mensen in je organisatie moeten samenwerken om tot een consistent, bruikbaar en nuttig systeem te komen. Design en development gaan hand in hand en die aanpak moet geaccepteerd worden door je organisatie. Dat werkt alleen met duidelijke afspraken. En om te voorkomen dat die afspraken zwakker worden door eindeloos onderling overleg, is het belangrijk dat één of enkele personen het mandaat hebben om een goede keuze te maken.
2. Balans tussen specifiek en generiek
Bij de opzet van een component library kun je vooraf niet alles helemaal uitdenken. Hoe graag je dat als designer of developer ook zou willen. Maak je het te specifiek voor een site, dan kun je de bibliotheek lastiger inzetten bij nieuwe sites en producten. Maak je het te generiek, dan geef je te weinig ruimte om een echt goed product over meerdere sites uit te rollen. Je zult op zoek moeten naar de balans daartussen.
3. Wees agile
Een componentenbibliotheek is niet 1x maken en klaar. Het is een doorlopend proces van vernieuwen, herontwikkelen en verbeteren. Blijf ook daarin Agile. Wees niet te star in wat er staat. Omarm verandering en bouw op die manier aan een levende en groeiende bibliotheek. Actief beheer met wijzigingen en toevoegingen van componenten zijn daarin essentieel.
CodeCuisine®LIVE werd afgesloten met een zomers buffet, verzorgd door onze buren van restaurant Dara. Compleet met nieuw gesmede relaties en uitwisseling van frisse ideeën werd deze editie een geslaagde op terug te kijken.
