Wireframe : une étape essentielle pour votre webdesign

Le wireframe : définition et explication

C’est quoi un wireframe ?

Le terme wireframe signifie en français “structure”, “cadre” ou encore modèle de fil-de-fer. En webdesign, c’est la maquette fonctionnelle lors de la création ou la refonte d’un site internet ou d’une application. Elle constitue le squelette de l’interface web, au graphisme simplifié, l’apparence esthétique étant secondaire. Elle évolue au fur et à mesure des itérations et son objectif est d’assurer le fonctionnement de l’interface pour les utilisateurs.

Les wireframes sont souvent utilisés pour créer des scénarios. On illustre un parcours utilisateur pour mieux comprendre la dynamique de l’interface et observer sa fluidité avant d'implémenter les pages de son site internet dans son CMS par exemple. Les éléments comme les images, le texte, les vidéos ou encore les formulaires nécessaires à la bonne marche de l’interface sont également définis en amont.

Le wireframe va alors permettre de visualiser physiquement une page web ou l’interface d’une application. Elle dévoile les éléments qui seront présents sur les pages les plus importantes. C’est une étape essentielle dans le processus pour orienter l’ergonomie de l’interface. Un peu à la façon d’un plan de construction sur le chantier d’un bâtiment, le wireframe va détailler le projet dans son ensemble.

Ainsi, tout ce qui vous semblait abstrait devient alors réel et tangible, sans distraction à côté. Et c’est là que vous allez pouvoir vous rendre compte si votre plan est le bon !

Lorsqu'on applique le design et l'identité visuelle complète d'une marque sur un wireframe cela devient en fait une maquette. 

Quel est le but du wireframing ?

On pourrait être tenté de penser que les wireframe prennent trop de temps pour peu d’utilité. Mais au contraire, c’est ce schéma qui va vous aider à gagner du temps ! Il va structurer votre processus de construction afin de ne pas partir dans toutes les directions. Rappelez-vous que son objectif principal est de structurer la conception du site.

D’autant plus que la réalisation d’un wireframe à la main à l’avantage de coucher les idées sur papier. On peut y revenir facilement, corriger et proposer d’autres solutions. C’est le moment des itérations : on construit, on présente brièvement, on améliore et ainsi de suite jusqu’à satisfaction. L’objectif n’est donc pas d’arriver avec une maquette wireframe parfaite du premier coup, mais d’établir une structure simple, sujette à modification, et ce, par tous !

Gardez en tête que les fonctionnalités et l’expérience utilisateur doivent toujours être placées au-dessus de l’esthétisme. À ce stade-là, le projet ne doit pas dériver sur des détails peu pertinents, comme la couleur des CTA. Son but n’est pas d’être soigné, mais d’être assez clair et pertinent pour avancer dans la bonne direction et aider à se projeter.

Vous devez donc porter un regard objectif sur la facilité d’utilisation de votre interface, la fluidité de vos parcours de conversions, l’emplacement et l’utilité des fonctionnalités, etc… C’est également le moment de détecter des failles dans l’architecture et de les résoudre.

Zoning, wireframe, mock up et prototype : Les différences

Dans le monde du webdesign, il existe différents termes qui peuvent parfois troubler par leurs similitudes, mais qui pourtant doivent être bien distincts les uns des autres, surtout si on souhaite concevoir une interface web. À savoir qu’un wireframe n’est ni un zoning, ni un mock up et ni un prototype. Pas de panique, on décortique tout cela ensemble !

Zoning vs Wireframe

Le zoning est un schéma plutôt grossier de ce à quoi peut ressembler la future page d’un site web ou d’une application mobile. Dit comme ça, on pourrait croire qu’il s’agit d’un wireframe, mais non. L’objectif ici est de définir les grandes zones qui composeront visuellement l’interface, ce qui permet de valider ou d’ajuster les grands axes avant de poursuivre le processus de conception. Le zoning est la première étape de débroussaillage.

Mock up vs Wireframe

Le mock up est l’étape qui vient après celle du wireframe. On cherche à dépasser l’étape du statique afin de visualiser l’enchaînement des actions de navigation. Il est possible alors d’insérer des liens, de rendre les formulaires fonctionnels, de voir les messages d’erreurs, etc… Vous l’aurez donc compris, la seule différence entre un mock up et une wireframe, c’est l’interaction. À partir du moment où l’interface devient interactive, il s’agit d’un mock up.

Prototype vs Wireframe

Un wireframe ne peut pas être considéré comme un prototype, ce n’est pas une base fiable pour commencer les tests utilisateurs. Il ne représente pas le produit fini, mais simplement ses grands axes. Pour créer un prototype, vous devez rassembler toutes les étapes réalisées en amont : le squelette de l’interface, les interactions et le design graphique. Avec ces éléments, vous pourrez obtenir une représentation du produit final.

‍

‍

Les outils wireframe pour la maquette de votre site internet

Comment créer un wireframes à la main ?

Pour créer des wireframes pour sites web ou applications, vous pouvez tout simplement le faire à la main ! On appelle cela la phase de sketching papier. Munissez-vous de votre carnet ou d’une feuille de papier et tester la disposition des différents éléments.

C’est également une étape ou l’échange est important pour challenger ses réflexions et améliorer la conception du wireframe. Voici des outils de wireframe qui pourront vous aider à réaliser des wireframes à la main :

