Les 3 - Kleurenschema en webtypografie

• ICT
• MBO
• Studiejaar 1

Functioneel Ontwerp

Les 3: Kleurenschema en webtypografie

Software Developer

Cohort 2023

What to do?

• Leerdoelen
• Vorige les?
• Waarom zijn de juiste kleuren zo belangrijk?
• Kleuren en betekenissen
• Hoe kies je de juiste kleur?
• Tools
• Kleurenschema
• Wat is webtypografie?
• Soorten fonts
• Fonts van Google
• Lettertype uitkiezen
• Feedback
• De opdracht

Leerdoelen

• Je onderzoekt welke kleuren je wilt gebruiken op jouw website.
• Je documenteert de kleuren in het functioneel ontwerp
• Je onderzoekt welke welke lettertypes en groottes je wilt gebruiken in je website en op welke elementen je dit gaat toepassen
• Je documenteert de webtypografie in het functioneel ontwerp

Wat hebben we de vorige les gedaan?

Kleuren en betekenissen

Kleuren brengen gevoel met 

zich mee.

Hoe kies je de juiste kleur?

• Denk aan de doelgroep voor wie je jouw website gaat maken
  
• Doe inspiratie op, bezoek verschillende websites
  
• Begin met één of meerdere basiskleuren en maak gebruik van de kleuren en betekenissen daarvan
  
• Kijk welke kleuren bij jouw basiskleur passen, dit kan je zelf uitzoeken of een tool voor gebruiken
  

Tools

https://picular.co/

https://color.adobe.com/

https://www.colorion.co/

https://encycolorpedia.nl/

https://coolors.co/

Kleurenschema maken

Begin met je basiskleur(en)

Daarna komen je accentkleuren

Zet bij elke kleur de kleurcode erbij (RGBA, HEX)

Bekijk de voorbeelden:

Wat is webtypografie?

Typografie is de kunst van het vormgeven van tekst

Webtypografie betreft het gebruik van lettertypes, lettergroottes, leesbaarheid en structuur van teksten op het Web

Nu we een zeer groot deel van onze dagelijkse informatie niet meer vanaf papier tot ons nemen, maar via beeldschermen van laptops, tablets en smartphones, heeft webtypografie dus ook een grote invloed gekregen

Voorbeeld:

Soorten fonts

Er zijn 3 soorten fonts: sans-serif (zonder schreef), serif (met schreef) en vaste breedte. 

Op gedrukte pagina’s hebben lettertypes met schreef de voorkeur.

Schreefloze lettertypes komen het beste over op een beeldscherm. De reden is simpel: het aantal gebruikte pixels op een beeldscherm is (veel) lager.

Fonts van Google

• Op de website van Google Fonts kan je veel verschillende lettertypes vinden, deze kan je ook gratis gebruiken.
  
• Je kan de lettertypes gebruiken door middel van een <link> in je HTML document te zetten
  
• https://fonts.google.com/
  

Lettertype uitkiezen

• Zoek uit welke lettertypes je wilt hebben op je website
  
• Ga na hoeveel verschillende koppen je hebt
  
• Kies een lettertype voor je koppen
  
• Kies een lettertype voor je paragrafen
  
• Schrijf ze zo op:
  

Element	Lettertype	Grootte
<h1>	Georgia	Standaard
<h2>	Roboto Slab	Standaard
<p>	Raleway	12px

Wat vond je van deze les?

😒🙁😐🙂😃

Tips en Tops?

De Opdracht!

1. Bij het Kleurenschema:

• Schrijf op hoe je op de kleuren bent gekomen
• Schrijf op waarom je voor deze kleuren hebt gekozen
  
• Zet je kleurenschema daaronder
  

1. Bij webtypografie

• Schrijf op hoe je op de lettertypes bent gekomen
• Schrijf op waarom je voor deze lettertypes hebt gekozen
  
• Zet je tabel met lettertypes daaronder

Zet het in je Functioneel Ontwerp en lever het in op teams.