C'est quoi une maquette de site web, pourquoi en faire et comment la créer ?

C'est quoi une maquette exactement ?

Définition d'une maquette

Une maquette est le rendu statique, précis et fidèle de toutes les pages d’un site web. Il s’agit de l’étape précédant le prototype du site final qui lui sera fonctionnel et interactif dans le but d’être testé avant d’être développé. On intègre dans une maquette les vrais visuels, les textes définitifs, la charte graphique, les boutons, etc.

Le maquettage est ainsi à mi-chemin entre l’étape du graphisme et celle du développement web. Il peut être réalisé par un graphiste, un web designer, un développeur ou encore un intégrateur web.

Différence entre maquette et wireframe

Dans ce magnifique jargon de l'Internet, il est important de bien distinguer la différence entre maquette et wireframe (parfois appelé "zoning"). La réalisation des wireframes est l’étape qui précède la maquette. On va donc concevoir la maquette à partir des wireframes.

Les wireframes sont le squelette, la structure brute et minimaliste de votre futur site web. Très concrètement, on utilise des formes géométriques pour représenter les éléments d’un site (les onglets, les boutons, les zones de texte, les images, etc.). Pour chaque page du site, on va positionner, agencer et hiérarchiser ces formes entre elles, comme on le fait pour organiser les pièces d’une maison sur un plan par exemple. L'objectif étant d’obtenir le bon équilibre entre tous ces éléments. On va également définir la navigation d’une page à une autre, c’est ce qu'on appelle l’arborescence. Ici le but recherché est la fluidité.

En bref, la principale différence entre la maquette et les wireframes est que l’on n’intègre pas encore à l’étape des wireframes l’identité visuelle de la marque, les couleurs, les polices, les textes définitifs, les visuels, etc. L’objectif de cet outil est de tester rapidement vos idées et d’imaginer plusieurs versions rapidement.

Sans plus attendre… Voici un exemple de wireframe et de maquette d'un même élément de site web :

Quel outil de maquettage utiliser ?

Figma pour faire ses maquettes de site web

Figma est l’outil dont tous les designers et développeurs parlent depuis plusieurs années.
Son objectif : être accessible à tous. Il est en effet réputé pour sa prise en main facile et rapide grâce à une interface simple. Entièrement basé sur Internet, tout est centralisé sur cette plateforme collaborative. Tous les membres de l’équipe peuvent ainsi travailler sur la même interface en temps réel et les parties prenantes peuvent voir l’avancée du projet et écrire leurs commentaires directement dessus.

Utiliser Adobe XD pour ses maquettes de site

Adobe XD a également toutes ses chances. Logiciel de la suite Adobe Creative Cloud, il est également collaboratif, très complet et performant. Dédié aux professionnels, il a été conçu spécifiquement pour les projets de sites Internet conséquents avec des fonctionnalités avancées. Si vous avez l’habitude de travailler sur Photoshop ou Illustrateur, vous ne serez pas dépaysé avec l’interface d'Adobe XD. Si ce n’est pas le cas, comme tous logiciels Adobe, une formation est nécessaire pour le maîtriser.

D'autres outils en ligne gratuits pour vos maquettes

• Miro : outil collaboratif en ligne qui propose des modèles de wireframes et de maquettes. Il est aussi beaucoup utilisé par les web designers pour ses fonctionnalités. (capture d’écran interface Miro)
• Canva : site de conception graphique, très simple d’utilisation. Cette plateforme est utilisée pour réaliser des wireframes et maquettes relativement simples. (capture d’écran interface Canva).
• Google Slides : non on plaisante ! Sauf si vous voulez envoyer les designers en burn-out…

Pourquoi la maquette d'un site web est fondamentale ?

Clarifier la vision du projet avant son développement

Pour que votre création de site web avance efficacement, il faut que l’ensemble des parties prenantes du projet aient une vision claire et commune. En l’absence de maquettes, il est fort probable que les parties prenantes n’avancent pas dans la même direction et que le projet fasse du surplace.

Grâce à la maquette, vous allez passer de l’idée que chacun se fait du site à un support de travail visuel et concret. Vous allez pouvoir vous projeter et tester rapidement les idées de chacun directement sur la maquette. Tous ensemble, vous allez par exemple vous rendre compte que c’est précisément cette mise en page qui fonctionne mieux qu’une autre.

La maquette va également vous aider à mieux comprendre votre projet : pourquoi avez-vous besoin d’un site ? Au fur et à mesure du maquettage, vous allez tous ensemble clarifier vos objectifs pour finalement valider le concept avant de l’envoyer en phase de développement.

Améliorer la communication au sein du projet

La création d'un site peut impliquer une équipe plus ou moins grande. Et qui dit équipe dit : gestion, organisation et coordination. La maquette est un support de communication qui permet à tous de rester alignés sur l’avancée du projet.

