Pour mettre en ligne votre site web, la première étape à suivre est de construire une maquette. La maquette de votre site web va vous permettre d’élaborer sa structure et de savoir à quoi il va ressembler avant que vous ne commenciez à le mettre en place. Pour faire une métaphore, la maquette d’un site web est similaire à un plan de route : elle vous aidera à y voir plus clair et à savoir ce que vous devez faire pour atteindre votre objectif.

Table des matières

Quelle est l’utilité de faire une Maquette ?

Faire une maquette a deux intérêts :

  • Elle vous permet de construire la structure et l’aspect graphique de votre site sans que vous n’ayez à toucher une seule ligne de code.
  • Si vous avez de nouvelles idées en cours de route, modifier ou déplacer un élément sur une maquette vous coûtera 0€. C’est loin d’être le cas quand vous souhaitez faire une telle modification sur un site qui est déjà en ligne. Déplacer une fenêtre sur le plan d’une maison se fait en un coup de crayon, alors que déplacer une fenêtre sur une maison déjà construite demande plusieurs milliers d’euros.

Ainsi toute l’utilité d’une maquette est de vous permettre de connaître le plan de votre site avant de commencer sa construction. Plusieurs éléments doivent être pris en compte dans votre maquette, il y a bien sûr l’aspect graphique qui renvoie au style de votre site, mais il y a aussi l’aspect fonctionnel, qui renvoie à la navigation. Tout le challenge est de construire une maquette jolie à voir et qui prévoit une navigation facile pour les internautes qui viendront sur votre site.

Maquette, Wireframe, Mockup : Quelles différences ?

Il y a beaucoup de termes différents pour parler de maquette de site web. Wireframe est assez connu, mais on peut aussi parler d’ergolayout et de mockup. En réalité tous ces termes renvoient à la même chose : la maquette d’un site web, qui est une représentation graphique simplifiée de la façon dont vous voulez agencer votre site et ses différentes parties. L’objectif est de pouvoir donner à votre web designer un document qui montre ce à quoi vous voulez que votre site web ressemble.

La seule chose à retenir, c’est qu’il y a deux types de maquettes que vous pouvez construire 👇

La maquette fonctionnelle

Ce type de maquette sert à construire la structure de votre site et à prévoir l’expérience utilisateur que vous allez créer. Très concrètement, c’est sur cette maquette que vous placez vos différents éléments, comme les menus, les boutons, les call to action, les espaces pour s’identifier et taper son mot de passe, etc. Il s’agit donc de définir en noir en blanc la mise en page de votre site, qui comporte l’organisation de ses différents éléments et de ses textes principaux.

Cette maquette va se faire en deux parties :

  • Le « zoning », qui est un schéma listant les différentes zones de votre site pour optimiser la structure de l’information.
  • Le « wireframe », qui intègre du contenu dans les différentes zones définies lors du zoning.

L’objectif de cette maquette est de poser les bases des conversions que votre site web parviendra à générer. Il faut donc garder à l’esprit l’expérience utilisateur lorsque vous construisez cette maquette. Comment pouvez-vous faciliter la navigation pour optimiser votre nombre de conversions ?

Voici un exemple de maquette fonctionnelle :

maquette_fonctionnelle

La maquette graphique

Cette maquette vient approfondir la maquette fonctionnelle, en apposant des éléments graphiques sur cette dernière. La maquette graphique intègre tous les codes de l’identité visuelle de votre marque, que ce soit en termes de couleurs, de logo, ou de typographie. Il s’agit donc d’une représentation précise de votre site, qui doit être au plus proche du résultat final qui est attendu. C’est sur base de cette représentation que vos développeurs, ou que l’agence avec laquelle vous allez collaborer, pourra coder votre site en HTML et en CSS.

Voici un exemple de maquette graphique :

maquette_graphique

 

Pour arriver à une telle maquette graphique, il est nécessaire de prendre le temps de bien faire sa maquette fonctionnelle. L’idéal est de le faire par itération, en construisant une première maquette fonctionnelle, puis en demandant du feedback, sur base duquel vous pourrez améliorer votre maquette.

Que vous décidiez de coder votre site web vous même, ou que vous décidiez de collaborer avec une agence, il ne faut pas hésiter à se remettre en question et à bien retravailler sa maquette fonctionnelle car elle constitue la base de votre site. Une fois que celle-ci est bien élaborée, la conception graphique ne devrait pas poser de problème.

Quelles sont les étapes à suivre pour faire une Maquette ?

Pour construire votre maquette, il y a trois étapes à suivre 👇

Construire l’arborescence de votre site

