Cours Ecole des Gobelins CRMA - année 2009-2010

1. Design d’interface
W i r e f r a m e & P r o t o t y p e s
Octobre 2009 - David Raichman - Senior UX Designer @ OgilvyInteractive

2. SOMMAIRE
Design d’interface
! Introduction
! Enjeux
! Processus de conception et UCD
! Interfaces et design d’information
! Typologie des interfaces

3. SOMMAIRE
Design d’interface
! Wireframe
! Définition et usages
! Contraintes technologiques
! Gabarits, zoning et grilles
! Contenus
! Outils
! Composants d’interface
! Design d’interaction
! Exercices et annexe

4. SOMMAIRE
Design d’interface
! Prototypes
! Objectifs
! Enjeux
! Outils et techniques
! Tests utilisateurs

5. SOMMAIRE
Design d’interface
! Références
! Bibliographie
! Webographie

6. Design d’interface
! Introduction
! Enjeux
! Processus de conception et UCD
! Interfaces et design d’information
! Typologie des interfaces

7. INTRODUCTION > Enjeux
Industrialisation du digital
! Nouveau paradigme métiers
Années 90
+
Graphiste(s) Développeur(s)
Chef de projet

8. INTRODUCTION > Enjeux
Industrialisation du digital
! Nouveau paradigme métiers
Années 2000 : naissance de l’UX
+ + + +
Graphiste User research Architecte Ergonome Développeur
expert
d’information
+
Chef de projet Designer Designer
d’interface d’interaction

9. INTRODUCTION > Enjeux
Industrialisation du digital
! Nouveau paradigme métiers
Années 2000 : naissance de l’UX
+ + + +
Graphiste User research Architecte Ergonome Développeur
expert
d’information
+
Chef de projet Designer Designer
d’interfaceDesigner
UX d’interaction

10. INTRODUCTION > Enjeux
Industrialisation du digital
! Nouveau paradigme métiers
! Nouvelle méthodologie
! Techniques et outils de conception à
inventer
! Nouvelle vague d’applications de conception
! Détournement des logiciels de réalisation graphique,
bureautique, ingénierie...
! Prise en compte les contraintes de planning/budget/
faisabilité/utilisabilité

11. Design d’interface
! Introduction
! Enjeux
! Processus de conception et UCD
! Interfaces et design d’information
! Typologie des interfaces

12. INTRODUCTION > Processus de conception et UCD
UCD = User Centred Design
! Faire participer les utilisateurs dans le
processus de conception
! Profiler les utilisateurs (Personas)
! Scénariser les parcours utilisateurs
! Focaliser sur les tâches des utilisateurs
! Conduire des tests utilisateurs

13. INTRODUCTION > Processus de conception et UCD
...
S T R AT É G I E Besoins utilisateurs
Objectifs
...
Spécifications fonctionnelles
Architecture d’information
...
C O N C E P T I O N Design d’interface
Design d’Interaction
Design visuel
R É A L I S AT I O N

14. INTRODUCTION > Processus de conception et UCD
...
S T R AT É G I E Besoins utilisateurs
Objectifs
...
Spécifications fonctionnelles
Architecture d’information
...
C O N C E P T I O N Design d’interface
Design d’Interaction
Design visuel
R É A L I S AT I O N

15. INTRODUCTION > Processus de conception et UCD
...
S T R AT É G I E Besoins utilisateurs
Objectifs
...
Spécifications fonctionnelles
Architecture d’information
...
C O N C E P T I O N Design d’interface
Design d’Interaction
Design visuel
R É A L I S AT I O N

16. INTRODUCTION > Processus de conception et UCD
...
S T R AT É G I E Besoins utilisateurs
Objectifs
...
Spécifications fonctionnelles
Architecture d’information
...
C O N C E P T I O N Design d’interface
Design d’Interaction
Design visuel
R É A L I S AT I O N

17. INTRODUCTION > Processus de conception et UCD
...
S T R AT É G I E Besoins utilisateurs
Objectifs
...
Spécifications fonctionnelles
Architecture d’information
...
C O N C E P T I O N Design d’interface
Design d’Interaction
Design visuel
R É A L I S AT I O N

18. INTRODUCTION > Processus de conception et UCD
...
S T R AT É G I E Besoins utilisateurs
Objectifs
...
Spécifications fonctionnelles
Architecture d’information
...
Optimisations
C O N C E P T I O N Design d’interface
Test Utilisateur
Design d’Interaction
Prototypage
Optimisations
Design visuel
R É A L I S AT I O N
Test Utilisateur
Prototypage

