Introductie

Design Systemen

wooclap.com/UIP

Ga naar:

Waarover zullen deze lessen gaan

Een verhaaltje

Stel je voor...

Introductie

Introductie

Introductie

Introductie

Introductie

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

Weeral meeting time!

Dingen die besproken werden:

 - Waarom hebben wij heeft uitroepingsteken in ons logo zoals Yahoo?
 - Kennen we niemand die een logo kan maken?

 - Er staat precies zo veel rommel op de homepagina, kunnen we dat niet ergens anders steken?

Nog een meeting

Mensen zijn precies bang van het internet, zouden we niet een beetje een speelser logo maken? 

En waarom maken we niet eens een grapje op 1 april?

Nog een meeting

We stoefen er op los dat we 10.068.236 dingen kunnen vinden op het web.

Kunnen we die complexiteit niet simpeler maken?

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?

Wat zijn het?

Design systemen

Wat zijn het?

• In essentie: Een samenvatting van alle meetings

Wat zijn het?

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

Wat zijn het?

• 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

Wat zou "Tone of voice" willen zeggen?

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!

En nog zoveel meer

De grote van een design systeem varieert.

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/UIP

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.

Nadeel: Afhankelijkheid

• Als je rechtstreeks steunt op de tools uit een design system bouw je eigenlijk op de goodwill van onbekenden
• Voorbeeld: 
  • servers gaan offline
  • paywalls

Nadeel: Keuzebeperkend in je tech-stack

• Wanneer een technologie die niet bedrijfsonafhankelijk is, hangt de future-proofness vast aan de interne politiek van een bedrijf
• De populariteit van een bedrijf rechtvaardigt niet de keuze tot hun tech-stack!

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