Pourquoi et comment maquetter un site Web ou une application

Le maquettage intervient une fois le cahier des charges et l’arborescence du site web ou application réalisés. Aussi appelée « wireframing », cette étape doit permettre de se faire une idée plus précise de l’ergonomie de la future plateforme. Le maquettage représente de manière schématique l’interface graphique d’un site web (son ergonomie et interactivité) ainsi que son organisation, par exemple son arborescence.

Le maquettage en quelques mots

Larousse définit le maquettage comme une « Représentation (…), le plus souvent à échelle réduite, mais fidèle dans ses proportions, d’une construction, d’un appareil, d’un décor, d’un objet quelconque ». Il prendra différentes formes en fonction du secteur d’activité.

Travailler sur un projet web, c’est avant tout anticiper la structure du site et la hiérarchisation du contenu. Une réflexion en amont et des tests utilisateurs cherchent à simplifier au maximum l’accès à l’information. Les concepteurs ne doivent pas hésiter à avoir recours au benchmark pour repérer ce qui se fait de mieux. Le concept de la nouvelle plateforme doit être innovant mais nous parlons ici d’interface, inutile de réinventer la roue quand il existe des modèles efficaces qui ont déjà fait leurs preuves.

Maquetter une interface est l’occasion de communiquer le concept auprès des équipes (voire de mettre en place des tests utilisateur) pour obtenir des feedbacks avant de démarrer le développement.

 

Outils et logiciels de maquettage

Les outils de maquettage se destinent à tous les professionnels œuvrant pour le projet, techniciens ou non. Ils sont pensés et conçus pour simplifier la conception de la plateforme web ou application mobile et permettre une bonne communication entre les acteurs (chef de projet, client, développeur et web designer notamment).

Ces logiciels, auparavant très difficiles d’accès, ont su évoluer pour proposer une interface et des fonctionnalités intuitives. Les utilisateurs disposent les éléments graphiques par glisser-déposer et travaillent leurs dimensions et interactions grâce aux éléments présents dans les barres d’outils.

Pour qui ?

Les plateformes de wireframing sont majoritairement utilisées par les chefs de projets web avant la conception de la plateforme. Elles permettent de présenter au client une ébauche du projet en s’assurant que tous les éléments du cahier des charges sont respectés (nombre de pages, ergonomie, arborescence, etc.).

Les professionnels du marketing et de la communication utilisent également ces outils pour se représenter schématiquement un projet de création de site sans faire appel à une agence spécialisée.

Quelques logiciels gratuits pour maquetter vos sites ou appli

Beaucoup de ces outils sont payants tel que l’outil de maquettage Invision. Certains possèdent des versions gratuites trop limitées, incitant les utilisateurs à se tourner vers les versions premium. Il existe quelques exceptions notables que nous avons sélectionnées pour vous.

  • Pencil Project : une extension au navigateur Firefox disposant d’une large palette d’outils pour la réalisation de diagrammes et interfaces. Les éléments graphiques disponibles sont également appréciables pour la construction du schéma des pages. Parmi les autres fonctionnalités, on retiendra la possibilité de créer de multiples pages et liens entre elles et les différents formats d’exportation.

  • Lumzy : un outil collaboratif de création de maquettes doté de nombreux éléments graphiques à disposer librement sur un espace de travail grâce à un système de glisser-déposer. Outre ses outils de mise en forme, Lumzy se démarque par son aspect collaboratif, le créateur du projet pouvant inviter des tiers à collaborer en temps réel.

  • MockFlow : la version gratuite de Mockflow autorise la création de projets allant jusqu’à 4 pages et 2 collaborateurs, plus que suffisant pour les petits sites. Ses nombreux éléments à insérer dans la maquette le rendent à la fois simple performant.

  • Cacoo : essentiellement destiné à la création de diagrammes en ligne, Cacoo permet à plusieurs utilisateurs de travailler en simultané sur un même projet.

  • Si vous souhaitez vous tourner vers un logiciel payant pour la création de wireframes avancés, sachez que nous avons été séduits par Balsamiq, Mockingbird et iPlotz.

    Pour plus d’information sur le maquettage d’interface, nous vous conseillons de consulter cet article sur le maquettage Web de l’agence UX Usabilis.

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *