SlideShare uma empresa Scribd logo
1 de 18
Baixar para ler offline
WORKSHOP CONCEPTION DE STORYBOARDS Mardi 30 oct. 2007 © Eric DI POL - 2007
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Plan du workshop © Eric DI POL - 2007
1. Vocabulaire wireframe layout zoning détaillé blueprint maquette fonctionnelle prototype storyboard © Eric DI POL - 2007
> Surtout pour : - Définir le contenu de chaque écran, mais aussi la structure, le fonctionnement et les process liés à l’application, -  Faire valider au client les pages, leur contenu, leur structure et la navigation qui les lie entre-elles, -  Servir de base aux spécifications, -  Des tests utilisateur > Mais aussi pour : - Faciliter le travail des créatifs lors de la phase de production, - Anticiper d’éventuels développements lourds, … 2. Des wireframes : pourquoi faire ? © Eric DI POL - 2007
> En Agence : L’équipe projet : Ergonome, Concepteur,  Chef de Projet,  DA, Développeur… > Lors des tests utilisateurs : Un panel de l’audience finale (fonction du projet) > Chez le Client : Responsable e-Business, Communication, Marketing… Toute personne chargée de valider la partie fonctionnelle du projet. 3. Des wireframes : pour qui ? © Eric DI POL - 2007
4. Un storyboard, ce n’est pas… ZONE IDENTITE 2 ZONE IDENTITE 3 MENU Editorial Zone de PUSH Produit MENU Fonctionnel FOOTER CONTENU PRINCIPAL ZONE IDENTITE 1 LOGO Zone de PUSH : Actu /  Service /  Magasin Chemin de navigation …  un zoning Le zoning est l’étape qui précède la mise en place des storyboards / wireframes qui sont, eux, beaucoup plus précis. Zone de RECHERCHE © Eric DI POL - 2007
4. Un storyboard, ce n’est pas… …  une maquette Dans le storyboard, on s’attache principalement au contenu Présent sur la page, à l’aspect Fonctionnel et ergonomique. L’aspect graphique doit être « évacué », « ce n’est pas ce que j’ai validé, ce bouton n’était pas placé ici… » © Eric DI POL - 2007
Wireframes imprimés Wireframes pour l’écran ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],5. Différentes formes / finalités © Eric DI POL - 2007
High Fidelity Low Fidelity 6. Vous êtes plutôt Hi-fi ou Low-fi ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],© Eric DI POL - 2007
[object Object],[object Object],[object Object],[object Object],© Eric DI POL - 2007 … A mieux se repérer dans les wireframes : 7. Petits conseils pour aider le client…
8. Les outils : comparatif * Outils online © Eric DI POL - 2007 NOTE FINALE Adapté au print Adapté à l’écran Prise en main / Utilisation Interactivité Export HTML Prototypage rapide Création de wireframe 12/20 8/20 9/20 12/20 11/20 /20 14/20 15/20 16/20 ** ** *** * * **** **** **** ** ** * **** **** *** **** **** *** *** * * ** **** ** ** * ** ** **** *** ** *** **** * * * **** ** ** **** **** ** * * ** ** **** *** *** *** * * *** ** *** **** **** Gliffy * Acrobat Photoshop Illustrator Dream weaver Flash Omni graffle PowerPoint Visio Axure
8. Les outils online : Gliffy © Eric DI POL - 2007
[object Object],[object Object],[object Object],8. Les outils online : Gliffy ,[object Object],[object Object],[object Object],[object Object],[object Object],© Eric DI POL - 2007
8. Les autres outils : démos Démos de : MS-Powerpoint MS-Visio Axure RP Pro © Eric DI POL - 2007
Blogs Biblio 9. Blogs / Biblio / Downloads www.boxandarrows.com www.guuui.com www.uie.com/brainsparks www.digital-web.com www.uxmatters.com « Communicating Design » (Dan M. Brown – 2006) « Effective prototyping for software makers » (J. Arnowitz, M. Arent & N. Berger – 2007) « Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces »   (C. Snyder – 2007) © Eric DI POL - 2007
9. Blogs / Biblio / Downloads Pour Omnigraffle : - URL GreyHot : - Garrett Dimon :  - IA Institute Pour Visio : - Web prototyping tool - Wireframe stencil 2003 (Garrett Dimon) - IA Institute Pour Powerpoint : - IA Institute (dont le wireframe de F. Cavazza) http://urlgreyhot.com/personal/resources/omnigraffle_wireframe_palette   http://v1.garrettdimon.com/resources/templates-stencils-for-visio-monigraffle   http://www.iainstitute.org/en/learn/tools.php   Downloads http://www.iainstitute.org/en/learn/tools.php   http://www.iainstitute.org/en/learn/tools.php   http://www.guuui.com/downloads/GUUUI%20Web%20Prototyping%20Tool%203.zip   http://v1.garrettdimon.com/files/resources/ia_tools/Visio_2003.zip   © Eric DI POL - 2007
9. Blogs / Biblio / Downloads ,[object Object],[object Object],[object Object],© Eric DI POL - 2007
MERCI  ! Plus d’infos : http://www.superfiction.net/blog © Eric DI POL - 2007

