week5 woensdag website 1

ICA

Re-design

Lammert Postma

lammert.postma@han.nl

Re-design

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