Styleguide en kleur - fdnd-task/lose-your-head-the-client-case GitHub Wiki

Lose Your Head - The Client Case

Styleguide en kleur

Een styleguide is essentieel voor het begrijpen en toepassen van een huisstijl. Een styleguide geeft voorbeelden en uitleg over hoe iets eruit moet zien. Een styleguide helpt bij het ontwerpen en bouwen van een website, zodat de verschillende elementen consistent worden toegepast.

Aanpak

Voor het maken van een styleguide breng je eerst de verschillende onderdelen van de huisstijl in kaart, zoals typografie, beeldgebruik, formulierelementen en navigatie. Dit doe je met een Interface inventory. Lees in de workshop styleguide uit Sprint 4 hoe je dat doet

In deze workshop ga je met je team een kleurenpalet samenstellen om te gebruiken voor de styleguide van jouw opdracht. Daarna ga je bedenken hoe je dit slim in code kan opzetten met behulp van een aantal (moderne) tips over kleur in CSS.

Kleurenpalet samenstellen

Een kleurenpalet bestaat uit verschillende kleuren die gebruikt kunnen worden in een ontwerp. Als je de kleuren voor een ontwerp goed vastlegt in de styleguide kan je met je team goede afspraken maken en zorg je ervoor dat het ontwerp consistent kan worden toegepast.

In styleguides zie je soms dat een kleurenpalet bestaat uit een paar kleuren. Maar een goed webdesign kan je niet met 5 kleuren maken. Er zijn veel meer kleuren nodig voor een goed ontwerp.

styleguide-you-need-more-colors-than-you-think

Een goed ontwerp heeft veel meer kleuren nodig - Refactoring UI van Adam Wathan & Steve Schoger

Kleurenpalet samenstellen

Een tip voor een goed bruikbaar kleurenpalet is: bepaal meerdere donkere en lichte varianten per kleur. Zo kan je in een ontwerp meer kleuren gebruiken dan alleen de volle kleuren.

Een kleurenpalet bestaat meestal uit een primaire kleur, secundaire kleur (of contrast kleur), accent kleuren en een neutrale kleur voor achtergronden, lijnen, teksten of iconen. Per kleur heb je 5–10 lichtere en donkere varianten nodig waar je uit kan kiezen.

🛠️ Opdracht: Kleuren bepalen

Maak een overzicht van alle kleuren die jullie in het ontwerp hebben gebruikt. Bepaal de Hue van deze kleur.

🛠️ Opdracht: Kleurvariaties bepalen

Breid je kleurenpalet uit met verschillende donkere en lichte varianten in HSL. Ieder teamlid maakt 3 donkere varianten per kleur, en 3 lichte varianten per kleur. Zo krijg je een kleurenpalet met 7 variaties per kleur.

💡 Je kan donkere en lichte variatie maken door de lightness in HSL() te veranderen, maar het kan mooier zijn om de hue aan te passen, zodat je een warme, rijke kleurvariatie krijgt.

Soms is het mooier om niet de lightness te veranderen maar de hue aan te passen - Refactoring UI van Adam Wathan & Steve Schoge

Bespreek de verschillende versies en stel 1 kleurenpalet samen. (Bewaar je variaties)

Bepaal de primaire kleur, secundaire kleur, accent kleuren en neutrale kleur in HSL() waarden in Figma en denk na over de naamgeving voor custom properties. Zou je custom properties kunnen gebruiken voor de --h, --s en de --l?

🛠️ Opdracht: light/darkmode

Ontwerp allemaal een dark-mode versie (of light-mode als je al een donkere versie hebt). Alle teamleden maken in Figma dezelfde pagina met dark-mode kleuren. Zorg dat je minimaal 3 verschillende versies hebt, bespreek de verschillende versies en stel 1 ontwerp samen op basis van jullie beste ideeën en uitwerkingen. (Bewaar je variaties)

💡 Let op dat wit op zwart een te hoog contrast kan hebben. Vooral als een gebruiker het scherm heel fel heeft staan. Probeer eens donker grijs op de achtergrond. En hoe ziet dit eruit met hele licht grijze teksten?

Zwart heeft 0% brightness en wit 100%, dit contrast kan onprettig zijn om naar te kijken, heel donker grijs zorgt voor een net contrast - Practical UI van Adham Dannaway

💡 Let op dat de leesbaarheid van teksten in dark mode kan veranderen. Witte tekst op een donkere achtergrond heeft meer line-height nodig dan donkere tekst op een witte achtergrond. Probeer dit maar eens uit in jullie Figma ontwerp.

