Du zoning au prototype dynamique.
les étapes de réalisation d'un prototype (du Zoning au Mockup).
Conception Ergonomique (UX)
Etape 1, Zoning.
Les termes de zoning, wireframe, mockup et prototype ont trait à l’ergonomie et la conception d’interface, on les retrouve dans la plupart des projets digitaux. Ils ne sont pas synonymes (contrairement aux idées reçues) mais correspondent à des étapes distinctes. Point sur la terminologie !
Qu’est-ce que le Zoning ?
Le zoning est une schématisation grossière de ce que sera la future page web. On utilise des blocs pour déterminer où se trouveront les contenus et fonctionnalités. Cette étape a généralement lieu après la création d’une arborescence, il arrive quelquefois qu’elle soit réalisée en parallèle.
Définir l’organisation générale des pages est l’occasion de présenter une première approche au client ou décisionnaire. Celui-ci pourra alors valider ou réajuster les grands axes avant la réalisation des wireframes.
Les grandes zones de contenus et autres éléments doivent être cohérents sur la page. Il n’est pas rare que les souhaits initiaux soient inadaptés, par exemple une page d’accueil surchargée d’informations. C’est lors du zoning qu’est effectué ce premier débroussaillage.
Objectifs : Identifier les principales zones + lister les contenus, ne pas en oublier et hiérarchiser.
Etape 2, Wireframe.
Le wireframe (on parle de « maquette fil de fer » en français) est la suite logique du zoning. Chaque bloc réalisé lors de l’étape précédente se voit doté d’image(s), de texte(s) ou de vidéo(s). Ce contenu peut être fictif car les informations finales ne sont pas toujours connues à ce stade du projet. L’objectif est de définir l’organisation des éléments et des formes sans travailler l’aspect visuel, le graphisme n’interviendra que plus tard. On se base davantage sur les standards et souhaits ergonomiques pour orienter la réflexion.
Objetctifs : Il complète le zoning, en rentrant dans le détail de chaque bloc.
Etape 3, Prototype interactif.
Un prototype vient valider les technologies en rendant les interfaces fonctionnelles, tout est testé pour détecter d’éventuels problèmes. Le but n’est pas d’inciter le testeur à acheter le produit, il doit seulement le rendre meilleur. Un prototype permet également d’aller démarcher d’éventuels investisseurs.
Objecifs : Pages fonctionnelles, cliquables et interactives, qui peuvent servir
à des tests d’utilisabilité.
Habillage Graphique (UI)
Etape 1, Moodboard.
Objectifs : Épingler les idées qui viennent
Etape 2, Style Tile.
Objectifs : choisir le style et amorcer la charte graphique
Etape 3, Mockup.
Objectifs : prévisualiser le rendu graphique en haute définition