Le wireframing pour les nuls – Guide complet pour apprendre à réaliser des maquettes fonctionnelles web

Le wireframing est une étape importante dans la création d’un site web sur mesure, qui consiste à concevoir la maquette « fonctionnelle » du site. A la différence d’une maquette graphique, un wireframe fait complètement abstraction de l’aspect graphique et design du site, pour se concentrer sur l’ergonomie. La réalisation d’une maquette fonctionnelle est une excellente occasion pour optimiser l’expérience utilisateur du site en projet. Nous avons réalisé ce guide complet afin de vous donner les clés pour réaliser une maquette de site web dans les règles de l’art.

Petite remarque avant de commencer : Avez-vous besoin d’un site web entièrement sur mesure ? Si la réponse est non, vous n’avez peut-être pas besoin de passer par l’étape « wireframing ».Vous trouverez sur le web des milliers de « templates » de sites, dont certains gratuits, prêts à l’emploi. Voici des exemples de templates de sites personnalisables :

Le wireframing n’a d’intérêt que si vous souhaitez créer un site sur mesure, très personnalisé, répondant à des attentes très précises. Voici à quoi ressemble une maquette fonctionnelle très basique :

Une maquette fonctionnelle a la même fonction qu’un plan d’architecte. On ne peut pas construire une maison en 3D sans en avoir conçu au préalable le plan, en 2D et et en noir et blanc. De la même manière, il n’est pas possible de créer des motifs sur PhotoShop et d’écrire des lignes de code sans savoir à l’avance où ces motifs et lignes de code doivent se placer sur le site.

A un niveau plus avancé, un modèle fonctionnel permet de déterminer la manière dont les utilisateurs interagiront avec l’interface. Un wireframe peut par exemple indiquer le fonctionnement d’un menu.

Le wireframing est une étape importante dans la mesure où elle permet à un designer de construire la mise en page et les modèles d’interaction sans être distrait par les couleurs ou les polices. La maquette fonctionnelle permet de se focaliser sur les aspects ergonomiques, en évacuant toutes les considérant d’ordre esthétique. Entrons dans le vif du sujet : voici les 9 étapes à suivre pour réaliser une maquette fonctionnelle.

Pour compléter la lecture de ce guide complet, nous vous invitons à

Étape #1 : trouver des sources d’inspiration

Toutes les créations – artistiques ou non –  sont inspirées de travaux ou de réflexions antérieurs. On ne part jamais de zéro. Avant même de commencer à mettre les mains dans le cambouis et à construire votre maquette, nous vous conseillons de faire quelques recherches sur internet et de partir à la recherche de sources d’inspiration. Sans surprise, les meilleures ressources sont en anglais. Vous y découvrirez plein d’exemples de maquettes et des réflexions autour de wireframing qui vous permettront de mieux saisir le fonctionnement du process.

En parallèle, nous vous recommandons d’utiliser les fonctionnalités natives de Figma ou des plugins populaires comme ‘Wireframe’ pour Figma, qui permettent de générer rapidement des wireframes à partir de pages web ou de composants, solutions aujourd’hui largement adoptées et maintenues.

Observer et analyser la manière dont sont construits  les autres sites web vous permettra d’alimenter votre propre réflexion et d’identifier les bonnes pratiques en matière de wireframing.

Étape #2 : définir le process de création

Le design est un process organique dans la mesure où chaque étape est reliée aux étapes précédentes et déterminée par elles. Les designers peuvent adopter des process différents et envisager l’étape du wireframing différemment dans ses relation avec le résultat final (graphisme et code). Vous devez trouver le process le plus adapté à votre manière de travailler et le plus confortable pour vous. Voici quelques exemples de process :

Dans tous les cas, la dernière étape est celle du code, de la programmation informatique. C’est au niveau des étapes antérieures que les approches varient. Pour certains, un simple croquis suffit avant de passer au code. Pour la plupart des designers, le wireframing est une étape incontournable, parfois précédé de la création d’un croquis.

Pour gagner du temps dans la conception de votre site web, nous vous conseillons d’utiliser les fonctionnalités natives de CSS Grid Layout ou des systèmes de grille intégrés dans des outils comme Figma ou Adobe XD. Ces solutions sont aujourd’hui privilégiées pour créer des maquettes fonctionnelles adaptatives et compatibles avec le responsive design.

Encore une fois, vous êtes libre de choisir votre process de création. Vous devrez d’ailleurs peut-être essayer plusieurs process avant d’identifier celui avec lequel vous vous sentez le plus à l’aise. Certains réussissent à se contenter d’une esquisse (d’un zoning de base) avant de passer au code, en zappant complètement l’étape de wireframing. D’autres designers préfèrent intégrer le maximum d’étapes dans le processus pour pouvoir réaliser plus d’itérations. Vous finirez par trouver le vôtre. Dans ce guide complet, nous allons suivre le process suivant :

