week5 woensdag website 1
TRANSCRIPT
2Opdracht
• Maak een magazine over het merk- ik.
• Maak een website ontwerp om je magazine te promoten
3Ontwerp een website
ntwerp de homepage en een pagina waar men jouw magazine kan bestellen.
4Ontwerpen van een website
oe ontwerp je een website?
5Hoe ontwerp ik een website
Jesse James Garrett
6Hoe ontwerp ik een website
7AJAX?
8Ajax!
AJAX Asynchronous JavaScript
and XHTML
9The Elements of UX-Design
10The Elements of UX-Design
11Ontwikkeling van het web
Web 1.0Get noise
Web 2.0Make noise
Web 3.0Filter the noise
Web 4.0…
12Ontwikkeling van het web
De interactie op het web is steeds rijker
13Ontwikkeling van het web
Niet meer gebonden aan een computer
14Ontwikkeling van het web
Locatie onafhankelijk
15The Elements of UX-Design
16Strategie
Bepaal de strategie
17Strategie
• Wat is het doel• Wat zijn de succesfactoren• Wat zijn de gebruikersbehoeften
18Strategie
Wat is het doel
• Het verhogen van de conversie van onze producten
• Bezoekers informeren over onze nieuwe diensten
19Strategie
Bepaal de succesfactoren
• Verhoging van de conversie met 2%
• Bij een steekproef onder onze bezoekers is 25% op de hoogte van onze nieuwe dienst
20Strategie
Wat wil de gebruiker
oel afstemmen op de behoefte van je doelgroep / gebruiker
21Strategie
PersonaDeze persoon staat representatief
voor een gebruikersgroep
22Scope
Bepaal de scope
23Scope
The work that needs to be accomplished to deliver a product service or result with the specified features and functions."
24Waarom een scope
odat je weet wat je wel bouwt maar ook wat je niet bouwt
25Scope
efinieer de functionaliteiten
26Scope
efinieer de
ontent elementen
27Structuur
Bepaal de structuur
28Structuur
•nteractie model
•nformatie architectuur
•eam structuur en rollen
29Structuur
nteractie model
oe reageert het systeem op de gebruiker.
30Structuur
31Structuur
nformatie architectuur
et rangschikken van de content in het ‘informatie domein’
32Structuur
eam structuur en rollen
epaal wie welke rol heeft binnen het project.
33Structuur
34Skeleton
Bepaal het raamwerk
35Skeleton
•nformation Design
•nterface Design
•avigation Design
36Skeleton
nformation Design
resenteren van informatie zodat het de gebruiker ondersteund bij het begrijpen de informatie/systeem.
37Skeleton
nformation Design
38Skeleton
nformation Design
39Skeleton
nterface Design
et rangschikken van interface elementen zodat de gebruiker met het systeem kan interacteren.
40Skeleton
Interface Design
41Skeleton
Interface Design
42Skeleton
avigation Design
ntwerp van de navigatie over meerdere schermen binnen de informatie architectuur
43Skeleton
44Skeleton
Bepaal het design
45Design
•ye tracking
•ontrast en uniformiteit
•onsistentie
•leur en Typografie
•tyleguides
46Design
47Design
48Design
49Design