L'utilité des wireframes dans un projet web

Un wireframe est une forme de maquette fonctionnelle de l’interface d’un site Internet. Cette maquette fait toutefois abstraction de l’aspect graphique et design du site Internet et se concentre essentiellement sur :

• La mise en pratique des exigences de développement de l’interface : fonctionnalités, services, possibilités du site, etc.
• La simulation de l’interface utilisateur, comme la navigation de pages en pages par exemple dans le but d’atteindre les objectifs énuméré au cahier des charges.

Le graphiste ou le chef de projet va donc réaliser une première maquette statique du site pour définir le “zoning” des pages, c’est-à-dire découper la page en différents blocs de fonctionnalités ou zones de contenus. Cela permet de hiérarchiser l’information et de définir par exemple les dimensions des différentes zones du site et des pages.

Quand utiliser les wireframes ?

Dans le processus habituel de la production d’un site Internet, le wireframe intervient donc en début de projet, après avoir rédigé le cahier des charges puis défini l’architecture du site Internet (les différentes pages et leurs contenus) et surtout avant la réalisation des maquettes graphiques finales.

On utilise généralement la technique des wireframes lors de projets web qui vont contenir de nombreuses pages, parfois complexes et dont on souhaite maximiser l’efficacité. C’est le cas par exemple lors de la réalisation d’un site e-commerce où les objectifs en matière de conversion des visiteurs sont importants. Les wireframes sont également utilisés dans des projets complexes, lors de la création de sites spécifiques, dès lors que l’on sort du classique site Internet vitrine de quelques pages en somme.

Quels gains apportent les wireframes ?

De part le fait que les wireframes ne contiennent aucune information sur le design du site, cela permet à l’équipe ainsi qu’au client de se concentrer sur l’essentiel dans un premier temps : les fonctionnalités de navigation et la hiérarchisation du contenu. Ainsi, le design ne vient pas brouiller les pistes et permet à tous de gagner du temps dans le déroulement du projet.

Gain de temps également lors de la phase suivante de création des maquettes graphiques : le “zoning” ayant été défini et validé, le graphiste peut alors se concentrer sur l’essentiel de son travail, à savoir le design et l’habillage des différentes zones de l’écran. Les retours sont en général moins nombreux puisque toute l’équipe s’est mise d’accord au préalable sur l’essentiel.

Qui dit gain de temps pour l’agence web, dit projet moins onéreux. En effet il est moins couteux et plus rapide de modifier des maquettes en fil de fer plutôt que de lourdes maquettes graphiques sous Photoshop. Ainsi tout le monde y gagne, le client comme l’agence.