Mais conteúdo relacionado

Destaque

jeu sur le kaizen
jeu sur le  kaizenjeu sur le  kaizen
jeu sur le kaizenCIPE
 
Trouver sa proposition de valeur
Trouver sa proposition de valeurTrouver sa proposition de valeur
Trouver sa proposition de valeurINOË CONSEIL
 
Accompagnement personnalisé à la gestion de carrière
Accompagnement personnalisé à la gestion de carrièreAccompagnement personnalisé à la gestion de carrière
Accompagnement personnalisé à la gestion de carrièreBéatrice BRINET
 
Diapositivas Nivel Internet
Diapositivas Nivel InternetDiapositivas Nivel Internet
Diapositivas Nivel Internetlourdesb1
 
Sant Jordi 2012
Sant Jordi 2012Sant Jordi 2012
Sant Jordi 2012laurajofre
 
Maison de la prostitution
Maison de la prostitution  Maison de la prostitution
Maison de la prostitution warum
 
Acciones Mas Comunes Sobre Capas
Acciones Mas Comunes Sobre CapasAcciones Mas Comunes Sobre Capas
Acciones Mas Comunes Sobre Capasbetzi.15
 
Dublin Core Metadata Initiative - Exemples d'applications
Dublin Core Metadata Initiative - Exemples d'applications Dublin Core Metadata Initiative - Exemples d'applications
Dublin Core Metadata Initiative - Exemples d'applications chessmu
 
Tecnologias educativas virtuales en los procesos de formación de la Administr...
Tecnologias educativas virtuales en los procesos de formación de la Administr...Tecnologias educativas virtuales en los procesos de formación de la Administr...
Tecnologias educativas virtuales en los procesos de formación de la Administr...Dolors Capdet
 
Données CRM, harmoniser vos données marketing pour segmenter vos campagnes
Données CRM, harmoniser vos données marketing pour segmenter vos campagnesDonnées CRM, harmoniser vos données marketing pour segmenter vos campagnes
Données CRM, harmoniser vos données marketing pour segmenter vos campagnesCharles Vieillard
 

Destaque (20)

Bilan de competences
Bilan de competencesBilan de competences
Bilan de competences
 
jeu sur le kaizen
jeu sur le  kaizenjeu sur le  kaizen
jeu sur le kaizen
 
How To Make A Point
How To Make A PointHow To Make A Point
How To Make A Point
 
Trouver sa proposition de valeur
Trouver sa proposition de valeurTrouver sa proposition de valeur
Trouver sa proposition de valeur
 
Le mille feuille
Le mille feuilleLe mille feuille
Le mille feuille
 
Demarche5 s
Demarche5 sDemarche5 s
Demarche5 s
 
Accompagnement personnalisé à la gestion de carrière
Accompagnement personnalisé à la gestion de carrièreAccompagnement personnalisé à la gestion de carrière
Accompagnement personnalisé à la gestion de carrière
 
Value Proposition Design
Value Proposition DesignValue Proposition Design
Value Proposition Design
 
Diapositivas Nivel Internet
Diapositivas Nivel InternetDiapositivas Nivel Internet
Diapositivas Nivel Internet
 
Sant Jordi 2012
Sant Jordi 2012Sant Jordi 2012
Sant Jordi 2012
 
Maison de la prostitution
Maison de la prostitution  Maison de la prostitution
Maison de la prostitution
 
Eros
ErosEros
Eros
 
Origen Playmobil
Origen PlaymobilOrigen Playmobil
Origen Playmobil
 
Acciones Mas Comunes Sobre Capas
Acciones Mas Comunes Sobre CapasAcciones Mas Comunes Sobre Capas
Acciones Mas Comunes Sobre Capas
 
Dublin Core Metadata Initiative - Exemples d'applications
Dublin Core Metadata Initiative - Exemples d'applications Dublin Core Metadata Initiative - Exemples d'applications
Dublin Core Metadata Initiative - Exemples d'applications
 
