Pourquoi faire une maquette de site web ? 

Créer une maquette pour son site web permet de concevoir et de visualiser la future interface concernant le site en question. Cette maquette peut être plus ou moins fidèle à l'interface voulue pour ensuite être soumise à des tests utilisateur

Une maquette peut être réalisée par un designer en collaboration avec un développeur ou par un UX Designer en charge de faire tester une future interface avant son développement. 

Néanmoins, lorsque l’on parle de maquette, on parle dans la majorité des situations de maquette ‘’jetable’’ non-officielle. Lorsque l’on veut parler d’une maquette finie et basée sur le produit final, on parle de prototype. Nous y reviendrons plus tard. Le maquettage fait donc appelle des connaissances en ergonomie et en design mais le prototypage ajoute lui des connaissances en développement et en interactivité. 

Wireframe, qu’est-ce que c’est ? La définition

Exemple de wireframe

Les wireframes sont des plans, des brouillons qui établissent la mise en page, le contenu et la fonctionnalité d’une interface. Ils ne traitent donc pas du design à proprement parler, on ne retrouve pas de couleurs, d’éléments graphiques, de typographies. Les wireframes sont des guides visuels concernant les différents éléments d’une interface, d’une page web ou d’une application.  

Ces wireframes peuvent être des dessins simples, grossiers et ne représentent pas l’interface voulue dans les détails. L'objectif ici est juste de se faire une idée de l’allure globale et de l’emplacement des composants d’une interface. 

Sachant qu’il n’est pas question ici de détail, d’UI précise ou de réel design, les outils pour créer des wireframes sont nombreux. Vous pouvez simplement utiliser un carnet et un crayon. Vous avez également la possibilité d’utiliser des logiciels comme Adobe XD, Sketch, Figma et plein d’autres accès en ligne. 

Bonnes pratiques du Wireframe

Wireframe sur papier

Le wireframe doit toujours être de faible qualité. Rien ne sert de consacrer du temps sur des détails. Le wireframe est au design ce que le brouillon est au dessin. L'objectif ici est juste de dessiner des idées, des emplacements, une vue globale de ce que vous avez en tête. Vous verrez que par la suite, vous pourrez concrétiser vos idées grâce aux prototypes, maquettes, mockup, etc.

Aussi, pensez dès lors que vous créez des wireframes d’utiliser au maximum du vrai contenu. Limitez le plus possible les ‘’lorem ipsum’’ qui en général rentrent parfaitement dans votre plan, ce qui n’est surement pas le cas du vrai contenu texte. 

Enfin, ne vous pressez pas à vite finaliser vos plans concernant les wireframes. N’oubliez pas que ces wireframes sont là pour tester beaucoup d’idées, de mises en pages, d’emplacement, de fonctionnalité. C’est l’étape où il est le plus facile de modifier des choses alors profitez-en. Lors des étapes de prototypage et de développement, le coût pour modifier et tester des éléments sera plus élevé. 

Les wireframes sont uniquement là pour mettre à plat plusieurs idées que vous avez afin d’avoir une vision claire de ce qu’il est possible de mettre en place pour votre interface et de partager ça avec votre équipe. 

Qu’est-ce qu’un prototype ? La définition

Un prototype d’une interface est une représentation et un modèle de conception basse ou haute fidélité concernant un site web ou une application. Contrairement au wireframe, l'objectif d’un prototype est de représenter l’interface avec son aspect graphique, son design, sa mise en page précise, ses interactions principales, etc. L’idée principale d’un prototype est de représenter une interface la plus proche possible du rendu final.

Prototype sur Figma

En UX/UI et en optimisation du taux de conversion, le prototype permet de tester une interface sans pour autant investir dans son développement. Il est possible donc d’effectuer des tests utilisateur avec une interface qui n’a pas encore été codée. Si le prototype est correct et que les interactions sont semblables au rendu voulu, le prototype sera vu comme l'interface réelle et les tests utilisateur seront concluants. 

Pourquoi utiliser un prototype ?

Le prototype s’appuie sur le wireframe pour proposer une interface qui ressemble le plus possible aux résultats voulus. Le prototype est donc indispensable pour obtenir un rendu visuel de l’interface sans avoir besoin de coder ou d’investir dans le développement. 

