Waarom jouw site ook een Design System nodig heeft

Terugkijkend op het afgelopen jaar was er op design vlak een duidelijke trend waar niemand omheen kon. Maar eerlijk gezegd was het niets nieuws. Brad Frost heeft al sinds 2013 met zijn Atomic Design aanpak de basis gelegd voor deze ontwikkeling. En Atomic Design is op zich weer gebaseerd op de huisstijlgidsen zoals we die kennen uit de print wereld. De trend waar ik het over heb is natuurlijk Design Systems. Een manier om interfaces op te bouwen van kleine elementen naar volledige designs op zo’n manier dat ze consistent zijn en makkelijk te onderhouden.

 

De uitdaging: hoe bewaar je het overzicht?

Het werk van een designer bestaat uit keuzes maken. Moet dit element meer aandacht krijgen? Welke font size past hier het best? En met die keuzes leggen ze eigenlijk de regels vast waar zij zichzelf aan moeten houden. Omdat we de gebruiker normaal gesproken zo min mogelijk willen verwarren, is het belangrijk om de designs zo consistent mogelijk te maken. Dat betekent dus, met zo min mogelijk regels. Bijvoorbeeld; links zijn altijd blauw en onderstreept, behalve als ze op een donkere achtergrond staan, dan zijn ze wit. Nu is dit een erg makkelijk voorbeeld om consistent door te voeren in de designs voor alle pagina’s van een site of app. Maar stel je voor dat je honderden pagina’s moet ontwerpen die elk uit een dozijn elementen bestaan. Dan wordt het soms lastig om het overzicht te bewaren van de regels die je als designer voor jezelf opstelt. En omdat een developer die de designs dan moet realiseren niet van de regels weet, gaat hij of zij interpreteren wat de designer bedoelde.

 

De voordelen van een Design System

Een Design System is een oplossing voor deze uitdaging. Een volledig overzicht van alle keuzes die de designer heeft gemaakt. Samen vormen zij alle variabelen, onderdelen, elementen en componenten waar een site of app uit bestaat. Op die manier kunnen designs, nadat het systeem staat, sneller worden gemaakt. Ook is het makkelijker voor andere designers om werk over te nemen, of om te zetten naar designs voor andere platformen.

Maar het heeft nog meer voordelen. Bij Hoppinger bouwen we Design Systems met live code, wat betekent dat het Design System en de website of app nooit van elkaar zullen verschillen. Op deze manier is het ook responsive, zodat we direct kunnen zien hoe een onderdeel zich gedraagt op verschillende schermformaten. En het stelt ons in staat om de realisatie van de designs al te verifyen, zelfs wanneer de back-end nog in ontwikkeling is.

Denk je dat een redesign met bijpassend Design System jouw site ook naar een hoger niveau kan brengen? Kom een keertje koffie drinken!