La maquette va également vous permettre d’améliorer les échanges avec les différentes parties prenantes. Le développeur n’est pas toujours intégré dans le projet depuis ses prémisses par exemple. On peut imaginer que vous fassiez appel à lui uniquement en phase de développement. Grâce aux maquettes, il comprend votre vision, vos attentes et sait précisément sur quoi travailler sans perdre de temps.

La maquette va aussi faciliter la prise de décisions pour des personnes impliquées de près ou de loin dans le projet. Ce peut être par exemple un décideur de l’entreprise. Il sera plus facile pour lui de trancher avec un support comme une maquette pour appuyer ses choix.

Réduire les coûts et les délais de développement.

On vient de comprendre qu’il est essentiel que les parties prenantes partagent une vision claire et commune et que la communication soit fluide au sein du projet.
Si vous vous passez de maquette, cela veut dire que vous allez explorer chaque idée en les développant directement. Le risque ici est de perdre du temps et de l’argent si vous vous rendez compte finalement que personne n’est aligné sur le projet.

Avec la maquette vous communiquez plus facilement, vous allez donc réaliser des itérations plus rapidement qui vous coûteront moins chères. Le temps passé sur votre maquette sera toujours inférieur au temps passé à développer un site "à l’aveugle".

D’autre part, la majorité des dysfonctionnements auront été repérés et corrigés sur la maquette. Ce qui représente un gain de temps précieux pour le développeur.

Améliorer la qualité du site web

In fine, grâce à ce savant mélange qui consiste à partager une vision claire et commune, communiquer plus efficacement et optimiser les coûts et les délais, vous obtenez un site de meilleure qualité. Vous pouvez avoir l’impression que le maquettage est une étape supplémentaire, mais en réalité pas du tout. Elle fait gagner énormément de temps pour la suite et notamment en phase de développement.

Comment réaliser la maquette d'un site web ?

Identifier les objectifs des utilisateurs et les objectifs de conversion

Lorsque l’on réalise une page de site Internet, il y a deux types d’objectifs à prendre en compte :

• Les objectifs des utilisateurs : ce sont les intentions des visiteurs sur votre page.
  Quelles informations souhaitent-il trouver sur cette page ? Est-ce que vous pouvez résoudre leurs problématiques ? Qui êtes-vous ? Quels sont vos services ? Avec qui avez-vous déjà travaillé ? Est-ce que vos clients ont été satisfaits ? Comment vous contacter ? Il s’agit ici de comprendre leurs besoins d’informations.

• Les objectifs de conversion : ce sont vos objectifs derrière la création de cette page. Que souhaitez-vous obtenir de votre visiteur ? Quelles actions souhaitez-vous l’inciter à faire ? Gardez toujours à l’esprit qu’une bonne page a un seul et unique objectif.

Pour créer une bonne maquette, il faut donc avoir une parfaite compréhension de ces deux éléments. Pour chaque objectif utilisateur identifié, vous devez vous assurer d’apporter une réponse dans votre site. Vous n’obtiendrez pas de conversation si vous ne répondez pas aux besoins des utilisateurs. Et si vous ne connaissez pas ces besoins, vous ne serez pas précisément quels éléments mettre dans votre maquette. On pourrait finalement y mettre tout et n’importe quoi, tout est possible !

Définir la structure et le contenu de la page à maquetter

Une fois ces objectifs identifiés et listés, vous disposez des éléments nécessaires pour construire vos wireframes. Cette étape va vous permettre d’organiser vos éléments de manière efficace sur chacune de vos pages.

La page d’un site se découpe souvent de cette façon : le menu de navigation / le contenu de la page / le bas de page.
C’est maintenant le moment tant attendu : la création de vos wireframes ! N’oubliez pas : mettez-vous toujours dans les baskets de votre utilisateur. Dans un premier temps, voici les étapes à suivre :

• Définissez votre menu de navigation : dessinez un menu simple et clair pour le moment, ne perdez pas de temps à chercher ce que vous allez mettre dedans. Pas de panique, une fois le contenu des pages réalisé, le menu se construira plus facilement. Un menu basique intègre souvent un onglet qui présente vos produits ou services, un autre qui parle de vous et un pour vous contacter.
  
  
• Agencez le contenu de chaque page : de gauche à droite, représentez à l’aide de blocs et formes géométriques les zones de textes, images, boutons, formulaires… Sans rentrer dans les détails. Gardez à l’esprit : chaque élément placé doit répondre à un objectif utilisateur. Pensez à bien hiérarchiser vos informations : premières / secondaires / optionnelles. Utilisez une grille pour que vos éléments soient alignés.
  Une fois la première page terminée, passez à la suivante en réfléchissant à leur connexion entre elles. Vous allez en même temps construire au fur et à mesure l’arborescence de votre site, autrement dit son architecture.
  
  
