Wireframe

Wireframe : une étape essentielle pour votre webdesign

Le wireframe est la maquette dite “fil-de-fer” d’une interface. Dans l’univers du webdesign, ce schéma permet de visualiser la structure et les fonctionnalités d’un site internet ou d’une application. Dessinées à la main ou réalisées grâce à des outils digitaux, les maquettes wireframes sont essentielles à la conception UX design et UI design. C’est pourquoi il nous paraissait important de vous en expliquer un peu plus les détails ici.

Agathe Rivière

Copywriter & Chargée de projet SEO

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é. 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éelle et tangible, sans distraction à côté. Et c’est là que vous allez pouvoir vous rendre compte si votre plan est le bon !

Pourquoi utiliser un wireframe ?

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 et de vous y perdre. 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 va décortiquer 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. C’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 bonne représentation du produit final.

zoning _mockup_protoype

Comment créer un wireframe ?

Créer des 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 quelques 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.

Les outils de design pour wireframes

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.

É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 avec du noir et du blanc) et es 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 vers le futur !

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 :

exemples_wireframes_mains
exemples_wireframes_outils

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.

FAQ : Ce qu’il faut retenir sur les wireframes

🤓 Qu’est-ce qu’un wireframe ?

Un wireframe, ou maquette fil-de-fer, est un schéma qui montre comment s’organisent les différentes composantes d’une page web ou d’une application. Elle permet de visualiser les emplacements du texte, des médias et autres éléments comme les formulaires. Il s’agit de montrer à la fois les informations qui seront présentes et comment les utilisateurs vont parvenir à s’orienter sur l’interface.

🧐 Quelle est l’utilité d’un wireframe ?

Utiliser un wireframe permet de donner vie au projet. Tout ce qui paraissait peut-être abstrait devient plus tangible. Il va aider à structurer le processus de création, à corriger les différentes failles observées, à proposer des solutions avant de se lancer plus loin dans les étapes de conception. C’est un document sur lequel on peut facilement travailler et que l’on peut tout aussi facilement partager.

✍️ Comment faire un wireframe ?

Pour réaliser un wireframe, vous avez deux options : le faire à la main ou via un outil. Ils sont nombreux, payants ou non, c’est à vous de choisir ce qui vous convient le mieux. Gardez simplement à l’esprit que l’objectif principal est de concevoir une architecture. On ne s’attarde pas sur les couleurs, ni sur le design, mais sur les éléments qui vont faire vivre l’interface et avec lesquels vont interagir les utilisateurs.