Les prototypes sont plus coûteux que les wireframes à produire mais ils sont très utiles pour réaliser des tests utilisateurs et avoir des retours rapidement sur le produit. Ici impossible de réaliser des prototypes avec des outils simples ou avec un crayon. Il va falloir utiliser des outils plus techniques comme Sketch ou Figma par exemple.

Prototype statique et interactif

L’un des avantages du prototype est qu’il est possible de le faire tester. Est-ce que cela veut dire que les pages doivent être connectées entre elles ? que toutes les fonctionnalités doivent fonctionner sans lignes de code HTML, CSS ou JS ? que toutes les interactions doivent être disponibles ? Et bien pas forcément. 

Il est tout à fait possible de ‘’simuler’’ l'interaction pendant ces tests. L’interaction et les liens entre les pages sont des aspects qui concernent surtout la partie développement web en matière de technicité. La conception d’un prototype interactif prend plus de temps, il est donc possible de sauter cette étape pour ne tester que les pages une par une concernant l’allure des pages et la navigation ‘’on page’’.

Test utilisateur de prototype

Prototype interactif (cliquable)

Concernant les prototypes interactifs, le design doit fournir une réponse pour chaque action et chaque interaction. Si l'utilisateur du prototype clique sur un bouton, cela doit effectuer automatiquement l’action. S’il clique sur un lien dans le menu, cela doit l’emmener sur la page en question. S’il clique sur une flèche sur un carrousel, l’image doit changer. Etc. 

Le prototype interactif, même avec les meilleurs outils, peut mettre du temps à produire. Attention donc à bien définir son utilisation et à évaluer si oui on non il est judicieux d'ajouter l’interaction au prototype. 

Prototype statique

Avec le prototype statique, l'interaction n’existe pas. Du moins, c’est le designer qui gère en temps réel l’interaction, les actions et les changements de pages. Lors d’un test utilisateur donc, les réponses aux actions des utilisateurs sont données en temps réel par le concepteur qui connaît l’interface. 

Prototype haute fidélité et basse fidélité 

Vous avez la possibilité de créer un prototype plus ou moins fidèle au rendu voulu. Cela dépend de vos attentes, de ce que vous voulez tester et de la précision attendue. 

La fidélité d’un prototype concerne trois grands aspects de l’interface : 

  • L’interaction : Est-ce que les liens sont cliquables ? Est-ce que les réponses sont données automatiquement aux utilisateurs ayant effectué une action ?
  • Le visuel : Le rendu visuel représente-t-il au plus proche l’interface final ? Retrouve-t-on des schémas, des brouillons et des plans imprécis ?
  • Le contenu et la hiérarchisation : Retrouve-t-on le contenu final tel que les articles, les bonnes images, les descriptions, le contenu texte ? Le prototype contient encore des ‘’lorem ipsums’’ et des images provisoires.

Ce sont ces trois grands aspects qui vont définir si votre prototype est haute ou basse fidélité. 

Prototype haute fidélité 

Le prototype haut fidélité rempli tous les critères de l’interface finale. L’interaction est automatique, comme sur un vrai site web. Le visuel est à jour, pas de lorem ipsum, le contenu est “officiel”. 

Même si le prototype haute fidélité peut prendre du temps à mettre en place, cela peut en valoir le coût dans certains projets. 

Les avantages du prototype haute fidélité sont nombreux : 

  • Une réponse aux actions plus réaliste : ici le prototype est interactif, on a donc une réponse du système qui est réaliste. Ici ce n’est pas le concepteur qui choisit la page à afficher ou l'événement à afficher, cela se fait automatiquement. l’utilisateur a donc entièrement la main sur sa rapidité de navigation.
  • L’interactivité haute fidélité permet au concepteur de se concentrer sur le comportement des utilisateurs plutôt que de préparer l'événement ou la page à afficher selon l’action effectuée.
  • Un prototype haute fidélité permet d’aller plus en profondeur dans l'observation et les tests des composants techniques. Vous pouvez tester des menus déroulants, des carrousels, des animations, la qualité des images, etc.

Prototype basse fidélité

Les prototypes basses fidélité sont des représentations visuelles d'une interface avec le contenu, la hiérarchisation, le design, etc sans aller dans la précision. Sur ce genre de prototype, on va souvent retrouver des lorem ipsums, des images génériques, peu ou pas du tout d'interaction, etc. 

