Selon la conceptrice web Romy Duhem-Verdière, la maquette d’un site internet passe par sept étapes incontournables.
En fait, ces étapes sont divisées en deux phases distinctes : la conception ergonomique et l’habillage graphique, chacune d’elle ayant une étape de création, de validation et de recette pré-production.
Le sketch
Le sketch est la phase de création initiale. Il s’agit tout simplement jeter ses idées sur papier, faire un premier croquis du site. On utilise le papier et crayon, mais on peut aussi s’aider des outils tels Sneakpeekit ou Interface Sketch.
Conception ergonomique
Le zoning permet d’entrer dans la conception ergonomique. Il s’agit d’identifier les principales zones du futur site, de lister les contenus et les hiérarchiser. On utilise le papier et crayon, mais on peut aussi utiliser Powerpoint ou LibreOffice, ou des outils dédiés comme Wireframe.cc ou Cacoo.
Le wireframe, ou maquette filaire, complète le zoning en entrant dans le détail pour chaque bloc. C’est l’élément de validation de la conception ergonomique. On peut là aussi utiliser le papier et crayon, mais aussi des logiciels comme Balsamiq ou Pencil, mais aussi des outils en ligne tels Moqups, Mockflow, ou Mockingbird.
Le prototype présente les pages fonctionnelles, avec navigation et interactivité.Ces pages peuvent déjà être utilisées pour des tests. Elles sont réalisées en HTML, CSS et Javascript, ou avec des outils comme Axure, Boostrap, Foundation ou Dummy.
Habillage Graphique
Le moodboard est la première étape de l’habillage graphique du site. Il s’agit de créer une planche d’inspiration où l’on épingle les idées, les tons, les ambiances. Cela peut se faire sur un panneau d’affichage, sur une page Pinterest, sur PowerPoint ou Keynote.
Le Style Tile propose une début de charte graphique. On y présente le style des caractères, les couleurs, les logos. C’est l’élément de validation de l’habillage graphique. Un outil est dédié à cette étape : Styletil.es
Le Mockup est la maquette finalisée du site. Elle correspond à 99% au visuel du site, réalisée avec Photoshop, Gimp ou tout autre outil de création d’image.