Pour le travail de wireframing, nous allons utiliser un outil dédié comme Figma, qui est aujourd’hui largement adopté pour la conception d’interfaces. Pourquoi ce choix ? Il y a trois raisons :

• Il est possible de sauvegarder des styles pour les réutiliser ultérieurement, comme en CSS.
• Il est facile de modifier, de déplacer ou d’agrandir les éléments.
• Il est très facile de collaborer en temps réel et de partager vos maquettes avec d’autres membres de l’équipe, ce qui facilite le travail à distance et le feedback continu.

Il existe d’autres outils que Figma ou Illustrator, dont nous allons parler dans un instant.

Étapes #3 : choisir les outils

Dans ce guide complet, on ne s’intéresse qu’au wireframing réalisé via des logiciels dédiés, et pas au maquettage papier (qui reste pourtant encore relativement fréquent !). Voici quelques-uns des outils les plus populaires et actuels pour faire du wireframing :

Balsamiq

Si Balsamiq est devenu si populaire, ce n’est pas sans rapport avec le mode de présentation utilisé. Les wireframes sont présentés comme des esquisses, ce qui créé une expérience utilisateur très agréable. Balsamiq dispose aussi d’une bibliothèque de composants très fournies, très faciles à intégrer dans vos maquettes fonctionnelles facilement (simple glisser-déposer). Balsamiq est l’un des outils les plus faciles d’accès et les plus intuitifs. Le logiciel est payant, mais vous pouvez bénéficier d’une période d’essai gratuite de 30 jours.

Balsamiq est disponible sur tous les supports (Mac Windows, Linux) et propose une version web qui vous permet de travailler dans le cloud (SaaS). Les applications tierces comme iMockups (pour la création d’applications iOS) supportent le format Balsamic.

Omnigraffle

Omnigraffle, bien qu’encore utilisé sur Mac, tend à être remplacé par des solutions multiplateformes comme Figma ou Adobe XD, qui offrent une collaboration en ligne et une bibliothèque de composants constamment enrichie par la communauté.

Omnigraffle, dans la mesure où il s’agit à la base d’un logiciel de création de diagrammes, dispose de fonctionnalités plus complexes que Balsamic, comme par exemple des outils de création de graphiques ou un gestion avancé de styles, mais fonctionne aussi sur le modèle du glisser-déposer. Précision importante : Omnigraffle n’est supporté que par Mac OX. Omnigraffle est intéressant si vous souhaitez créer des wireframes très détaillés.

Axure

Axure a longtemps été une référence pour le wireframing professionnel, notamment pour les prototypes interactifs complexes. Cependant, il est aujourd’hui concurrencé par des outils comme Figma et Adobe XD, qui sont de plus en plus adoptés pour leur simplicité d’utilisation et leurs fonctionnalités collaboratives.

Flairbuilder

Flairbuilder, bien qu’il ait proposé des fonctionnalités avancées, est aujourd’hui très peu utilisé face à des solutions comme Figma ou Adobe XD, qui intègrent nativement la gestion de l’interactivité et des calques, tout en offrant une expérience collaborative et multiplateforme.

Keynote/Powerpoint

Bien que des solutions comme Keynotopia aient permis de réaliser des wireframes dans Keynote ou PowerPoint, ces pratiques sont aujourd’hui très rarement utilisées. Les outils spécialisés comme Figma ou Adobe XD sont désormais privilégiés pour le wireframing et le prototypage, grâce à leurs fonctionnalités avancées et leur collaboration en ligne.

Adobe CS

Pour ceux qui sont déjà familiers de la suite Adobe, Fireworks, Illustrator et Indesign sont des outils tout à fait pertinents pour créer des wireframes. Chacun d’entre eux a ses points forts et ses faiblesses :

• Fireworks n’est plus maintenu par Adobe et tend à être remplacé par des outils comme Figma ou Adobe XD, qui offrent des fonctionnalités avancées pour la création de wireframes et de prototypes interactifs. Sketch reste une alternative principalement utilisée sur Mac.
• Illustrator peut être utilisé pour créer des maquettes fonctionnelles d’un haut niveau de complexité, mais il est aujourd’hui moins courant pour le wireframing, car il ne gère pas l’interactivité ni la collaboration en ligne. Ses points forts restent la gestion avancée des vecteurs et des typographies.
• Indesign est un logiciel de mise en page qui dispose de fonctionnalités avancées pour la gestion des typographies, des styles et des « master pages ». Cependant, il est rarement utilisé pour le wireframing web, car il n’est pas conçu pour la création d’interfaces interactives ou la collaboration en ligne.

Étape 4 : créer une grille de composition

La grille, encore une fois, permet de structurer le contenu de votre mise en page, en créant des repères horizontaux et verticaux. La grille sert de soubassement à la structure de votre maquette, joue le rôle d’armature et permet de positionnement plus adéquatement et plus facilement les différents éléments du wireframe. Nous avons utilisé Illustrator dans ce guide, mais le process est toujours similaire. Dans un premier temps, vous devez définir la taille du document. Aujourd’hui, il est recommandé de travailler avec des formats adaptatifs (responsive), en tenant compte des points de rupture (breakpoints) courants pour desktop, tablette et mobile.

Nous importons ensuite dans le document la grille construite sur CSS Grid (cf. supra). Vous pouvez également utiliser les systèmes de grille intégrés dans Figma ou Adobe XD, qui facilitent la création et l’ajustement des grilles directement dans l’outil.

Étape 5 : définir la mise en page

Une fois que vous avez votre grille, vous devez déterminer la mise en page de votre interface en intégrant sur votre document des blocs. C’est là que commence le travail créatif. Pensez toujours à vous placer dans la tête de vos futurs utilisateurs : quelles sont les informations importantes à mettre en avant ? Les informations les plus importantes doivent être positionnées en haut (en haut à gauche).

Cette mise en page est très classique, utilisée par des milliers d’entreprises. Vous pouvez vous montrer plus créatif, tout en gardant à l’esprit la hiérarchisation des informations :

Voici un exemple de mise en page pour une interface de type « blog », comprenant notamment des blocs de publicité :

Étape 6 : hiérarchiser les informations à l’aide de la typographie

Ça y est, vous êtes satisfait de la manière dont sont agencés les blocs. Vous devez maintenant passer à l’étape suivante : choisir et définir les typographies. En gardant toujours à l’esprit que les informations que vous souhaitez faire passer en priorité à vos utilisateurs doivent être claires et lisibles, même si votre maquette est en noir et blanc. Dans un premier, vous pouvez rester une seule police de caractères et jouer seulement sur la taille des caractères pour hiérarchiser les différents niveaux d’information.

N’ayez pas peur d’expérimenter, de multiplier les itérations. Car il sera ensuite difficile de revenir en arrière. Dans l’exemple ci-dessous, nous avons souhaité mettre en avant les screenshots. Nous avons aussi intégré des blocs noirs :

Étape 7 : utiliser un nuancier de gris

Utiliser un nuancier de gris vous permettra de régler l’impact visuel de chacun de vos éléments sans utiliser de couleurs. Le nuancier vous permettra d’affiner la hiérarchie visuelle et de vous rapprocher un peu plus du rendu final.

Étape 8 : créer un wireframe en haute définition

Cette étape est facultative. Une maquette fonctionnelle HD est tout simplement une maquette comprenant le maximum de détails possible, et donc plus de détails qu’une maquette simple. Mais cela reste néanmoins une maquette, dans le sens où restent absents les détails visuels. La maquette HD peut être réalisée à partir de la maquette de base. A cette étape, vous pouvez détailler la taille des caractères :

Ou même ajouter des couleurs à votre maquette fonctionnelle :

La conception d’une maquette HD permet de gagner beaucoup de temps à l’étape du code et de la création graphique. Tout aura été déterminé avec précision à l’avance. Faites vos itérations directement dans votre logiciel de wireframing (comme Figma ou Adobe XD), plutôt qu’après coup dans un outil de retouche d’image.

Remarque : parfois, il est préférable de ne pas trop détailler le wireframe, voire de ne pas créer de maquette HD, car certains détails d’interaction ne peuvent pas être communiqués sur une image plane. Encore une fois, le process est adaptable.

Étape 9 : créer la maquette graphique

Une fois la maquette fonctionnelle prête (wireframe), il est temps de passer au travail de conception de la maquette graphique. Lorsque la maquette fonctionnelle a été conçue dans un outil comme Figma, il est très facile de passer à la conception graphique et au prototypage interactif sans changer d’environnement, ce qui simplifie le workflow.

Voici un exemple de wireframe transformé en maquette graphique. Le squelette du wireframe est pratiquement resté intact, même si quelques ajustements visuels ont été faits :

Nous arrivons au terme de ce guide complet sur le wireframing. On espère que cela vous a donné envie de créer votre propre maquette fonctionnelle. N’hésitez pas à tester, à itérer, à réitérer : c’est le secret de la réussite. Prenez aussi le temps d’essayer plusieurs outils et plusieurs process. Travailler avec des outils et des process avec lesquels vous vous sentez à l’aise vous fera gagner des heures de travail.