19. INTRODUCTION > Processus de conception et UCD
...
S T R AT É G I E Besoins utilisateurs
Objectifs
...
Spécifications fonctionnelles
Architecture d’information
...
Optimisations
C O N C E P T I O N Design d’interface
PÉRIMÈTRE DU COURS Test Utilisateur
Design d’Interaction
Prototypage
Optimisations
Design visuel
R É A L I S AT I O N
Test Utilisateur
Prototypage

20. Design d’interface
! Introduction
! Enjeux
! Processus de conception et UCD
! Interfaces et design d’information
! Typologie des interfaces

21. INTRODUCTION > Interfaces et design d’information
Interactions Homme - Ordinateur
Input Utilisateur
Interface
Homme Ordinateur
Output Système

22. INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction

23. INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction

24. INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction

25. INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction

26. INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction

27. INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction

28. INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction

29. INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction

30. INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction

31. INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction

32. INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction

33. INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction

34. INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction

35. INTRODUCTION > Interfaces et design d’information
Echelle d’iconicité
Re
lat
ion
st
op
Iconicité maximale og
rap
hiq
Objet lui-même ue
s
Iconicité minimale

36. INTRODUCTION > Interfaces et design d’information
Echelle d’iconicité
Re
lat
ion
st
op
Iconicité maximale og
rap
hiq
Objet lui-même ue
s
Schéma anatomique
Iconicité minimale

37. INTRODUCTION > Interfaces et design d’information
Echelle d’iconicité
Re
lat
ion
st
op
Iconicité maximale og
rap
hiq
Objet lui-même ue Re
s
top latio
olo ns
Schéma anatomique giq
ues
Schéma de principe
Iconicité minimale

38. INTRODUCTION > Interfaces et design d’information
Echelle d’iconicité
Re
lat
ion
st
op
Iconicité maximale og
rap
hiq
Objet lui-même ue Re
s
top latio
olo ns
Schéma anatomique giq
ues
Schéma de principe
Re
lat
ion
Schéma de formulation sl
og
iqu
es
Iconicité minimale

39. INTRODUCTION > Interfaces et design d’information
Echelle d’iconicité
Re
lat
ion
st
op
Iconicité maximale og
rap
hiq
Objet lui-même ue Re
s
top latio
olo ns
Schéma anatomique giq
ues
Schéma de principe
Re
lat
ion
Schéma de formulation sl
og
iqu
es
Schéma en espace complexe
Iconicité minimale

40. INTRODUCTION > Interfaces et design d’information
Echelle d’iconicité
Re
lat
ion
st
op
Iconicité maximale og
rap
hiq
Objet lui-même ue Re
s
top latio
olo ns
Schéma anatomique giq
ues
Schéma de principe
Re
lat
ion
Schéma de formulation sl
og
iqu
es
Schéma en espace complexe
Visualisation de données
Iconicité minimale

41. Design d’interface
! Introduction
! Enjeux
! Processus de conception et UCD
! Interfaces et design d’information
! Typologie des interfaces

42. INTRODUCTION > Typologie des interfaces
Implementation-centred
+ -
Facile à construire Apprentissage long
- Public expert

43. INTRODUCTION > Typologie des interfaces
Implementation-centred
+ -
Facile à construire Apprentissage long
- Public expert

44. INTRODUCTION > Typologie des interfaces
user-centred / Métaphorique
+ -
intuitive contextuelle
aucun
apprentissage utopique

45. INTRODUCTION > Typologie des interfaces
user-centred / Métaphorique
+ -
intuitive contextuelle
aucun
apprentissage utopique

46. INTRODUCTION > Typologie des interfaces
user-centred / Métaphorique
w w w. s o u t h w e s t . c o m ( 1 9 9 9 )
+ -
intuitive contextuelle
aucun
apprentissage utopique

47. INTRODUCTION > Typologie des interfaces
user-centred / Métaphorique
+ -
intuitive contextuelle
aucun
apprentissage utopique

48. INTRODUCTION > Typologie des interfaces
user-centred / Métaphorique
+ -
intuitive contextuelle
aucun
apprentissage utopique

49. INTRODUCTION > Typologie des interfaces
user-centred / Métaphorique
+ -
intuitive contextuelle
aucun
apprentissage utopique

