Module de conception MICNI : Cours sur le design d'interface et design d'interaction

1. CONCEPTION
Master 2 : Management et Ingénierie de la Communication Numérique Interactive
E. Design d’interface et design d’interaction
Janvier 2010
Ecole des Gobelins
David Raichman
Senior UX Designer @ OgilvyInteractive

2. Conception | Design d’interface et design d’interaction
Les cours de conception
A. Introduction au design d’expérience utilisateur (UXD)
B. Les livrables de l’UXD
C. De la recherche utilisateur au design fonctionnel
D. Framework fonctionnel et stratégie des contenus
E. Design d’interface et design d’interaction
F. Utilisabilité

3. Conception | Design d’interface et design d’interaction
C. Design d’interface et design d’interaction
1. Introduction
2. Typologie des interfaces
3. Wireframes
4. Design d’interaction
6. Références

4. Conception | Design d’interface et design d’interaction
1. Introduction / Situation de la problématique
?
?

5. Conception | Design d’interface et design d’interaction
1. Introduction / Principe de l’IHM
Input Utilisateur
Interface
Homme Ordinateur
Output Système

6. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction

7. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction

8. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction

9. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction

10. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction

11. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction

12. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction

13. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction

14. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction

15. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction

16. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction

17. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction

18. Conception | Design d’interface et design d’interaction
1. Introduction / Echelle d’iconicité
Re
lat
ion
Iconicité maximale st
op
ogra
ph
iqu
Objet lui-même es
Iconicité minimale

19. Conception | Design d’interface et design d’interaction
1. Introduction / Echelle d’iconicité
Re
lat
ion
Iconicité maximale st
op
ogra
ph
iqu
Objet lui-même es
Schéma anatomique
Iconicité minimale

20. Conception | Design d’interface et design d’interaction
1. Introduction / Echelle d’iconicité
Re
lat
ion
Iconicité maximale st
op
ogra
ph
iqu Re
Objet lui-même es
top latio
olo ns
giq
Schéma anatomique ue
s
Schéma de principe
Iconicité minimale

21. Conception | Design d’interface et design d’interaction
1. Introduction / Echelle d’iconicité
Re
lat
ion
Iconicité maximale st
op
ogra
ph
iqu Re
Objet lui-même es
top latio
olo ns
giq
Schéma anatomique ue
s
Schéma de principe Re
lat
ion
Schéma de formulation sl
og
iqu
es
Iconicité minimale

22. Conception | Design d’interface et design d’interaction
1. Introduction / Echelle d’iconicité
Re
lat
ion
Iconicité maximale st
op
ogra
ph
iqu Re
Objet lui-même es
top latio
olo ns
giq
Schéma anatomique ue
s
Schéma de principe Re
lat
ion
Schéma de formulation sl
og
iqu
es
Schéma en espace complexe
Iconicité minimale

23. Conception | Design d’interface et design d’interaction
1. Introduction / Echelle d’iconicité
Re
lat
ion
Iconicité maximale st
op
ogra
ph
iqu Re
Objet lui-même es
top latio
olo ns
giq
Schéma anatomique ue
s
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

24. Conception | Design d’interface et design d’interaction
C. Design d’interface et design d’interaction
1. Introduction
2. Typologie des interfaces
3. Wireframes
4. Design d’interaction
6. Références

25. Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Implementation-centred
+ -
Facile à construire Apprentissage long
- Public expert

26. Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Implementation-centred
+ -
Facile à construire Apprentissage long
- Public expert

27. Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Métaphoriques
+ -
intuitive contextuelle
aucun
utopique
apprentissage

28. Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Métaphoriques
+ -
intuitive contextuelle
aucun
utopique
apprentissage

29. Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Métaphoriques
w w w. s o u t h w e s t . c o m
+ -
intuitive contextuelle
aucun
utopique
apprentissage

30. Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Métaphoriques
+ -
intuitive contextuelle
aucun
utopique
apprentissage

31. Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Métaphoriques
+ -
intuitive contextuelle
aucun
utopique
apprentissage

32. Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Métaphoriques
+ -
intuitive contextuelle
aucun
utopique
apprentissage

33. Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Métaphoriques
+ -
intuitive contextuelle
aucun
utopique
apprentissage

34. Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Métaphoriques
+ -
intuitive contextuelle
aucun
utopique
apprentissage

35. Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Métaphoriques
+ -
intuitive contextuelle
aucun
utopique
apprentissage

36. Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Métaphoriques
+ -
intuitive contextuelle
aucun
utopique
apprentissage

37. Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Idiomatiques
+ -
modulaire apprentissage
interopérable court
interaction riche

38. Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Idiomatiques
w w w. n i c k a d . c o m
+ -
modulaire apprentissage
interopérable court
interaction riche

39. Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Idiomatiques
+ -
modulaire apprentissage
interopérable court
interaction riche

40. Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Idiomatiques
i n p u t o u t p u t
naviguer, dessiner, idiomes changer de section,
acheter trier
composées
double-clic, checkbox, surbrillance
drag’n’drop, sélection
pointage, clic, primitives
curseur, texte
drag, touche pressée

41. Conception | Design d’interface et design d’interaction
C. Design d’interface et design d’interaction
1. Introduction
2. Typologie des interfaces
3. Wireframes
4. Design d’interaction
6. Références

42. Conception | Design d’interface et design d’interaction
3. Wireframes / 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.

43. Conception | Design d’interface et design d’interaction
3. Wireframes
Degré de précision

44. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Low résolution Hi résolution
Statique

45. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Low résolution Hi résolution
Sketching
Statique

46. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Low résolution Hi résolution
Sketching
Statique

47. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype papier
Low résolution Hi résolution
Sketching
Statique

48. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype papier
Low résolution Hi résolution
Sketching
Statique

49. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype
papier
Low résolution Hi résolution
Sketching
Statique

50. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype
papier
Low résolution Hi résolution
Sketching Ecrans (psd, jpg...)
Statique

51. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype
papier
Low résolution Hi résolution
Sketching Ecrans (psd, jpg...)
Statique

52. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype
papier
Low résolution Hi résolution
Sketching Ecrans
Statique

53. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype Prototype digital
papier (HTML, Flash...)
Low résolution Hi résolution
Sketching Ecrans
Statique

54. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype Prototype digital
papier (HTML, Flash...)
Low résolution Hi résolution
Sketching Ecrans
Statique

55. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype Prototype
papier digital
Low résolution Hi résolution
Sketching Ecrans
Statique

56. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype Prototype
papier digital
Low résolution Wireframes Hi résolution
Sketching Ecrans
Statique

57. Conception | Design d’interface et design d’interaction
3. Wireframes / 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

58. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
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 Interactif TELL MY
Prototype FRIENDS NOW ! Prototype
papier Oscar Angelica
Edit friends list
digital
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 !
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
Wireframes
Slideshow 10 Lorem ipsum et diliagt gentris sed etiam
MAY
Low résolution Hi résolution
unique valor, melior paritus. Et uni soesu
terrae submitta...
Health Matters
Everyday | 2 comments
Spotting & Treating
Food Allergies
Lorem ipsum et diliagt gentris sed etiam unique valor,
NIDO Website - 1.1.1 Diary
08 Hi Lynn | My account | Log Out | Help
MAY NIDO melior paritus. Et uni soesu terrae submitta...
Home
My Activities |
Moments
Capture a moment
Health Matters
| Diary | Highlights
Our Range
| My friends | Health Tracker
John’s Family Diary
Si meliora est vede meccum ! TELL MY
FRIENDS NOW !
Edit friends list
Oscar Angelica
> How to know if your child Everyday | 2 comments new
Show me All entries Starting from rst day | today Only highlights
is at risk
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 !
Lorem ipsum et diliagt gentris sed etiam unique valor,
> View all Everyday | 2 comments new
06 Your highlights
Slideshow 10 Lorem ipsum et diliagt gentris sed etiam
MAY melior paritus. Et uni soesu terrae submitta...
MAY unique valor, melior paritus. Et uni soesu
terrae submitta...
Health Matters
Everyday | 2 comments
Spotting & Treating
Food Allergies
Si meliora est vede meccum !
08
MAY
Lorem ipsum et diliagt gentris sed etiam unique valor,
melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
Everyday | 2 comments new
> How to know if your child
is at risk
Everyday | 2 comments
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
05 Lorem ipsum et diliagt gentris sed etiam unique valor, Contact Us Privacy Terms & privacy Copyrights Send to a friend
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
Everyday | 2 comments
Sketching Ecrans
Statique
Contact Us Privacy Terms & privacy Copyrights Send to a friend

59. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype Prototype
papier digital
Low résolution Wireframes Hi résolution
Sketching Ecrans
Statique

60. Conception | Design d’interface et design d’interaction
3. Wireframes / 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 des tests utilisateurs...
‣ Quelle est l’audience ?
‣ Créatifs (document de design)
‣ Développeurs (document de spécification)
‣ Client (document de présentation)

