Atlas Design

Créer un wireframe

C’est quoi un wireframe d’abord ?

Le wireframe en design graphique (qu’on pourrait traduire par « maquette de fils de fer ») est un premier jet d’un design d’une interface.

En somme, ce n’est rien de plus qu’un schéma basique de ce que l’on aimerait avoir comme site web ou application mobile.

Exemple de Wireframe

Le terme wireframe est utilisé dans le domaine du Web et de l’App Design mais peut s’éteindre à tout ce qui concerne le design d’interface peu importe le support.

On retrouve donc des wireframes pour des applications mobiles, des applications de montres connectées etc.

Wireframe d’une application mobile

Les wireframes, ça sert à quoi ?

  • gagner du temps et éviter de partir tête baissée
  • donner vie aux idées sans réfléchir à la réalisation technique
  • se concentrer sur l’expérience utilisateur
  • vue globale sur l’ensemble du projet

Il est plus facile de budgétiser un projet pour un client si on la vue d’ensemble des interfaces à concevoir

Le processus de travail

Très souvent, on a une idée ?… et de celle-ci naît une envie inarrêtable de commencer à designer son projet (ou de le codeur si on est développeur)… et là c’est le drame !

On fonce tête baissée dans son projet sans penser aux fonctionnalités de bases et l’interface générale qu’on souhaite avoir.

C’est à ce moment précis qu’intervient le wireframe !

yes yes yes GIF
yes ?

On va commencer par lister l’ensemble des fonctionnalités qu’on aimerait avoir (si ce n’est pas vôtre projet, cette liste est sûrement déjà faite). Maintenant, il faut pouvoir intégrer ses fonctionnalités dans votre future interface, et on commence par prendre une feuille et un crayon et on dessine des carrés !

Eh oui ! Il ne faut pas croire qu’on va gagner du temps en commençant directement sur ordinateur ! La meilleure méthode reste encore notre bonne vieille plume ?
L’avantage majeur de cette technique, c’est qu’on peut créer visuellement quelque chose en l’espace de quelques minutes.

Wireframe sur papier

Quand le rendu nous plait, on passe sur ordinateur et on utilise l’outil de son choix. J’ai listé pour vous les meilleurs logiciels pour créer des wireframes dans la suite de cette article.

Remarque : Je n’ai pas parlé de feedback ici mais sachez que c’est essentiel lorsqu’on créé son wireframe ! Alors, demandez l’avis des personnes autour de vous

Comment faire un wireframe ?

Les règles théoriques à suivre

Les règles théoriques à suivre

  1. Noir & blanc

    Tous vos wireframes devront être en nuances de gris, essayez de mettre aucune couleur. Vous pourrez ainsi vous concentrez sur l’expérience et le parcours utilisateur.

  2. Content-first

    Le content-first traduit par « contenu en premier » est une règle simple à suivre : ne commencez pas à vous demander ce qui serait « cool » de rajouter mais plutôt ce qui est nécessaire. En bref, partez du besoin !
    Je recommande également d’utilisez des vrais textes plutôt que des Lorem Ipsum ainsi que de vraies images (ça permet d’avoir un vrai aperçu du rendu final)

    Tips : Pour améliorer la lisibilité de vos textes, faîtes en sorte d’avoir 16 mots maximum par ligne.

  3. La cohérence

    La plus grosse erreur dans le design c’est le manque de cohérence !
    Pour régler ce problème, vérifier que tous vos alignements soient parfaits, que vous n’utilisez pas plus de 2 polices d’écritures, que vos couleurs soient bien choisis et bien utilisées au bon endroit ?

Les logiciels à utiliser

En soit, n’importe quel logiciel d’UI design vous permettra de créer des wireframes. Mais vous pouvez aussi utiliser des outils dédiés à la création de wireframes.

Les outils spécialisés

Mockflow.com

Cet outil est gratuit pour 1 seul projet mais vaut le coup j’en suis convaincu. Quand on démarre un nouveau projet, on peut choisir le style de wireframe qu’on souhaite.

Pour l’exemple, j’ai pris « Bootstrap 4 » et je n’ai plus qu’à faire des glisser/déposer pour construire mon interface

Wireframe.cc

Un outil gratuit et simple d’utilisation. Il faudra cependant payer pour avoir plusieurs pages ou exporter son travail…

Moqups.com

L’outil est vraiment excellent et je pense que c’est le plus adapté pour créer des mockups/wireframe mais malheureusement il n’a pas de version gratuite.

Moqups Wireframe Storyboard

Les logiciels de design

Adobe XD

Adobe XD est mon logiciel de prédilection ❤️

Il est totalement gratuit et vous offre une grande liberté, mais il demande un peu de temps pour apprendre à utiliser l’outil.

Figma

Figma grandi en popularité depuis 2019, il est également gratuit !

Le mot de la fin

Pensez à bien travailler en priorité sur votre expérience utilisateur, c’est ce qui fera le succès des interfaces ?