50. INTRODUCTION > Typologie des interfaces
user-centred / Métaphorique
+ -
intuitive contextuelle
aucun
apprentissage utopique

51. INTRODUCTION > Typologie des interfaces
user-centred / Métaphorique
+ -
intuitive contextuelle
aucun
apprentissage utopique

52. INTRODUCTION > Typologie des interfaces
user-centred / Métaphorique
+ -
intuitive contextuelle
aucun
apprentissage utopique

53. INTRODUCTION > Typologie des interfaces
user-centred / Métaphorique
+ -
intuitive contextuelle
aucun
apprentissage utopique

54. INTRODUCTION > Typologie des interfaces
user-centred / Idiomatique
+ -
modulaire apprentissage
interopérable court
interaction riche

55. INTRODUCTION > Typologie des interfaces
w w w. n i c k a d . c o m
user-centred / Idiomatique
+ -
modulaire apprentissage
interopérable court
interaction riche

56. INTRODUCTION > Typologie des interfaces
user-centred / Idiomatique
+ -
modulaire apprentissage
interopérable court
interaction riche

57. INTRODUCTION > Typologie des interfaces
user-centred / Idiomatique
i n p u t o u t p u t
naviguer, dessiner, idiomes
changer de section, trier
acheter
double-clic,
composées
checkbox, surbrillance
drag’n’drop, sélection
primitives
pointage, clic,
curseur, texte
drag, touche pressée

58. Design d’interface
! Wireframe
! Définition et usages
! Contraintes technologiques
! Gabarits, zoning et grilles
! Contenus
! Outils
! Composants d’interface
! Design d’interaction
! Exercices et annexe

59. WIREFRAME > Définition et usages
Le challenge
lipsum Lor
“Se em
natu d ut p
s e ersp
rror ic
iati sit iatis
volu und
om s und pta e o
natunis is e tem mn
is is
volu s err te “
Lorem
te
pta or s iati
tem it om s und
natunis is e
volu s err te iati
“Sed pta or s s
ut tem it omn unde
natus perspicia na is is
error
sit vo
tis un volutus err te
luptatede omnis ist pta or s
tem it
iat
is un m“ e
omnis de
lipsum lipsum natus iste iatis un
Lorem volup error sit
tatem
omnis de
natus iste
volup error sit
tatem
iatis un
omnis de
natus iste
volup error sit
“Sed ut perspiciatis unde omnis iste tatem
natus error sit voluptatem “
iatis unde iatis unde iatis unde
omnis iste omnis iste omnis iste
natus error sit natus error sit natus error sit
voluptatem voluptatem voluptatem
lipsum
xxxxxxx
•xxxxxxxx
•xxx
xxxxxxx
•xxxxxxxx xxxxxxx
•xxxxxx
•xxxxxxxx xxxxxxx
?
•xxxxxxx
xxxxxxx
xxxxxxx
RECHERCHE xxxxxxx
MA SELECTION
CONTACT
ACCUEIL
PLAN DU SITE
MENTIONS LEGALES
CREDITS
AUTRES SITES
3.0 4.0 5.0
PEAU YEUX KLORANE
3.1 4.1
5.1 ACTUALITES
GAMME GAMME
GAMME GAMME
GAMME GAMME 5.2 NOS ENGAGEMENTS
FICHE PLANTE 5.3 LA RECHERCHE
FICHE PLANTE
5.4 LA PHYTOFILIERE
3.1.1 4.1.1 5.5
FICHE PRODUIT FICHE PRODUIT DECOUVRIR
FICHE PRODUIT
FICHE PRODUIT FICHE PRODUIT
FICHE PRODUIT PLANTES REGION
QUESTIONS/ QUESTIONS/
REPONSES REPONSES
3.2 4.2
FICHES CONSEIL FICHES CONSEIL

60. WIREFRAME > Définition et usages
Définition
« Les wireframes sont des représentations visuelles
qui capturent à elles seules l’ensemble des décisions
stratégiques, fonctionnelles, d’architecture
d’information et d’ergonomie.»
Ils servent de référence pour le design graphique et pour le
développement du projet digital.
Ils contiennent différents niveaux de précision selon le
contexte.

61. WIREFRAME > Définition et usages
Degré de précision
Interactif
Low résolution Hi résolution
Statique

62. WIREFRAME > Définition et usages
Degré de précision
Interactif
Low résolution Hi résolution
Statique

63. WIREFRAME > Définition et usages
Degré de précision
Interactif
Low résolution Hi résolution
Sketching
Statique

