Qu'est-ce qu'un wireframe et comment en faire un ?

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.

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.

1 - Mockflow

Mockflow en ligne fournit un éditeur complet et facile à utiliser pour concevoir des maquettes de sites internet ou d'applications mobiles. Plus de 200 icônes et 70 composants sont à la disposition de l'utilisateur.

Elle permet de visualiser le parcours du visiteur et de construire le plan du site en fonction. Ce logiciel est accessible sur n'importe quel navigateur et propose, dans sa version gratuite, 10 Mo de stockage et la possibilité d'avoir 3 co-éditeurs par projet.

L'interface de Mockflow est simple à utiliser et se maîtrise en peu de temps. Elle permet de créer plusieurs pages dans un même projet, de faire des sitemaps ou des guides graphiques et possède un gestionnaire de chronologie ainsi que des outils de collaboration. Ses templates peuvent être réutilisés sur différentes pages et l'ensemble du zoning peut être exporté en PDF ou présenté en simulation sur ordinateur pour validation.

Cependant, cette application accessible en ligne peut connaître des ralentissements. Autre point à ne pas négliger : sa version gratuite est assez limitée et il est souvent nécessaire de passer à la version payante.

2 - Frame Box

Très facile d'accès, cette plateforme est disponible sans inscription et à un tarif relativement bas. La trame est redimensionnable et les différents composants, repositionnables par un simple glisser-déposer.

Frame Box offre la possibilité de stocker des maquettes pour une durée limitée et de les communiquer via des liens URL uniques. Il propose différents modes : modifier, prévisualiser et commenter. L'utilisateur peut ajouter des remarques sur des zones précises et les sauvegarder.

Il s'agit d'un outil basique à privilégier dans le cadre de projets peu complexes.

3 - Wireframe.cc

Facilement utilisable, Wireframe.cc est un outil de maquettage pour les applications mobiles et les sites web peu élaborés. Sa version gratuite permet d'accéder à tous les outils nécessaires à la conception de pages et de créer les chemins de fer en seulement quelques clics.

La plateforme offre également des canvas configurés pour les différents supports comme le smartphone ou la tablette. Une simple sauvegarde donne accès à une URL personnalisée pour éditer le document.

Wireframe.cc ne propose que très peu d'éléments personnalisables ni d'outils de présentation ou de prototypage.

4 - Gliffy

Gliffy est un wireframe facile d'utilisation qui fonctionne principalement avec le glisser-déposer. Il offre la possibilité de créer très simplement des diagrammes, des tableaux ainsi que des graphiques depuis un seul tableau de bord. Il permet de donner une identité visuelle forte au site.

Cette plateforme offre un ensemble de fonctions professionnelles et de gestion sécurisée qui en font l'outil idéal pour n'importe quelle structure, petite ou grande. L'interface est bâtie sur le langage HTML 5 et facilement exploitable avec la possibilité d'utiliser de nombreuses formes, flèches et icônes différentes. Les diagrammes sont exportables au format PNG.

5 - Wirefy

Wirefy est une plateforme téléchargeable qui n'est pas utilisable directement en ligne. Créée pour aider les concepteurs à générer des wireframe performants et flexibles, elle permet de coder directement un site et requiert la maîtrise des langages HTML et CSS.

Régulièrement mise à jour, Wirefy donne également la possibilité d'exporter ses maquettes vers d'autres plateformes, comme WordPress, par exemple.

6 - Pencil

Wireframe open source, Pencil fonctionne avec presque toutes les plateformes et permet de créer des modèles pour Android et iOS. Il est disponible sous la forme d'une extension Firefox où tous les chemins de fer sont régis dans un seul et même fichier et peuvent être exportés au format PNG. Il propose différentes interfaces et est capable de créer des diagrammes.

Cet outil d'interface graphique est totalement gratuit et optimal pour le wireframing ; pour autant, il ne prend pas en compte les révisions et nécessite la mise en place d'un système de gestion des différentes versions. De plus, ses fonctionnalités étant relativement limitées, c'est un outil peu utilisable pour de gros projets. Autre inconvénient, il ne propose que très peu de formes, ce qui nécessite de télécharger d'autres bibliothèques disponibles sur le web.

7 - Cacoo

Cacoo est un outil de modélisation de maquettes de sites internet ou d'applications pour smartphone. Sa version gratuite n'autorise que des projets au nombre de feuilles limité et l'export n'est possible qu'au format PNG. Pour des sites de plus grande envergure avec un nombre important d'utilisateurs, il sera nécessaire de passer à la version payante, 5 $ par mois et par utilisateur, pour profiter de fonctionnalités plus complètes.

Avec Cacoo, il est possible de créer tous les types de diagrammes nécessaires à un projet avec un rendu final qui pourra être normal ou avec une impression « sketchy », comme s'ils avaient été faits au crayon. L'outil offre, en outre, la possibilité de partager son travail avec l'ensemble de ses équipiers, de discuter du projet en instantané dans l'application, de commenter directement les graphiques et de recevoir des notifications d'activité.

Ce wireframe nécessite un petit temps d'adaptation et n'autorise l'export qu'au format PNG. De plus, une fois l'essai gratuit épuisé, il n'est plus possible d'accéder à son travail.

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.

Pour aller plus loin, utilisez Website Grader et évaluez les performances de votre site web gratuitement, en quelques clics.