In een Design System staan standaard design elementen beschreven, kleuren gedefinieerd en zijn logo’s en iconen eenvoudig terug te vinden. Een Design system is veel meer dan een brand book. Het leeft, geeft richtlijnen, maar je kunt er ook elementen uit kopiëren en die gebruiken in de ontwikkeling van je digitale product.
Normaal gesproken helpt een design system een team van ontwerpers om de juiste richtlijnen aan te houden. Toch wil ik voor dit project een design system opzetten omdat ik hier later naar verwachting veel mee ga werken. Het gebruik van een design system voor dit project is een goede oefening.
Logo
Het logo kan op drie verschillende manieren worden gebruikt. Zowel op een lichte als donkere achtergrond.
Kleurenpalet
Het kleurenpalet bestaat uit statische kleuren en gradiënt kleuren. Ik heb deze van elkaar gescheiden omdat ze los ook gebruikt zullen worden binnen het prototype. Denk bijvoorbeeld aan de kleur van de tekst of iconen. Deze zullen vooral een solide kleur krijgen. De gradiënt kleuren zullen terugkomen in elementen als knoppen en achtergronden.
Fonts
Ik heb ervoor gekozen om één lettertype te hanteren. Dat zorgt voor consistentie. Het lettertype wat ik voor het dashboard ga gebruiken heb ik ook in het logo gebruikt. Het is wel een lettertype variabele gewichten heeft. Ook zal ik voor bijvoorbeeld subtitels hoofdletters gebruiken. Op deze manier kan ik met één lettertype toch veel visuele hiërarchie creëren.
Buttons
Knoppen zijn elementen die verschillende states kunnen hebben. Ik verwacht dat niet alle states in mijn prototype terug zullen komen, maar ik vind het belangrijk genoeg om wel te definiëren in het design system. Mocht ik states niet gebruiken, kan ik het altijd meegeven in de toekomstvisie.
Ik heb ervoor gekozen om een primaire en secundaire knop te definiëren. Eerlijk gezegd verwacht ik niet dat het prototype behoefte heeft aan meer. Als het blijkt dat dat wel zo is, zal ik het design system updaten.
Inputs