La première chose à faire est d’avoir une vue d’ensemble de votre site web en élaborant son arborescence. Cela vous permettra de comprendre comment votre site web sera structuré et donc de savoir quels seront les différents types de pages que vous allez créer avec votre maquette. Par exemple, si votre site web est un blog, vous allez avoir des pages web de type « article de blog » qu’il faudra modéliser avec une maquette fonctionnelle. Si vous voulez créer un e-commerce, ce sera plutôt des pages « fiche produit » qu’il faudra prendre en compte.

Au delà de ça, l’arborescence vous sera utile pour concevoir des parcours clients efficaces en plus de préparer le maillage interne de vos pages, et ce dans un objectif d’améliorer votre référencement. Nous avons déjà publié un article dédié à l’arborescence pour vous aider dans la bonne réalisation de cette étape.

arborescence site de sortlist

Une fois cette étape complétée, vous pouvez passer à l’élaboration de vos pages principales.

Construire vos pages principales

Commencez toujours par les maquettes des pages les plus importantes de votre site web, car ce sont d’elles que découle tout le reste.

Elles vous aideront à élaborer les maquettes de vos pages secondaires, en plus d’influencer celles-ci. En effet, il est assez commun que l’arborescence initiale se retrouve modifiée suite à la construction des maquettes des pages principales. Ainsi, ne commencez les maquettes de vos pages secondaires qu’à partir du moment où celles de vos pages principales ont été retravaillées et validées. Cela vous permettra de gagner du temps, non seulement en évitant de devoir faire des modifications sur toute une série de maquettes, mais en plus vous pourrez reporter certains éléments de vos pages principales directement sur vos pages secondaires.

Cela vous fera gagner du temps lors de l’élaboration de vos maquettes, mais cela permettra aussi au développeur chargé de créer votre site d’économiser du temps, ce qui vous fera gagner de l’argent. Concrètement, tâchez d’identifier tous les blocs, tous les tableaux, les menus, les objets graphiques qui peuvent être utilisés plusieurs fois. Au delà de vous faire gagner du temps et de l’argent, cela vous permettra aussi de mesurer à quel point vos maquettes sont cohérentes les unes avec les autres, ce qui sera important pour l’expérience utilisateur que votre site pourra offrir à ses visiteurs.

Construire vos maquettes graphiques

C’est ici que vous traduisez vos maquettes fonctionnelles en maquettes graphiques en utilisant tous les codes de l’identité visuelle de votre marque. Bien sûr, si vous travaillez avec une agence, prêtez attention à trouver un juste équilibre entre ce que vous avez en tête et la liberté de création que vous accorderez à l’agence. Il est très probable que celle-ci vous surprenne et vous fasse des propositions graphiques auxquelles vous n’auriez pas forcément penser.

Voici les différents éléments graphiques à prendre en compte 👇

La définition de vos couleurs

En tant qu’entreprise, vous avez probablement déjà une charte graphique ainsi qu’une palette de couleurs bien définies. Maintenant, il va falloir choisir celles qui figureront sur votre site web et la façon dont vous allez les utiliser. L’idée est d’attribuer à chaque couleur une fonction donnée afin d’avoir un cadre logique et une cohérence pour le visiteur. Il est recommandé de ne pas avoir plus de 5 tons différents afin de ne pas faire fuir vos visiteurs avec trop ou pas assez de couleurs. Prenez en compte les couleurs de vos :

  • Fonds ;
  • Textes ;
  • Liens ;
  • Call to Action.

De plus, il est recommandé de :

  • Sélectionner soit une dominante foncée soit une dominante claire, en fonction de l’univers de votre marque ;
  • Reprendre les couleurs de votre logo pour avoir un tout cohérent ;
  • Mettre du contraste entre les couleurs de fond et celle du texte pour améliorer la lisibilité.

Le choix de votre typographie : Taille et Police

Il peut être compliqué de choisir la bonne police de caractères pour un site web, encore plus si vous décidez d’en combiner plusieurs. Cependant, il ne faut pas prendre cette étape à la légère car vos polices transmettent aussi l’identité de votre marque, exactement comme vos couleurs et le tone of voice que vous adoptez. Et au delà ça, de par le fait que vos visiteurs vont lire le contenu que vous aurez publié, la typographie est l’un des éléments auxquels ils seront le plus confrontés.

