Le wireframe et mock-up ou maquette en fil de fer est l’étape de la conception d’une interface homme-machine qui consiste à réaliser une maquette des pages web.
Elle permet de définir les gabarits nécessaires au développement de votre site Internet ou de l’application Web.
Durant la conception du site web, ce prototypage horizontal permet de :
- confirmer les exigences spécifiées dans le cahier des charges technique et de valider l’arborescence du site,
- simuler le fonctionnement du futur site Internet en confirmant les fonctionnalités souhaitées
Dans la chaîne de production, les prototypes permettront de commencer le développement et de définir les tests fonctionnels unitaires à prévoir pour le recettage.
Wireframe
Schématisation minimaliste de la future page web, il permet de vérifier :
- la hiérarchie des informations dans la page,
- les fonctionnalités,
- l’ergonomie,
- l’encombrement des différents éléments,
- l’expérience utilisateur (UX).
Ces Wireframes doivent être déclinés pour simuler le comportement sur les différents supports.
Leur conception revêt un aspect arbitraire dans son résultat (le fichier image) mais doit prévoir le comportement des différents éléments sur toutes les résolutions : glissement des éléments à partir de résolutions seuils, changement d’aspect de certains blocs et parfois masquer certains éléments secondaires pouvant nuire à l’expérience utilisateur.
Par exemple : une carte comme GoogleMap n’a aucun intérêt fonctionnel sur mobile, au contraire un lien vers l’adresse dans l’application du téléphone.
Mock-Up
Cette étape suit le Wireframe et va permettre de mettre en valeur les éléments fonctionnels au plus proches de la version finale.
- il respecte le gabarit de la maquette,
- il intègre la charte graphique web, couleurs, typographies, formes, etc.
- il met en valeur les éléments fonctionnels : Appels à l’action, facteurs de réassurance, éléments interactifs, etc.
- il doit prendre en compte les futurs contenus et s’adapter à ceux-ci : nombre de mots, taille des éléments textuels, etc.
