Du zoning au mockup
en passant par le moodboard, le wireframe, les style tiles et le prototype
itinéraire d’une maquette w...
Romy Duhem-Verdière
http://romy.tetue.net
Consultante web UX
ergonomie et accessibilité
?mockup
zoning
wireframe
maquette
proto
moodboardcroquis
storyboard
style tiles
mindmap
arbo
sketch
fil de fer
gabarit
ten...
sketch
croquis
Outils :
Papier et crayons
Sneakpeekit, InterfaceSketch
Du zoning au mockup, itinéraire d’une maquette
par ...
Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013
Conception ergonomique
zoning
Outils :
Papier et crayons
ou PowePoint, LibreOffice, etc.
en ligne : Wireframe.cc, Cacoo
Du zoning au mockup, itin...
Du zoning au mockup, itinéraire d’une maquette
par Romy Duhem-Verdière - Kiwi Party 2013
Outils :
Papier et crayons
ou Bal...
prototype
Outils :
Axure
HTML/CSS/JS
Boostrap, Foundation, Dummy
Du zoning au mockup, itinéraire d’une maquette
par Romy D...
Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013
zoning wireframe prototype
1 2 ...
Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013
Habillage graphique
moodboard
planche d’inspiration
Outils :
Panneau d’affichage
ou Keynote, PowerPoint, etc.
Du zoning au mockup, itinéraire ...
Outils :
StyleTil.es
Du zoning au mockup, itinéraire d’une maquette
par Romy Duhem-Verdière - Kiwi Party 2013
style tile
p...
mockup
maquette graphique
Du zoning au mockup, itinéraire d’une maquette
par Romy Duhem-Verdière - Kiwi Party 2013
Outils ...
Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013
mockupstyle tilesmoodboard
1 2 ...
Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013
Workflow idéal
+
1 2 3+ +
Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013
zoning wireframe pro...
Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013
zoning wireframe prototype
mock...
Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013
zoning wireframe prototype
mock...
Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013
zoning wireframe prototype
mock...
Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013
Exemples
Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013
mockupzoning
Source : L'extrane...
Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013
Source : Web site design approa...
Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013
Source : Mattrunks change de pe...
Source : Les « Style Tiles », un nouvel outil pour le webdesigner ? Marie Alhomme, Le train de 13h37 - 2012
style tiles mo...
Source : Make Your Mockup in Markup, by Meagan Fisher, 24 ways - 2009
prototype
habillage graphique
dans le navigateur
Du ...
Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013
Source : Wireframes & Prototype...
Du zoning au mockup, itinéraire d’une maquette — par Romy Duhem-Verdière — Kiwi Party 2013
Des questions ?
http://romy.tet...
Prochain SlideShare
Chargement dans…5
×

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

149 083 vues

Publié le

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 !

Publié dans : Design
1 commentaire
10 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
149 083
Sur SlideShare
0
Issues des intégrations
0
Intégrations
122 786
Actions
Partages
0
Téléchargements
207
Commentaires
1
J’aime
10
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×