Introductie

Design Systemen

Welk bedrijf is dit?

Introductie

Zijn afgeronde hoekjes niet net iets lichter nog?

Hoeveel producten heeft Google momenteel?

Hoeveel UX designers werken er voor Google?

Wat zijn het?

Design systemen

Introductie

• In essentie: Een samenvatting van alle design beslissingen.

• Praktisch: Centrale omgeving waarin de bouwstenen van digitale diensten en producten gedefinieerd zijn voor de verschillende bouwteams. 

Introductie

• De bron van waaruit ontwikkeld wordt: “the one single source of truth”.

• Niet langer pagina per pagina designen, maar je designed enkel nog de verschillende bouwstenen

Wat zijn het?

• Ieder design systeem is ook anders. het heeft niet 1 standaard set van onderdelen, maar evolueert doorheen de tijd.

Onderdelen

Design systemen

Design principes

Starten vaak vanuit "design principes"

• dit is vaak een simpel tekstje die de visie duidelijk maakt

Design principes

Salesforce

Stijlgids

1 van de grootste onderdelen is een stijlgids omdat deze over heel veel verschillende details gaat.

Een onderdeel die er nagenoeg altijd inzit: Kleurgebruik!

Stijlgids: Kleur

Stijlgids: Kleur

Stijlgids: Typografie

Stijlgids: Typografie

Stijlgids: Typografie

Stijlgids: iconen

Stijlgids: iconen

Stijlgids: illustraties

Stijlgids: illustraties

Stijlgids: animaties

Stijlgids: animaties

Stijlgids: animaties

Stijlgids: Tone of voice

Stijlgids: Tone of voice

Componenten

Worden gebruikt om User Interfaces mee te gaan opbouwen

• knoppen
• forulierelementen
• paragrafen
• ...

Componenten

Variaties van een component (knop)

Componenten

Principes van een component (knop)

Componenten

Schaalbaarheid van een component (knop)

Componenten

States van een component (knop)

Componenten

Specificaties van een component (knop)

Componenten

Patronen

Patronen is de verzamelnaam voor grids, spacing en alles daar tussenin.

Patronen

Tools & Resources

Laat toe om sneller samen te werken

• Bron-bestanden van design-tools zoals Adobe XD bestanden waar alle componenten al in getekend zijn
• iconenset
• Generatoren van kleur, type-scale, vormen, …
• Code: van snippets tot libraries

En nog zoveel meer

Een design systeem heeft als doel te kunnen blijven evolueren.

Stel dat Guido uit New York het leuk vond om een belachelijk trage transitie in een app te steken je bedrijf?

=> Consensus zoeken en nieuwe richtlijn toevoegen!

Voor- en nadelen

Design systemen

Voordeel: platform onafhankelijk

• Websites
• Frigo-display
• Smartwatches
• ...

Voordeel: Duidelijke en up-to-date documentatie

• Telkens een reflectie van de laatste consensus.
• Vertrekpunt voor toekomstige discussies

Voordeel: Visuele consistentie

• Bij het bouwen aan nieuwe producten kan je de branding van het bedrijf behouden

wooclap.com/UIX

Voordeel: Begrijpbare richtlijnen

• Ruimte om uitleg te geven bij bepaalde richtlijnen.
• Minder weerstand van mensen die minder van design weten (Guido?)

Voordeel: Snelheid

• De tools en assets zorgen ervoor dat iedereen een veel snellere workflow heeft.

Bekende voorbeelden

Design systemen

Bekende voorbeelden

Adobe’s Spectrum heeft een design systeem waarbij ze tools voorzien om heel snel te kunnen gaan wireframen vanuit hun Adobe XD, programma. We zullen deze tool dan ook in onze lessen in gaat zetten!

Bekende voorbeelden

Mozilla’s Protocol is een heel straight-forward no-nonsense design systeem die opgedeeld is volgens het Atomic Design principe. Relatief makkelijk overzicht, maar niet meteen visiorair op vlak van design.

Bekende voorbeelden

Carbon Design System is IBM’s aanpak van een Design Systeem. Dit design systeem is heel wat meer corporate qua look and feel.

Naast de tools die vooral bedoeld zijn voor IBM’s werknemers, hebben ze ook vele design onderdelen onder de loep genomen.

Bekende voorbeelden

Vele design concepten voorzien heldere uitleg

Het design systeem van Atlassian biedt zeer goed leesmateriaal om conceptueel veel uit bij te leren!

Bekende voorbeelden

Material Design van Google:

• Ware bron aan nuancering
• prachtig geïllustreerde use-cases
• veel tool en assets
• design goudklompjes
• flexibel, visionair en makkelijk te lezen