Cours (E) Gobelins Master 2 MICNI

4 004 vues

Publié le

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

Publié dans : Design, Technologie
0 commentaire
11 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
4 004
Sur SlideShare
0
Issues des intégrations
0
Intégrations
37
Actions
Partages
0
Téléchargements
455
Commentaires
0
J’aime
11
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Cours (E) Gobelins Master 2 MICNI

  1. 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. 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. 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. 4. Conception | Design d’interface et design d’interaction 1. Introduction / Situation de la problématique ? ?
  5. 5. Conception | Design d’interface et design d’interaction 1. Introduction / Principe de l’IHM Input Utilisateur Interface Homme Ordinateur Output Système
  6. 6. Conception | Design d’interface et design d’interaction 1. Introduction / De l’information à l’interaction
  7. 7. Conception | Design d’interface et design d’interaction 1. Introduction / De l’information à l’interaction
  8. 8. Conception | Design d’interface et design d’interaction 1. Introduction / De l’information à l’interaction
  9. 9. Conception | Design d’interface et design d’interaction 1. Introduction / De l’information à l’interaction
  10. 10. Conception | Design d’interface et design d’interaction 1. Introduction / De l’information à l’interaction
  11. 11. Conception | Design d’interface et design d’interaction 1. Introduction / De l’information à l’interaction
  12. 12. Conception | Design d’interface et design d’interaction 1. Introduction / De l’information à l’interaction
  13. 13. Conception | Design d’interface et design d’interaction 1. Introduction / De l’information à l’interaction
  14. 14. Conception | Design d’interface et design d’interaction 1. Introduction / De l’information à l’interaction
  15. 15. Conception | Design d’interface et design d’interaction 1. Introduction / De l’information à l’interaction
  16. 16. Conception | Design d’interface et design d’interaction 1. Introduction / De l’information à l’interaction
  17. 17. Conception | Design d’interface et design d’interaction 1. Introduction / De l’information à l’interaction
  18. 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. 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. 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. 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. 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. 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. 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. 25. Conception | Design d’interface et design d’interaction 2. Typologie des interfaces / Implementation-centred + - Facile à construire Apprentissage long - Public expert
  26. 26. Conception | Design d’interface et design d’interaction 2. Typologie des interfaces / Implementation-centred + - Facile à construire Apprentissage long - Public expert
  27. 27. Conception | Design d’interface et design d’interaction 2. Typologie des interfaces / Métaphoriques + - intuitive contextuelle aucun utopique apprentissage
  28. 28. Conception | Design d’interface et design d’interaction 2. Typologie des interfaces / Métaphoriques + - intuitive contextuelle aucun utopique apprentissage
  29. 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. 30. Conception | Design d’interface et design d’interaction 2. Typologie des interfaces / Métaphoriques + - intuitive contextuelle aucun utopique apprentissage
  31. 31. Conception | Design d’interface et design d’interaction 2. Typologie des interfaces / Métaphoriques + - intuitive contextuelle aucun utopique apprentissage
  32. 32. Conception | Design d’interface et design d’interaction 2. Typologie des interfaces / Métaphoriques + - intuitive contextuelle aucun utopique apprentissage
  33. 33. Conception | Design d’interface et design d’interaction 2. Typologie des interfaces / Métaphoriques + - intuitive contextuelle aucun utopique apprentissage
  34. 34. Conception | Design d’interface et design d’interaction 2. Typologie des interfaces / Métaphoriques + - intuitive contextuelle aucun utopique apprentissage
  35. 35. Conception | Design d’interface et design d’interaction 2. Typologie des interfaces / Métaphoriques + - intuitive contextuelle aucun utopique apprentissage
  36. 36. Conception | Design d’interface et design d’interaction 2. Typologie des interfaces / Métaphoriques + - intuitive contextuelle aucun utopique apprentissage
  37. 37. Conception | Design d’interface et design d’interaction 2. Typologie des interfaces / Idiomatiques + - modulaire apprentissage interopérable court interaction riche
  38. 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. 39. Conception | Design d’interface et design d’interaction 2. Typologie des interfaces / Idiomatiques + - modulaire apprentissage interopérable court interaction riche
  40. 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. 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. 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. 43. Conception | Design d’interface et design d’interaction 3. Wireframes Degré de précision
  44. 44. Conception | Design d’interface et design d’interaction 3. Wireframes / Degré de précision Interactif Low résolution Hi résolution Statique
  45. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 61. Conception | Design d’interface et design d’interaction 3. Wireframes Exemples
  62. 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. 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. 64. Conception | Design d’interface et design d’interaction 3. Wireframes / Exemple de spécifications Louis Vuitton Mobile Japon
  65. 65. Conception | Design d’interface et design d’interaction 3. Wireframes / Exemple de spécifications Louis Vuitton Mobile Japon
  66. 66. Conception | Design d’interface et design d’interaction 3. Wireframes / Exemple de spécifications Louis Vuitton Mobile Japon
  67. 67. Conception | Design d’interface et design d’interaction 3. Wireframes / Exemple de spécifications Louis Vuitton Mobile Japon
  68. 68. Conception | Design d’interface et design d’interaction 3. Wireframes / Exemple de spécifications Louis Vuitton Mobile Japon
  69. 69. Conception | Design d’interface et design d’interaction 3. Wireframes / Exemple de spécifications Louis Vuitton Mobile Japon
  70. 70. Conception | Design d’interface et design d’interaction 3. Wireframes / Exemple de spécifications Louis Vuitton Mobile Japon
  71. 71. Conception | Design d’interface et design d’interaction 3. Wireframes / Exemple de spécifications Louis Vuitton Mobile Japon
  72. 72. Conception | Design d’interface et design d’interaction 3. Wireframes / Exemple de spécifications Louis Vuitton Mobile Japon
  73. 73. Conception | Design d’interface et design d’interaction 3. Wireframes Contraintes technologiques
  74. 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. 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. 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. 77. Conception | Design d’interface et design d’interaction 3. Wireframes Gabarits, zoning et grilles
  78. 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. 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

×