Du zoning au mockup, itinéraire d'une maquette web

221,905 views

Published on

Pour s'y retrouver dans le vocabulaire de la conception, commençons par mettre les bons mots sur les choses : wireframe, style tiles, prototype, etc. Voyons ensuite comment enchaîner ça dans un workflow idéal, à moduler en fonction des équipes et des projets, pour vitaminer vos processus de conception web !

Published in: Design

Du zoning au mockup, itinéraire d'une maquette web

  1. 1. Du zoning au mockup en passant par le moodboard, le wireframe, les style tiles et le prototype itinéraire d’une maquette web par Romy Duhem-Verdière — Kiwi Party 2013
  2. 2. Romy Duhem-Verdière http://romy.tetue.net Consultante web UX ergonomie et accessibilité
  3. 3. ?mockup zoning wireframe maquette proto moodboardcroquis storyboard style tiles mindmap arbo sketch fil de fer gabarit tendances blue print ébauche template charte moonboots design habillage graphisme sitemap draft rendu intégrati squelett ttes tion mplating roughesquisse ergo kiwi
  4. 4. sketch croquis Outils : Papier et crayons Sneakpeekit, InterfaceSketch Du zoning au mockup, itinéraire d’une maquette par Romy Duhem-Verdière - Kiwi Party 2013 Source : Vimeo sketches by Sockyung ‘Sox’ Hong Jeter ses idées sur papier
  5. 5. Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 Conception ergonomique
  6. 6. zoning Outils : Papier et crayons ou PowePoint, LibreOffice, etc. en ligne : Wireframe.cc, Cacoo Du zoning au mockup, itinéraire d’une maquette par Romy Duhem-Verdière - Kiwi Party 2013 Source : http://www.protoshare.com Identifier les principales zones + lister les contenus ne pas en oublier et hiérarchiser
  7. 7. Du zoning au mockup, itinéraire d’une maquette par Romy Duhem-Verdière - Kiwi Party 2013 Outils : Papier et crayons ou Balsamiq, Pencil en ligne : Moqups, Mockflow, Mockingbird wireframe maquette filaire Il complète le zoning, en rentrant dans le détail de chaque bloc
  8. 8. prototype Outils : Axure HTML/CSS/JS Boostrap, Foundation, Dummy Du zoning au mockup, itinéraire d’une maquette par Romy Duhem-Verdière - Kiwi Party 2013 Pages fonctionnelles, cliquables et interactives, qui peuvent servir à des tests d’utilisabilité Source : Wireframes & Prototypes: Is There Really a Difference?
  9. 9. Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 zoning wireframe prototype 1 2 3maquette filaire
  10. 10. Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 Habillage graphique
  11. 11. moodboard planche d’inspiration Outils : Panneau d’affichage ou Keynote, PowerPoint, etc. Du zoning au mockup, itinéraire d’une maquette par Romy Duhem-Verdière - Kiwi Party 2013 Épingler les idées qui viennent
  12. 12. Outils : StyleTil.es Du zoning au mockup, itinéraire d’une maquette par Romy Duhem-Verdière - Kiwi Party 2013 style tile planche de style Source : Style Tiles and How They Work, A List Apart, 2012 Plusieurs planches pour choisir le style, amorcer la charte graphique
  13. 13. mockup maquette graphique Du zoning au mockup, itinéraire d’une maquette par Romy Duhem-Verdière - Kiwi Party 2013 Outils : Photoshop, The Gimp, Photoshop Etiquette Manifesto Prévisualisation haute fidélité du rendu graphique
  14. 14. Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 mockupstyle tilesmoodboard 1 2 3 planches de style maquette graphiqueplanche d’inspiration
  15. 15. Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 Workflow idéal
  16. 16. + 1 2 3+ + Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 zoning wireframe prototype maquette filaire mockupstyle tilesmoodboard planches de style maquette graphiqueplanche d’inspiration
  17. 17. Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 zoning wireframe prototype mockupstyle tilesmoodboard + + maquette filaire planches de style maquette graphiqueplanche d’inspiration 1 amorcer le travail (en interne)
  18. 18. Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 zoning wireframe prototype mockupstyle tilesmoodboard + + maquette filaire planches de style maquette graphiqueplanche d’inspiration 2 validation avec le commanditaire
  19. 19. Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 zoning wireframe prototype mockupstyle tilesmoodboard + + maquette filaire planches de style maquette graphiqueplanche d’inspiration + 3tester avant production
  20. 20. Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 Exemples
  21. 21. Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 mockupzoning Source : L'extranet assurés Thélem assurances : le making-of du point de vue d'une petite agence web, LunaWeb - 2010
  22. 22. Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 Source : Web site design approach using discovery, user segmentation, moodboards, wireframes, mockups, and CSS production, Dean Burney zoning + moodboard mockup
  23. 23. Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 Source : Mattrunks change de peau, nouvelle version - 2012 mockupswireframes
  24. 24. Source : Les « Style Tiles », un nouvel outil pour le webdesigner ? Marie Alhomme, Le train de 13h37 - 2012 style tiles mockups responsive Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013
  25. 25. Source : Make Your Mockup in Markup, by Meagan Fisher, 24 ways - 2009 prototype habillage graphique dans le navigateur Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013
  26. 26. Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 Source : Wireframes & Prototypes: Is There Really a Difference? ProtoShare - 2010 + mockups ? wireframe prototype haute fidélité
  27. 27. Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 Des questions ? http://romy.tetue.net/990 @tetue

×