💁🏼‍♀️

User Needs

Sprint 17

Inhoudsopgave

  • Repositories
  • Week 1
    • Compositie woordenlijst
    • Visuele hierarchie
  • Week 2
    • View transitions
    • Kleur modellen
    • Design tips
  • Bronnen

Repositories

Week 1 | 02 t/m 06 december

Deze sprint richten we ons op creative coding. Coding Spike: Experimenteer met leuke, speelse code die niet per se functioneel hoeft te zijn.

Compositie woordenlijst

  • Flow
  • Visuele hiërarchie
  • Animatie
  • Visual weight
  • Visual direction
  • Dominance
  • Focal point
  • Composition
  • Reading patterns
  • Symmetrisch
  • Asymmetrisch
  • Radiaal
  • Mozaïek
  • Storytelling
  • Scrolly telling

Visuele hierarchie

  • Grootte
  • Positie op scherm
  • Witruimte
  • Kleur en contrast
  • Animatie

Week 2 | 09 t/m 13 december

View transitions

De View Transitions API maakt het makkelijk om animaties toe te voegen als je schakelt tussen verschillende weergaven op een website. Dit werkt zowel binnen een single-page applicatie (SPA) als bij het navigeren tussen pagina’s in een multi-page applicatie (MPA).

Wat is het en waarom gebruiken?

Viewtransities zijn ideaal om gebruikers een soepelere ervaring te geven. Ze zorgen ervoor dat je in de flow blijft, minder moeite hoeft te doen om te begrijpen wat er gebeurt, en het voelt alsof alles sneller laadt.

MDN View Transitions

Kleur modellen

  • RGB: Red, Green, Blue
  • RGBA: Red, Green, Blue, Alpha
  • CMYK: Cyan, Magenta, Yellow, Black
  • HSL: Hue, Saturation, Lightness
  • HWB: Hue, Whiteness, Blackness
  • LAB: Lightness, Green to Red, Blue to Yellow
  • LCH: Lightness, Chroma, Hue
  • Display-P3: (?)

Dit zijn een paar van de meest voorkomende kleuren modellen die gebruikt worden in moderne vormgeving. Kleuren paletten kan je handig maken met hsl, omdat je van dezelfde kleur meerdere varianten kan maken die bij elkaar passen.

In een kleurenpalet, kan je ervoor kiezen om de kleuren te verdelen in 3 categorieën.

  • Primaire
  • Accenten
  • Neutralen

Tegenwoordig hoef je in css geen rgba meer te gebruiken maar rgb, verder kun je coma’s vergeten en gewoon spaties gebruiken. De opacity schrijf je tegenwoordig ook met een / en procenten.

Nieuw

rgb( 255 255 255 / 50%)

Legacy

rgba( 255, 255, 255, 0.5)

Design tips

  • Als je gradients gebruikt, is het handig om met LAB te werken, omdat LAB meer kleurondersteuning biedt in gradients. Hierdoor springen de kleuren er nog meer uit.
  • Je ontwerp heeft altijd wit nodig.
  • Als je een lichte achtergrond hebt, gebruik dan donkere kleuren op de voorgrond voor een goed contrast.
  • Als je een donkere achtergrond hebt, gebruik dan lichte kleuren op de voorgrond voor een goed contrast en maak de line height wat breder, omdat het dan makkelijker te lezen is.
  • Bij het gebruiken van grafieken is het beter om de saturation en lightness te veranderen dan de hue voor toegankelijkheid.
  • WCAG3 is bezig met een nieuw contrast systeem genaamd APCA, dat ervoor moet zorgen dat mensen nog beter een contrastverschil kunnen berekenen.

Bronnen