Vous souhaitez créer votre site Internet ou réaliser une refonte complète de ce dernier pour présenter votre activité ? Le wireframe vous sera d’une grande utilité. Mais de quoi s’agit-il et comment bien l’utiliser ?
Qu’est-ce qu’un wireframe ?
Le wireframe, qu’on appelle aussi parfois fil de fer, est une vue simplifiée des différentes pages d’un site web. Il présente les différentes composants d’une page web comme le menu, une bannière principale, les zones de texte, les images. Un wireframe ne présente aucune couleur ni image mais des zones grisées de différentes teintes pour pouvoir se concentrer sur la définition de la hiérarchie de l’information. Les wireframes peuvent être réalisés à l’aide de logiciels gratuits, payants ou même à la main.
On peut comparer les wireframes à des plans d’architecte, sauf qu’au lieu de préparer la construction d’une maison vous préparez la conception d’une interface digitale.
Les wireframes sont importants car ils permettent de réaliser des premières sessions de test auprès des utilisateurs sans être distrait par des choix de couleurs, de polices ou même de contenu.
Trouver l’inspiration
La première étape avant de construire vos maquettes fonctionnelles est l’observation. Faites quelques recherches sur Internet, dans Google Images ou sur des sites comme Wireframes Linowski ou I ♥ wirefames pour voir des exemples de maquettes et des réflexions autour de wireframing. Cette phase de recherche vous aidera à mieux comprendre le fonctionnement du process.
Vous pouvez aussi ajouter le playing Wirify à votre navigateur afin de voir une version fil de fer de n’importe quel site web existant.
Définir un processus de création
Chaque webdesigner a sa méthode de travail et cette deuxième étape doit vous aider à définir la vôtre. Vous pouvez commencer par des schémas très dépouillés (le sketching) avant de passer aux wireframes, puis aux maquettes graphiques, au prototype animé et enfin au code. Certains commencent directement par des wireframes, tandis que d’autres passent du sketching au code sans étape graphique intermédiaire.
Dans tous les cas, la dernière étape est celle du code, de la programmation informatique. Vous serez très certainement amené à essayer plusieurs process avant d’identifier celui avec lequel vous vous sentez le plus à l’aise.
Utiliser les bons outils
Si vous décider de faire vos wireframes sur des logiciels dédiés, il en existe quelques-uns que nous vous listons ci-dessous :
- Balsamiq : c’est l’un des outils les plus populaires grâce à son accessibilité et sa bibliothèque de composants très fournie. L’outil est payant mais propose une période d’essaie de 30 jours. Balsamiq est disponible sur tous les supports (Mac Windows, Linux) et propose aussi une version web.
- Omnigraffle : il s’agit d’un outil de création de diagrammes avec des fonctionnalités plus avancées que Balsamiq (création de graphiques, gestion des styles). En revanche, il n ‘est disponible que sur Mac OS.
- Figma : Figma est un service qui permet de concevoir des interfaces en collaboration avec d’autres personnes. Disponible en ligne, il est possible de télécharger une version locale. Vous pouvez vous en servir pour les wireframes mais aussi pour les maquettes graphiques et le prototypage.
- Sketch : l’un des outils de conception les plus populaires sous MacOS qui permet de créer des wireframes mais aussi des prototypes.
- Adobe XD : l’un des nombreux outils de la suite Adobe qui a pour objectif de simplifier la conception de sites web ou d’applications.
Définir la mise en page
En dernier lieu, vous devez définir la mise en page de votre site. Commencez par mettre en place un système de grilles, puis ajouter les différentes boîtes sur l’interface : logo, navigation, bannière, présentation des produits, etc. Vous pouvez aussi placer les Call-to-action, compléter les barres latérales et enfin finir votre site avec le Footer.
Une fois que vous avez placé vos éléments, travaillez la taille des polices en fonction de l’importance des éléments puis utilisez toute la palette des niveaux de gris pour déterminer l’impact visuel de vos éléments sans avoir à choisir une palette de couleurs.
Pour la création de vos wireframes, prenez le temps de tester les différents outils et processus et à vous inspirer de mises en page existantes.
