Joost van der Velde

Intens design systeem

Dit design systeem vormt het vertrekpunt voor het ontwikkelen van websites en branding projecten. Het is ontworpen om herhaalde handelingen te minimaliseren, waardoor efficiëntie en consistentie centraal staan. Met dit systeem kun je eenvoudig schakelen tussen verschillende apparaten en snel wijzigingen doorvoeren in kleuren en typografie, alles aangestuurd vanuit een centraal punt. Hierdoor wordt het tijdrovend aanpassen van individuele designs verleden tijd.

Het doel is om niet alleen mijn eigen proces te optimaliseren, maar ook andere designers te ondersteunen in het stroomlijnen van hun workflows, zodat zij zich kunnen richten op het oplossen van complexe ontwerpuitdagingen.

 

Context

Het is frustrerend om telkens vanaf nul te beginnen met de basisopzet bij het ontwikkelen van een nieuw design systeem.

Tegelijkertijd is het prettig om controle te hebben over de totale look-and-feel van een product.

Dit systeem biedt een uitgebreid componenten- kleuren- en typografiesysteem dat schakelen tussen verschillende kleurenpaletten, devices en dark- en light-modes vereenvoudigd.

9 verschillende screenshots van het design systeem om overzicht te creëren

Functionaliteit

Diagram over tokens

A source of truth

Door slim gebruik te maken van tokens is er in het gehele designsysteem altijd één plek van waarheid. Deze inzichtelijke structuur zorgt ervoor dat alle onderdelen in lijn zijn met elkaar.

Pagina Fundamentals

Open de lokale variabelen in het rechtermenu en navigeer naar de collectie “Fundamentals”. In deze collectie vind je de volgende groepen:

  • Brand: De primaire merk kleur van jouw product.
  • Secondary en Tertiary: Ondersteunende kleuren. De secondary kleur werkt goed als contrastkleur met de brand kleur, terwijl de tertiary kleur geschikt is voor call-to-actions (CTA’s) en andere actiegerichte elementen.
  • Neutral: Zwart-grijs-wit tinten in het design systeem.
    Success, Warning en Danger: Dialoogkleuren die de UX verbeteren door duidelijk te communiceren wanneer acties succesvol zijn, extra aandacht vereisen of potentieel gevaarlijk zijn.
Overzicht van verschillende kleurstalen

Typografie

In de variabelencollectie “Typografie” regel je centraal de typografie voor jouw product. De primaire categorieën zijn:

  • Body: Voor lopende teksten en subkoppen.
  • Heading: Voor titels.
  • Display: Voor opvallende aandachtstrekkers.
  • Button: Voor knoppen.

 

Andere groepen binnen typografie zijn:

  • Weight: Beheert het gewicht van je lettertypes, gekoppeld aan text styles.
  • Size: Regelt fontgroottes, opgesplitst in desktop- en mobiele touchpoints.
  • Lineheight: De regelhoogte voor teksten, eveneens responsief voor desktop en mobiel.

 

Text Styles

De text styles in het rechtermenu bieden lokale typografiestijlen die je uiteindelijke keuzes definiëren voor het gebruik van typografie binnen jouw product. Deze worden aangestuurd door de tokens in de typografieverzameling.

Componenten

Alle componenten zijn beschikbaar met dimensies voor desktop en mobile. Ook zijn alle componenten beschikbaar in een light en dark mode.

Verschillende buttons
Buttons
  • Beschikbaar in alle kleuren (Neutral, Brand, Secondary, Tertiary, Success, Warning, Danger).
  • Optioneel met iconen (voor/achter).
    Stijlen: Plain, Soft, Solid, Outline.
  • States: Default, Hover, Active, Disabled.
  • Beschikbaar in drie maten: Base, Small, Large.
icon buttons
Image buttons
  • Aan het begin van de button is er ruimte voor een afbeelding.
  • Beschikbaar in alle kleuren (Neutral, Brand, Secondary, Tertiary, Success, Warning, Danger).
  • Optioneel met iconen (achter).
  • Stijlen: Plain, Soft, Solid, Outline.
  • States: Default, Hover, Active, Disabled.
  • Beschikbaar in drie maten: Base, Small, Large.
Icon buttons
  • Beschikbaar in alle kleuren (Neutral, Brand, Secondary, Tertiary, Success, Warning, Danger).
  • Stijlen: Plain, Soft, Solid, Outline.
  • States: Default, Hover, Active, Disabled.
    Beschikbaar in drie
  • Beschikbaar in drie maten: Base, Small, Large.
sliders
Sliders
  • Normale sliders en range sliders (voor bereik tussen twee waarden).
  • Kleuren: Neutral, Brand, Secondary, Tertiary.
  • Opties voor verschillende schalen.
  • Mogelijkheid om labels boven de slider weer te geven.
  • States: default en disabled.
Form Fields en Inputs
  • Beschikbaar in alle kleuren (Neutral, Brand, Secondary, Tertiary, Success, Warning, Danger).
  • Optioneel met iconen (voor/achter).
  • Radio Buttons .
  • Checkboxes.
  • States: Default, Hover, Active, Disabled.
Chips
  • Beschikbaar in alle kleuren (Neutral, Brand, Secondary, Tertiary, Success, Warning, Danger).
  • Optioneel met iconen (voor/achter).
    Stijlen: Plain, Soft, Solid, Outline.
  • States: Default, Hover, Active, Disabled.
  • Beschikbaar in drie maten: Base, Small, Large.
verschillende secties
Secties
  • Beschikbaar in alle kleuren (Neutral, Brand, Secondary, Tertiary, Success, Warning, Danger).
  • Optioneel met iconen (voor/achter).
  • Radio Buttons .
  • Checkboxes.
  • States: Default, Hover, Active, Disabled.