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 Raichm...
SOMMAIRE


  Design d’interface

 ! Introduction
    !   Enjeux
    !   Processus de conception et UCD
    !   Interfaces ...
SOMMAIRE


  Design d’interface

 ! Wireframe
    !   Définition et usages
    !   Contraintes technologiques
    !   Gaba...
SOMMAIRE


  Design d’interface

 ! Prototypes
    !   Objectifs
    !   Enjeux
    !   Outils et techniques
    !   Tests...
SOMMAIRE


  Design d’interface

 ! Références
    ! Bibliographie
    ! Webographie
Design d’interface

! Introduction
 !   Enjeux
 !   Processus de conception et UCD
 !   Interfaces et design d’information...
INTRODUCTION > Enjeux


  Industrialisation du digital

  ! Nouveau paradigme métiers
   Années 90




                   ...
INTRODUCTION > Enjeux


  Industrialisation du digital

  ! Nouveau paradigme métiers
   Années 2000 : naissance de l’UX

...
INTRODUCTION > Enjeux


  Industrialisation du digital

  ! Nouveau paradigme métiers
   Années 2000 : naissance de l’UX

...
INTRODUCTION > Enjeux


  Industrialisation du digital

  ! Nouveau paradigme métiers
  ! Nouvelle méthodologie
  ! Techni...
Design d’interface

! Introduction
 !   Enjeux
 !   Processus de conception et UCD
 !   Interfaces et design d’information...
INTRODUCTION > Processus de conception et UCD


  UCD = User Centred Design

  ! Faire participer les utilisateurs dans le...
INTRODUCTION > Processus de conception et UCD


                                              ...
          S T R AT É G I...
INTRODUCTION > Processus de conception et UCD


                                              ...
          S T R AT É G I...
INTRODUCTION > Processus de conception et UCD


                                              ...
          S T R AT É G I...
INTRODUCTION > Processus de conception et UCD


                                              ...
          S T R AT É G I...
INTRODUCTION > Processus de conception et UCD


                                              ...
          S T R AT É G I...
INTRODUCTION > Processus de conception et UCD


                                              ...
          S T R AT É G I...
INTRODUCTION > Processus de conception et UCD


                                               ...
          S T R AT É G ...
Design d’interface

! Introduction
 !   Enjeux
 !   Processus de conception et UCD
 !   Interfaces et design d’information...
INTRODUCTION > Interfaces et design d’information


  Interactions Homme - Ordinateur



                                 ...
INTRODUCTION > Interfaces et design d’information


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


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


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


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


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


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


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


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


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


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


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


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


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


  Echelle d’iconicité

                           Re
                 ...
INTRODUCTION > Interfaces et design d’information


  Echelle d’iconicité

                           Re
                 ...
INTRODUCTION > Interfaces et design d’information


  Echelle d’iconicité

                           Re
                 ...
INTRODUCTION > Interfaces et design d’information


  Echelle d’iconicité

                           Re
                 ...
INTRODUCTION > Interfaces et design d’information


  Echelle d’iconicité

                           Re
                 ...
INTRODUCTION > Interfaces et design d’information


  Echelle d’iconicité

                           Re
                 ...
Design d’interface

! Introduction
 !   Enjeux
 !   Processus de conception et UCD
 !   Interfaces et design d’information...
INTRODUCTION > Typologie des interfaces


  Implementation-centred


                                  +               -

...
INTRODUCTION > Typologie des interfaces


  Implementation-centred


                                  +               -

...
INTRODUCTION > Typologie des interfaces


   user-centred /        Métaphorique


                                  +     ...
INTRODUCTION > Typologie des interfaces


   user-centred /        Métaphorique


                                  +     ...
INTRODUCTION > Typologie des interfaces


   user-centred /        Métaphorique
                                          ...
INTRODUCTION > Typologie des interfaces


   user-centred /        Métaphorique


                                  +     ...
INTRODUCTION > Typologie des interfaces


   user-centred /        Métaphorique


                                  +     ...
INTRODUCTION > Typologie des interfaces


   user-centred /        Métaphorique


                                  +     ...
INTRODUCTION > Typologie des interfaces


   user-centred /        Métaphorique


                                  +     ...
INTRODUCTION > Typologie des interfaces


   user-centred /        Métaphorique


                                  +     ...
INTRODUCTION > Typologie des interfaces


   user-centred /        Métaphorique


                                  +     ...
