K_WEB-Grafisch_ontwerp_voor_webdevelopment-Les_2
Grafisch ontwerp voor webdevelopment
Keuzedeel les 2: Lay-out
1
Items in this lesson
Grafisch ontwerp voor webdevelopment
Keuzedeel les 2: Lay-out
1
2
Inhoud
Deze les behandelen we:
Terugblik
Stappenplan Designproject
Lay-out
Wireframe
Call to action (CTA)
Website, app of beiden?
Leren kijken
Programma van eisen
Samenvattend
Bronnen
Opdracht
Voortgang
Vragen?
3
Terugblik
Wat is "design" ook alweer?
Afbeelding: Oppenheimer (2023)
Design by Deniz Aktay
4
Design is...
Uiterlijk & functie
Hoe het eruit ziet (UI Design)
De gebruikerservaring (UX Design)
En dus niet alleen maar "mooi".
Stappenplan Designproject
5
Stappenplan Designproject
5
Stappenplan Designproject
5
Stappenplan Designproject
5
Stappenplan Designproject
5
Een voorbeeld van UI en UX Design
6
Overthinking design
Wat verwacht je dat er gebeurt?
Een voorbeeld van UI en UX Design
6
Overthinking design
Overthinking design betekent dat je extra aandacht besteedt aan kleine details en onverwachte situaties om een ontwerp slimmer, gebruiksvriendelijker of verrassender te maken.
7
Lay-out
Wat & waar?
Wat staat er op de pagina?
Wat is het belangrijkste?
Welke elementen heb ik nodig?
Zet de titel op de juiste plek
8
Proof-of-concept
Onderzoek
Testing
Ontwerp
Lay-out
Voorbeeld van een wireframe
9
Wireframe
Lay-out vs. wireframe
De Lay-out leg je vast in een wireframe. Dit is een snelle schets en kan je zien als de eerste stap van je ontwerp.
10
CTA
Call to action
Een CTA (Call to Action) is een
duidelijke oproep die de gebruiker
aanspoort om iets te doen, zoals
‘Bestel nu’, ‘Aanmelden’ of
‘Meer informatie’.
11
Website, app of beide?
Responsive design
Een website op desktop ziet er anders uit dan bijvoorbeeld op mobile.
wat voor verwachtingen heb je bij een Lay-out?
Bijvoorbeeld: menu staat altijd bovenaan
12
Disturbia (2007)
13
Leren kijken
Afkijken is ook kijken
Goed design begint met goed leren kijken. Door websites en interfaces bewust te bekijken, leer je herkennen wat werkt - en vooral waarom. Waarom voelt een interface duidelijk en prettig, terwijl een andere juist onrustig of verwarrend aanvoelt? Kijk naar keuzes in kleur, typografie, compositie, ruimte, interactie en gebruiksgemak. Verzamel inspiratie, analyseer wat anderen goed doen en durf daaruit te leren. Zoals Austin Kleon beschrijft in Steal Like an Artist: goede ontwerpers creëren niet vanuit het niets, maar bouwen voort op wat er al is.
14
20
minute
00
second
Leren kijken...
Vorige lessen heb je gezocht naar 3 inspirerende portfolio websites, maar inmiddels
heb je natuurlijk een hoop nieuwe inzichten gekregen met betrekking tot UI en UX design.
Maak een plakboek (Word), met daarin screenshots van goede/mooie ontwerpen.
Gebruik voor je plakboek het Plakboek_formulier.docx op ItsLearning
Opzettelijk slecht UI Design https://museum.lingscars.com
Interviewen helpt je bij je PvE
15
Programma
van eisen
Jouw rol in het ontwerpproces
Een goed ontwerp begint met duidelijke afspraken. Samen met de klant bepaal je wat de website moet kunnen en waar deze aan moet voldoen. Deze afspraken leg je vast in het Programma van Eisen (PvE), zodat iedereen weet wat het eindresultaat moet worden.
Als ontwerper zal je de opdrachtgever ook moeten helpen bij het stellen van de juiste vragen, gezien de opdrachtgever vaak niet technisch onderlegd is.
16
Samenvattend
Waar hebben we het over?
Gebruik wireframe(s)/snelle schetsen om de lay-out helder te krijgen.
Website, app of beiden?
Wat verwacht de gebruiker, wat is de standaard?
Wat is het belangrijkste op de pagina.
Gebruik CTA's om de gebruiker te sturen.
Afbeelding: Interstellar (2014)
17
Bronnen
Meer over "design"
De boeken "Steal like an artist" van Austing Kleon en "Something's off" van
Virgil Abloh zijn aanraders als het gaat om design processen.
18
Portfolio opdracht
Je stelt een duidelijk en logisch Programma van Eisen (PvE) op voor je portfolio. Hierin beschrijf je de functionele eisen, zoals welke informatie en mogelijkheden de gebruiker op de website moet hebben, de niet-functionele eisen, zoals responsive design, gebruiksvriendelijkheid en accessibility, en de visuele eisen, zoals de uitstraling, typografie, kleuren en consistentie van de interface.
Zie de opdracht op ItsLearning: Modules > K_WEB > Portfolio > Fase 2 - Programma van Eisen
O2: Fase 2 - Programma van Eisen
19
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
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
