• 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. Romy Duhem-Verdière http://romy.tetue.net Consultante web UX ergonomie et accessibilité
  • 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. 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. Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 Conception ergonomique
  • 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. 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. 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. 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. Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 Habillage graphique
  • 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. 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. 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. 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. Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 Workflow idéal
  • 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. 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. 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. 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. Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 Exemples
  • 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. 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. 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. 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. 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. 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. 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
    Please download to view
  • All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
    ...

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

    by romy-duhem-verdiere

    on

    Report

    Category:

    Design

    Download: 0

    Comment: 0

    22,067

    views

    Comments

    Description

    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 !
    Download Du zoning au mockup, itinéraire d'une maquette web

    Transcript

    • 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. Romy Duhem-Verdière http://romy.tetue.net Consultante web UX ergonomie et accessibilité
  • 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. 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. Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 Conception ergonomique
  • 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. 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. 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. 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. Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 Habillage graphique
  • 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. 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. 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. 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. Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 Workflow idéal
  • 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. 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. 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. 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. Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013 Exemples
  • 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. 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. 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. 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. 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. 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. 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
  • Fly UP