64. WIREFRAME > Définition et usages
Degré de précision
Interactif
Low résolution Hi résolution
Sketching
Statique

65. WIREFRAME > Définition et usages
Degré de précision
Interactif
Low résolution Hi résolution
Sketching
Statique

66. WIREFRAME > Définition et usages
Degré de précision
Interactif
Prototype papier
Low résolution Hi résolution
Sketching
Statique

67. WIREFRAME > Définition et usages
Degré de précision
Interactif
Prototype papier
Low résolution Hi résolution
Sketching
Statique

68. WIREFRAME > Définition et usages
Degré de précision
Interactif
Prototype
papier
Low résolution Hi résolution
Sketching
Sketching
Statique

69. WIREFRAME > Définition et usages
Degré de précision
Interactif
Prototype
papier
Low résolution Hi résolution
Ecrans
Sketching
Sketching
(psd, jpg...)
Statique

70. WIREFRAME > Définition et usages
Degré de précision
Interactif
Prototype
papier
Low résolution Hi résolution
Ecrans
Sketching
Sketching
(psd, jpg...)
Statique

71. WIREFRAME > Définition et usages
Degré de précision
Interactif
Prototype
papier
Low résolution Hi résolution
Sketching
Sketching Ecrans
Statique

72. WIREFRAME > Définition et usages
Degré de précision
Interactif
Prototype Prototype digital
papier (HTML, Flash)
Low résolution Hi résolution
Sketching
Sketching Ecrans
Statique

73. WIREFRAME > Définition et usages
Degré de précision
Interactif
Prototype Prototype digital
papier (HTML, Flash)
Low résolution Hi résolution
Sketching
Sketching Mockup
Statique

74. WIREFRAME > Définition et usages
Degré de précision
Interactif
Prototype Prototype
papier digital
Low résolution Hi résolution
Sketching
Sketching Ecrans
Statique

75. WIREFRAME > Définition et usages
Degré de précision
Interactif
Prototype Prototype
papier digital
Low résolution Wireframes Hi résolution
Sketching Ecrans
Statique

76. WIREFRAME > Définition et usages
Degré de précision
Interactif
Prototype Prototype
papier digital
Low résolution Wireframes Hi résolution
NIDO Website - 1.1.1 Diary
Hi Lynn | My account | Log Out | Help
NIDO Home Moments Health Matters Our Range
My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker
John’s Family Diary TELL MY
FRIENDS NOW !
Edit friends list
Oscar Angelica
Show me All entries Starting from rst day | today Only highlights
Edit my pro le
12 Lorem ipsum et diliagt gentris sed etiam unique valor,
Your Friends (14) MAY melior paritus. Et uni soesu terrae submitta...
Recently added Si meliora est vede meccum !
3 You have new comments !
Mary, Ellen, Peter Everyday | 2 comments new
Family & Friends
View all
! Erin has accepted your Lorem ipsum et diliagt gentris sed etiam unique valor,
invitation
Comments 11
MAY melior paritus. Et uni soesu terrae submitta...
You have: 6 family members, 14
3
friends you have new comments! Si meliora est vede meccum !
> View all Everyday | 2 comments new
Your highlights
Slideshow 10 Lorem ipsum et diliagt gentris sed etiam
MAY unique valor, melior paritus. Et uni soesu
terrae submitta...
Health Matters
Everyday | 2 comments
Spotting & Treating
Food Allergies
08 Lorem ipsum et diliagt gentris sed etiam unique valor,
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
> How to know if your child Everyday | 2 comments new
is at risk
06 Lorem ipsum et diliagt gentris sed etiam unique valor,
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
Everyday | 2 comments
05 Lorem ipsum et diliagt gentris sed etiam unique valor,
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
Everyday | 2 comments
Contact Us Privacy Terms & privacy Copyrights Send to a friend
Sketching Ecrans
Statique