61. Conception | Design d’interface et design d’interaction
3. Wireframes
Exemples

62. Propriété du produit
RENAULT-MERCHANDISING.COM
Conception | Design d’interface et design d’interaction
3 Au minimum il y a 0 liste déropulante de
propriété.
Au maximum, il y a 2 listes déroulantes
de propriétés.
Le qualificatif de la propriété dépend du
ACCUEIL NOTRE ACTIVITE NOS PRODUITS NOS POINTS DE VENTE OFFRES WEB EXCLUSIVES produit (taille, couleur...)
ma liste mon panier
Wireframes / Exemple de spécifications
3. RECHERCHER UN PRODUIT toutes catégories go
5 articles 2 articles
Produits web
Renault
Produits web > Renault >Twingo 2008 > Montre mixte DEJA INSCRIT ? 4 Champ de saisie quantité
Renault merchandising
Twingo 2008
Dacia 2008
Identifiant
Noël Mot de passe
1 Montre mixte Vignette vues produit pouvant aller de 0 à 3
Mémoriser mes 5 Chaque vignette est une réduction de d’une
Chèques cadeaux
Evenements
1.3.1.3 fiche produit web Boîtier alliage, cadran blanc. version non loggé
informations image de taille normale. Si pas de vues
1 Image taille normale
différentes, on affichera 0 vignettes.
Mouvement 2 aiguilles. 2
OK
Bracelet PU noir. LIvré sous
étui cartonné. Garantie 2 ans. >Mot de passe oublié ?
6 Affiche soit “en stock” soit (a) “épuisé" soit en
>Inscrivez-vous cours2 Texte descriptif produit version longue
d’approvisionnement. (b). Si (a) ou (b)
FR EN Les sites Renault alors “ajouter à mon panier’ ne s’affiche pas.
couleur 3 Quantité 1 4
Propriété du produit
RENAULT-MERCHANDISING.COM 77 11 421 691 Prix : 135,00! Personnel du groupe 7
3 Au minimum il y a 0 liste déropulante de
Lien vers 4.a
propriété.
Disponibilité : en stock 6 Renault Au maximum, il y a 2 listes déroulantes
de propriétés.
5 Le qualificatif de la propriété dépend du
ACCUEIL NOTRE ACTIVITE NOS PRODUITS NOS POINTS DE VENTE OFFRES WEB EXCLUSIVES produit (taille, couleur...)
7 Ajouter au panier ma liste mon panier
RECHERCHER UN PRODUIT toutes catégories go
5 articles 2 articles
Produits web
Renault
Produits web > Renault >Twingo 2008 > Montre mixte Professionnel ?
DEJA INSCRIT 4 Champ de saisie quantité
Twingo 2008 Identifiant
Dacia 2008
Noël Mot de passe
1 Montre mixte Vignette vues produit pouvant aller de 0 à 3
© RENAULT MERCHANDISING NEWSLETTER CONTACT PLAN DU SITE Mémoriser mes
MENTIONS LEGALES CGU
5 Chaque vignette est une réduction de d’une
Chèques
cadeaux informations image de taille normale. Si pas de vues
Boîtier alliage, cadran blanc.
Evenements différentes, on affichera 0 vignettes.
Mouvement 2 aiguilles. 2
OK
Bracelet PU noir. LIvré sous
étui cartonné. Garantie 2 ans. >Mot de passe oublié ?
6 Affiche soit “en stock” soit (a) “épuisé" soit en
>Inscrivez-vous cours d’approvisionnement. (b). Si (a) ou (b)
alors “ajouter à mon panier’ ne s’affiche pas.
couleur 3 Quantité 1 4
77 11 421 691 Prix : 135,00! Personnel du groupe 7 Lien vers 4.a
Disponibilité : en stock 6 Renault
5
7 Ajouter au panier
Professionnel
Auteur : David Raichman
Projet : Renault-merchandising.com
© RENAULT MERCHANDISING NEWSLETTER CONTACT PLAN DU SITE MENTIONS LEGALES CGU Version : 1.3 (31/01/08)

