Florent Kiecken 17/7/20

Wireframe & Prototype :

Créer la maquette de son
site web
Créer la maquette de son site est une tape par laquelle il faut
asser pour une interface de qualité. Des procédés comme le
wireframing et le prototypage permettent cela.

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 appel à des connaissances en
ergonomie et en design, mais le prototypage ajoute lui des connaissances en développement et en
interactivité.

🎁 Formez-vous enpasser
Avant de continu
paràdes
l'UXmaquettes
Design etpour
au CRO
refondre votre site, pensez à vérifier si votre interface respecte
example@gmail.com Subscribe
(Optimisation des conversions)
les crtiètes UX : Télécharger la check-list UX

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

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 un tas d’autres accès
en ligne.

Bonnes pratiques du Wireframe

 Le wireframe doit toujours être de faible qualité. Rien ne sert de consacrer du temps sur des détails. Le
🎁 wireframe
Formez-vous en est au design
continu à l'UXceDesign
que le brouillon
et au CRO est au dessin. L'objectif ici est juste de dessiner des idées,
example@gmail.com Subscribe
des emplacements,
(Optimisation une vue globale de ce que vous avez en tête. Vous verrez
des conversions) que par la suite, vous
pourrez concrétiser vos idées grâce aux prototypes, maquettes, mockups, etc.

Aussi, pensez dès lors que vous créez des wireframes d’utiliser un maximum de vrais contenus. 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’emplacements, de
fonctionnalités. 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.

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.
🎁 Formez-vous en continu à l'UX Design et au CRO
example@gmail.com
Les prototypes sont plus coûteux que les wireframes à produire mais ils sont très utiles pour réaliser des Subscribe
(Optimisation des conversions)
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 ? 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’’.

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
 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 page. 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.

🎁 Formez-vous
Prototype haute
en continu à l'UX fidélité
Design et au CRO et basse fidélité
example@gmail.com Subscribe
(Optimisation des conversions)
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 finale ? 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é remplit 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
 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 basse 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.
Formez-vous en continu à l'UX Design et au CRO
example@gmail.com Subscribe
(Optimisation des conversions)
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, l'agencement des composants, organiser les sections, etc.

On parle ici de zoning. Le zoning consiste à placer les composants et les groupes d’information 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.

🎁 Formez-vous en continu à l'UX Design et au CRO example@gmail.com Subscribe

(Optimisation des conversions)

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é.

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.
 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
🎁 Formez-vous
composants.
en continu à l'UX Design et au CRO
example@gmail.com Subscribe
(Optimisation des conversions)

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, elles, 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 titres - paragraphes.

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és 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.

🎁 Formez-vous en continu à l'UX Design et au CRO example@gmail.com Subscribe

(Optimisation des conversions)
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 cœur du projet afin que
le développeur de votre agence web 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 prototypage :

 Adobe XD

InVision

Figma

Sketch

🎁 Formez-vous en continu à l'UX Design et au CRO

Les outils sont assez simples à prendre en main et sont pour la plupart gratuits au départ.
example@gmail.com Subscribe
(Optimisation des conversions)

La Cargaison
🎁 Check-list UX +293 critères, audit vidéo, notre méthodologie
CRO...

Recevez GRATUITEMENT tout ce contenu dans le mail de bienvenue

en vous inscrivant à notre newsletter.

S'inscrire maintenant et recevoir le contenu

Auteur

Florent Kiecken
CEO de l’agence SDLV
 Je dirige SDLV, une agence spécialisée dans l’optimisation de l’UX
et du taux de conversion pour les sites web.

Si vous souhaitez voir comment nous pouvons vous aider à

optimiser votre site, je vous invite à réserver un appel de
découverte avec mon équipe.

Réserver un appel découverte

🎁 Formez-vous en continu à l'UX Design et au CRO example@gmail.com Subscribe

(Optimisation des conversions)

Ces articles
Nos
pourraient vous intéresserRéserver un appel
Se former en continu à
Service
clients l’UX/CRO découverte

conversions & ux conversions & ux

Design & copywriting : leur Carrousel ? Voici pourquoi vous

impact sur les conversions de devriez les éviter sur votre site
votre site

v.fr Audit Blog Contacter un membre de

Services Se former à l'UX/CRO

Nos clients