Maquette site web design : les 3 étapes clés pour réussir la création de son site
La maquette site web est un élément indispensable lors de la création d’un site internet. Elle vous permet de définir tous les éléments de web design et les visuels avant la phase de programmation. Elle représente un gain de temps et d’argent car elle permet d’éviter les oublis et les erreurs qui peuvent être coûteux lorsqu’ils apparaissent pendant la programmation du site internet.
Dans cet article je vous dévoile les 3 étapes que j’utilise en tant que web designer pour créer une maquette site web réussie : le zoning, le wireframe et enfin la maquette web, le tout illustré d’un exemple concret.
- 1. Le zoning : définition de la structure de base pour une maquette de site web réussie
- 2. Le wireframe : définir tout le contenu sans se laisser distraire par le design
- 3. La maquette web : valider tout le web design de votre site avant sa programmation, un gain de temps et d’argent
- Pourquoi créer une maquette de site web avec un Web designer ?
1
Le zoning : définition de la structure de base pour une maquette de site web réussie
C’est quoi le zoning d’un site web ?
Le zoning de site web est une représentation graphique très simplifiée des différentes zones qui composeront chaque page de votre futur site. Dans un projet de création de site web, le zoning est créé après la rédaction du cahier des charges et du brief créatif. Un bon brief permet de lister toutes les fonctionnalités nécessaires de manière exhaustive et permet de créer un zoning de site web au plus proche de vos attentes.
Après avoir définit les objectifs du site web et son arborescence, le zoning est la 1ère étape de la conception graphique d’une page web. Il est là pour définir la structure de votre page web.
C’est un premier pas pour définir l’expérience utilisateur que vous souhaitez créer. Avec une vue d’ensemble de votre page, on s’assure que chaque bloc a un rôle défini et que l’enchainement de l’un à l’autre soit cohérent. Cette étape est indispensable pour assurer une bonne ergonomie de la navigation client.
A ce stade, il n’y a aucun design car le but est de prévoir :
- les différents blocs,
- la mise en page,
Cette étape est cruciale pour établir la structure générale de la page. Le zoning assure une bonne communication entre vous et le web designer.
Exemple de zoning de site web et explications
Prenons comme exemple la réalisation d’une maquette web pour un article de blog de Botanic Wall, entreprise fictive spécialisée en murs végétaux.
Pour cette page web, on prévoit un header comportant le logo de l’entreprise. Une hero section en introduction qui accueillera le titre de l’article et potentiellement une image immersive et attrayante.
Puis, on intègre 3 grandes parties :
- la 1ère permettra de guider le visiteur dans le choix des plantes pour son mur végétal et comportera des liens vers les catégories de la boutique.
- la 2ème expliquera l’emplacement idéal pour placer un mur végétal chez soi
- la 3ème aura pour but d’inspirer les visiteurs avec des photos d’exemples de murs végétaux.
Le zoning est là pour définir les grandes parties et permet de fixer ensemble la structure principale de la page. Cette étape se fait généralement en co-création entre vous et le web designer.
Tout zoning prend en compte l’adaptation de la page pour tous les écrans (ordinateur, mobile, tablette) : c’est le principe de responsive design.
2
Le wireframe : définir tout le contenu sans se laisser distraire par le design
Définition de wireframe et son rôle avant la création de maquette de site web
Suite au zoning, on passe au wireframe pour détailler les éléments qu’il y aura dans chaque grand bloc. Suivant le même principe que précédemment, le design ne sera pas encore présent. On peut intégrer le texte final afin d’ajuster la taille des espaces. Cette étape est essentielle pour prévoir tout le détail de la mise en page de chaque bloc sans se laisser distraire par le design. C’est à ce stade également que l’on prévoit le responsive design des pages web, c’est à dire leur capacité à s’adapter à tous les types d’appareils : mobile, tablette, ordinateur.
Le métier du web designer va bien au delà du design des sites web. C’est pour cette raison qu’on l’appelle de plus en plus aujourd’hui : UX designer (designer de l’expérience utilisateur). Mon rôle est de créer des parcours fluides et intuitifs pour les utilisateurs, car une expérience réussie passe avant tout par une structure de contenu cohérente et une bonne ergonomie. Un design ergonomique tient compte des bonnes pratiques en terme d’UX design basé sur une connaissance du comportement des internautes.
Exemple de wireframe après le zoning
Dans notre exemple de maquette web pour l’article de Botanic Wall, à l’étape du wireframe on définit le contenu de chaque partie.
La Hero section en haut de page sera composée d’une grande image prenant toute la largeur et du titre de l’article venant par dessus.
La 1ère partie de l’article comportera uniquement du texte et 3 liens vers les catégories de produits du site. Ces éléments de navigation constitue un élément important du parcours utilisateur voulu par l’entreprise. Son objectif est de diriger les internautes qui lisent l’article vers les produits qu’elle vend.
La 2ème partie sera juste un bloc de texte.
La partie 3 prévoira quant à elle davantage d’images car le but de cette section est de mettre en avant les photos d’exemples de murs végétaux.
NB : Le wireframe peut comporter le texte final s’il est défini à ce stade. Le but est de valider avec le web designer que tous les besoins d’éléments et de fonctionnalités sont présents avant de passer au design.
Après cette étape, ajouter des éléments dans les différentes zones entrainera une refonte de la structure et donc irrémédiablement un retard dans le projet. Il est donc essentiel de bien valider l’ensemble avant de passer à la dernière étape.
3
La maquette web : valider tout le web design de votre site avant sa programmation, un gain de temps et d’argent
La maquette web : le point de validation du design essentiel pour un projet de site web réussi
A ce stade, toute la mise en page et le contenu sont définis. On peut enfin passer au design !
A partir du wireframe, on met en couleurs, on choisit les typographies, on intègre les visuels, …etc. La maquette web est la représentation
graphique de votre page web. Elle est essentielle pour tout valider avant de développer la programmation de ta page web.
NB : il est plus facile, et donc beaucoup moins coûteux, de modifier une maquette qu’un site web déjà développé.
La maquette web est l’étape finale de la conception de site avant la programmation. Elle vous permet de bien vérifier que vous n’avez rien oublié et ainsi éviter les aller-retours de corrections. Elle est également une précieuse aide pour les développeurs web car ils ont une vue d’ensemble sur le résultat final ce qui facilite grandement leur travail de programmation.
Exemple de maquette de site web
Pour cet exemple de maquette web, j’ai développée une charte graphique web à partir du logo créé précédemment.
On retrouve ainsi les deux typographies du logo, utilisées pour le titre principal et les sous-titres.
J’ai décliné le logo en motifs graphiques. Le premier dans la hero section derrière le titre. Ceci a pour objectif bien entendu de renforcer la mémorisation du logo. Mais ce motif a également pour un objectif UX : celui de garantir la bonne lisibilité du texte blanc quelque soit l’image qu’on utilisera derrière.
Le logo est également utilisé en filigrane pour venir habiller subtilement les blocs de texte seul comme dans le 2ème paragraphe de cette maquette web.
Guider les utilisateurs vers les catégories de produits est le principal objectif de cette page. J’ai prit le parti de créer des boutons originaux, différents de ceux qu’on peut voir habituellement sur le web. Ces boutons comportent une flèche, indispensable pour faire comprendre que ce sont des liens, et devront être interactifs au survol de la souris.
Le bloc rouge permet de rythmer l’article. Cette couleur sera adapté pour les blocs de texte sans image : pas de risque d’interférences de couleur.
La dernière partie sera un bloc donnant une grande part aux photos afin d’inspirer l’internaute.
Pourquoi créer une maquette de site web avec un Web designer ?
- Placer votre site au cœur de votre stratégie globale. L’UX designer aura une vue d’ensemble de votre tunnel de conversion et de vos objectifs. Une bonne expérience utilisateur (UX) résulte d’un site parfaitement intégré dans le parcours client en répondant aux attentes des utilisateurs.
- Avoir une structure et une ergonomie solides. Ces éléments sont les fondements de la création de site internet et de pages web et c’est pour cette raison qu’ils sont définis en premier via le zoning et la wireframe.
- Un gain de temps et d’argent en évitant les erreurs et oublis. Il est plus facile et donc moins coûteux de modifier une maquette que d’intervenir sur un site déjà programmé. En créant un wireframe et une maquette site web vous avez la possibilité de valider étape par étape. Vous limitez ainsi les aller-retours de corrections.
- Un support visuel qui facilite la communication entre les collaborateurs : vous êtes plusieurs sur votre projet de création de site web ? Rien de mieux qu’un visuel pour se mettre d’accord et éviter les mauvaises surprises. Même si vous avez les mêmes attentes en tête, il peut être nécessaire de valider votre site au moyen d’une maquette design web avant de le développer.
- Tester plusieurs designs : un autre avantage de la maquette web et de pouvoir tester plusieurs designs si vous n’arrivez pas à vous décider. Encore une fois changer une couleur ou tester plusieurs éléments graphiques différents sur une maquette sera moins coûteux que d’intervenir sur un site déjà en ligne.
Un projet ? Découvrez comment je peux vous aider :
Création de Site Internet Eco responsable
Vous n’avez pas le temps ou les compétences pour créer un site web de qualité ? Je prends en charge la création de votre site internet éco-responsable, vous vous consacrez à votre métier et vous ne perdez de temps !
Devis sur mesure
Un suivi en co-création avec validation à chaque étape
Conseil en conception éco-responsable pour limiter son impact et aller à l’essentiel
L’accompagnement complet pour entrepreneur
Pas besoin d’être sur tous les fronts pour exister sur le web !
Je vous propose un accompagnement sur-mesure, complet et simple :
Construction d’une stratégie web solide et facile à prendre en main grâce au Parcours Client
Création d’une identité visuelle professionnelle qui renforce votre crédibilité
Conception éco-responsable de votre site web alliant esthétique et peformances
Une question ? Contactez-moi
Laure OREJA – Graphiste Webdesigner Webmarketing Freelance Toulouse
Je construis avec vous, votre présence en ligne de A à Z : une stratégie claire de parcours client, une identité visuelle alignée et un site web eco responsable et efficace pour votre cible client.
Je tire mes compétences de 14 ans d’expérience en entreprise qui m’ont permit de comprendre que la connaissance du client est le moteur d’un design qui fonctionne et qui parle à sa cible.
Prendre rendez-vous en visio :
Réservez un rdv découverte de 30 minutes sur mon agenda. C’est gratuit et sans engagement.
Envoyer un message :
Par téléphone :
07.59.64.92.99
Du lundi au vendredi : 9h-17h.
En cas d’absence n’hésitez pas à laisser un message.
