K_WEB-Grafisch_ontwerp_voor_webdevelopment-Les_3
Grafisch ontwerp voor webdevelopment
Keuzedeel les 3: Moodboard, kleur & fonts
1
Items in this lesson
Grafisch ontwerp voor webdevelopment
Keuzedeel les 3: Moodboard, kleur & fonts
1
2
Inhoud
Deze les behandelen we:
Terugblik
Moodboard
Kleuren
Fonts
Trends
Opdracht
Voortgang
Vragen?
Terugblik, zet op de juiste plek
3
Proof-of-concept
Onderzoek
Testing
Ontwerp
Lay-out
Stappenplan Designproject
3
Portfolio opdracht
Stappenplan Designproject
4
Portfolio opdracht
5
Wireframes (Lay-out)
Links een getekend wireframe, rechts een low fidelity wireframe
6
Moodboards (Stijl)
Kleuren(palet), foto's/afbeeldingen, lettertypes & vormen
7
Ontwerp
Je ontwerp komt voort uit je Lay-out (wireframes)+ Stijl (moodboard)
Een moodboard geeft een impressie
8
Moodboard
Sfeer, gevoel & impressie
Je moodboard geeft de sfeer van je ontwerp aan, dit doe je met kleuren(palet), foto's/afbeeldingen, lettertypes & vormen.
Je moodboard ligt nog niet exact vast, dit komt later wel.
*Ademt sfeer, dus niet zomaar een wit a4tje
9
Kleur
Kleurgebruik bepaalt de impressie en draagt
bij aan de gewenste sfeer.
Afbeelding: Interstellar (2014)
Lees "Branding_colors.pdf"
10
Wat is volgens jou de belangrijkste "take-away" van dit stuk?
15
minute
00
second
Wat is het gevoel van deze kleur?
11
11
Positief
Logisch redeneren
Intelligentie
Vertrouwen
Stabiliteit
Loyaal
Negatief
Conservatief
Kil
Afstandelijk
Zakelijk
Status en macht
Wat is het gevoel van deze kleur?
12
12
Positief
Warmte
Opwinding
Enthousiasme
Kracht
Negatief
Agressief
Dominant
Ongeduldig
Provoceren
Wat is het gevoel van deze kleur?
13
13
Positief
Genezing
Vruchtbaarheid
Vernieuwing
Levendig
Negatief
Verveling
Jaloezie
Bederf
Verval
Wat is het gevoel van deze kleur?
14
14
Positief
Levenslust
Plezier
Geluk
Zelfvertrouwen
Negatief
Irritatie
Angst
Overprikkeling
Nervositeit
Wat is het gevoel van deze kleur?
15
15
Positief
Opbeuren
Creativiteit
Luxe
Comfort
Negatief
Introversie
Minderwaardigheid
Decadent
Goedkoop
3
Kleurharmonie
De mens zoekt van nature naar evenwicht. Wanneer kleuren dissonant zijn, ontstaat er onbewuste spanning of onrust
Afbeelding: Moonlight (2016)
Monochromatic kleurenpalet.
16
Basisregel
Maak het jezelf niet te moeilijk
Kies één kleur en maak daarop variaties om toch diepgang te creëren in je ontwerp.
Hover, disabled, focus & active state variaties.
17
Samenvattend
Wat weten we nu over kleur?
Kleur heeft betekenis en wekt een gevoel op.
Basisregel: kies één themakleur voor je project en maak daarop variaties.
Wil je kleuren combineren gebruik tools zoals coolors.co, alleen als je weet wat je doet!
Afbeelding: Grand Budapest Hotel (2014)
18
Typography/fonts
Alles over tekst in design
Fonts/lettertypes
Font eigenschappen (style, weight)
Font pairing
Afbeelding: typetype.org
19
(Sans)-Serif
En wat is het verschil
Serif-lettertypen hebben kleine voetjes
of schreefjes aan het uiteinde van de
letters, wat een klassieke en formele
uitstraling geeft. Sans serif-lettertypen
hebben deze schreefjes niet en ogen
daardoor strakker, moderner en vaak
eenvoudiger.
CRT monitor met lagere resolutie.
20
Serif
Digitale leesbaarheid
Serif werd initieel vooral gebruikt voor druk/printwerk, omdat dit soort lettertypes op schermen slechter leesbaar waren door bijvoorbeeld een lagere resolutie.
Een serif lettertype.
Een Sans-Serif lettertype (Poppins).
21
Sans-Serif
Vroeger dus vooral digitaal
Tegenwoordig is het prima om zowel
Serif als Sans-Serif lettertypes te
gebruiken of zelfs te combineren,
maar let wel op de leesbaarheid!
22
Serif betekent niet per se slecht leesbaar
En Sans-Serif betekent niet per se goed leesbaar
Font: All Character by Zarma Type Foundry
Arial als alternatief op helvetica.
23
Helvetica vs. Arial
Spot the difference
Arial en Helvetica lijken sterk op elkaar, omdat Arial in de jaren 80 door Microsoft werd ontwikkeld als een alternatief voor Helvetica. Arial is gebaseerd op de vorm en verhoudingen van Helvetica, maar werd op verschillende punten aangepast om beter aan te sluiten bij schermweergave en digitale toepassingen. Hierdoor zijn de twee lettertypen op het eerste gezicht moeilijk van elkaar te onderscheiden, al zijn er subtiele verschillen in bijvoorbeeld de vorm van de letters en de spatiëring.
Verschillende font weights zoals je ze kent van css.
24
Font weight
Helpt bij visuele hiërarchie
Font-weight bepaalt hoe dik of dun de letters van een lettertype worden weergegeven. Een lage font-weight, zoals 300, geeft een lichte en subtiele uitstraling, terwijl een hogere waarde, zoals 700 of 800, zorgt voor dikkere en opvallendere tekst. Font-weight kan zo helpen om hiërarchie en nadruk in een ontwerp aan te brengen.
25
Samenvattend
Wat weten we nu over fonts?
Gebruik niet teveel fonts. Het liefst 1, maximaal 2, of verschillende font weights.
Let op de leesbaarheid van je lettertype(s).
Serif (schreef) vs. Sans-Serif (schreefloos).
Kijk eens naar voorbeelden op https://fontpair.co/ (Google Web fonts ready)
Afbeelding: Graffiti van Seen (New York)
26
Trends
Fashion, maar dan op het web...
Webdesign en webdevelopment ontwikkelen zich
voortdurend. Trends zoals minimalisme, opvallende
typografie, animaties, toegankelijkheid en AI spelen
een steeds grotere rol. De focus ligt daarbij steeds
meer op een goede gebruikerservaring, waarbij
design, techniek en functionaliteit samenkomen.
Afbeelding: https://www.theoutline.com
Huidige trends: interactieve 3D elementen
27
Huidige trends: levendige kleurenpaletten
28
Huidige trends: gedurfde typografie
29
30
15
minute
00
second
Op zoek naar trends
Zoek in 15 minuten online naar 3 actuele webdesigntrends en 3 trends die inmiddels niet meer hip of veelgebruikt zijn. Noteer per trend kort waarom deze volgens jou wel of niet meer relevant is.
Afbeelding: het oude design van Reddit.
31
Portfolio opdracht
Maak per pagina van je portfolio eerst een wireframe en werk deze daarna volledig visueel uit in bijvoorbeeld Figma. Let hierbij op onder andere: layout, grid, spacing, typografie, kleuren, navigatie, buttons, cards, formulieren en hover/focus states.
Zie de opdracht op ItsLearning: Modules > K_WEB > Portfolio > Fase 3 - Ontwerpen
O3: Fase 3 - Ontwerpen
32
Voortgang Keuzedeel Grafisch ontwerp voor webdevelopment
H1: Wat is design?
H2: Lay-out
H3: Moodboard, kleur & fonts
H4: Styleguides
H5: Zoomlevels & designtips
H6: Probleemstellingen, PvE & UX Design
H7: Bestandsformaten & empty states
H8: Acceptatietest, iteraties & micro-interacties
33
Vragen?
Neem contact op met je docent
Quincy
Microsoft Teams: Quincy Norbert
E-mail: qn00@curio.nl
Tim
Microsoft Teams: Tim Lutt
E-mail: tl10@curio.nl