Le prototype basse fidélité n’est pas aussi représentatif qu’un haute fidélité mais il a le mérite d’avoir tout de même quelques avantages : 

Cela prend moins de temps qu’un prototype interactif. Ici, il est possible de se concentrer sur le design et sur la conception plutôt que sur les actions. Il y a bien sûr l’organisation des différentes pages à afficher lorsqu’un utilisateur effectue une action mais cela prend moins de temps que de créer un prototype entièrement cliquable. 

Il est plus simple de modifier un prototype basse fidélité. Si une modification est à faire, il est plus simple pour un designer de modifier un prototype basse fidélité avec un design, un contenu et une interface pas totalement finie plutôt que sur une interface quasiment parfaite.

Il est plus simple d’émettre des jugements instinctifs sur un prototype créé rapidement. Sur un prototype haute fidélité qui a mis du temps à être créé, les jugements et les remarques ne vont pas se faire naturellement. Une pression va se créer et les utilisateurs auront du mal à dire sincèrement ce qu’il ne va pas à leur sens.

Processus du maquettage

Le processus de maquettage peut varier en fonction du projet, des ressources, du temps de l'entreprise en question. 

Néanmoins, en général, on retrouve quasiment toujours, les mêmes étapes : 

  • 1. Wireframe
  • 2. Prototype basse fidélité
  • 3. Prototype haute fidélité
  • 4. Développement (code)

1. Wireframe 

La première étape qui est le wireframing consiste à utiliser les éléments mis à votre disposition pour tenter d'élaborer et d'organiser des idées concernant une mise en page. 

Aucune interaction n'est attendue sur un wireframe. C’est une maquette entièrement statique où vous allez pouvoir tester la compréhension, agencements des composants, organiser les sections, etc.

On parle ici de zoning. Le zoning consiste à placer les composants et les groupes d’informations afin d’organiser la structure de la page en question. Ce travail indique donc le rôle, le contenu, l’importance visuelle, et la taille de chaque zone de l’interface. Le zoning est donc primordial pour établir les bases de l'interface pour ensuite apporter du design graphique. Le designer viendra donc par la suite ‘’habiller’’ le travail de zoning qui a été fait pour avoir une interface qui ressemble au produit final.

Wireframe sur papier crayon

Vous pouvez ici réaliser la maquette sur papier afin d’avoir plus de flexibilité. Il est également tout à fait possible de faire tester votre maquette papier par des utilisateurs. Cela peut paraître étrange mais vous pouvez tout à fait avoir des retours cohérents si votre wireframe papier est correctement réalisée. 

Bien évidemment, il est impossible d’y implanter du vrai texte, les tests utilisateurs ne seront pas efficace à 100%. Mais pour tester des petits composants, des mises en pages globales, cela peut être intéressant. Et en plus de ça, le coût sera faible.

Pour aller plus loin, les wireframes peuvent être réalisés sur écran, via des logiciels. Attention seulement, le wireframe doit rester basse fidélité et ne doit pas prendre en compte les détails visuels, graphiques, etc. Restez donc sur quelque chose de simple, de grossier en utilisant le noir et blanc.

2. Prototype

Selon l'aspect visuel de la maquette et son habillement concernant le côté graphique, on dit d’une maquette qu’elle est haute ou basse fidélité. Lorsqu'elle est donc complétée par du design graphique et de l’interactivité, on peut dire ici que c’est un véritable prototype de l’interface finale. 

C’est le degré d’interactivité et de détail visuel qui va indiquer la fidélité du prototype. Plus ces aspects-là vont être travaillés, plus le prototype et les tests utilisateur seront réalistes. 

Le travail de prototypage doit donc être basé sur le travail de wireframing et de zoning réalisé au préalable. L'objectif ici est d’habiller les wireframes pour produire un prototype qui correspond du mieux possible à l’interface voulue. 

Ici, tous les composants graphiques doivent être créés. Que ce soit pour la version mobile ou ordinateur. 

Depuis peu, on ne parle plus de maquette page par page. L'objectif de la conception d'interface aujourd’hui est de développer un design system regroupant tous les composants comme des pièces de puzzle. Ces pièces pourront être ensuite ré-utilisées pour former les autres pages afin de gagner du temps sur la conception, d’avoir une cohérence graphique entre toutes les pages et d'optimiser la collaboration entre développeurs et designers.