Presentation XKE Décembre
Presentation XKE DécembrePresentation XKE Décembre
Presentation XKE Décembre
 
Main lpc hard
Main lpc hardMain lpc hard
Main lpc hard
 
Troisieme au classement a. camara
Troisieme au classement a. camaraTroisieme au classement a. camara
Troisieme au classement a. camara
 
Tecnologias educativas virtuales en los procesos de formación de la Administr...
Tecnologias educativas virtuales en los procesos de formación de la Administr...Tecnologias educativas virtuales en los procesos de formación de la Administr...
Tecnologias educativas virtuales en los procesos de formación de la Administr...
 
Données CRM, harmoniser vos données marketing pour segmenter vos campagnes
Données CRM, harmoniser vos données marketing pour segmenter vos campagnesDonnées CRM, harmoniser vos données marketing pour segmenter vos campagnes
Données CRM, harmoniser vos données marketing pour segmenter vos campagnes
 

Semelhante a test

Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019Oeil de Coach
 
MultiTouch SNCF - REX Steria et I-Breed
MultiTouch SNCF - REX Steria et I-BreedMultiTouch SNCF - REX Steria et I-Breed
MultiTouch SNCF - REX Steria et I-BreedSteria
 
Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014Use Age
 
introduction à la gestion de projet
introduction à la gestion de projetintroduction à la gestion de projet
introduction à la gestion de projetlaureno
 
Kinect en moins de 10 Minutes
Kinect en moins de 10 MinutesKinect en moins de 10 Minutes
Kinect en moins de 10 MinutesMicrosoft
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Microsoft Technet France
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Julien LE THUAUT
 
Design systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsDesign systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsIdean France
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Idean France
 
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014Actency
 
Conf EXALT TLD - ChatGPT impact Design
Conf EXALT TLD - ChatGPT impact DesignConf EXALT TLD - ChatGPT impact Design
Conf EXALT TLD - ChatGPT impact DesignTanguyLeDuff1
 
Réussir la réalisation de son MVP ou son PoC
Réussir la réalisation de son MVP ou son PoCRéussir la réalisation de son MVP ou son PoC
Réussir la réalisation de son MVP ou son PoCOwlie
 
WygDay 2010 - session plénière
WygDay 2010 - session plénièreWygDay 2010 - session plénière
WygDay 2010 - session plénièreWygwam
 
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Mohammed JAITI
 
templates.iafactory, guide de prise en main
templates.iafactory, guide de prise en maintemplates.iafactory, guide de prise en main
templates.iafactory, guide de prise en mainiafactory
 

Semelhante a test (20)

Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019
 
Interactivite@ledna
Interactivite@lednaInteractivite@ledna
Interactivite@ledna
 
MultiTouch SNCF - REX Steria et I-Breed
MultiTouch SNCF - REX Steria et I-BreedMultiTouch SNCF - REX Steria et I-Breed
MultiTouch SNCF - REX Steria et I-Breed
 
Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014
 
introduction à la gestion de projet
introduction à la gestion de projetintroduction à la gestion de projet
introduction à la gestion de projet
 
Kinect en moins de 10 Minutes
Kinect en moins de 10 MinutesKinect en moins de 10 Minutes
Kinect en moins de 10 Minutes
 
FOF Spécial Webinaire.pdf
FOF Spécial Webinaire.pdfFOF Spécial Webinaire.pdf
FOF Spécial Webinaire.pdf
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
 
Design systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsDesign systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outils
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
 
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
 
Conf EXALT TLD - ChatGPT impact Design
Conf EXALT TLD - ChatGPT impact DesignConf EXALT TLD - ChatGPT impact Design
Conf EXALT TLD - ChatGPT impact Design
 
Batir Un Site Web 2011
Batir Un Site  Web 2011Batir Un Site  Web 2011
Batir Un Site Web 2011
 
WygDay 2010
WygDay 2010WygDay 2010
WygDay 2010
 
Réussir la réalisation de son MVP ou son PoC
Réussir la réalisation de son MVP ou son PoCRéussir la réalisation de son MVP ou son PoC
Réussir la réalisation de son MVP ou son PoC
 
WygDay 2010 - session plénière
WygDay 2010 - session plénièreWygDay 2010 - session plénière
WygDay 2010 - session plénière
 
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
 
Nlle présentation
Nlle présentationNlle présentation
Nlle présentation
 
templates.iafactory, guide de prise en main
templates.iafactory, guide de prise en maintemplates.iafactory, guide de prise en main
templates.iafactory, guide de prise en main
 

