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