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 !
Cascade et héritage : concevoir, organiser, optimiser…
Du zoning au mockup, itinéraire d'une maquette web
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
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
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