Les 3 - Kleurenschema en webtypografie

Functioneel Ontwerp
Les 3: Kleurenschema en webtypografie



Software Developer
Cohort 2023

1 / 16
next
Slide 1: Slide
ICTMBOStudiejaar 1

This lesson contains 16 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 45 min

Items in this lesson

Functioneel Ontwerp
Les 3: Kleurenschema en webtypografie



Software Developer
Cohort 2023

Slide 1 - Slide

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

Slide 2 - Slide

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

Slide 3 - Slide

Wat hebben we de vorige les gedaan?

Slide 4 - Open question

Kleuren en betekenissen
Kleuren brengen gevoel met 
zich mee.

Slide 5 - Slide

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

Slide 6 - Slide

Kleurenschema maken
Begin met je basiskleur(en)
Daarna komen je accentkleuren
Zet bij elke kleur de kleurcode erbij (RGBA, HEX)
Bekijk de voorbeelden:

Slide 8 - Slide

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:




Slide 9 - Slide

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.

Slide 10 - Slide

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/



Slide 11 - Slide

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

Slide 12 - Slide

Wat vond je van deze les?
😒🙁😐🙂😃

Slide 13 - Poll

Tips en Tops?

Slide 14 - Open question

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.

Slide 15 - Slide

Slide 16 - Slide