Sommaire
1. La maquette de site web: qu’est-ce que c’est ?
Pour définir l’agencement du contenu de votre site web ainsi que son apparence visuelle, un webdesigner fera le point sur vos besoins et vos attentes avant de vous proposer des maquettes dans l’esprit de votre image de marque et de votre positionnement.
Si vous avez déjà votre logo et une identité visuelle, les maquettes de votre site web doivent être cohérentes avec votre charte graphique, d’où l’importance de communiquer toutes les informations pertinentes concernant votre activité en amont de la phase de maquettage.
Cependant si vous êtes en phase de création d’entreprise ou si vous n’êtes plus à l’aise avec votre identité visuelle, sachez qu’un webdesigner indépendant pourra vous proposer une nouvelle identité visuelle plus en accord avec votre activité et vos valeurs lors de la conception des maquettes de votre site web.
Le maquettage est essentiel que vous ayez le projet de créer un site vitrine, un site e-commerce, une landing page ou une application. Il regroupe plusieurs phases comme le zoning, la conception de wireframes et la réalisation de maquettes graphiques.
À la croisée entre ergonomie web et graphisme, la réalisation de maquettes web nécessite des compétences en UX, UI, Webdesign et intégration web pour vous garantir un site web offrant un parcours utilisateur cohérent, le respect des normes et contraintes du web et un design responsive, adapté à tout support: mobile, tablette et ordinateur.
Souvent négligée par manque de connaissance ou sous prétexte de « gagner du temps », cette étape est pourtant indispensable à la création comme à la refonte d’un site web professionnel.
Les maquettes j’en ai rien à faire ! Je veux mon site internet !!! 😳
Pour avoir connue une jeune entreprise ayant négligée l’importance de cette étape et ayant dû débourser plusieurs milliers d’euros pour la 2ème refonte de son site au cours de la même année – ce qui a évidemment engendré plus 6 mois de retard sur le projet alors qu’elle avait toutes les ressources en interne pour réussir – je ne peux que vous conseiller de prendre quelques heures pour vous poser les bonnes questions et de répondre aux sollicitations de votre Webdesigner lors de l’audit de vos besoins et de la préparation de vos maquettes.
Il est compréhensible que vous soyez impatients de voir le résultat final, seulement sachez que c’est lors de la phase de conception de votre site web que tout se joue. Alors laissez vous guider par un professionnel pour avoir un site internet à la hauteur de vos attentes. Vous pourriez même être agréablement supris du résultat ☺️
2. Pourquoi faire une maquette de site web ?
La conception de maquettes présente de nombreux avantages et vous servira de repère pour un site web réussi avec une expérience utilisateur réfléchie. La création de maquettes pour votre site web vous permettra notamment de:
- avoir un site web sur mesure
- réfléchir à la disposition des élements du site (contenu textuel et visuel)
- optimiser la conversion
- prendre des décisions dès la conception du projet
- identifier les axes d’améliorations rapidement pour démarrer votre projet du bon pied
- assurer la cohérence de votre identité visuelle sur tous vos supports de communication
- identifier le contenu manquant (texte, photos, icônes)
- anticiper l’intégration web et accélérer la phase de développement
- réduire le coût de développement
- vous projeter en voyant se construire votre site web pas à pas
Il est évidemment moins coûteux de passer quelques jours de plus sur le perfectionnement des maquettes que de devoir payer un développeur plusieurs jours voire des semaines, pour tenter de réparer ce que l’on n’avait pas anticipé, si l’on s’aperçoit à la fin du projet que le parcours utilisateur n’a pas été bien pensé ou qu’une fonctionnalité essentielle n’a pas été mise en place et implique des modifications à plusieurs niveaux sur un site déjà intégré ou mis en ligne.
Vos maquettes serviront de guide commun pour échanger avec votre prestataire et faciliter le développement de votre site web. Si quelques ajustements seront à réaliser lors du développement, des maquettes fonctionnelles puis des maquettes graphiques réalistes vous permettront néanmoins d’anticiper certaines questions comme la place occupée par le menu sur mobile ou sur desktop, le rendu d’une police de caractère et sa taille optimale selon le support utilisé ou encore la dimension de vos icônes et autres éléments visuels.
3. Qu’est-ce qu’une maquette fonctionnelle ?
Lorsqu’on parle de maquette fonctionnelle on fait référence à l’ergonomie d’un site web. C’est-à-dire l’UX ou l’expérience utilisateur.
Pour vous donner une image et mieux comprendre les enjeux de l’ergonomie, l’UX peut être vu comme la charpente et les fondations d’un édifice, tandis que l’interface graphique ou l’UI correspondrait à la peinture de la façade et à l’ajout du nom de la boutique pour attirer les clients à l’intérieur. Avant de commencer à discuter de votre palette de couleurs et de chaque élément en détail, votre boutique a besoin de fondations solides pour rester debout et accueillir votre activité.
Connaître les codes de la conception de site web et les habitudes de navigation des internautes permet ainsi de définir où et comment positionner les éléments, en fonction de l’objectif que vous souhaitez réaliser à travers la mise en place de votre site web. C’est ce qu’on appelle la conversion dans le domaine du marketing digital.
Quel objectif vous êtes vous fixé pour votre site web ?
- Prise de rendez-vous en ligne ?
- Augmenter le nombre d’abonnés à votre newsletter ?
- Doubler les ventes sur votre boutique ?
La création de maquettes fonctionnelles a pour objectif de se focaliser sur la structure du site (et non sur son design). C’est la raison pour laquelle à ce stade on fait abstraction des couleurs afin de ne pas influencer le jugement et de se concentrer sur l’objectif fixé. Cette étape comprend 2 phases: la détermination d’un zoning et la création de wireframes.
Quel est l’objectif du zoning ?
La définition du zoning des pages web d’un site vise à réfléchir à l’organisation générale du site internet. C’est à l’étape du zoning que l’on choisi où positionner les éléments que l’on va présenter sur le site.
Le zoning est un schéma en niveaux de gris qui a pour principal objectif de présenter l’agencement du contenu d’un site web. À ce stade on schématise la disposition des éléments du site web:
- les principales sections de la page web
- les blocs de texte
- l’emplacement du menu
- la disposition du texte
- la disposition des images
Par convention les carrés ou les rectangles avec une croix à l’intérieur symbolisent une image, tandis que le texte est représenté par des blocs rectangulaires groupés.
Les éléments du site ne sont pas détaillés lors du travail de zoning pour se concentrer sur la réfléxion quant à la dispoition des éléments essentiels comme vos CTA (call to action). Le détail interviendra dans un second temps, lors de la réalisation de wireframes.
Pourquoi faire un wireframe ?
Le wireframe est une maquette fonctionnelle en noir et blanc ou en niveaux de gris. Elle découle de la validation du zoning, c’est-à-dire du choix de l’emplacement des éléments sur la page web.
Maintenant que les sections et la structure de base est posée, il est temps de détailler:
- les intitulés du menu
- le titre du site
- le titre des sections et les titres intermédiaires (les fameux Hn en SEO)
- la forme et le texte des boutons
4. Qu’est-ce qu’une maquette graphique ?
Généralement la phase du maquettage graphique est celle que vous préférez car c’est à ce moment que vous commencer à votre projet se concrétiser et prendre vie.
La réalisation des maquettes graphiques est l’application de votre identité visuelle aux wireframes travaillés précédemment. C’est à ce moment que vos photos, votre logo et vos couleurs seront intégrées pour vous donner un aperçu le plus fidèle possible de ce à quoi va ressembler votre site web.
Un conseil: pour bien évaluer les espacement entre les sections, entre les éléments de votre site et la dimension de vos visuels par rapport à la quantité de texte à placer, il est essentiel à cette étape de fournir les textes que vous avez rédigés et qui sont prêts à être intégrés sur votre site.
Lorsque vous avez validés vos maquettes graphiques mobile et desktop, vous êtes prêt pour l’intégration web ! C’est maintenant le moment du développement de votre site web sur mesure !
Vous avez trouvé cet article utile ?
Retrouvez-le facilement en l’épinglant sur Pinterest ⬇️
