Wat is een design systeem?

In het kort is een design systeem een verzameling van componenten, screenshots, guidelines, visies, documenten, voorbeelden en andere digitale uitingen gebundeld in een grote knowledgebase van een bedrijf (dat meestal een product ontwerpt). Het systeem wordt online geplaatst, publiek of privé intern. Je zou het kunnen zien als een grote starterskit met niet alleen visuele, maar ook technische voorbeelden van code. Het is meer dan een huisstijlhandboek; het geeft je richtlijnen en vaak kun je er zelfs elementen uit kopiëren om meteen te gebruiken.

Wat is het verschil tussen een Brand Guide en Design System?

Ondanks dat er veel overeenkomsten zijn tussen en Brand Guide en Design system zijn deze wel verschillend. In een brand guide staat alles wat te maken heeft met de vormgeving van een product of bedrijf. Waaronder typografie, logogebruik, kleuren en voorbeelden hoe de branding toegepast kan worden. Een design systeem bevat naast deze elementen o.a. ook design patronen/onderzoek en code snippets die te gebruiken zijn voor developers. In feite is een brand guide onderdeel van een design system.

Waar kan een design systeem voor gebruikt worden?

Een design systeem wordt gemaakt door met een heel team de discussie te voeren over hoe elementen binnen design eruit zien, maar ook hoe code wordt geschreven. Een team legt bijvoorbeeld vast welke kleuren gebruikt worden en voegen code snippets toe die gebruikt kunnen worden.

Door alles op een centrale plek vast te leggen bespaart een team kosten en tijd. Er wordt geen dubbel werk gedaan en er is geen discussie over het design. Daarnaast blijft iedereen op dezelfde lijn bij het ontwikkelen van een product en blijven alle merkbelevingen consistent. 

Wat kunnen we ervan leren?

Grote online bedrijven steken veel tijd en geld in het doen van onderzoek naar goede UX patronen. Dit onderzoek verwerken ze uiteindelijk in hun design systeem. Door Design Systemen van anderen te bestuderen leer je veel over gebruikspatronen en kom je vaak oplossingen tegen die je kunt verwerken in je eigen productontwikkeling.

Een voorbeeld

Maak je een applicatie en wil je dat deze intuïtief te gebruiken is voor de doelgroep, dan heeft Google een goed Design Systeem, Google Material Design. Het systeem is publiek en kan daardoor door iedereen gebruikt worden. Het systeem van Google heet “Material design”, omdat het een metafoor is voor de componenten binnen het systeem. Deze zijn veelal ontworpen op basis van fysieke objecten met lichtval en texturen uit het echte leven in het achterhoofd. Dit houdt alles zo intuïtief mogelijk voor de gebruiker. Het Google Material Design systeem bevat applicatie voorbeelden, kleuren, typografie, schaduw voorbeelden, een set aan iconen die je kan gebruiken en nog veel meer. Zo hoef je het wiel niet opnieuw uit te vinden en kan je de kennis van Google gebruiken in een eigen nieuwe applicatie.

Google Material design

Een ander goed voorbeeld is het Design Systeem van Atlassian. Atlassian maakt project management tools zoals Jira en Trello. Hierdoor hebben ze veel onderzoek gedaan naar hoe mensen het beste kunnen samenwerken in een systeem. Ook hun Design Systeem is publiek. Dit systeem kan onder andere interessant zijn om te bestuderen voor een applicatie waar voortgang wordt bijgehouden of waar teams in gaan samenwerken.

Atlassian Design System

Bij Eenvoud

Tijdens de productontwikkeling van applicaties en websites maakt Eenvoud ook gebruik van de design patronen/onderzoek uit design systemen. Zo gebruiken wij voor een aantal applicaties het Vue framework Vuetify, wat gebaseerd is op Material Design van Google. Design patronen van grote spelers zorgen ervoor dat wij minder tijd hoeven steken in het doen van kwalitatief onderzoek en wij op een snelle en flexibele manier producten kunnen ontwikkelen. Omdat wij alleen custom werk afleveren, verschilt het welke patronen wij in producten verwerken, maar scheelt dit uiteindelijk altijd in de kosten voor de klant. 

Meer weten over het ontwikkelen van een applicatie? Lees hier meer over webapplicaties