La réalisation du wireframe, ou maquette fonctionnelle, est une étape importante lors d’un projet de création de site internet. Elle intervient au tout début du processus et permet de valider l’ergonomie et les fonctionnalités du futur site. Également appelé zoning, le wireframe a pour but de faciliter la navigation et d’optimiser l’expérience utilisateur. Il sert aussi de support intermédiaire entre les différentes personnes impliquées dans la réalisation du site.
Qu’est-ce qu’un wireframe ?
Parfois désigné sous le terme « chemin de fer », le wireframe est une représentation visuelle de l’agencement des différentes pages d’un site internet. Chaque zone de texte, image, vidéo ou encore élément graphique sont représentés sous forme de croquis. Il permet d’anticiper le futur contenu du site et de faire valider l’ensemble des blocs avant la création de la maquette graphique.
Quel est l’intérêt d’un wireframe ?
Le wireframe représente le squelette d’un site internet. Il définit la structure de chacune des pages et l’emplacement des différents éléments comme le logo, le menu, le corps du texte ou encore les images et le footer. Il est centré sur l’expérience utilisateur et sur l’ergonomie du site, le design intervenant dans un second temps.
L’objectif principal du wireframe est de visualiser et de valider la structure des pages du site avant sa conception. Il permet de formaliser les attentes, de recueillir les commentaires des différents intervenants et de faire les modifications avant de débuter l’étape graphique. Il sert d’interface avec les designers et simplifie le travail en équipe. Il présente également l’avantage d’aider les participants à se projeter quant à la charge de travail qui les attend et de mieux calculer le temps à passer ainsi que le budget à consacrer.
Le wireframe présente tout son intérêt lors de la prise en compte de la problématique du référencement naturel. Il doit être conçu pour répondre aux besoins du SEO et structuré de manière à ce que la navigation interne et le contenu soient facilement optimisables.
7 logiciels gratuits pour faire un wireframe
- Mockflow.
- Frame Box.
- Wireframe.cc.
- Gliffy.
- Wirefy.
- Pencil.
- Cacoo
5 conseils pour réaliser un wireframe
Une fois choisi le logiciel adapté aux besoins de l’entreprise, la réalisation du wireframe peut commencer. Pour réussir cette étape essentielle, voici quelques conseils à suivre.
S’inspirer de ce qui existe sur le web
Avant toute chose, il est important et nécessaire de comprendre ce que les futurs utilisateurs attendent d’un site web, par exemple, le type d’informations qu’ils souhaitent y trouver.
Pour cela, rien de mieux que d’observer ce qui se fait ailleurs. Il faut prendre le temps d’analyser les sites des concurrents ou encore les applications utilisées régulièrement par les designers. Une simple recherche Google (« exemples de maquettes wireframe », « images wireframe ») est aussi un excellent moyen de trouver l’inspiration.
Il est également possible d’installer Wirify, qui permet de visualiser les maquettes des pages de n’importe quel site web, ou encore de visiter des sites comme I ❤ Wireframe. L’important, dans cette première phase, est de s’imprégner de ce qui existe ailleurs et de mieux comprendre comment architecturer sa propre maquette.
Ne pas utiliser de couleur ou très peu
Le wireframe permet de visualiser l’interface du site internet, son architecture ainsi que les différentes parties qui composent chacune de ses pages. La majorité de ces éléments n’utilise pas de couleurs et leur priorisation est définie par des nuances de gris. La couleur peut être source de distraction et doit être employée de manière raisonnable et cohérente.
Représenter l’ensemble des futurs éléments de son site web
Tous les éléments du futur site internet doivent être présents sur la maquette. Attention cependant à ne pas la surcharger avec des informations inutiles.
Dans la plupart des cas, les sites internet possèdent a minima trois sections :
- L’en-tête, ou header, situé en haut de chaque page, comporte généralement le logo de l’entreprise ou tout autre élément qui permet de l’identifier.
- Le corps de la page, ou body, est lui-même généralement divisé en plusieurs niveaux de lecture. C’est là que l’utilisateur trouvera l’information qu’il est venu chercher.
- Le pied de page, ou footer, qui se retrouve au bas de chaque page, contient des informations plus ou moins importantes. Il peut également renvoyer vers des réseaux sociaux ou d’autres sites internet.
Utiliser du contenu réel
Même si le wireframe n’est qu’une visualisation de la structure des différentes pages d’un site internet, y intégrer du contenu réel donne à voir concrètement ce à quoi elles ressembleront, une fois terminées.
Mettre le contenu en situation dans la maquette permet également de valider le positionnement de chaque élément. La police, la taille des caractères, l’interligne, le nombre de caractères par ligne, qui sont des éléments très importants pour l’expérience utilisateur, définissent également la structure du wireframe.
Ne pas ajouter d’éléments graphiques ni images
Le wireframe n’est pas censé comporter d’images ou de graphiques afin de ne pas distraire l’attention. Ils sont donc généralement représentés par de simples rectangles gris.
Il est cependant nécessaire d’ajouter les zones correspondant aux différents éléments des pages, comme les boutons d’accès aux réseaux sociaux, les call-to-action ou encore la barre de recherche. Concernant le texte, il est déconseillé d’utiliser lorem ipsum, mais plutôt d’intégrer du texte réel pour que ce soit plus clair.
Durant la conception d’un wireframe, il est plus prudent de réaliser plusieurs tests, que ce soit en termes d’outils ou de processus afin de définir ce qui sera le plus adapté à ses besoins et à ses attentes.
Source : Hubspot blog
