Scroll to top

Laten we praten over

Design Systemen.

Hoe Design Systemen Branding, Business & Design Versterken.

Vanuit een business perspectief willen we lage kosten, tijds efficientie, en schaalbaarheid. Vanuit een design perspectief willen we eenheid, flexibiliteit, en gebruiksgemak. Vanuit een branding perspectief willen we een sterk merk dat wordt gebruikt zoals bedoeld.

Wat als ik je vertel dat al deze doelen kunnen worden samengevoegd in één design oplossing? Het klinkt als een hele opgave, en dat is zo. Maar uiteindelijk zullen alle doelen er in voor komen. Laten we doorgaan naar wat een design systeem nou eigenlijk is of kan zijn.

Wat is een design systeem?

Een design systeem kan in verschillende vormen en groottes bestaan, afhankelijk van de applicatie. Algemeen kun je een design systeem beschrijven als:

een collectie van merk materialen, feiten, en beschrijvingen. Gelinkt om te zorgen voor een verenigde design taal of merk communicatie.“.

Wat een design systeem is, hangt af van de grootte en gebruik. Het kan klein beginnen met een collectie van de style guide, design elementen, en schermen die worden gebruikt om een verenigde design stijl over meerdere apparaten te krijgen. Maar het kan ook opschalen naar een systeem dat verschillende producten, merk waarden, merk communicaties, apps en websites verenigd. Van alleen design, tot ontwikkeling, onderzoek, communicatie, en marketing allemaal samengevoegd.

Desktop and smartphone size with tools for design systems floating around

Hoe is het gestructureerd?

De kracht van een design systeem zit hem in de structuur. Het gaat van klein naar groot en linked daardoor alle onderdelen van design tot de core business waarden. Dit zijn mogelijke onderdelen van een design systeem voor een app.

Materialen.

Dit zijn de basis materialen die meestal zijn gedefinieerd in de styleguide van een merk. Bijvoorbeeld de merk kleuren, typografie, iconen, manier van communiceren, etc.

  • Kleuren
  • Lettertypes
  • Logo’s
  • Iconen

Elementen.

Dit zijn kleine elementen van een design, en gebruiken materialen. Bijvoorbeeld de verschillende knoppen, profielfoto blokken, navigatie knoppen, etc.

  • Knoppen
  • Profielfoto’s
  • Bericht Blokken
  • Navigatie Elementen

Objecten.

Deze gebruiken verschillende element om objecten te maken die kunnen worden geïmplementeerd in secties. Bijvoorbeeld een hele navigatie balk, slider navigatie, filter opties, etc.

  • Filter Blokken
  • Sidebar onderdelen
  • Widgets
  • Breadcrumbs

Secties.

Dit zijn gehele secties die worden gebruikt op meerdere weergaves/pagina’s. Bijvoorbeeld headers, een login formulier, een sidebar, een navigatie menu, de footer, etc.

  • Header
  • Footer
  • Sidebar
  • Navigatie Menu

Weergaven.

Dit zijn weergaven die zijn opgebouwd uit verschillende secties en objecten. Denk aan de homepagina, over ons pagina, blog index, winkel detail pagina, de login pagina, etc.

  • Home Pagina
  • Blog Pagina
  • Blog Detail Pagina
  • Checkuit

start een project

Let’s talk.