Dit voorbeeld laat zien dat een lichte tekst op een donkere achtergrond een grotere regelafstand nodig heeft.

Extra bronnen

Color in CSS

Er zijn veel verschillende manieren om kleur in CSS te definieren. CSS named color, Hex, RGB, HSL, om er maar een paar te noemen.

Sinds CSS Color Module Level 4 is de syntax voor kleurendefinitie veranderd. Er zijn bijvoorbeeld geen komma's meer nodig voor rgb() en hsl() color: hsl(180deg, 100%, 50%) kan nu zo: color: hsl(180deg 100% 50%). Dit wordt ondersteund door een goede baseline van moderne browsers. Maar wat betekent dat eigenlijk voor oude browsers?

👉 Hieronder krijg je een aantal tips en vragen voor kleur in CSS. Dit kan je gebruiken voor de code afspraken die jullie gaan maken voor de styleguide van jullie opdracht.

HSL()

Een meer intuitieve manier van kleur definieren is met hsl(), in plaats van rgb waardes wordt een kleur gedefinieerd door de hue, saturation en lightness.

HSL color wheel Codepen van WebSanity

hsl() geeft niet alleen een meer gevoelsmatige manier van kleuren definieren. Het zorgt er ook voor dat je met behulp van custom properties eenvoudig verschillende states van een button kan coderen.

button {
  --h: 100; 
  --s: 50%; 
  --l: 50%; 
  --a: 1; 
  background: hsl(var(--h) var(--s) var(--l) / var(--a)); 
  
  &:hover {
    --l: 75%;  /* Change lightness */ 
  }
  
  &:focus, &:active  {  
    --s: 75%;  /* Change saturation */ 
  }
  
  &[disabled] {   
    --s: 0%; /* Make look disabled */
    --a: 0.5; 
  }
}

👉 Bedenk met je team hoe je de kleuren in CSS gaan toepassen.

Extra bronnen

New CSS Color Functions

Sinds een paar jaar zijn er meerdere kleuren functies bijgekomen. Zoals lab() en lch(). Hiermee kan je ook meer kleuren laten zien dan met rgb() en hsl().

lch-kleuren worden anders opgebouwd dan bijvorbeeld hsl-kleuren, dat geeft soms mooiere en frissere kleuren

Omdat schermen steeds beter worden en meer kleuren kunnen laten zien zijn er nieuwe 'color spaces' bedacht zoals Display-P3. Als een gebruiker een modern scherm heeft dan kan je veel mooiere, heldere kleuren tonen.

het kleurenspectrum van Display-P3 is een stuk groter dan van rgb

👉 Kan jouw scherm deze kleuren laten zien? Hoe zit het met browser ondersteuning? Hoe zou je dit kunnen gebruiken voor jullie opdracht?

Extra bronnen

light-dark() color function

Met de light-dark() color function kan je met een shorthand twee kleuren bepalen die worden getoond als een light of dark mode staat ingesteld.

:root {
  color-scheme: light dark;
}
body {
  color: light-dark(#333b3c, #efefec);
  background-color: light-dark(#efedea, #223a2c);
}

Probeer het zelf: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark

👉 Hoe kan je de light-dark() color function gebruiken voor jullie opdracht? Gebruik dit in de code afspraken die jullie moeten maken.

Fallback

CSS is constant in ontwikkeling. Er zijn hele vette kleuren technieken bijgekomen, de notaties veranderen, browsers veranderen ... wat betekent dat voor de toegankelijkheid? Hoe bouw je robuste CSS én omarm je de veranderingen?

Zo is het bijvoorbeeld niet meer nodig om kommas te gebruiken in rgb() en hsl() functies. En sinds een jaar ondersteunen alle grote moderen browsers dit. Maar niet iedereen heeft een moderne browser. De meeste "normale" mensen weten niet eens wat deze zin betekent ...

👉 Bedenk voor jullie styleguide een CSS strategie waarmee je de nieuwe kleurenschema's en ontwikkelingen kan toepassen, terwijl de moeder van Koop nog steeds jullie website goed kan bekijken.

✒️ Leervragen

Zet de antwoorden in je learning journal:

  • Welke bronnen uit het onderdeel Color in CSS ga je later nog eens lezen?
  • Onderzoek een robuste code strategie voor het toepassen van moderne color functions en kleurenspectra, mét een nette fallback voor browsers die dit niet ondersteunen.