Design Systems introductie

Story time

Stel je voor ...

Meeting-time

Meeting waarin je wel enkele afspraken maakt:

• Beetje professioneler overkomen in ons taalgebruik
• Eens wat met kleuren spelen
• Laat ons volledig open kaart spelen

Zijn afgeronde hoekjes niet net iets lichter nog?

Hoeveel producten heeft Google momenteel?

Hoeveel UX designers werken er voor Google?

Hoe vermijd je dit?

Hoe zorg je ervoor dat al die designers dezelfde richtlijnen volgen?

Design System

aka Design Language System

Een samenvatting van alle meetings

Set van standaarden van alle herbruikbare design-, UX-elementen en patronen voor het bouwen van een bepaald digitaal product. 

• Alle visuele assets (design tokens - components - patterns)
• Accessibility guidelines

Tokens vs components vs patterns

Tokens

Voordelen

• Geeft overzicht
• Geeft consistentie --> kwaliteit
• Duidelijke communicatie
• Ze zijn schaalbaar 

Een design systeem maken

Stap 1: identiteit

Brand identity, persoonlijkheid, missie, tone of voice, logo

Stap 1: identiteit

Brand identity, persoonlijkheid, missie, tone of voice, logo

Stap 1: identiteit

Brand identity, persoonlijkheid, missie, tone of voice, logo

Stap 1: identiteit

Tone of voice

Stap 2: basis - kleur

Kleur

Stap 2: basis - kleur

Reminder - je hebt meer kleur nodig dan je denkt 

Stap 2: basis - kleur

Reminder - je hebt meer kleur nodig dan je denkt 

Stap 2: basis - kleur

Reminder - je hebt meer kleur nodig dan je denkt 

Stap 2: basis - typografie

Stap 2: basis - typografie

Stap 2: basis - iconen

Stap 2: basis - iconen

Stap 2: basis - illustraties

Stap 2: basis - illustraties

Stap 2: basis - animaties

Buttons, stijlen, lay-outs, kolommen

Atomic Design

Atomic Design

Opgedeeld naar de analogie van scheikunde

• Atomen: buttons, icons, ...
• Moleculen: combineren van atomen: breadcrum
• Organismen: complexe UI patterns: cards, navigation bars
• Templates: content structuur van de pagina (wireframe)
• Pagina

Wireframes (of templates) beschrijven de structuur terwijl Designs (of pages) deze structuur gaan opvullen met inhoud.

in praktijk

Buttons - primary, secondary and others
States - Default, hover, pressed / clicked, disabled / inactive

Other form elements - checkboxes, radiobuttons, switchers, chips / pill buttons

Samen brengen van verschillende elementen

Navigation + variaties

Meldingen: Error - Waarschuwing - Aankondiging

Pricing table

Card

Card

CTA

Customer Review

Cover in Figma

Figma cover

Figma cover

Figma cover

What's next?

Digitaliseren

= Digital Style Guide

Opties

1. Static HTML/CSS Styleguide
2. Living Styleguide

Voorbeelden

Voorbeelden

Voorbeelden

Voorbeelden

Stijlen binnen UI

Glassmorfisme

Glassmorfisme

Brutal UI Design

Pixel Design

Brutal + Pixel UI Design

Soft UI

Neumorphism/Skeuomorphism