K_WEB-Grafisch_ontwerp_voor_webdevelopment-Les_1
Grafisch ontwerp voor webdevelopment
Keuzedeel les 1: "Wat is design?"
1
Items in this lesson
Grafisch ontwerp voor webdevelopment
Keuzedeel les 1: "Wat is design?"
1
2
Inhoud
Deze les behandelen we:
Inhoud keuzedeel
Wat is design?
Dark patterns
Opdracht
Voortgang
Vragen?
3
Inhoud keuzedeel
Wensen van de klant achterhalen
Eenvoudig ontwerpvoorstel maken
Het ontwerp realiseren / Testverslag
4
Inhoud keuzedeel
Wensen van de klant achterhalen: Klantcontact, Interviewen, Trends
Eenvoudig ontwerpvoorstel maken
Het ontwerp realiseren / Testverslag
4
Inhoud keuzedeel
Wensen van de klant achterhalen: Klantcontact, Interviewen, Trends
Eenvoudig ontwerpvoorstel maken: Kleuren, Fonts, Software
Het ontwerp realiseren / Testverslag
4
Inhoud keuzedeel
Wensen van de klant achterhalen: Klantcontact, Interviewen, Trends
Eenvoudig ontwerpvoorstel maken: Kleuren, Fonts, Software
Het ontwerp realiseren / Testverslag: Maken in ontwerptool (Figma), Accessibility, Testen, HTML, CSS, Javascript
Een voorbeeld van UI en UX Design
5
Inhoud keuzedeel
1,5 blok (24 weken)
2,5 uur per week
± 1 uur huiswerk per week
Aan het einde een oplevering/examen
6
"Wat is design?"
https://awwwards.com
7
de·sign (de/het; m en o)
1 vormgeving
https://awwwards.com
De desktopapplicatie van Discord
8
De website van de Volkskrant
9
De website van Apple
10
Voorbeeld van goede UI/UX Design
11
13
UX (User Experience)
De ervaring van de gebruiker: hoe soepel en logisch werkt het?
Focus op gebruiksgemak, structuur en gebruikersonderzoek
Vraag: "Is het fijn en makkelijk om te gebruiken?"
UX = hoe fijn het is om er dagelijks in te wonen (indeling, doorloop, comfort)
UI vs. UX Design
UI (User Interface)
Het uiterlijk van een product: kleuren, lettertypes, knoppen, iconen
Focus op visueel ontwerp en vormgeving
Vraag: "Ziet het er mooi en duidelijk uit?"
UI = de verf, meubels en styling van een huis
Afbeelding: Relativiteit door M.C. Escher (1953)
14
Dark Patterns
De kracht die een webontwerper kan hebben.
Dark patterns zijn misleidende ontwerpkeuzes in websites of apps.
Ze sturen gebruikers bewust richting keuzes die vooral voordelig zijn voor het bedrijf.
Denk aan verborgen kosten, verwarrende knoppen of moeilijk vindbare opzegopties.
Het doel is vaak om de gebruiker onbewust tot een bepaalde actie te bewegen.
Afbeelding: Toy Story (1995)
Dark patterns in webdesign
15
16
Ook Google
Dark patterns worden niet enkel ingezet door kleine bedrijven
"Google Workspace forcing users to sign up for the expensive free trial before downgrading to cheaper options"
17
Ga zelf opzoek naar voorbeelden van Dark Patterns...
Let erop, echte werkende voorbeelden, dus geen screenshots die je online tegen komt. Kijk bijvoorbeeld ook in je mail, of probeer je af te melden van nieuwsbrieven.
20
minute
00
second
Afbeelding: Shutter Island (2010)
18
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
19
Portfolio opdracht
Je onderzoekt je doelgroep, het doel van je portfolio en relevante UI/UX-principes en trends. Daarnaast analyseer je minimaal 3 bestaande portfolio’s of websites die je inspirerend vindt. Per website beschrijf je wat goed en minder goed werkt, welke ontwerpkeuzes opvallen en welke elementen je wel of niet wilt meenemen in je eigen ontwerp.
Zie de opdracht op ItsLearning: Modules > K_WEB > Portfolio > Fase 1 - Onderzoeken
O1: Fase 1 - Onderzoeken
20
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