Pour vous faciliter la tâche, n’utilisez pas plus de trois polices de caractères. À ce niveau-là, Google Fonts pourra vous aider sur plusieurs niveaux :

  • Les polices qui y sont disponibles sont idéales pour construire un site, et elles sont tellement diversifiées que vous trouverez à coup sûr celle qu’il vous faut ;
  • Les polices peuvent être intégrées très facilement à votre site : une ligne de code est suffisante pour faire cette intégration ;
  • Vous pouvez télécharger les polices très facilement, ce qui vous aidera à construire les éléments graphiques d’autres outils dont vous pourriez avoir besoin ;
  • Ces polices sont Open Source, donc totalement gratuites et libres de droits.

Il y a plusieurs critères à prendre en compte pour choisir les typographies que vous allez utiliser :

  • La lisibilité : la typo doit rendre vos textes facilement lisibles, sans fatiguer le visiteur ;
  • La diversité : la typo doit être attractive dans les différents styles qu’elle propose (light, regular, bold) pour vous permettre de bien structurer votre contenu ;
  • L’efficacité : la typo doit contenir l’ensemble des caractères dont vous pourriez avoir besoin à l’avenir ;
  • La compatibilité : la typo doit pouvoir être reconnue par tous les navigateurs et tous les devices qu’il est possible d’utiliser pour consulter votre site web.

Choisir des images d’illustration

Il va de soi que votre site web va devoir présenter plusieurs images, que ce soit pour communiquer des informations importantes ou pour améliorer son aspect esthétique. Utiliser des images présente en effet plusieurs avantages, notamment celui d’illustrer vos propos et d’attirer l’attention de vos visiteurs.

Vous pouvez recourir à plusieurs types d’images :

  • Photos
  • Schémas
  • Illustrations (isométriques / flat / 3D par exemple)
  • Gif

Plusieurs petites choses à garder en tête cela dit :

  • Utilisez bien sûr des images de haute qualité ;
  • Optimisez leur taille pour les rendre plus légères ;
  • Choisissez des images qui fonctionnent aussi bien sur laptop que sur smartphone ;
  • Utilisez des photos de vos produits ;
  • Veillez à la cohérence image-texte ;
  • Utilisez des images libres de droits ou produisez les vôtres.

Concernant le dernier point, vous pouvez soit faire appel à un photographe professionnel (si vous avez un budget assez conséquent), soit recourir à plusieurs bibliothèques de photos qui proposent des images libres de droits. Parmi ces bibliothèques, il y a par exemple :

  • Shutterstock ;
  • Pixabay ;
  • Unsplash ;
  • Giphy.

Attention à la cohérence graphique

Tous ces différents éléments peuvent donner un mélange qui est loin d’être homogène. Entre des couleurs, des typographies, et des images, il est tout à fait possible que le résultat final ne soit pas du tout satisfaisant. Ainsi, il importe de prêter attention à la cohérence qui existe entre ces différents éléments. Concrètement, le tout donne-t-il un résultat esthétique et attractif ?

L’objectif de cette étape est de valider la maquette graphique de votre site, et de procéder à certains changements si vous estimez que le résultat final n’est pas satisfaisant.

Vérifiez donc la cohérence de chaque élément avec l’ensemble de votre maquette graphique. Vérifier une nouvelle fois la maquette fonctionnelle, et assurez-vous que l’expérience utilisateur sera optimale.

Cette étape est particulièrement importante, car une fois votre maquette graphique validée, c’est la création de votre site web qui commence. Et une fois celle-ci entamée, effectuer des changements sera beaucoup plus compliqué. Vérifiez-donc bien que vous êtes satisfait du résultat avant de lancer la production de votre site.

N’oubliez pas que nous pouvons vous aider dans la conception de votre maquette, en vous proposant gratuitement une sélection des meilleures agences de graphisme.

capture-decran-2020-10-23-a-12-24-06
ITDM Group
Colmar , France
4,5 - 5 recommandations
Mobile & App DesignStratégie DigitaleWeb & Software DevelopmentDéveloppement mobile & AppDéveloppement webLogiciels Création de Site Web
Découvrir l’agencearrow_forward
zee-group-illustration
Zee Group
Paris, France
4.5 - 15 recommandations
Web & Software DevelopmentE-commerce SoftwareCreative & Design
Découvrir l’agencearrow_forward
capital-panache-illustration
Capital Panache
Brussels, Belgique
5 - 7 recommandations
Web & Software DevelopmentE-commerce SoftwareCreative & Design
Découvrir l’agencearrow_forward

Quels outils pour faire une maquette ?

Pour clôturer cet article, voyons les outils auxquels vous pouvez recourir pour construire vos différentes maquettes. Plusieurs solutions existent 👇

Les solutions traditionnelles

