Réaliser la maquette d'un site internet

Lorsqu'on réalise un site web, on ne part pas tête baissée sans se préoccuper de l'apparence du site, des règles d'affichage, des interfaces, des comportements voulus etc.

Pourquoi maquetter un site web ?

On ne crée pas un site web sans un minimum de préparation ! Ce n'est en tout cas pas la bonne méthode à adopter et avec toute la motivation du monde, on se heurtera très vite à des soucis d'ordre technique qui nous imposeront par la suite de repasser à maintes reprises sur des parties du site sensées être terminées surtout si votre client ne connait pas l'apparence de votre produit final.

Aussi, il parait indispensable de concevoir une maquette du site web pour permettre d'une part à vos clients de bien se représenter leur site pour ne pas leur proposer un produit final pour lequel il ne serait pas satisfait mais aussi pour les développeurs afin qu'ils puissent se concentrer sur leur tâche principale sans défaire et refaire les parties de sites déjà réalisées.

Qu'est-ce qu'une maquette de site web ?

Une maquette web ou mockup est un document qui permet de présenter le design, les interfaces graphiques de votre site web et aussi de hiérarchiser les éléments graphiques qui doivent composer ce dernier. Elle vise à définir les règles d'interfaces et l'ergonomie à travers le design et les éléments qui le composeront, et aussi la manière dont ils seront disposés pour répondre intelligemment aux attentes du cahier des charges.

On distingue ainsi plusieurs types pour parler de maquettes :

• On parle de maquette fonctionnelle d'un site web lorsqu'il faut exprimer de manière simple l'organisation et la mise en page des blocs d'un site web (zoning). Elle permet notamment de se concentrer sur la manière dont seront disposés les différents éléments qui composeront le site web pour mieux se projeter. On utilise également le terme « wireframe » (filaire) pour parler de ce type de maquette généralement élaboré en noir et blanc. On peut éventuellement réaliser un « prototype » du site où il serait même possible de naviguer sur le site de manière restreinte en émulant de faux contenus.
  Ex : Balsamiq.com, figma.com
• En revanche, on parle de maquette graphique d'un site web pour exprimer cette fois-ci le rendu du site dans une version plus élaborée très proche du produit final attendu. Elle reprend alors les codes couleurs de la marque et respecte la charte graphique imposée dans le cahier des charges et issue des étapes de création précédentes. Ce type de maquette peut être parfois déjà codé simplement (html + css) pour permettre une intégration plus aisée au moment du développement. On utilise également le terme « mockup ».
  Ex : Photoshop, Adobe XD, Webflow.com ou toujours figma

Les risques en négligeant la maquette d'un site

Sans maquette, vous prenez de nombreux risques :

• Pas de représentation finale du produit attendu : Vous prenez le risque tout au long de votre développement de changer le design de votre site. De plus, si vous travaillez pour un client et que ce dernier ne connaît pas le rendu de son site, vous vous exposez au fait de devoir modifier en grande partie les interfaces et le design du site dont vous aurez déjà passé du temps dessus.
  Vous prenez ici le risque de devoir repasser sur le site web et de faire face à des clients qui n'ont pas été forcément consultés pour leur propre projet et qui vous feront certainement passer du temps à modifier ce dernier.
• Pas de règles d'affichage définies : Une maquette vise à penser l'ergonomie du site. Les éléments ne sont pas mis à des endroits par hasard pour combler une page blanche... Tout est normalement conçu pour aiguiller et diriger l'utilisateur à des comportements attendus afin d'atteindre des objectifs fixés répondant au cahier des charges.
  Vous risquez ici de ne pas répondre correctement aux attentes du site. Vous devez répondre à des objectifs précis lors de la réalisation de votre site web sinon attendez-vous à devoir re-modifier l'interface régulièrement.
• Un développement bancal : Que vous travaillez en équipe ou non, vous devrez normalement décomposer le site internet en différentes parties afin que chacun puisse développer sa partie. Si les interfaces et le découpage du site ne sont pas correctement identifiés, vous risquez d'y revenir de nombreuses fois et de vous perdre en cours de route.
  Bien maquetter votre site web va vous permettre de progresser rapidement en scindant l'ergonomie, les fonctionnalités et l'apparence du site.

Il faut naturellement consacrer un nombre de jours voire de semaines à la réalisation de vos maquettes, en n'hésitant pas à comparer, et demander des avis et à les repeaufiner le cas échéant. Vous passerez certes beaucoup de temps mais vous en gagnerez en développement et en post-production indéniablement.

N'hésitez pas à faire plusieurs maquettes pour les pages que vous jugerez les plus importantes généralement la page d'accueil, les pages de présentation de catégories, la page de présentation des produits, la page de contact, etc.

Commencez par réaliser vos maquettes fonctionnelles avant de terminer par vos maquettes graphiques ! Il est indispensable de procéder dans cet ordre.

Quelques outils pour bien maquetter un site web

Il n'y a pas de meilleurs outils pour bien maquetter un site internet. Il faut juste veiller à respecter les points ci-dessus, tous les coups sont permis tant que vous arrivez à communiquer, à faire respecter la charte et à répondre aux objectifs à travers vos maquettes.

Un crayon et une feuille

Les outils les plus communs et les plus fiables sont votre tête, votre crayon et une feuille blanche. Commencez par esquisser vos idées sur papier, brainstormez et réfléchissez à la manière dont vous allez agencer et articuler le site. Faites des croquis organisez vos idées. L'écran ne vous sera pas utile ici !

La moodboard

C'est une planche où vous mettez toutes les idées qui vous passent par la tête lorsque vous évoquez le projet. Ça peut être des images, des textes, des styles, des designs, c'est une planche d'inspiration.

Ex : Tableau blanc ou à épingler, PowerPoint, Keynote

Style tiles

C'est une planche où figureront la ou les typographies utilisées, les couleurs principales pour aider à la réalisation de la charte graphique.

Ex : Styletil.es

La mockup

Elle représente le rendu final du projet avec le respect de la charte graphique et fonctionnelle précédemment validée.

Ex : Photoshop, Gimp.

Pour conclure, adaptez le processus de création selon vos habitudes de travail, le projet web et votre équipe. Sachez vous adapter, ces étapes ne sont pas à suivre au pied de la lettre non plus, il est surtout affaire de créativité, de communication et d'organisation !