Lorsque l’on envisage de créer son site internet, on réfléchit souvent à des choses comme : Est-ce que je dois créer mon site sur Wix ou sur WordPress ? Quelles couleurs vais-je utiliser ? Qu’est-ce que je vais écrire ? Quels images vais-je mettre ?
Par contre, on pense rarement à créer une maquette de son site web.
Et pourtant, c’est une étape indispensable pour créer un site internet bien structuré et efficace. Je vais t’expliquer dans cet article, comment créer une maquette de site web.
C’est quoi une maquette de site web ?
Une maquette de site, c’est tout simplement une représentation visuelle du site. Il permet d’avoir un aperçu globale AVANT sa création.
Pour te représenter exactement à quoi ressemble une maquette de site web, voici un exemple :
Cette image ne montrent qu’une seule page. Pour créer la maquette du site, il faut créer cette image donc une maquette pour chaque page du site.
Pourquoi créer une maquette de site web ?
Tu vas surement te dire que créer une maquette pour ton site, c’est clairement une perte de temps pour toi. Tu te dis : « mais pourquoi créer deux fois la même chose ? »
Cependant, crois-moi, c’est une étape importante qui comporte de nombreux avantages :
Avoir une aperçu global de son site
On peut avoir l’impression que dans notre tête, tout est très clair. Mais poser ses idées « sur papier », en réalité, ce n’est pas la même chose. Tu vas surement te rendre compte que le design que tu avais en tête n’est pas cohérent, ni très harmonieux.
Gagner du temps
Tu penses avoir l’impression de gagner du temps en sautant cette étape. Mais crois-moi, c’est une fausse bonne idée. C’est bien plus long et compliquer de créer un site quand on est en train de l’imaginer en même temps.
Comme je te le disais avant, tu dois poser tes idées « sur papier » d’apporter les modifications avant la création, c’est beaucoup plus pratique et rapide sur une maquette !
Tester la navigation , la structure et l’expérience utilisateur
Créer la maquette de son site web, c’est clairement la meilleure solution afin de pouvoir tester la facilité de navigation ! C’est un point non négligeable dans la création de ton site, car si tu as un site, mais qu’on ne sait pas comment naviguer dessus et trouver les informations que l’on recherche, c’est presque pire que si tu n’avais pas de site.
Un site internet mal fait, c’est terrible pour l’image de marque de ton entreprise. Et puis tu y mets probablement beaucoup d’énergie et d’investissements dans ce projet, alors autant s’assurer que ton site soit efficace !
Comment faire une maquette de site web ?
Alors maintenant que tu as prise conscience (enfin je l’espère !) de la nécessité de créer une maquette pour ton site internet.
Maintenant, tu te poses surement de la question : « Mais comment on fait ? »
Alors, avant d’arriver à la maquette, il y a quelques étapes. Si tu souhaites approfondir le sujet, je te conseille de télécharger ce ebook.
A lire aussi :
Quels sont les pages indispensables à avoir sur ton site internet ?
Mais quand on en arrive à la maquette, on peut aussi découper cette tâche en plusieurs :
1. Le zoning
Faire le zoning de son site internet c’est, comme son nom l’indique, imaginer les zones qu’il y aura dans chaque page.
Par exemple, sur ma page d’accueil, je me dis qu’il y aura, de bas en haut :
- Une zone avec le menu
- Une zone d’en-tête, qui présente rapidement aux visiteurs où elles sont arrivées et qui est censée attirer leur attention et leur curiosité pour qu’elles continuent leur visite
- Une zone où j’annonce la promesse
- Une zone où j’explique mon choix de cibler que les femmes
- Une zone où je présente mes services
- Une zone où je me présente
- Une zone télécharger le freebie que je propose
- Une zone avec un témoignage
- Une zone pour passer à l’action
Et enfin le pied de page
Donc visuellement, ça se présente comme un rectangle qui représente la page, et dans lequel on vient tracer d’autres rectangles pour marquer les différentes zones.
Voici à quoi cela peut ressembler un zoning avec la maquette si dessus:
On vient ensuite faire cette opération pour toutes les pages. Le zoning permet d’avoir un premier aperçu global du site.
2. Le wireframe
Pour faire simple, c’est un zoning plus détaillé car on reprend ce qu’on a fait précédemment, et on vient préciser les choses.
Par exemple, je peux dire que dans mon en-tête, il y aura une image, un titre, un paragraphe et un bouton (un CAT, c’est un appel à l’action). Je peux aussi déjà imaginer où ces éléments seront placés.
Ensuite, pour la ma zone « services », je décide si je mets une photo pour chaque service ou une petite icône et si je les présente de haut en bas ou en colonne.
C’est tout simple l’étape juste avant la maquette, donc c’est un peu comme un squelette de maquette de site web. En faite, c’est une maquette, mais sans les couleurs, sans les images, sans les textes, ni les éléments graphiques.
Voici un exemple (en reprenant le zoning précédent) :
3. La maquette de site web
Et pour finir, on arrive à la maquette du site internet. On va vraiment venir ajouter tout les détails nécessaire pour que la représentation visuelle soit fidèle au résultat qu’on souhaite avoir.
Donc on ajoute les images, les icônes, les typographies, les couleurs, le texte, etc… On peut aussi, si l’outil qu’on utilise le permet, ajouter les liens entre les pages, et avoir vraiment un prototype très fidèle et totalement fonctionnel de son site. On peut ainsi tester la navigation comme si on y était !
Toutes les étapes ne sont bien sûr pas obligatoires, mais si tu te sens un peu perdues face à la tâche, ça peut t’aider de le découper ainsi.
Pour ma part, je pars souvent d’un mix de zoning/wireframe pour faire ensuite la maquette de mes sites internet et je conseille à mes clientes de mixer la partie zoning/wireframe avec la technique du hamburger proposée dans mon ebook.
A lire aussi :
Quel outil utiliser pour créer les maquettes de ton site internet ?
Maintenant que tu sais comment t’y prendre pour créer les maquettes de ton site web, tu dois surement te demander avec quel outils tu peux faire ça ?
Des outils, il en existe des dizaines, des gratuits ou des payants, des compliqués ou des faciles, …
Pour te simplifier les choses, j’ai choisir de te proposer les 3 alternatives les plus utilisées par le pro et les non pro.
Canva
Le premier outil, que beaucoup d’entrepreneures utilisent dont moi-même et qui peut te servir pour tout mais aussi créer des maquettes de site internet, c’est Canva !
Si tu ne connais pas encore Canva, c’est le must du must, un site qui propose de la création graphique très accessible. C’est vraiment facile à prendre en main et il y a une version complètement gratuite qui peut largement suffire te suffire. Si tu crée ton propre site internet mais que tu n’es pas très à l’aise avec la création graphique, je te conseille cette option.
Figma
Je te propose le 2e outil, qui à l’avantage de proposer une formule gratuite : Figma.
Je ne l’ai jamais utilisé pour créer une maquette de site web, mais je sais que certaines de mes collègues adorent et ne jurent que par ça. Il y a des fonctionnalités très poussées qui permet de simuler des actions, des mouvement et peut facilement se prendre en main.
Adobe XD
Le dernier outil que je te propose : Adobe XD. C’est le plus professionnel des trois solutions.
C’est un outil de la suite Adobe, donc pour celles qui sont habituées à Photoshop et compagnie, ça peut être une bonne solution. L’interface ne te sera du coup pas trop étrangère, c’est l’outil le plus facile à prendre en main parmis toute la suite Adobe.
Par contre, l’inconvénient, c’est qu’il est payant. Donc si il s’agit d’un projet perso, il n’est pas forcément, si tu n’as pas déjà la suite Adobe.
Comment intégrer les maquettes sur ton futur site ?
Maintenant que tu es capables de créer les maquettes de ton site web et surtout de comprendre tous les intérêts qu’il y a à passer par cette étape !
Il est temps d’intégrer les maquettes de ton site web. Alors voici les trois solutions possible.
- Par un développer web qui va coder les maquettes de ton site web (la plus long et couteuse)
- Par une webdesigner qui va intégrer les maquettes sur WordPress grâce à un Builder comme Divi ou Elementor (la plus rapide et plus abordable)
- Par toi même (plus ou moins long selon tes compétences et le temps que tu disposes mais la moins chère)
Si tu souhaites faire intégrer les maquettes ton site web par une webdesigner, je t’invite à réserver un appel découverte afin de réaliser un devis sur-mesure.
À très vite,
Typhanie
Webdesigner & graphiste
Experte en business féminin