Depuis Juillet 2023, Lumao fait partie du groupe Spiriit, agence e-commerce et digitale de 65 personnes ! En savoir plus sur Spiriit
Lumao - Développement Magento
Maquette site web : comment bien préparer son projet

Maquette de site web : le plan détaillé de votre projet

Thèmes et templates, parfois gratuits, permettent de créer rapidement un site web. Mais pour un site sur mesure, il est nécessaire de réaliser des maquettes. Ces schémas servent de plans à la création de site internet. Ils sont indispensables, car ils posent les fondations fonctionnelles et graphiques du site. Etablies à partir du cahier des charges et de l’arborescence, ces maquettes prévoient la mise en page des différents éléments, les étapes du parcours client et l’interface graphique.

Maquette fonctionnelle : organiser les éléments structurels du site

Dans un premier temps, il faut définir la structure des pages du site. Pour chaque type de pages, on définit un « zoning », c’est-à-dire un découpage de la page en blocs. Chacun d’eux correspond à une zone de contenu ou à une fonctionnalité. Ces maquettes fonctionnelles en noir et blanc, qu’on appelle aussi mockup, vont droit au but. Aucun élément graphique ne vient distraire l’attention. Le but est de déterminer l’emplacement et la taille de chaque élément : le header, le menu, les zones de textes, les boutons, le pied de page, etc. Grâce à des logiciels dédiés, on peut aussi définir les différentes interactions utilisateurs afin de prévoir l’ergonomie du site. Par exemple, au clic sur un onglet du menu, un sous-menu ou une nouvelle page de contenu s’ouvre.

Cette maquette fonctionnelle sert de base au graphiste. Ce dernier pourra l’habiller pour qu’elle se rapproche le plus possible de l’apparence finale du site.

Maquette graphique : définir le graphisme du site

Ces maquettes reprennent la structure définie dans les mockups et leur ajoutent tout ce qui fait l’identité visuelle de la marque ou de l’entreprise. Elles prolongent la maquette fonctionnelle en lui apportant des éléments de design : les couleurs, la forme des boutons, les polices de texte, etc. Le plus souvent, le graphiste intègre des « faux » textes (lorem ipsum) et des visuels lambda afin de donner une idée précise du rendu final des pages et avant même que les contenus soient réalisés. Ces maquettes graphiques sont le plus souvent réalisées à partir de logiciels tels que Photoshop ou Illustrator. Elles serviront de base à l’intégration du site.

Comment créer des maquettes web ?

Avant de créer les maquettes du site, il faut prévoir son arborescence, c’est-à-dire sa structure : les grandes rubriques, les catégories et sous-catégories, etc. Cela permet de définir les principaux types de pages à maquetter. Généralement, il s’agit de la page d’accueil, des fiches produits, des articles, des pages informatives, des formulaires…, toutes ces pages dont le modèle se répétera plusieurs fois.

Les fonctionnalités sont quant à elles répertoriées et définies dans le cahier des charges. Ce document permettra de maquetter tous les éléments et interactions nécessaires à la navigation et au parcours utilisateur à travers les pages.

Dans une maquette de site web, on retrouve généralement les éléments suivants :

Le rôle de la maquette dans un projet web

La maquette fait partie du travail préparatoire à tout site internet, vitrine ou e-commerce. Elle assume plusieurs rôles :

Chez Lumao, nous soignons les maquettes de chaque site dont on nous confie la réalisation. Contactez-nous pour en savoir plus. Et si vous souhaitez créer un site internet sur mesure, nous vous adressons un devis entièrement sur mesure, adapté à vos besoins et à votre budget.