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 :

  • Les menus et sous-menus de navigation
  • Le fil d’Ariane
  • Les carrousels de photos/vidéos
  • Les zones de textes et de titraille
  • Les boutons (CTA : call to action)
  • Etc.

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 :

  • Elle sert de plan, à la fois pour la version desktop du site, mais aussi de sa version mobile, ce qui est essentiel
  • Elle permet d’estimer les coûts de développement et le temps de travail nécessaire à la réalisation du site
  • Elle sert de base pour l’intégration graphique du site.
  • Elle sert aussi de document de travail pour toutes les équipes appelées à travailler sur le site. Elle est également un support d’échange avec le client, qui pourra la faire évoluer en fonction de ses besoins et de ses préférences avant validation.

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.