INTRODUCTION > Typologie des interfaces


   user-centred /        Métaphorique


                                  +     ...
INTRODUCTION > Typologie des interfaces


   user-centred /        Idiomatique


                                  +      ...
INTRODUCTION > Typologie des interfaces
                                             w w w. n i c k a d . c o m
   user-ce...
INTRODUCTION > Typologie des interfaces


   user-centred /        Idiomatique


                                  +      ...
INTRODUCTION > Typologie des interfaces


   user-centred /        Idiomatique

              i n p u t                   ...
Design d’interface

! Wireframe
 !   Définition et usages
 !   Contraintes technologiques
 !   Gabarits, zoning et grilles...
WIREFRAME > Définition et usages


         Le challenge

                           lipsum                               ...
WIREFRAME > Définition et usages


  Définition

 «    Les wireframes sont des représentations visuelles
      qui capture...
WIREFRAME > Définition et usages


  Degré de précision
                                   Interactif




          Low ré...
WIREFRAME > Définition et usages


  Degré de précision
                                   Interactif




          Low ré...
WIREFRAME > Définition et usages


  Degré de précision
                                   Interactif




          Low ré...
WIREFRAME > Définition et usages


  Degré de précision
                                   Interactif




          Low ré...
WIREFRAME > Définition et usages


  Degré de précision
                                   Interactif




          Low ré...
WIREFRAME > Définition et usages


  Degré de précision
                                   Interactif
       Prototype pap...
WIREFRAME > Définition et usages


  Degré de précision
                                   Interactif
       Prototype pap...
WIREFRAME > Définition et usages


  Degré de précision
                                   Interactif
               Proto...
WIREFRAME > Définition et usages


  Degré de précision
                                   Interactif
               Proto...
WIREFRAME > Définition et usages


  Degré de précision
                                   Interactif
               Proto...
WIREFRAME > Définition et usages


  Degré de précision
                                   Interactif
               Proto...
WIREFRAME > Définition et usages


  Degré de précision
                                   Interactif
               Proto...
WIREFRAME > Définition et usages


  Degré de précision
                                   Interactif
               Proto...
WIREFRAME > Définition et usages


  Degré de précision
                                   Interactif
               Proto...
WIREFRAME > Définition et usages


  Degré de précision
                                     Interactif
               Pro...
WIREFRAME > Définition et usages


  Degré de précision
                                                Interactif
       ...
WIREFRAME > Définition et usages                                                                                          ...
WIREFRAME > Définition et usages


  Degré de précision
                                                Interactif
       ...
WIREFRAME > Définition et usages


  Degré de précision
                                                Interactif
       ...
WIREFRAME > Définition et usages


  Degré de précision
                                                Interactif
       ...
WIREFRAME > Définition et usages


  Degré de précision
                                                Interactif
       ...
WIREFRAME > Définition et usages


  Les questions à se poser

  ! Quels sont les objectifs du wireframe ?
      ! Communi...
WIREFRAME > Définition et usages


  Les questions à se poser

  ! Le degré de précision est-il adapté au
    contexte ?
 ...
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Interface Design Crma 2009
Prochain SlideShare
Chargement dans…5
×

Interface Design Crma 2009

3 186 vues

Publié le

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

Publié dans : Design, Technologie, Business
1 commentaire
13 j’aime
Statistiques
Remarques
  • After you got all the information on Fioricet, another point on your agenda should be the price for it. http://www.fioricetsupply.com resolves this problem. Now you can make the decision to buy.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
