Design pour mobile et tablette

1 348 vues

Publié le

Design pour mobile et tablette pour Stratégies Formation, décembre 2014

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

Aucun téléchargement
Vues
Nombre de vues
1 348
Sur SlideShare
0
Issues des intégrations
0
Intégrations
24
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
6
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Design pour mobile et tablette

  1. 1. Design pour mobile et tablette Laurent Gallen Consultant, DA senior & Designer d'interfaces @laurentgallen – www.laurentgallen.com
  2. 2. 2 Évolution des appareils depuis 1973 et particularités des différents OS @laurentgallen  Évolution des devices mobiles (smartphones, tablettes) – infographies http://www.computersciencedegreehub.com/cell-phone/ http://www.ecyclebest.com/resources/infographi cs/a-concise-history-and-evolution-of-tablet-pcs
  3. 3. 3 Évolution des appareils depuis 1973 et particularités des différents OS  Particularités avec la Google NEXUS family @laurentgallen
  4. 4. 4 Évolution des appareils depuis 1973 et particularités des différents OS  Particularités des différents OS @laurentgallen
  5. 5. 5 Introduction sur le Design d’interfaces et l’ergonomie tactile  Qu’est-ce que le Design d’interfaces ? @laurentgallen Guardians Of The Galaxy UI Reel http://bit.ly/1CE3Ml1 // Oblivion GFX Montage http://bit.ly/1xxfEFk
  6. 6. 6 Introduction sur le Design d’interfaces et l’ergonomie tactile  Définition du Design d’interfaces ….concevoir les interactions entre l’homme et le produit, ainsi que les procédés graphiques qui sous-tendent/renforcent ces mêmes interactions. @laurentgallen
  7. 7. 7 Introduction sur le Design d’interfaces et l’ergonomie tactile @laurentgallen  Définition et buts de l'Ergonomie, l'IHM (Intéraction Homme-Machine)
  8. 8. 8 Introduction sur le Design d’interfaces et l’ergonomie tactile  Un exemple d’IHM avec le Leap-Motion @laurentgallen https://www.youtube.com/watch?v=gby6hGZb3ww
  9. 9. 9 Qu'est-ce que l‘intéractivité ?  Définition et objectifs de l’interactivité @laurentgallen
  10. 10. 10 Qu'est-ce que l‘intéractivité ? @laurentgallen  Comment être interactif sur les supports mobiles grâce au design ?
  11. 11. 11 Les Fonctionnalités  Les différentes actions sur les interfaces tactiles @laurentgallen
  12. 12. 12 Les Fonctionnalités  un exemple avec la Magic Mouse de Apple @laurentgallen
  13. 13. 13 Les Fonctionnalités  Les fonctionnalités les plus courantes aujourd’hui… La Géolocalisation @laurentgallen
  14. 14. 14 Les Fonctionnalités  Les fonctionnalités les plus courantes aujourd’hui… La reconnaissance vocale SIRI et S-VOICE @laurentgallen Siri sait aussi écrire : http://www.apple.com/fr/ios/siri/ un exemple de S-Voice sur le Galaxy S3 : http://www.youtube.com/watch?v=A0FXDaAKJ8A
  15. 15. 15 Les Fonctionnalités  …et celles de demain avec 2 exemples biométriques La reconnaissance faciale et gestuelle @laurentgallen
  16. 16. 16 Les Fonctionnalités  …et celles de demain avec 2 exemples biométriques La reconnaissance de l’iris @laurentgallen
  17. 17. 17 Les Fonctionnalités  Pourquoi et comment utiliser les nouvelles fonctionnalités dans son application mobile ? @laurentgallen
  18. 18. 18 Analyser le Design sur les interfaces tactiles  Panoramas des différentes plateformes, les différents contextes d’usages. Le Design d’interfaces logicielles @laurentgallen Exemple 1 avec un tableau de commande d’une imprimante 3D
  19. 19. 19 Analyser le Design sur les interfaces tactiles  Panoramas des différentes plateformes, les différents contextes d’usages. Le Design d’interfaces logicielles @laurentgallen Exemple 2 avec un banc de montage vidéo digital
  20. 20. 20 @laurentgallen Analyser le Design sur les interfaces tactiles  Panoramas des différentes plateformes, les différents contextes d’usages. Le Design d’interfaces Web Responsive (Responsive Web Design)
  21. 21. 21 Analyser le Design sur les interfaces tactiles  Panoramas des différentes plateformes, les différents contextes d’usages. Le Design d’interfaces Mobile @laurentgallen
  22. 22. 22 Analyser le Design sur les interfaces tactiles  Panoramas des différentes plateformes, les différents contextes d’usages. Autres plateformes, les écrans de contrôle @laurentgallen dans un centre commercial La Kinect
  23. 23. 23 Analyser le Design sur les interfaces tactiles  Panoramas des différentes plateformes, les différents contextes d’usages. Autres plateformes, les objets connectés @laurentgallen autre exemple avec l’Apple Watch https://www.youtube.com/watch?v=B51p-DbPl8I
  24. 24. 24 Analyser le Design sur les interfaces tactiles  Panoramas des différentes plateformes, les différents contextes d’usages. Autres plateformes, les objets connectés @laurentgallen autre exemple avec la HAPIfork https://www.youtube.com/watch?v=Lt403H_ry0w
  25. 25. 25 Analyser le Design sur les interfaces tactiles  Les différents types de design : Informatif @laurentgallen
  26. 26. 26 Analyser le Design sur les interfaces tactiles  Les différents types de design : Gaming @laurentgallen
  27. 27. 27 Analyser le Design sur les interfaces tactiles  Les différents types de design : Social @laurentgallen
  28. 28. 28 Analyser le Design sur les interfaces tactiles  Les différents types de design : Utilitaires @laurentgallen
  29. 29. 29 Analyser le Design sur les interfaces tactiles  Les différents types de design : Marques @laurentgallen
  30. 30. 30 Analyser le Design sur les interfaces tactiles  Mobile App VS Mobile Web @laurentgallen
  31. 31. 31 Analyser le Design sur les interfaces tactiles  Mobile App VS Mobile Web @laurentgallen
  32. 32. 32 Analyser le Design sur les interfaces tactiles  Etude de cas des différentes Guidelines fabricants/éditeurs (GUI) iOS 8 @laurentgallen https://developer.apple.com/design/
  33. 33. 33 Analyser le Design sur les interfaces tactiles  Etude de cas des différentes Guidelines fabricants/éditeurs (GUI) Android Vision et Material Design (Lollipop 5) @laurentgallen http://developer.android.com/design/index.html http://www.google.com/design/spec/materi al-design/introduction.html
  34. 34. 34 Analyser le Design sur les interfaces tactiles  Etude de cas des différentes Guidelines fabricants/éditeurs (GUI) Windows User Experience Interaction Guidelines @laurentgallen http://dev.windows.com/fr-fr/design
  35. 35. 35 Analyser le Design sur les interfaces tactiles  Etude de cas des différentes Guidelines fabricants/éditeurs (GUI) Amazon Apps, Design and User Experience Guidelines @laurentgallen https://developer.amazon.com/public/solutions/devices
  36. 36. 36 Analyser le Design sur les interfaces tactiles  Les bonnes pratiques, ce qu'il ne faut pas faire et pourquoi ? @laurentgallen https://developer.apple.com/design/tips/
  37. 37. 37 Analyser le Design sur les interfaces tactiles  Jusqu'où peut-on aller dans son Design pour un dispositif mobile ? Quels sont les points à vérifier avant de débuter un projet ? @laurentgallen
  38. 38. 38 Analyser le Design sur les interfaces tactiles  Les Design Patterns Mobiles @laurentgallen http://www.mobilemozaic.com/
  39. 39. 39 Adapter le design aux caractéristiques d’identité de la marque @laurentgallen  Cas pratique avec 2 applications pour Oasis : La Chuuute et Be Fruit
  40. 40. 40 Adapter le design aux caractéristiques d’identité de la marque  Cas pratique avec 2 applications pour Oasis : La Chuuute @laurentgallen vidéo : http://www.youtube.com/watch?v=mi8ul75ToM0&feature=y outu.be
  41. 41. 41 Adapter le design aux caractéristiques d’identité de la marque  Cas pratique avec 2 applications pour Oasis : La Chuuute @laurentgallen
  42. 42. 42 Adapter le design aux caractéristiques d’identité de la marque  Cas pratique avec 2 applications pour Oasis : Be Fruit @laurentgallen Démo vidéo : http://www.youtube.com/watch?v=YGfFGEnyJYs&lis t=PL416AFB1A1474F481&index=7
  43. 43. 43 Adapter le design aux caractéristiques d’identité de la marque @laurentgallen  Cas pratique : imaginez un concept d’une visite en réalité augmentée  Quelle marque / Quel client ?  Que va t-on proposer au client avec la réalité augmentée ?  L'intérêt de la visite en réalité augmentée ?  Qu'apporte t-elle de plus comme information ?  Que va t-on trouver comme informations dans cette application ?  Quel support (smartphone, tablette) ? Quel OS ?  Quel type de design (orientation, style...) ? expérience Renault Zoé for iPad http://www.youtube.com/watch?v=qapOBWEsDSA Renault Expérience sur iPad http://www.youtube.com/watch?feature=player_emb edded&v=uuLXteuwG4g
  44. 44. 44 Adapter le design aux caractéristiques d’identité de la marque  Cas pratique : analyse d’une application dans les médias La reconversion réussie du journal LE MONDE, introduction @laurentgallen
  45. 45. 45 Adapter le design aux caractéristiques d’identité de la marque  Un exemple de l'application LEMONDE.FR dans les 3 environnements :  avec Windows 8 @laurentgallen
  46. 46. 46 Adapter le design aux caractéristiques d’identité de la marque  Un exemple de l'application LEMONDE.FR dans les 3 environnements :  avec Android @laurentgallen
  47. 47. 47 Adapter le design aux caractéristiques d’identité de la marque  Un exemple de l'application LEMONDE.FR dans les 3 environnements :  avec iOS8 (version iPhone) @laurentgallen
  48. 48. 48 Adapter le design aux caractéristiques d’identité de la marque  Cas pratique @laurentgallen  L’application iPad Jimi Hendrix, The Complete Experience
  49. 49. 49 Adapter le design aux caractéristiques d’identité de la marque  Cas pratique @laurentgallen  L’application iPad Jimi Hendrix, The Complete Experience vidéos : http://vimeo.com/34318829 et http://www.youtube.com/watch?v=0Ob- QBmUC7o
  50. 50. 50 Adapter le design aux caractéristiques d’identité de la marque  Cas pratique @laurentgallen  L’application iPad Jimi Hendrix, The Complete Experience
  51. 51. 51  Définition @laurentgallen Le Responsive Web Design
  52. 52. 52  Un exemple avec le site Smashing Magazine @laurentgallen Le Responsive Web Design https://www.youtube.com/watch?v=bRXpTNMphqw&feature=youtu.be
  53. 53. 53  Les principes de conception @laurentgallen Le Responsive Web Design http://www.f4-design.fr/tag/responsive-web-design/
  54. 54. 54  Les principes de conception @laurentgallen Le Responsive Web Design http://www.f4-design.fr/tag/responsive-web-design/
  55. 55. 55  La grille flexible @laurentgallen Le Responsive Web Design
  56. 56. 56  Les avantages et les inconvénients du Responsive Web Design ? Les Incidences sur le Design ? @laurentgallen Le Responsive Web Design
  57. 57. 57  Quelques exemples : Barack Obama @laurentgallen Le Responsive Web Design https://www.barackobama.com/
  58. 58. 58  Quelques exemples : USA Today @laurentgallen Le Responsive Web Design http://www.usatoday.com/
  59. 59. 59 Identifier et collaborer avec les interlocuteurs impliqués dans le projet  Les interlocuteurs impliqués dans le projet @laurentgallen
  60. 60. 60 Identifier et collaborer avec les interlocuteurs impliqués dans le projet  Le rôle et l’implication du designer mobile dans le projet @laurentgallen
  61. 61. 61 Le dossier de spécifications @laurentgallen
  62. 62. 62 Les étapes de la phase de modélisation sur mobile et tablette @laurentgallen
  63. 63. 63 Les étapes de la phase de modélisation sur mobile et tablette @laurentgallen
  64. 64. 64 Les étapes de la phase de modélisation sur mobile et tablette  Exemple avec l’application iPad Sports365.fr  étape 1 : réflexion sur le design général de l'application selon la demande du client. @laurentgallen
  65. 65. 65 Les étapes de la phase de modélisation sur mobile et tablette  Exemple avec l’application iPad Sports365.fr  étape 2 : le draft @laurentgallen
  66. 66. 66 Les étapes de la phase de modélisation sur mobile et tablette  Exemple avec l’application iPad Sports365.fr  étape 3 : mise en place des éléments graphiques avec les mockups (wireframe) @laurentgallen
  67. 67. 67 Les étapes de la phase de modélisation sur mobile et tablette  Exemple avec l’application iPad Sports365.fr  étape 4 : création sous Photoshop @laurentgallen
  68. 68. 68 Les étapes de la phase de modélisation sur mobile et tablette  Exemple avec l’application iPad Sports365.fr  étape 5 : organiser ses dossiers @laurentgallen
  69. 69. 69 Les étapes de la phase de modélisation sur mobile et tablette  Les spécificités de la création sur mobile et tablette @laurentgallen
  70. 70. 70 Mener la phase des tests utilisateurs  Les enjeux pour chaque phase (vitesse d’exécution…) @laurentgallen
  71. 71. 71 Mener la phase des tests utilisateurs  Les rectifications @laurentgallen
  72. 72. 72 Qu'est-ce qu'une application réussie ?  Etude de cas avec Instagram @laurentgallen
  73. 73. 73 Qu'est-ce qu'une application réussie ?  Pour résumer une application réussie c'est quoi ? @laurentgallen Un logo, des couleurs, une police, un fond...
  74. 74. 74 Qu'est-ce qu'une application réussie ?  Pour résumer une application réussie c'est quoi ? Un logo, des couleurs, une police, un fond... oui mais pas seulement… @laurentgallen
  75. 75. 75 Qu'est-ce qu'une application réussie ?  Pour résumer une application réussie c'est quoi ? C’est aussi : @laurentgallen
  76. 76. 76 Qu'est-ce qu'une application réussie ?  Pour résumer une application réussie c'est quoi ? C’est aussi : Un concept grandiose, @laurentgallen
  77. 77. 77 Qu'est-ce qu'une application réussie ?  Pour résumer une application réussie c'est quoi ? C’est aussi : Un concept grandiose, @laurentgallen une application stable et « responsive »,
  78. 78. 78 Qu'est-ce qu'une application réussie ?  Pour résumer une application réussie c'est quoi ? C’est aussi : Un concept grandiose, @laurentgallen une application stable et « responsive », une application bien pensée (je veux dire, au niveau UX),
  79. 79. 79 Qu'est-ce qu'une application réussie ?  Pour résumer une application réussie c'est quoi ? C’est aussi : Un concept grandiose, @laurentgallen une application stable et « responsive », une application bien pensée (je veux dire, au niveau UX), une appli bien designée (je veux dire au niveau UI),
  80. 80. 80 Qu'est-ce qu'une application réussie ?  Pour résumer une application réussie c'est quoi ? C’est aussi : Un concept grandiose, @laurentgallen une application stable et « responsive », une application bien pensée (je veux dire, au niveau UX), une appli bien designée (je veux dire au niveau UI), une application qui a une identité,
  81. 81. 81 Qu'est-ce qu'une application réussie ?  Pour résumer une application réussie c'est quoi ? C’est aussi : Un concept grandiose, @laurentgallen une application stable et « responsive », une application bien pensée (je veux dire, au niveau UX), une appli bien designée (je veux dire au niveau UI), une application qui a une identité, une application qui est « sociable ».
  82. 82. 82 Être force de proposition dans la vente de son concept :  La phase d’écoute et d’analyse des besoins de son client : @laurentgallen
  83. 83. 83 Être force de proposition dans la vente de son concept :  Les points de tension çà éviter : @laurentgallen
  84. 84. 84 Cas pratique @laurentgallen  Développement d’une application mobile d'une formation e-learning avec les aspects suivants :  Story-board,  Ergonomie,  Fonctionnalités,  Design.
  85. 85. 85 Merci à tous

×