Créer la maquette de votre site web | Guide Complet
Dernière date de mise à jour le : 23 décembre 2022 à 08:30
4,29/5Découvrez votre budget ici 👉🏼
Pour mettre en ligne votre site Internet, la première étape à suivre est de créer une maquette site web. 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, créer la maquette d’un site web est similaire à suivre un plan de route : elle vous aidera à y voir plus clair et à savoir ce que vous devez faire pour atteindre votre objectif.
Pourquoi créer une maquette site web ?
Faire une maquette de site a deux intérêts :
- Le maquettage site web 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 web 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 de site est de vous permettre de connaître le plan de votre site avant de commencer sa construction.
C’est également ce que nous expliquons dans ce podcast, avec les erreurs à éviter quand on lance un site web :
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 faire une maquette de site jolie à voir et qui prévoit une navigation facile pour les internautes qui viendront sur votre site.
Maquette, Wireframe, Mockup : Quelles différences ?
La maquette fonctionnelle
Une maquette fonctionnelle 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 la maquette fonctionnelle que vous placez vos différents éléments :
- menus,
- boutons,
- call to action,
- 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.
La maquette fonctionnelle se fait 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 la maquette fonctionnelle site web 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.
Voici un exemple de maquette fonctionnelle :
La maquette graphique
Une maquette graphique 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.
La maquette graphique est donc une représentation précise de votre site, qui doit être au plus proche du résultat final attendu. C’est sur base de cette maquette graphique 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 :
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 créer une maquette site web efficacement.
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 maquette graphique.
Quelles sont les étapes à suivre pour créer une Maquette Site Web ?
Pour créer une maquette site web, il y a trois étapes à suivre.
#1 Commencer votre maquettage site web avec une arborescence
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 à inclure dans la création de votre maquette web.
Pour prendre un exemple de maquette, si votre site web est un blog, vous allez avoir des pages de type « article de blog » qu’il faudra modéliser avec une maquette fonctionnelle site web. 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.
Une fois cette étape complétée, vous pouvez passer à l’élaboration de vos pages principales.
#2 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 web 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 web des pages principales.
Ainsi, ne commencez les maquettes web 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 de site, 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 web, 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 web sont cohérentes les unes avec les autres. Ce qui sera important pour l’expérience utilisateur que votre site pourra offrir.
#3 Créer 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 à ajouter sur une maquette graphique.
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 vaut mieux 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. 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. Vous pouvez aussi 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 de votre site web, et assurez-vous que l’expérience utilisateur sera optimale.
Cette étape est particulièrement importante. 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 le résultat vos plaît 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.
Quels outils pour faire une Maquette Site Web ?
Pour clôturer cet article, voyons les outils auxquels vous pouvez recourir pour créer vos différentes maquettes de site web.
Les solutions traditionnelles
Pour créer 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.
C’est contraignant car il faut aujourd’hui penser à la mise en page de son site web pour plusieurs formats : 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. C’est rapide, accessible, souple, et ultra simple.
- Microsoft Powerpoint : oui, ce logiciel peut servir à réaliser des maquettes fonctionnelles de site web. 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 qu’on ne retrouve pas sur Powerpoint.
- 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 permettent de créer 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 pour créer une maquette site internet.
- 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 maquette site internet. 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.
Les logiciels de graphisme
Pour créer 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, on peut aussi utiliser Illustrator 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. Comme pour Photoshop, Illustrator présente des avantages. Plus particulièrement pour la phase de découpage des maquettes site web pour leur intégration en HTML et en CSS.
Maquette Site Web : Conclusion
Vous avez maintenant toutes les informations dont vous pouviez avoir besoin pour élaborer une maquette de 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 de site web avec votre public cible. 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.
Vous pouvez également lire notre guide complet du développement web pour aller plus loin.