Pour avoir un processus de conception et de prototypage efficace, l’atomic design propose une démarche permettant de concevoir des plus petits éléments pour ensuite former des plus gros composants.

Atomic design

Cette démarche divise les différents éléments d’une interface en 5 grandes catégories : atomes, molécules, organismes, templates et pages. 

Parmi les atomes, on retrouve les plus petits éléments de base comme : 

  • La forme d’un bouton
  • Les couleurs
  • Les liens 
  • Les typographies 
  • Les formes
  • Les icônes

Les molécules eux sont composées d'atomes, ce sont les premiers regroupements d'éléments. On peut donc retrouver dans les molécules des éléments comme par exemple une forme de bouton et son lien, des boutons actifs (hover) et des regroupements de titre - paragraphe.

Ensuite, il y a les organismes qui regroupent des combinaisons de molécules et également dans certains cas quelques atomes. Par exemple, un champ de saisi accompagné d’un bouton et d’un titre représente ensemble un organisme.

Puis, on retrouve les templates qui eux servent à représenter un modèle de page complet. Seulement, on ne retrouve ici pas de textes réels, le texte est remplacé par du lorem ipsum et les images sont remplacées par des placeholders. Les templates sont là pour vérifier la mise en page concernant le responsive des organismes et les différents supports d'affichage.

Enfin, les pages correspondent une page du prototype et donc à une étape du parcours utilisateur. Elles sont basées sur des templates afin de rajouter le vrai contenu par-dessus. Contenu qui aura pour but d’orienter les utilisateurs vers la tâche voulue lors des tests par exemple.

Cette méthode d’atomic design permet finalement de créer des composants basées sur les wireframes réalisés au préalable. Il suffit ensuite d’assembler les composants créés comme des pièces de puzzle pour générer des pages et des prototypes plus rapidement.

3. Code

Une maquette n'est pas une fin en soi. Elle permet de tester une interface et surtout d'avoir une base sur laquelle s'appuyer lorsque l'on développe le produit final. 

Après avoir fini les prototypes, la dernière étape consiste à développer l’interface et à coder en réel l'interface avec toutes les interactions, le design, le code HTML,CSS, JS, etc.

La collaboration là aussi doit être au rendez-vous. Le design system doit être au coeur du projet afin que le développeur ait accès à tous les composants du prototype.

Les outils pour créer des wireframes et des prototypes 

Concernant les outils de wireframing, de prototypage et de maquettage, de nombreux outils sont disponibles. Néanmoins, ça n’est pas l’outil qui va faire la différence ici. Vous pouvez d'ailleurs effectuer la plupart de vos maquettes basse fidélité à l’aide de papier/crayon.

Pour les wireframes plusieurs solutions sont accessibles : 

  • Balsmiq
  • MockFlow
  • Sketch
  • Figma
  • AdobeXD

Mais concernant la prototypage haute fidélité, il va vous falloir plus de précision et des outils prenant en compte du design UX et des interactions. 

Plusieurs outils de prototypages : 

  • Adobe XD
  • InVision
  • Figma
  • Sketch

Les outils sont assez simple  prendre en main et sont pour la plupart gratuits au départ.


  • 🪐Quelle différence entre Wireframe et Prototype ?

    Le wireframe représente une maquette dune interface de façon grossière. Le wireframe est plus semblable à un plan avec du zonning, une mise en page, etc. Le prototype lui est une maquette plus finie avec une interaction, des éléments graphiques et du design.

  • 🖍️Comment créer la maquette de son site ? 

    Avant tout, il est important de définir les besoins, les pages, les composant du site web. Ensuite il sera possible de créer des premiers brouillons, des plans et des wireframes afin d'organiser la mise en page et l'assemblage des différents composants. Grâce à cela, il sera possible d'habiller les wireframes pour les transformer en de réelles prototypes réalistes, interactifs et testables.

  • 🛠️Quels outils pour créer la maquette de son site ? 

    Pour des wireframes assez simples, le papier/crayon suffisent. Pour des wireframes plus avancées et des prototypes, Figma, Sketch ou Adobe XD sont efficaces. Certains sont disponibles gratuitement au début.