77. WIREFRAME > Définition et usages Hi Lynn | My account | Log Out | Help
Degré de précision NIDO Home Moments Health Matters Our Range
My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker
John’s Family Diary TELL MY
FRIENDS NOW !
Edit friends list
Oscar
Interactif
Angelica
Prototype Show me All entries Starting from rst day | today Only highlights Prototype
papier digital
Edit my pro le
12 Lorem ipsum et diliagt gentris sed etiam unique valor,
Your Friends (14) MAY melior paritus. Et uni soesu terrae submitta...
Recently added Si meliora est vede meccum !
Mary, Ellen, Peter Everyday | 2 comments new
View all
11 Lorem ipsum et diliagt gentris sed etiam unique valor,
Comments MAY melior paritus. Et uni soesu terrae submitta...
3 you have new comments! Si meliora est vede meccum !
Everyday | 2 comments new
Your highlights
Slideshow Lorem ipsum et diliagt gentris sed etiam
Wireframes
10
MAY unique valor, melior paritus. Et uni soesu
Low résolution Health Matters
terrae submitta... Hi résolution
Everyday | 2 comments
Spotting & Treating
Food Allergies
08 Lorem ipsum et diliagt gentris sed etiam unique valor,
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
> How to know if your child Everyday | 2 comments new
is at risk
06 Lorem ipsum et diliagt gentris sed etiam unique valor,
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
Everyday | 2 comments
05 Lorem ipsum et diliagt gentris sed etiam unique valor,
Ecrans
MAY melior paritus. Et uni soesu terrae submitta...
Sketching Si meliora est vede meccum !
Statique
Everyday | 2 comments
Contact Us Privacy Terms & privacy Copyrights Send to a friend

78. WIREFRAME > Définition et usages
Degré de précision
Interactif
Prototype Prototype
papier digital
Low résolution Wireframes Hi résolution
NIDO Website - 1.1.1 Diary
Hi Lynn | My account | Log Out | Help
NIDO Home Moments Health Matters Our Range
My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker
John’s Family Diary TELL MY
FRIENDS NOW !
Edit friends list
Oscar Angelica
Show me All entries Starting from rst day | today Only highlights
Edit my pro le
12 Lorem ipsum et diliagt gentris sed etiam unique valor,
Your Friends (14) MAY melior paritus. Et uni soesu terrae submitta...
Recently added Si meliora est vede meccum !
3 You have new comments !
Mary, Ellen, Peter Everyday | 2 comments new
Family & Friends
View all
! Erin has accepted your Lorem ipsum et diliagt gentris sed etiam unique valor,
invitation
Comments 11
MAY melior paritus. Et uni soesu terrae submitta...
You have: 6 family members, 14
3
friends you have new comments! Si meliora est vede meccum !
> View all Everyday | 2 comments new
Your highlights
Slideshow 10 Lorem ipsum et diliagt gentris sed etiam
MAY unique valor, melior paritus. Et uni soesu
terrae submitta...
Health Matters
Everyday | 2 comments
Spotting & Treating
Food Allergies
08 Lorem ipsum et diliagt gentris sed etiam unique valor,
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
> How to know if your child Everyday | 2 comments new
is at risk
06 Lorem ipsum et diliagt gentris sed etiam unique valor,
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
Everyday | 2 comments
05 Lorem ipsum et diliagt gentris sed etiam unique valor,
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
Everyday | 2 comments
Contact Us Privacy Terms & privacy Copyrights Send to a friend
Sketching Ecrans
Statique

79. WIREFRAME > Définition et usages
Degré de précision
Interactif
Prototype Prototype
papier digital
Low résolution Wireframes Hi résolution
NIDO Website - 1.1.1 Diary
Hi Lynn | My account | Log Out | Help
NIDO Home Moments Health Matters Our Range
My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker
John’s Family Diary TELL MY
FRIENDS NOW !
Edit friends list
Oscar Angelica
Show me All entries Starting from rst day | today Only highlights
Edit my pro le
12 Lorem ipsum et diliagt gentris sed etiam unique valor,
Your Friends (14) MAY melior paritus. Et uni soesu terrae submitta...
Recently added Si meliora est vede meccum !
3 You have new comments !
Mary, Ellen, Peter Everyday | 2 comments new
Family & Friends
View all
! Erin has accepted your Lorem ipsum et diliagt gentris sed etiam unique valor,
invitation
Comments 11
MAY melior paritus. Et uni soesu terrae submitta...
You have: 6 family members, 14
3
friends you have new comments! Si meliora est vede meccum !
> View all Everyday | 2 comments new
Your highlights
Slideshow 10 Lorem ipsum et diliagt gentris sed etiam
MAY unique valor, melior paritus. Et uni soesu
terrae submitta...
Health Matters
Everyday | 2 comments
Spotting & Treating
Food Allergies
08 Lorem ipsum et diliagt gentris sed etiam unique valor,
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
> How to know if your child Everyday | 2 comments new
is at risk
06 Lorem ipsum et diliagt gentris sed etiam unique valor,
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
Everyday | 2 comments
05 Lorem ipsum et diliagt gentris sed etiam unique valor,
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
Everyday | 2 comments
Contact Us Privacy Terms & privacy Copyrights Send to a friend
Sketching Ecrans
Statique