63. Propriété du produit
RENAULT-MERCHANDISING.COM
Conception | Design d’interface et design d’interaction
3 Au minimum il y a 0 liste déropulante de
propriété.
Au maximum, il y a 2 listes déroulantes
de propriétés.
Le qualificatif de la propriété dépend du
ACCUEIL NOTRE ACTIVITE NOS PRODUITS NOS POINTS DE VENTE OFFRES WEB EXCLUSIVES produit (taille, couleur...)
ma liste mon panier
Wireframes / Exemple de spécifications
3. RECHERCHER UN PRODUIT toutes catégories go
5 articles 2 articles
Produits web
Renault
Produits web > Renault >Twingo 2008 > Montre mixte DEJA INSCRIT ? 4 Champ de saisie quantité
Renault merchandising
Twingo 2008
Dacia 2008
Identifiant
Noël Mot de passe
1 Montre mixte Vignette vues produit pouvant aller de 0 à 3
Mémoriser mes 5 Chaque vignette est une réduction de d’une
Chèques cadeaux
Evenements
1.3.1.3 fiche produit web Boîtier alliage, cadran blanc. version non loggé
informations image de taille normale. Si pas de vues
1 Image taille normale
différentes, on affichera 0 vignettes.
Mouvement 2 aiguilles. 2
OK
Bracelet PU noir. LIvré sous
étui cartonné. Garantie 2 ans. >Mot de passe oublié ?
6 Affiche soit “en stock” soit (a) “épuisé" soit en
>Inscrivez-vous cours2 Texte descriptif produit version longue
d’approvisionnement. (b). Si (a) ou (b)
FR EN Les sites Renault alors “ajouter à mon panier’ ne s’affiche pas.
couleur 3 Quantité 1 4
Propriété du produit
RENAULT-MERCHANDISING.COM 77 11 421 691 Prix : 135,00! Personnel du groupe 7
3 Au minimum il y a 0 liste déropulante de
Lien vers 4.a
propriété.
Disponibilité : en stock 6 Renault Au maximum, il y a 2 listes déroulantes
de propriétés.
5 Le qualificatif de la propriété dépend du
ACCUEIL NOTRE ACTIVITE NOS PRODUITS NOS POINTS DE VENTE OFFRES WEB EXCLUSIVES produit (taille, couleur...)
7 Ajouter au panier ma liste mon panier
RECHERCHER UN PRODUIT toutes catégories go
5 articles 2 articles
Produits web
Renault
Produits web > Renault >Twingo 2008 > Montre mixte Professionnel ?
DEJA INSCRIT 4 Champ de saisie quantité
Twingo 2008 Identifiant
Dacia 2008
Noël Mot de passe
1 Montre mixte Vignette vues produit pouvant aller de 0 à 3
© RENAULT MERCHANDISING NEWSLETTER CONTACT PLAN DU SITE Mémoriser mes
MENTIONS LEGALES CGU
5 Chaque vignette est une réduction de d’une
Chèques
cadeaux informations image de taille normale. Si pas de vues
Boîtier alliage, cadran blanc.
Evenements différentes, on affichera 0 vignettes.
Mouvement 2 aiguilles. 2
OK
Bracelet PU noir. LIvré sous
étui cartonné. Garantie 2 ans. >Mot de passe oublié ?
6 Affiche soit “en stock” soit (a) “épuisé" soit en
>Inscrivez-vous cours d’approvisionnement. (b). Si (a) ou (b)
alors “ajouter à mon panier’ ne s’affiche pas.
couleur 3 Quantité 1 4
77 11 421 691 Prix : 135,00! Personnel du groupe 7 Lien vers 4.a
Disponibilité : en stock 6 Renault
5
7 Ajouter au panier
Professionnel
Auteur : David Raichman
Projet : Renault-merchandising.com
© RENAULT MERCHANDISING NEWSLETTER CONTACT PLAN DU SITE MENTIONS LEGALES CGU Version : 1.3 (31/01/08)

64. Conception | Design d’interface et design d’interaction
3. Wireframes / Exemple de spécifications
Louis Vuitton Mobile Japon

65. Conception | Design d’interface et design d’interaction
3. Wireframes / Exemple de spécifications
Louis Vuitton Mobile Japon

66. Conception | Design d’interface et design d’interaction
3. Wireframes / Exemple de spécifications
Louis Vuitton Mobile Japon

67. Conception | Design d’interface et design d’interaction
3. Wireframes / Exemple de spécifications
Louis Vuitton Mobile Japon

68. Conception | Design d’interface et design d’interaction
3. Wireframes / Exemple de spécifications
Louis Vuitton Mobile Japon

69. Conception | Design d’interface et design d’interaction
3. Wireframes / Exemple de spécifications
Louis Vuitton Mobile Japon