• Soignez votre bas de page : vous pouvez ajouter ici des liens vers vos pages importantes, comme vos services et la page de prise de contact. Puis d’autres liens vers des pages secondaires qui n’ont pas leur place dans le menu, comme les mentions légales par exemple. Le but est de donner des repères de navigation à vos utilisateurs pour améliorer leur expérience et leur parcours.

Maintenant que vous avez réalisé vos wireframes, vous allez pouvoir détailler cette structure et son contenu directement sur la maquette grâce aux éléments de design UX et UI.

Intégrer les éléments de design UX et UI

L’UX design de votre maquette

L‘UX design (ou User eXperience) vise à offrir une expérience agréable à votre utilisateur, mais aussi à le guider naturellement vers l'action que vous souhaitez qu'il réalise. Pour cela, sur votre maquette concentrez-vous sur :

• L’utilisabilité, qui vise une navigation claire et intuitive afin que les visiteurs trouvent rapidement ce qu'ils recherchent. Vous pouvez maintenant affiner votre menu grâce à la vision d’ensemble de l’arborescence.
  
  
• L’accessibilité, qui consiste à concevoir une interface facile à prendre en main et compatible avec tous types de supports et tailles d’écran que ce soit un ordinateur, une tablette ou un smartphone. L’objectif est aussi d’assurer une vitesse de chargement rapide afin d’offrir une expérience sans frustration. Pour cela vous pouvez par exemple réduire la taille de vos visuels, changer vos formats de fichier ou optimiser vos animations.
  
  
• La désirabilité, qui repose sur la création d'une expérience émotionnellement positive pour le visiteur. Votre maquette doit susciter des réactions positives et inciter à agir si vous voulez atteindre vos objectifs de conversion. Pour cela par exemple, les boutons d’appel à l’action, aussi appelés "les call-to-action", doivent être bien placés. Évitez de mettre deux boutons à côté par exemple car ils peuvent amener au paradoxe du choix.

Globalement, l’UX designer va s’attacher à satisfaire le visiteur, lui faire plaisir, le rassurer, susciter sa curiosité, le surprendre, faire appel à ses émotions… Mais il ne pourra pas atteindre ses objectifs sans travailler l’apparence du site.

L’UI design de votre maquette

L’UI design (ou User Interface) concerne les éléments graphiques d’une interface. Le designer va se préoccuper de la partie esthétique d’un site pour parvenir aux objectifs de l’UX designer. Il va notamment travailler sur ces éléments :

• Les couleurs : le choix de vos couleurs est très important. Chaque couleur véhicule sa propre émotion. Les couleurs de votre charte graphique doivent faire ressortir l’âme de votre entreprise et provoquez l’émotion souhaitée chez le lecteur.
• Les typographies : l’émotion de votre site va aussi passer par ses typographies. Chaque police donne un ton différent. On utilise en général pas plus de deux polices d’écriture différentes : une police lisible pour vos textes et une autre plus adaptée pour vos titres.
• Les visuels : très importants, les visuels vont participer à créer votre ambiance et feront la différence avec vos concurrents. Réalisez des photos de qualité, vos propres illustrations avec votre charte graphique afin d’accueillir le visiteur dans votre univers, iconique et différentiable entre tous.
• Les contrastes : c’est un principe fondamental en design qui est utilisé pour attirer l’attention, dynamiser ou différencier du contenu. Jouez sur différents types de contrastes :
  • Le contraste de couleurs, pour mettre en valeur un bouton d’action par exemple.
  • Le contraste de polices et de tailles de polices pour hiérarchiser les informations entre elles et améliorer la lisibilité.
  • Le contraste de taille entre vos textes et vos visuels en fonction de leur importance.

Veillez à ne pas surcharger vos pages et utilisez des espaces blancs pour permettre à vos internautes de respirer.

Votre objectif est d’obtenir un subtil équilibre entre tous ces éléments. Vous allez pouvoir créer du rythme, de la surprise et embarquer votre lecteur dans votre univers, unique et immersif.

Grâce à cette approche UX et UI design, vous disposez de toutes les clés pour créer efficacement une bonne maquette. Pour aller plus loin, une dernière démarche peut vous aider à affiner votre travail.

Valider le concept auprès d'utilisateurs

Maintenant que votre maquette est prête, la faire tester est une étape intéressante avant de passer au développement. Cela peut vous aider à améliorer l’expérience vécue et à optimiser votre maquette en repérant par exemple les anomalies, les incompréhensions, etc. Voici quelques méthodes efficaces :

• A/B testing : cela consiste à tester deux versions afin de savoir laquelle est la plus adaptée. Vous pourrez comparer vos idées en testant différentes mises en page, fonctionnalités, etc.
• Heatmap : l’objectif ici est d’enregistrer l’écran de vos utilisateurs et d’analyser leurs navigations. Ainsi, vous pourrez observer les freins et difficultés rencontrées et les résoudre rapidement.
• Tests utilisateurs : les tests utilisateurs permettent d’observer les comportements des visiteurs face à votre interface et avec un scénario préétablit.