test

  • 1. WORKSHOP CONCEPTION DE STORYBOARDS Mardi 30 oct. 2007 © Eric DI POL - 2007
  • 2.
  • 3. 1. Vocabulaire wireframe layout zoning détaillé blueprint maquette fonctionnelle prototype storyboard © Eric DI POL - 2007
  • 4. > Surtout pour : - Définir le contenu de chaque écran, mais aussi la structure, le fonctionnement et les process liés à l’application, - Faire valider au client les pages, leur contenu, leur structure et la navigation qui les lie entre-elles, - Servir de base aux spécifications, - Des tests utilisateur > Mais aussi pour : - Faciliter le travail des créatifs lors de la phase de production, - Anticiper d’éventuels développements lourds, … 2. Des wireframes : pourquoi faire ? © Eric DI POL - 2007
  • 5. > En Agence : L’équipe projet : Ergonome, Concepteur, Chef de Projet, DA, Développeur… > Lors des tests utilisateurs : Un panel de l’audience finale (fonction du projet) > Chez le Client : Responsable e-Business, Communication, Marketing… Toute personne chargée de valider la partie fonctionnelle du projet. 3. Des wireframes : pour qui ? © Eric DI POL - 2007
  • 6. 4. Un storyboard, ce n’est pas… ZONE IDENTITE 2 ZONE IDENTITE 3 MENU Editorial Zone de PUSH Produit MENU Fonctionnel FOOTER CONTENU PRINCIPAL ZONE IDENTITE 1 LOGO Zone de PUSH : Actu / Service / Magasin Chemin de navigation … un zoning Le zoning est l’étape qui précède la mise en place des storyboards / wireframes qui sont, eux, beaucoup plus précis. Zone de RECHERCHE © Eric DI POL - 2007
  • 7. 4. Un storyboard, ce n’est pas… … une maquette Dans le storyboard, on s’attache principalement au contenu Présent sur la page, à l’aspect Fonctionnel et ergonomique. L’aspect graphique doit être « évacué », « ce n’est pas ce que j’ai validé, ce bouton n’était pas placé ici… » © Eric DI POL - 2007
  • 8.
  • 9.
  • 10.
  • 11. 8. Les outils : comparatif * Outils online © Eric DI POL - 2007 NOTE FINALE Adapté au print Adapté à l’écran Prise en main / Utilisation Interactivité Export HTML Prototypage rapide Création de wireframe 12/20 8/20 9/20 12/20 11/20 /20 14/20 15/20 16/20 ** ** *** * * **** **** **** ** ** * **** **** *** **** **** *** *** * * ** **** ** ** * ** ** **** *** ** *** **** * * * **** ** ** **** **** ** * * ** ** **** *** *** *** * * *** ** *** **** **** Gliffy * Acrobat Photoshop Illustrator Dream weaver Flash Omni graffle PowerPoint Visio Axure
  • 12. 8. Les outils online : Gliffy © Eric DI POL - 2007
  • 13.
  • 14. 8. Les autres outils : démos Démos de : MS-Powerpoint MS-Visio Axure RP Pro © Eric DI POL - 2007
  • 15. Blogs Biblio 9. Blogs / Biblio / Downloads www.boxandarrows.com www.guuui.com www.uie.com/brainsparks www.digital-web.com www.uxmatters.com « Communicating Design » (Dan M. Brown – 2006) « Effective prototyping for software makers » (J. Arnowitz, M. Arent & N. Berger – 2007) « Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces » (C. Snyder – 2007) © Eric DI POL - 2007
  • 16. 9. Blogs / Biblio / Downloads Pour Omnigraffle : - URL GreyHot : - Garrett Dimon : - IA Institute Pour Visio : - Web prototyping tool - Wireframe stencil 2003 (Garrett Dimon) - IA Institute Pour Powerpoint : - IA Institute (dont le wireframe de F. Cavazza) http://urlgreyhot.com/personal/resources/omnigraffle_wireframe_palette http://v1.garrettdimon.com/resources/templates-stencils-for-visio-monigraffle http://www.iainstitute.org/en/learn/tools.php Downloads http://www.iainstitute.org/en/learn/tools.php http://www.iainstitute.org/en/learn/tools.php http://www.guuui.com/downloads/GUUUI%20Web%20Prototyping%20Tool%203.zip http://v1.garrettdimon.com/files/resources/ia_tools/Visio_2003.zip © Eric DI POL - 2007
  • 17.
  • 18. MERCI ! Plus d’infos : http://www.superfiction.net/blog © Eric DI POL - 2007