La réalisation des maquettes est une étape déterminante dans la création d’un site internet. Pour que votre site web soit agréable, il faut naturellement soigner le design de l’interface graphique, mais surtout, pour que votre site internet soit efficace, il faut construire une mise en page intelligente et adaptée à vos objectifs et vos contenus. La réalisation des maquettes doit passer par plusieurs étapes, du design fonctionnel en noir et blanc, au design graphique intégrant votre identité et vos couleurs. Dans cet article, nous allons vous donner toutes les clés pour réussir cette étape fondamentale dans tout projet de création de site web. Que ce soit votre agence web ou vous-même qui réalisiez les maquettes, il est utile d’avoir les idées claires pour appréhender la phase de réalisation des maquettes de votre site web.
La réalisation des maquettes, une étape clé dans la création de votre site internet
Maquette, wireframe, ergolayout, mockup ou interface graphique : de quoi parle-t-on exactement ?
Les professionnels du web sont généralement créatifs en matière de sémantique. Il existe près d’une dizaine de termes différents pour parler d’une maquette web. Si le plus populaire en France est probablement wireframe, avez-vous déjà entendu parler d’un ergolayout ou d’une maquette fil de fer ? Cette richesse sémantique ne doit pas cacher l’essentiel, le terme maquette englobe deux réalités tout à faits différentes.
La maquette fonctionnelle (wireframe)
Il s’agit de définir en noir en blanc la mise en page, l’organisation des différents éléments, voire les principaux textes. C’est ce type de maquette qu’on appelle wireframe, ergolayout ou mock-up. Le terme mock-up a la particularité de qualifier une maquette fonctionnelle à l’échelle 1 : 1. Le terme zoning qualifie une maquette fonctionnelle composée uniquement de blocs, c’est la première étape du wireframe.tionnelle composée uniquement de blocs, c’est la première étape du wireframe.
Le wireframe ci-contre a été réalisé à l’aide du logiciel Balsamiq.
La maquette graphique (photoshop)
Prolongement de la maquette fonctionnelle, la maquette graphique intègre les couleurs et identité de marque. Il s’agit d’une représentation précise de la page web qui devra ensuite être intégrée (=codée en HTML / CSS) par les développées, à l’exception peut-être des textes qui sont souvent encore du faux texte (lorem ipsum..). Généralement, les maquettes graphiques sont réalisées sous Adobe Photoshop (ou Illustrator..)
Pourquoi faut-il prendre le temps pour faire les maquettes de son site web ?
Changer la mise en page ou l’identité graphique d’un site web n’est pas évident. Même si le site web est construit à l’aide d’un logiciel de création de site web, c’est un travail assez difficile. Alors comment arriver à des maquettes graphiques jolies et efficaces dès le départ ? Déjà, en prenant le temps de faire correctement des maquettes fonctionnelles pour toutes les pages principales. Idéalement, il faut itérer sur ces maquettes fonctionnelles : faire une première version, demander un avis à gauche à droite, retravailler le wireframe, redemander des avis, et ainsi de suite.
Cette question prend un sens un sens différent selon la manière dont est développé le site internet.
Si la création du site web confié à prestataire, il faut inviter dès le départ l’agence web à prévoir plusieurs semaines pour la réalisation des maquettes fonctionnelles. Contrairement à ce que l’on peut penser, les agences web cherchent à boucler les projets le plus vite possible, afin de ne pas travailler sur trop de projets simultanément, et il est courant que le wireframing soit une phase de travail d’une semaine avec un seul aller-retour avec le client.
Si vous développez le site vous-même, la difficulté est de se forcer à réaliser (et itérer sur) des maquettes fonctionnelles avant de réaliser la page à l’aide de l’interface de votre CMS (ou d’un bon vieux notepad pour les puristes…). On a souvent l’impression d’avoir une idée suffisamment précise de la mise en page pour s’épargner le travail de wireframing, mais à moins d’être un UX designer expérimenté, les retours qu’on peut obtenir sur la base d’une maquette fonctionnelle simple sont précieux.
Feuille blanche, Visio, Powerpoint, Balsamiq ou Photoshop : quel outil pour faire les maquettes / wireframes d’un site web ?
Les solutions traditionnelles
Pour faire les maquettes fonctionnelles d’un site web, de nombreuses agences web utilisent encore des solutions que l’on peut qualifier de traditionnelles à l’heure des logiciels SaaS. Ces solutions présentent l’inconvénient de ne pas faciliter la gestion des proportions, ce qui est toujours contraignant à l’heure où il faut penser la mise en page pour de nombreux formats de devices.
Le papier : même si la moyenne d’âge des professionnels du web se situe davantage autour de 30 que de 50 ans, il y a encore beaucoup de fervents défenseurs des maquettes fonctionnelles sur papier. Rapide, accessible, souple, les avantages du papier pour le wireframing sont nombreux.
Microsoft Visio : intégré à Office Pro, ce logiciel permet de réaliser des diagrammes professionnels complexes. Il est très utilisé par les SSII pour représenter des architectures SI (DB, Serveurs, schéma UML, etc.). Certaines agences web l’utilisent pour réaliser les arborescences de pages voire également les maquettes fonctionnelles. A titre personnel, je vous le déconseille, assez lourd et pas très adapté à notre usage.
Microsoft Powerpoint : le célèbre logiciel peut aussi servir à réaliser des maquettes fonctionnelles, surtout qu’il existe des bibliothèques de composants additionnels pensés pour le wireframing, par exemple PowerMockup . Même si Powerpoint (ou Keynote) n’a pas été conçu dans cet objectif, la souplesse et la simplicité de l’outil, notamment pour manipuler des formes simples, en font un outil adapté pour du wireframing simple.
Les logiciels de wireframes / mock-ups