Pour construire vos maquettes fonctionnelles, le papier et Microsoft Powerpoint sont les deux solutions les plus simples. Elles offrent l’avantage d’être gratuites, mais ont l’inconvénient de ne pas faciliter la gestion des proportions, ce qui est contraignant car il faut aujourd’hui penser à la mise en page de son site web pour plusieurs formats de devices : laptop, tablettes, smartphones.

  • Le papier : L’utilisation du papier reste l’un des moyens les plus simples de mettre de l’ordre dans vos idées et présente de nombreux avantages, c’est rapide, accessible, souple, et ultra simple.
  • Microsoft Powerpoint : oui, ce logiciel peut servir à réaliser des maquettes fonctionnelles. D’autant plus que des bibliothèques de composants additionnels spécialement conçus pour faire des maquettes existent, comme PowerMockup par exemple.
  • Google Slides : le principe est le même que pour Microsoft Powerpoint, mais présente l’avantage de pouvoir être utilisé par plusieurs personnes en même temps. Si vous élaborez vos maquettes à plusieurs, Google Slides peut vous offrir cet aspect collaboratif dont Powerpoint est dénué.
  • Canva : Cette solution permet de réaliser aussi bien des maquettes fonctionnelles de qualité que des maquettes graphiques grâce aux différents modèles qui sont proposés aux utilisateurs.

Les logiciels spécialisés

Ces logiciels sont pensés spécifiquement pour construire des maquettes fonctionnelles de sites web. De plus, contrairement à Powerpoint, ils permettent de gérer les proportions des différents composants que vous allez utiliser. De nombreux logiciels de ce genre existent, en voici quelques-uns :

  • Cacoo : tourné vers le collaboratif, Cacoo est disponible dans une version gratuite et est très simple d’utilisation.
  • Balsamiq : c’est une référence dans le domaine de la création de site internet. Simple et puissant, Balsamiq permet à n’importe qui de faire des maquettes fonctionnelles, même si celles-ci sont complexes. En revanche, contrairement à Cacoo, Balsamiq est payant : soit en version Dektop (79$) soit en version Web (12$/mois).
  • Axure RP : Sans doute le logiciel le plus complet et le plus puissant en matière de création de maquettes pour sites web. Le prix de sa version standard est de 249$.

Et la liste est encore longue, avec par exemple Sketch, Adobe XD, MockFlow, Moqups, WireframeCC, Wirefy, ou encore Pencil.

Je vous invite à consulter ces outils et à choisir celui qui conviendra le mieux à votre situation.

Les logiciels de graphisme

Pour construire vos maquettes graphiques sur base de vos maquettes fonctionnelles, plusieurs outils sont à votre disposition. Cependant, gardez à l’esprit qu’une réalisation graphique est plus complexe qu’une simple réalisation fonctionnelle. Par conséquent, les outils sont moins faciles à prendre en main et peuvent demander un certain temps d’apprentissage.

C’est le cas par exemple de la suite Adobe, plus particulièrement d’Adobe Photoshop et d’Adobe Illustrator. Ce sont là les deux outils de référence en matière de création de maquettes graphiques.

Photoshop

Puissant, souple et adapté pour la phase de découpage nécessaire à l’intégration en HTML / CSS, Photoshop est une référence. Certaines alternatives existent, comme Gimp par exemple, mais si vous voulez atteindre un niveau professionnel, c’est vers Photoshop qu’il faudra vous tourner.

Illustrator

À côté de Photoshop, Illustrator peut également être utilisé pour réussir votre maquette graphique. Cela dit, de la même manière que pour Photoshop, son utilisation nécessite un certain nombre de connaissances et plusieurs heures de pratique avant de vraiment pouvoir le maîtriser. Comme pour Photoshop, Illustrator présente des avantages au niveau de la phase de découpage des maquettes pour leur intégration en HTML et en CSS.

Conclusion

Vous avez maintenant toutes les informations dont vous pouviez avoir besoin pour élaborer la maquette de votre site web. N’oubliez pas qu’il s’agit d’une étape cruciale pour construire un site efficace, beau et facile à utiliser. De plus, pensez à confronter au maximum votre maquette avec le public cible que vous voulez viser, car cela vous permettra d’éviter certaines erreurs mais aussi de créer un site parfaitement adapté à votre audience. Si vous souhaitez en savoir plus à ce niveau-là,  je vous invite à consulter notre article dédié à l’UX Design, vous y trouverez beaucoup d’informations complémentaires qui pourront vous être utiles dans la construction de votre maquette. Ensuite, si vous voulez aller plus loin, nous pouvons vous proposer de collaborer avec des agences de création de site Internet, partout en France mais aussi partout en Belgique, avec des agences namuroises ou des agences liégeoises par exemple.