Aucun téléchargement
Vues
Nombre de vues
3 186
Sur SlideShare
0
Issues des intégrations
0
Intégrations
238
Actions
Partages
0
Téléchargements
405
Commentaires
1
J’aime
13
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Interface Design Crma 2009

  1. 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. 2. SOMMAIRE Design d’interface ! Introduction ! Enjeux ! Processus de conception et UCD ! Interfaces et design d’information ! Typologie des interfaces
  3. 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. 4. SOMMAIRE Design d’interface ! Prototypes ! Objectifs ! Enjeux ! Outils et techniques ! Tests utilisateurs
  5. 5. SOMMAIRE Design d’interface ! Références ! Bibliographie ! Webographie
  6. 6. Design d’interface ! Introduction ! Enjeux ! Processus de conception et UCD ! Interfaces et design d’information ! Typologie des interfaces
  7. 7. INTRODUCTION > Enjeux Industrialisation du digital ! Nouveau paradigme métiers Années 90 + Graphiste(s) Développeur(s) Chef de projet
  8. 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. 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. 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. 11. Design d’interface ! Introduction ! Enjeux ! Processus de conception et UCD ! Interfaces et design d’information ! Typologie des interfaces
  12. 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. 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. 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. 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. 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. 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. 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. 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. 20. Design d’interface ! Introduction ! Enjeux ! Processus de conception et UCD ! Interfaces et design d’information ! Typologie des interfaces
  21. 21. INTRODUCTION > Interfaces et design d’information Interactions Homme - Ordinateur Input Utilisateur Interface Homme Ordinateur Output Système
  22. 22. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  23. 23. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  24. 24. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  25. 25. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  26. 26. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  27. 27. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  28. 28. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  29. 29. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  30. 30. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  31. 31. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  32. 32. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  33. 33. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  34. 34. INTRODUCTION > Interfaces et design d’information De l’information à l’interaction
  35. 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. 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. 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. 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. 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. 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. 41. Design d’interface ! Introduction ! Enjeux ! Processus de conception et UCD ! Interfaces et design d’information ! Typologie des interfaces
  42. 42. INTRODUCTION > Typologie des interfaces Implementation-centred + - Facile à construire Apprentissage long - Public expert
  43. 43. INTRODUCTION > Typologie des interfaces Implementation-centred + - Facile à construire Apprentissage long - Public expert
  44. 44. INTRODUCTION > Typologie des interfaces user-centred / Métaphorique + - intuitive contextuelle aucun apprentissage utopique
  45. 45. INTRODUCTION > Typologie des interfaces user-centred / Métaphorique + - intuitive contextuelle aucun apprentissage utopique
  46. 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. 47. INTRODUCTION > Typologie des interfaces user-centred / Métaphorique + - intuitive contextuelle aucun apprentissage utopique
  48. 48. INTRODUCTION > Typologie des interfaces user-centred / Métaphorique + - intuitive contextuelle aucun apprentissage utopique
  49. 49. INTRODUCTION > Typologie des interfaces user-centred / Métaphorique + - intuitive contextuelle aucun apprentissage utopique
  50. 50. INTRODUCTION > Typologie des interfaces user-centred / Métaphorique + - intuitive contextuelle aucun apprentissage utopique
  51. 51. INTRODUCTION > Typologie des interfaces user-centred / Métaphorique + - intuitive contextuelle aucun apprentissage utopique
  52. 52. INTRODUCTION > Typologie des interfaces user-centred / Métaphorique + - intuitive contextuelle aucun apprentissage utopique
  53. 53. INTRODUCTION > Typologie des interfaces user-centred / Métaphorique + - intuitive contextuelle aucun apprentissage utopique
  54. 54. INTRODUCTION > Typologie des interfaces user-centred / Idiomatique + - modulaire apprentissage interopérable court interaction riche
  55. 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. 56. INTRODUCTION > Typologie des interfaces user-centred / Idiomatique + - modulaire apprentissage interopérable court interaction riche
  57. 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. 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. 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. 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. 61. WIREFRAME > Définition et usages Degré de précision Interactif Low résolution Hi résolution Statique
  62. 62. WIREFRAME > Définition et usages Degré de précision Interactif Low résolution Hi résolution Statique
  63. 63. WIREFRAME > Définition et usages Degré de précision Interactif Low résolution Hi résolution Sketching Statique
  64. 64. WIREFRAME > Définition et usages Degré de précision Interactif Low résolution Hi résolution Sketching Statique
  65. 65. WIREFRAME > Définition et usages Degré de précision Interactif Low résolution Hi résolution Sketching Statique
  66. 66. WIREFRAME > Définition et usages Degré de précision Interactif Prototype papier Low résolution Hi résolution Sketching Statique
  67. 67. WIREFRAME > Définition et usages Degré de précision Interactif Prototype papier Low résolution Hi résolution Sketching Statique
  68. 68. WIREFRAME > Définition et usages Degré de précision Interactif Prototype papier Low résolution Hi résolution Sketching Sketching Statique
  69. 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. 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. 71. WIREFRAME > Définition et usages Degré de précision Interactif Prototype papier Low résolution Hi résolution Sketching Sketching Ecrans Statique
  72. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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 ?

×