support de cours Atelier interactivité Année 1

1. Design d'interactivité ? Module 1ere année d’initiation au design d’interactivité Grégoire Cliquet / Laurent Neyssensas / Clément Thiery L’École de design Nantes Atlantique 2010 - 2011

2. Design ? * Une activité intégrable dans un processus projet qui a pour objectif de produire de la valeur ajoutée : Usages / Technologie / Identité * Il a pour finalité d’étendre la gamme , renforcer la marque ou faciliter l’innovation * Qualité globale perçue d’un produit ou d’un service est déterminée par le design « Un dessin à dessein » http://www.gchangetout.com/images_int/tony2panam/83459/337678.jpg

4. Design d’Interactivité ? @lecolededesign 1. Production de contenus (design numérique / media design) 2. Réalisation d’interfaces (graphiques) 3. Nouvelles modalités d’interaction 4. Conception de services innovants

5. 1. Design Numérique (media design) Production de Contenus Graphisme (infographie 2d / 3d) / Motion / Son Valentin Millet Jules Leclerc & Jean Christophe Naour The French Flavor designers http://www.thefrenchflavor.com Vidéo

7. 2. Design d’interfaces (G.U.I. / Web design) Graphical User Interfaces (Interfaces Graphiques)

8. 2. Design d’interfaces (exemple 1) * Interfaces graphiques : GUI, Applications, Web, Mobiles… * Convergence, Plasticité des interfaces… Accessibilité, Navigabilité “ ahead” / C. Faydi et M. Denié / 2010

9. 2. Design d’interfaces (méthode) * Hiérarchisation des fonctions * Séquence de navigation * Définition des interacteurs * Mise en forme des contenus “ ahead” / C. Faydi et M. Denié / 2010

10. 2. Design d’interfaces (production) Eléments nécessaires à la réalisation de l’interface graphique * Wireframe (gabarits) * Mockup (maquette graphique) / Layout * Préconisations et Spécifications techniques “ Subatech” / S. Mouton et A. Milien / 2010

11. 2. Design d’interfaces Outils : * Wireframing (Pencil) * Langages (xHTML, CSS, Javascript, Php, MySql) * Logiciels (Bloc notes !, Adobe DreamWeaver… Filezilla)

12. 3. Nouvelles modalités d’interaction * Evolution de l’électronique : Disappearing Computer, Ambient & Ubiquitous Computing 1950 2008

14. 3. Nouvelles modalités d’interactions (méthode) * Approche descendante et ascendante * Scénario d’Usages * Etude de faisabilité “ MindFlow” (étude) / T. Da Luz / 2010 Vidéo “ MindFlow” (final) / T. Da Luz / 2010 Vidéo

15. 3. Nouvelles modalités d’interactions (production) * Scénario d’usage * Démonstrateur fonctionnel (Proof Of Concept) “ Scope” / F. Lasorne / IVRC Tokyo 2009 Vidéo “ Immersive Rail Shooter” / D. Arenou / IVRC Tokyo 2010 Vidéo

16. 3. Nouvelles modalités d’interactions (production) * Scénario d’usage * Démonstrateur fonctionnel (Proof Of Concept) “ Laz’s Quest” / I. Ardouin Fumat & M. Garel / Laval Virtual 2010 Vidéo

17. 4. Conception de services innovants Définition et scénarisation de services innovants Innovation Descendante : De la R&D vers les USAGES et les USAGERS Innovation Ascendante : Des USAGES et les USAGERS vers la R&D

18. 4. Design de services (exemple 1/2) Valorisation d’une technologie hardware / software (innovation descendante) Technologie d’analyse sémantique des contenus multimédia (audio/vidéo) http://www.2424actu.fr (Orange Labs Lannion / 2009) de l’abstraction technologique à sa matérialisation… “ 2424actu.fr” / Orange Labs Lannion 2009

19. 4. Design de services (exemple 2/2) Observation des usages, détection de besoins (innovation ascendante) Diffuser, agréger et partager un événement culturel sur les réseaux sociaux : Géographique, Thématique et Relationnel Nouvelles Technologies Nouveaux Usages « Vibrations Culturelles » / C. Thiery / 2008

20. 4. Design de services (méthode / outils) Veille Créative (veille stratégique, agrégation de flux RSS…) Observation des usages (Etudes sociologiques, ergonomiques…) Brainstorming, Mindmapping… (Prise en compte des contraintes technologiques…)

21. 4. Design de services (production) S toryboard / Scénario * Contexte d’utilisation * Définition de service / Présentation des modalités d’usages * Identité du service « Vibrations Culturelles » / C. Thiery / 2008) Vidéo

22. Designer d’interactivité ? * Designer Intégré R&D (Légo, Ubisoft, Orange…) * Designer PME (Wiztivi, Uneek) * Agences / Free Lance (l’arrosoir, Opixido) * Poursuite d’études (doctorat / x2 diplôme ENSAM & Bretagne Telecom)

23. Merci ;) des questions ? [email_address] [email_address] [email_address]