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 !

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