Sans passer par des étapes préliminaires comme le wireframing, concevoir une page web ou une application mobile serait beaucoup plus difficile. Afin de ne pas le confondre avec le prototype, comme c’est souvent le cas, commençons par rappeler ce qu’est un wireframe.
Un wireframe, c’est quoi?
Le wireframe, appelé aussi maquette fonctionnelle est une première représentation de l’architecture brute d’un site web ou d’une application contrairement au prototype qui se rapproche déjà du produit final. Le wireframe sert à indiquer l’emplacement de chaque élément des pages et à définir les liens qui doivent être établis entre elles. Il s’agit d’un document synthétique et simple où les annotations sont courtes et précises. Il ne faudra cependant pas oublier d’y indiquer les éléments essentiels comme le menu, les CTA et la barre de recherche outre les blocs de textes et les images. Pour vous faciliter la vie, il existe des logiciels dédiés à la création de wireframes mais avant d’en parler, il faut comprendre pourquoi est-ce qu’il faut passer par cette étape.
Pourquoi utiliser des wireframes
Le wireframe est indispensable pour avoir une vision globale de l’envergure d’un projet web. Par conséquent, vous pourrez non seulement prévoir toutes les ressources nécessaires mais vous pourrez aussi avoir une idée plus précise du coût du projet.
Le wireframe est également un outil efficace pour organiser la structure de votre site ou application et pour prévoir à l’avance ce qui peut être amélioré et de quelle façon. Il permet ainsi de mettre en place une meilleure expérience utilisateur.
Mais l’intérêt premier du wireframe se trouve dans la gestion du temps. La création d’un wireframe permet à votre client d’avoir un premier aperçu de ce qui sera réalisé et d’émettre dès le départ ses opinions. Ainsi, vous n’aurez pas à réaliser des modifications et des corrections complexes qui risquent de plomber votre budget temps quand la réalisation du projet se trouvera à un stade plus avancé. Il est utile pour toute l’équipe, notamment pour le web designer.
Maintenant que vous connaissez les avantages que la création d’un wireframe représente, voyons comment vous pouvez en créer un.
Les outils freemium
Il existe de nombreux logiciels qui permettent de créer des wireframes. Les plus courants sont les outils freemium. Parmi les plus appréciés, on notera :
– Moqups : c’est une application très complète qui est adaptée au travail d’équipe car elle est reliée à Confluence et à Jira. Lier les wireframes est aussi facile avec Moqups. L’application existe en version gratuite mais pour avoir les fonctionnalités complètes, la version de base coûte 13$/mois
– Adobe XD : cette application permet d’animer le wireframe afin de mieux illustrer les interactions entre les pages.
– MockFlow : il s’agit d’une suite d’applications qui vous permet de créer un site de A à Z en commençant par le wireframe. L’utilisation de chaque application est gratuite pour un projet. Comptez 19$ mensuel pour un nombre illimité de projets.
– Whimsical : c’est un outil facile d’utilisation avec des fonctionnalités qui permettent d’avoir rapidement un bon rendu.
– MarvelApp : cette application permet de synchroniser les projets sur Dropbox et de les partager avec votre équipe. Créez des wireframes directement sur votre navigateur avec MarvelApp.
– Justinmind : créez des wireframes cliquables avec cet outil. Comme Whimsical et MarvelApp, Justinmind est aussi adapté à la création de prototype.
Outre les outils freemium, il y a aussi des outils 100% gratuits qui permettent de créer de bons wireframes.
Les outils gratuits pour créer des wireframes
– Figma : cet outil permet de créer gratuitement des wireframes en ligne. Grâce à lui, on peut partager facilement les wireframes et les échanges peuvent se faire en temps réel.
– Mockingbird : Outil gratuit et facile à prendre en main pour créer et partager des wireframes cliquables et interactifs. La version payante de l’outil offre des fonctionnalités plus développées.
Si les outils gratuits peuvent être d’une grande utilité dans certains cas, il est quand même préférable d’opter pour les outils payants, afin d’accéder à plus de fonctionnalités et pour obtenir un rendu plus professionnel. Voici quelques outils que vous pouvez utiliser.
Les outils payants
– Balsamiq : bénéficiez d’une large palette d’éléments de base avec cet outil et déplacez-les facilement sur votre plan de travail grâce à la fonctionnalité drag-and-drop. Balsamiq permettra à votre équipe de travailler à plusieurs sur un même document. Comptez 9$/mois pour 2 projets simultanés si vous travaillez en ligne, 89$/utilisateur si vous achetez l’application pour travailler offline et 5$/mois pour utiliser Balsamiq for Google Drive. Pour chaque option, un essai gratuit de 30 jours est offert.
– Sketch : Outil destiné aux web designers, très riche en ressources et avec une interface intuitive. Il fonctionne cependant uniquement sur Mac et l’interface est en anglais. On peut acheter une licence à 99$/an ou opter pour un abonnement de 9$ par utilisateur par mois. Un essai gratuit de 30 jours est également offert.
– Axure : cet outil est adapté aux professionnels et au travail en équipe. Collaborer devient facile avec Axure, l’outil permet l’ajout de notes et commentaires. Axure est seulement disponible sur ordinateur (Mac et PC). Prévoir 29$/mois pour l’utiliser. A noter qu’Axure offre cependant des outils gratuits de wireframing pour les étudiants et les professeurs.