La création de maquettes est une étape essentielle dans la conception d’un site internet, car elle influence le coût de création global. Pour que votre site soit attrayant, il est important de soigner le design de l’interface graphique. Cependant, pour qu’il soit efficace, il faut également construire une mise en page intelligente qui correspond à vos objectifs et à votre contenu.
Les différents types de maquettes de site internet
Les termes “maquette”, “wireframe”, “ergolayout”, “mockup” ou “interface graphique” font référence à différentes réalités. Bien que le terme le plus couramment utilisé en France soit “wireframe”, il existe également des variantes comme “ergolayout” ou “maquette fil de fer”.
Le wireframe permet de définir la mise en page en noir et blanc, l’organisation des éléments et même les principaux textes. Il s’agit de la première étape dans la création d’une maquette. Le terme “mockup” désigne une maquette fonctionnelle à l’échelle 1:1. Le terme “zoning” fait référence à une maquette fonctionnelle composée uniquement de blocs, qui correspond à la première étape du wireframe.
La maquette graphique, quant à elle, intègre les couleurs et l’identité de marque. Elle représente de manière précise la page web et sera ensuite intégrée en HTML/CSS par les développeurs. Généralement, les maquettes graphiques sont réalisées avec des logiciels tels que Adobe Photoshop ou Illustrator.
Pourquoi prendre le temps de créer des maquettes pour votre site web ?
Changer la mise en page ou l’identité graphique d’un site web n’est pas une tâche facile. Même si vous utilisez un logiciel de création de site web, cela demande du travail. Pour obtenir des maquettes graphiques attrayantes et efficaces dès le départ, il est important de prendre le temps de créer des maquettes fonctionnelles pour toutes les pages principales. Il est également recommandé d’itérer sur ces maquettes fonctionnelles en recueillant des avis et en retravaillant les wireframes.
La réponse à cette question diffère selon que vous confiez la création du site web à une agence ou que vous la réalisez vous-même :
Si vous faites appel à une agence, il est nécessaire de prévoir plusieurs semaines pour la réalisation des maquettes fonctionnelles. Contrairement à ce que l’on pourrait penser, les agences cherchent à boucler les projets le plus rapidement possible afin de ne pas travailler sur trop de projets simultanément. Il est donc courant que la phase de wireframing soit réalisée en une semaine avec un seul aller-retour avec le client.
Si vous développez le site vous-même, la difficulté réside dans la nécessité de créer et d’itérer sur des maquettes fonctionnelles avant de passer à la réalisation de la page à l’aide de l’interface de votre CMS. Bien que vous puissiez avoir l’impression d’avoir une idée précise de la mise en page, il est précieux d’obtenir des retours sur la base d’une maquette fonctionnelle simple, à moins d’être un UX designer expérimenté.
Quels outils utiliser pour créer des maquettes de site web ?
Les solutions traditionnelles
Pour réaliser des maquettes fonctionnelles, de nombreuses agences web utilisent des méthodes traditionnelles, bien que les logiciels SaaS soient désormais largement répandus. Ces solutions ont l’inconvénient de ne pas faciliter la gestion des proportions, ce qui est contraignant pour créer une mise en page adaptée aux différents formats d’appareils.
Le papier : Encore très apprécié par de nombreux professionnels du web, le wireframing sur papier est rapide, accessible et flexible. Il possède de nombreux avantages.
Microsoft Visio : Intégré à Office Pro, ce logiciel est principalement utilisé pour réaliser des diagrammes professionnels complexes. Certaines agences web l’utilisent pour représenter des architectures SI (DB, serveurs, schémas UML, etc.). Cependant, il peut être lourd et peu adapté à notre usage.
Microsoft Powerpoint : Le célèbre logiciel peut également être utilisé pour créer des maquettes fonctionnelles, notamment grâce à des bibliothèques de composants supplémentaires conçus spécifiquement pour le wireframing. Bien qu’il ne soit pas destiné à cet usage, la souplesse et la simplicité de l’outil, en particulier pour manipuler des formes simples, en font un outil adapté pour le wireframing simple.
Les logiciels de wireframes
Ces logiciels, généralement des SaaS utilisables depuis un navigateur web, sont spécialement conçus pour créer des maquettes fonctionnelles de sites web. Ils permettent généralement de gérer l’échelle de représentation et les proportions entre les différents composants, et sont souvent collaboratifs.
Les logiciels de wireframes sont nombreux et offrent des fonctionnalités variées. Voici une brève présentation de trois d’entre eux :
Cacoo : SaaS axé sur la collaboration, Cacoo propose une version gratuite suffisante pour une utilisation simple. Très facile à utiliser, il permet de réaliser tous types de wireframes et de schémas.
Balsamiq : Disponible en version Desktop ou Web, Balsamiq est une référence dans le domaine de la création de sites internet. Simple et puissant, il permet à n’importe qui de créer des maquettes fonctionnelles de pages assez complexes.
Axure RP : Probablement le logiciel le plus complet et le plus puissant du marché pour le wireframing et le prototypage d’interfaces web. Il est généralement utilisé par des agences ou des designers freelances de haut niveau.
Il existe bien sûr de nombreux autres logiciels de wireframes, gratuits ou payants, mais notre objectif ici n’est pas de tous les répertorier.
Les logiciels de graphisme
Une fois les maquettes fonctionnelles réalisées et examinées, il est temps de passer à l’étape de maquettage graphique. Les logiciels de graphisme, notamment Adobe Photoshop, sont les plus utilisés pour cette tâche. Puissant, flexible et adapté à la découpe nécessaire à l’intégration en HTML/CSS, Photoshop est une référence dans le domaine. Parmi les alternatives, on peut citer Gimp (open source) ou Paint Shop Pro, mais il est difficile de rivaliser avec Adobe Photoshop sur ce segment.
Comment créer une maquette de site internet ?
Pour vous aider à organiser la phase de création des maquettes, voici les principales étapes à suivre. Bien sûr, cette organisation doit être adaptée à votre projet :
Étape 1 – Arborescence
Avant de penser à la mise en page, il est important d’avoir une vision d’ensemble du site. Cela permet d’identifier les modèles de page, c’est-à-dire les structures communes à plusieurs pages, tels que les modèles d’articles de blog ou de fiches produits. En plus de faciliter la réalisation des wireframes, l’arborescence est utile pour concevoir des parcours clients et préparer le maillage interne des pages dans un objectif de référencement naturel. L’arborescence est également un excellent support de discussion au sein de l’équipe.
Étape 2 – Wireframes des pages principales
Dans un premier temps, concentrez-vous sur les wireframes des pages principales ou des modèles de pages les plus importants. Cela vous permettra d’identifier les composants graphiques à réutiliser dans les pages secondaires. Il est souvent nécessaire d’itérer sur les wireframes, en recueillant des avis et en améliorant les premières versions.
Étape 3 – Définition des composants et wireframes détaillées
Une fois les wireframes des pages principales approuvés, regroupez toutes les pages pour identifier les composants graphiques communs. Essayez de réutiliser autant que possible les mêmes composants pour assurer une cohérence forte entre les pages. Ensuite, vous pouvez travailler sur les modèles de pages secondaires, en ajustant le niveau de détail en fonction des retours et des maquettes graphiques livrées.
Étape 4 – Maquettes graphiques
C’est l’étape la plus agréable en tant que client. Pendant la phase de maquettage graphique, laissez plus de liberté au webdesigner tout en communiquant vos inspirations graphiques et en expliquant le positionnement de votre marque. Veillez à ne pas brider la créativité du webdesigner en donnant des instructions trop précises. Si vous avez transmis des maquettes fonctionnelles et un brief créatif clair, vous ferez partie des clients les plus appréciés et votre designer sera motivé pour vous livrer des maquettes graphiques magnifiques.
En conclusion, prendre le temps de réaliser des maquettes pour votre site web est essentiel pour construire un site à la fois attrayant et efficace. N’oubliez pas de confronter ces maquettes à des personnes extérieures au projet afin d’obtenir des retours objectifs. La création d’une expérience utilisateur optimale est un métier, celui de Designer d’Expérience Utilisateur, qui nécessite une écoute attentive et une volonté d’amélioration continue.