70. Conception | Design d’interface et design d’interaction
3. Wireframes / Exemple de spécifications
Louis Vuitton Mobile Japon

71. Conception | Design d’interface et design d’interaction
3. Wireframes / Exemple de spécifications
Louis Vuitton Mobile Japon

72. Conception | Design d’interface et design d’interaction
3. Wireframes / Exemple de spécifications
Louis Vuitton Mobile Japon

73. Conception | Design d’interface et design d’interaction
3. Wireframes
Contraintes technologiques

74. Conception | Design d’interface et design d’interaction
3. Wireframes / Contraintes technologiques
‣ Travailler avec une technologie imposée
‣ Trouver la technologie qui répond au cahier
des charges de mon design d’interface

75. Conception | Design d’interface et design d’interaction
3. Wireframes / Contraintes technologiques
Applicatif
Desktop, bornes, autres...
Director, Java...
RDA : Rich Desktop Application
Flex/AIR, .Net, SDK...
RMA : Rich Mobile Application
RIA : Rich Internet Application
.Net, Java... Flash, Silverlight HTML/CSS, Ajax (javascript)
Tr
Bl
N
So
Je
Fi
Pu
a
M
ew
og
lm
ns
ux
ci
bl
on
s
s
s,
al
a
ic
en
d
ct
ita
do
es
io
lig
ire
c
nn
vi
ne
in
,E
rtu
el
te
vt
el
ra
,P
s
ct
or
ifs
tfo
lio
...
Audiovisuel Informationnel

76. Conception | Design d’interface et design d’interaction
3. Wireframes / Contraintes technologiques
‣ Quel est le support final ?
‣ Ecran ordinateur, mobile, écran tactile, TV ...
‣ La résolution d’affichage
‣ Quelle technologie ?
‣ Flash
‣ HTML/CSS/Ajax
‣ SDK Iphone...

77. Conception | Design d’interface et design d’interaction
3. Wireframes
Gabarits, zoning et grilles

78. Conception | Design d’interface et design d’interaction
3. Wireframes / Gabarits, zoning et grilles
Un gabarit (ou squelette ou layout) est la structure
visuelle persistante qui définit la charpente d’une
interface.
La variations d’un gabarit définissent en partie les états
d’une interface.
Les gabarits constituent le fondement des wireframes.
La méthode de construction d’un gabarit s’appelle le zoning.

79. Conception | Design d’interface et design d’interaction
3. Wireframes / Gabarits, zoning et grilles (exemple)
HEADER
Accueil Le magazine Votre santé Nos produits NaturactiveNAVrechercher Professionnels
Santé Créer votre agenda santé
Digestion difficile
En quelques clics, complétez votre profil santé
Circulation
et profitez de conseils personnalisés pour
Fatigue garder la forme !
Stress
Sommeil Partout avec vous, même sur votre mobile
Maux de tête
Etat grippal
Douleurs articulaires
Feminité
Equilibre
Vitalité
Maux de l’hiver
Confort respiratoire Podcast
Nutrition A l’occasion de la semaine du sommeil, le Pr Marc Leroy
dresse un bilan de l’éfficacité clinique de la phythothérapie
Voir tous les sujets
Vos conseils santé naturelle tout au long de
Au coeur de l’actualité
1
l’année
Beauté / Bien-être
2 Vos astuces forme
Minceur
Chute des cheveux 3 Les conseils d’un phytothérapeute
Beauté des cheveux
Dermo-nutrition
Bronzage Créer mon agenda
COL 1 COL 2 COL 3
Voir tous les sujets Le stress est-il Chute de Lutter contre les
communicatif ? cheveux rhumes à répétition
Témoignages Benoit Monté Comment feiner la Le témoignage Connaissance & plantes
psychologue chute de ou favoriser d’une internaute à
répond à toutes nos la reposusse découvrir
Stress questions... Consultez plus de 150 articles de
Sommeil référence sur la phytothérapie
Rhume
Minceur
Produits Posez des questions santé, forme et
?
Ménopause
bien-être, des experts répondent à vos
Voir tous les sujets questions
Votre pharmacie Le test du mois
Naturactive Découvrez votre profil minceur
Aromathérapie Phytothérapie Dermo-nutrition Menez vous une vie stressante ?
code poste OK Doriance Anti-âge
Phytaroma Elusanes
Améliorer son Résoudre les Lutter contre le
Trouvez les produits confort respiratoire troubles passagers photo-vieillissement
Naturactive, les plus du sommeil
proces de chez vous oui pas spécialement pas du tout