80. WIREFRAME > Définition et usages
Degré de précision
Interactif
Prototype Prototype
papier digital
Low résolution Wireframes Hi résolution
NIDO Website - 1.1.1 Diary
Hi Lynn | My account | Log Out | Help
NIDO Home Moments Health Matters Our Range
My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker
John’s Family Diary TELL MY
FRIENDS NOW !
Edit friends list
Oscar Angelica
Show me All entries Starting from rst day | today Only highlights
Edit my pro le
12 Lorem ipsum et diliagt gentris sed etiam unique valor,
Your Friends (14) MAY melior paritus. Et uni soesu terrae submitta...
Recently added Si meliora est vede meccum !
3 You have new comments !
Mary, Ellen, Peter Everyday | 2 comments new
Family & Friends
View all
! Erin has accepted your Lorem ipsum et diliagt gentris sed etiam unique valor,
invitation
Comments 11
MAY melior paritus. Et uni soesu terrae submitta...
You have: 6 family members, 14
3
friends you have new comments! Si meliora est vede meccum !
> View all Everyday | 2 comments new
Your highlights
Slideshow 10 Lorem ipsum et diliagt gentris sed etiam
MAY unique valor, melior paritus. Et uni soesu
terrae submitta...
Health Matters
Everyday | 2 comments
Spotting & Treating
Food Allergies
08 Lorem ipsum et diliagt gentris sed etiam unique valor,
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
> How to know if your child Everyday | 2 comments new
is at risk
06 Lorem ipsum et diliagt gentris sed etiam unique valor,
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
Everyday | 2 comments
05 Lorem ipsum et diliagt gentris sed etiam unique valor,
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
Everyday | 2 comments
Contact Us Privacy Terms & privacy Copyrights Send to a friend
Sketching Mockup
Statique

81. WIREFRAME > Définition et usages
Degré de précision
Interactif
Prototype Prototype
papier digital
Low résolution Wireframes Hi résolution
NIDO Website - 1.1.1 Diary
Hi Lynn | My account | Log Out | Help
NIDO Home Moments Health Matters Our Range
My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker
John’s Family Diary TELL MY
FRIENDS NOW !
Edit friends list
Oscar Angelica
Show me All entries Starting from rst day | today Only highlights
Edit my pro le
12 Lorem ipsum et diliagt gentris sed etiam unique valor,
Your Friends (14) MAY melior paritus. Et uni soesu terrae submitta...
Recently added Si meliora est vede meccum !
3 You have new comments !
Mary, Ellen, Peter Everyday | 2 comments new
Family & Friends
View all
! Erin has accepted your Lorem ipsum et diliagt gentris sed etiam unique valor,
invitation
Comments 11
MAY melior paritus. Et uni soesu terrae submitta...
You have: 6 family members, 14
3
friends you have new comments! Si meliora est vede meccum !
> View all Everyday | 2 comments new
Your highlights
Slideshow 10 Lorem ipsum et diliagt gentris sed etiam
MAY unique valor, melior paritus. Et uni soesu
terrae submitta...
Health Matters
Everyday | 2 comments
Spotting & Treating
Food Allergies
08 Lorem ipsum et diliagt gentris sed etiam unique valor,
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
> How to know if your child Everyday | 2 comments new
is at risk
06 Lorem ipsum et diliagt gentris sed etiam unique valor,
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
Everyday | 2 comments
05 Lorem ipsum et diliagt gentris sed etiam unique valor,
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
Everyday | 2 comments
Contact Us Privacy Terms & privacy Copyrights Send to a friend
Sketching Ecrans
Statique

82. WIREFRAME > Définition et usages
Les questions à se poser
! Quels sont les objectifs du wireframe ?
! Communiquer les décisions structurelles aux équipes
créative, de développement
! Servir de prototype pour les tests utilisateurs
! Quelle est l’audience ?
! Créatifs (document de design)
! Développeurs (document de spécification)
! Client (document de présentation)

83. WIREFRAME > Définition et usages
Les questions à se poser
! Le degré de précision est-il adapté au
contexte ?
! Low-res / Hi-res ?
! Papier ou digital ?
! Statique, animé ou interactif ?
! Combien d’écrans ?