Design System kick-off

Het ontwerp van je applicatie of website is méér dan alleen kleurtjes en lettertypes. Het is ook méér dan een verzameling componenten. Achter het design zit een idee, een visie, een systeem, een taal die alles met elkaar verbindt. Maar hoe zorg je dat die taal consistent blijft terwijl er zoveel mensen aan je website of applicatie werken? In 4 dagen maken we een vliegende start met jouw Design System.

Wat is een Design System?

Vroeger deden we dit door middel van een styleguide op papier (of pdf), maar zo’n styleguide is eigenlijk al op dag één verouderd. Designers gaan aan de slag en bouwen nieuwe functionaliteiten die niet waren voorzien (of waren gedocumenteerd) in de styleguide. Vervolgens wordt het ontwerp geïmplementeerd en zijn de bestanden van de designers al verouderd. Met andere woorden: je hebt niet meer genoeg aan dat statische document.

Een design-system is de formalisatie van je design-taal, een manier om je keuzes te documenteren en onderbouwen. Het is een levend ‘iets’, een project wat (net als je site!) nooit af is. Daarom hoort bij een goed design-system een proces met duidelijke afspraken.

Zo heb je consistentie in je user-interface en bied je een betere ervaring aan je gebruikers.

Een design system is…

  • een plek waar je design language ‘leeft’
  • een design proces met duidelijke ‘spelregels’
  • een single-source of truth voor design, development, marketing en andere stakeholders
  • efficiënt en flexibel uit te breiden

“Met een goed uitgedachte structuur heeft Angi Studio ons in enkele dagen enorm geholpen om de basis van een design system op te zetten. Daarna hebben visual designers en front-enders van Angi in samenwerking met ons interne team stapsgewijs alle UI-patterns en code-components ontwikkeld die we nodig hadden om het design voor Nextens naar een nieuw level te brengen. Dankzij Angi Studio krijgt de gebruiksvriendelijkheid van Nextens een enorme boost en kan het ontwikkelen van nieuwe functionaliteit straks een stuk sneller en eenvoudiger!”

- Tristan, UX Lead bij Nextens (Reed Business Information)


Wat gaan we doen?

In 4 dagen maken we een vliegende start met jouw Design System. Met twee designers richten we samen met jou het proces en de tools in waarmee je zelf je design system kunt uitbreiden en onderhouden. Daarnaast helpt één van onze frontend-experts om in twee dagen de component-library op te zetten.

Wat krijg je van ons

  • Design principles, accessibility en tone-of-voice guidelines vastgelegd
    (bijvoorbeeld in Google Docs) die je later zelf kunt overzetten naar je Design System;
  • Een UI-kit (de basis) in bijvoorbeeld Sketch of Figma, met daarin alle kleuren, typografie, iconen, en voorbeeld componenten;
  • Een component-library (op basis van Fractal) met daarin een voorbeeld-component in frontend-code;
  • Een werkproces afgestemd op jouw wensen en behoeften, zodat je in de toekomst zelfstandig je Design System kunt onderhouden.

Wat hebben we van je nodig

  • Decider voor 4 dagen
    Iemand die knopen kan doorhakken voor het team.
  • Designers en Front-end Developers voor 4 dagen
    Teamleden die het Design System hoofdzakelijk gebruiken.
  • Marketing & communicatie voor 2 dagen
    Als je ervoor kiest om ook bijvoorbeeld tone-of-voice guidelines in je Design System op te nemen, dan is het handig er mensen vanuit marketing & communicatie aanwezig zijn bij (in ieder geval) de 2 dagen.
  • Overige stakeholders
    Het kan zijn dat er nog meer partijen gebruik gaan maken van jouw Design System, denk bijvoorbeeld aan externe leveranciers. We gaan graag met je in overleg wie binnen of buiten je organisatie nog meer belangrijk kunnen zijn.

Na deze workshop…

Heb je alles in huis om zelf de UI-kit en component-library verder uit te breiden. Een Design System is net als je website, namelijk nooit af. Heb je capaciteit te kort of geen designers in dienst? Geen zorgen, we kunnen je ook daarin ondersteunen!

Kosten: €12.000

Vragen? We denken graag met je mee.

Matthijs
Maurice

#workhard­playhard

Volg ons op