• Sketchsheets : le site Sketchsheets permet de télécharger des templates à imprimer pour ensuite dessiner facilement et directement dessus. Il existe également la version logicielle, très facile d’utilisation, mais seulement disponible sur Macs.
• Le crazy 8 : le crazy 8 consiste à dessiner 8 écrans en 8 minutes sur une feuille A4. L’objectif ici d’obtenir des idées différentes, de faire des comparaisons, d’itérer afin de parvenir à fusionner les meilleures idées qui conviendront à tous.
• Le Priority Guide Content : cette pratique consiste à hiérarchiser seulement le contenu de l’interface sur des feuilles papier. On peut ensuite y ajouter des interactions, à part, par exemple sur des post-it, pour les différencier.

‍

Enfin, de nombreux ateliers existent pour créer ses premiers wireframes papier. Pour les moins aguerris, c’est intéressant de pouvoir travailler à plusieurs et confronter les idées. L’objectif est de se challenger pour réussir à obtenir un résultat satisfaisant.

Quels logiciels pour wireframes utiliser pour vos maquettages web ?

Vous pouvez également utiliser des wireframing tools pour vous aider dans votre design process. L’outil que vous utiliserez doit dépendre de vos préférences mais aussi du projet. Ici, on va vous présenter quelques-uns d’entre eux, à vous de faire votre choix !

Adobe xd

Adobe xd nous propose deux outils plus qu’intéressants : nous avons d’un côté Illustrator, conçu pour le dessin, et InDesign qui permet la mise en page. Ces deux éléments associés sont donc techniquement des outils qui vous permettront de créer d’excellents wireframes. Pourquoi faut-il utiliser les deux ? Car Illustrator n’utilise pas de pages multiples et de pages maîtres, contrairement à InDesign. En revanche, InDesign ne propose pas de bibliothèques pour dessins et icônes, mais illustrator oui.

Balsamique

Balsamique est un spécialiste dans la conception de wireframe et de maquette mock up. Simple et intuitif, il donne accès à une bibliothèque avec de nombreux éléments (call to action, bloc texte, image, etc) facilement utilisable par drag-and-drop. Très efficace, il donne une vue d’ensemble du résultat final et permet de réaliser des maquettes fonctionnelles en un rien de temps ! Vous ceux qui souhaiteraient tester l’outil, il existe un essai gratuit de 30 jours.

Kits InVision

Vous avez également la possibilité de vous tourner vers des sites comme InVision, qui proposent des kits tout faits de wireframes. Simple, pratique et intuitif, pour les débutants, c'est une base sur laquelle vous pourrez démarrer. Vous pourrez tirer parti d’une bibliothèque avec de nombreuses mises en page et symboles facilement utilisables.

Figma

Figma est un outil collaboratif no-code permettant de faire des créations graphiques, dont des interfaces utilisateurs (UI). Vous avez accès à une offre premium pour réaliser des wireframes gratuits. Vous pourrez également créer des prototypes UX wireframe pour tester vos futurs sites web. Vous n'avez pas besoin d'être un expert du design pour vous lancer sur Figma !

‍

Évidemment, il existe beaucoup d’autres outils, comme MockFlow ou OmniGraffle, c’est à vous de tester et de choisir celui que vous correspondra le mieux !

Nos conseils pour améliorer vos wireframes

Pour concevoir des wireframes qui tiennent la route, il y a quelques astuces et conseils à prendre en compte. Le premier conseil que vous devez constamment garder en tête est que lors de la conception d’un wireframe, l’objectif est de créer une architecture d’interface. Il faut donc éviter d’y ajouter des couleurs (on reste sobre) et des designs peu pertinents qui pourraient distraire l’œil plus qu’autre chose.

Vous devez également hiérarchiser l’information correctement, en définissant vos tailles de blocs, de texte (H1, H2, H3 voire H4 si besoin). Bien sûr, vous pourrez revenir sur les différentes tailles attribuées et bouger les éléments plus tard, le but est de parvenir à se projeter !

Aussi, essayer d’utiliser le moins possible de Lorem Ipsum. Si vous avez du contenu à disposition, utilisez-le ! Placer du vrai contenu vous aidera à mieux vous projeter et positionner les éléments correctement. Vous aurez également la possibilité de juger de la lisibilité de votre contenu.

Enfin, pensez au côté responsive ! Vous devez prendre en compte les différents supports sur lesquels vont se connecter les utilisateurs. Il faudra donc penser à la taille de vos CTA sur tablette, à la disposition de vos blocs sur mobile ou encore à la taille de votre texte sur petit comme sur grand écran.

Exemples de wireframes

Un wireframe design doit avoir une interface sobre. On y intègre généralement des éléments basiques comme un header et un footer, une barre de navigation, les zones pour les images, les médias et le texte (le tout bien sûr hiérarchisé), les boutons de call-to-action ou encore le fil d’Ariane. Les éléments indispensables à une interface et les fonctionnalités qui seront propres au produit en conception.

‍

Comme dit précédemment, on peut soit prendre une feuille de papier, un stylo et dessiner ou concevoir un wireframe grâce aux différents outils digitaux qui existent. Voici quelques exemples de création de wireframes :

Mais que vous choisissez de réaliser votre wireframe à la main ou avec un outil, le processus restera le même : parvenir à construire une maquette ergonomique et pensée pour les utilisateurs.

C’est pour cela que bien connaître sa cible est un indispensable, comme pour toute stratégie qui se veut efficace.