Aller au contenu

Maquettage Web : pourquoi et comment créer les maquettes de votre site Web

Pour Wikipédia, une maquette est une « représentation partielle d’un système ou d’un objet (réel et existant ou à concevoir) afin d’en tester et valider certains aspects (maquette virtuelle ou visuelle en 2 ou 3D) et/ou comportements (maquette fonctionnelle) ». Cela fait tout de suite penser aux esquisses d’architectes et modèles réduits d’avion ou de voiture. Une maquette Web est moins tangible, donc plus difficile à définir.
Il existe 3 grandes réalités derrière le terme de maquette lorsqu’elle désigne un site :

  • Maquette filaire (wireframe) : une ébauche en noir et blanc réalisée sur papier ou dans un logiciel dédié qui sera amenée évoluer en fonction des retours du client. Elle comprend les blocs de contenu principaux et leur hiérarchie informative.
  • Maquette graphique (mock-up) : l’habillage visuel, elle s’apparente à une capture d’écran du futur site internet.
  • Maquette html (intégration) : du code, un répertoire de fichiers HTML/CSS/JS et d’images à consulter dans un navigateur.Pour y voir plus clair, la présentation Slideshare de serrurier pas cher Neuilly sur Seine ci-dessous détaille les étapes de réalisation d’une maquette web du zoning au mockup.

Concrètement, de quoi se compose la maquette ?

La maquette graphique de la page d’accueil d’un futur site internet comprend :

  • Un header regroupant une bannière graphique (logos, signature, etc.) et le système de navigation mis en place (horizontal ou vertical). C’est la première chose que verra l’utilisateur, la partie immergée de l’iceberg. Elle doit faire l’objet d’un soin particulier.
  • Le corps du site avec le texte, les visuels, liens et vidéos
  • Le footer qui rassemble généralement l’arborescence et les réseaux sociaux
  • Le background, c’est-à-dire le fond du site internet

À quoi sert le maquettage ?

La maquette est une ébauche de l’aspect visuel d’un futur site internet comme le  site d’agence de voyage Tunisie pas cher. Tout commence par un entretien entre le client et le(s) designer(s) afin de déterminer les principaux axes graphiques. Le maquettage sert de base d’échange entre les deux parties et permet de vérifier que tous les besoins ont été pris en compte et correctement retranscrits. Si l’image que l’entreprise souhaite transmettre n’est pas la bonne, il est encore temps d’apporter des modifications en jouant sur l’architecture de l’information, l’emplacement des vidéos ou le choix de la typo.
Des tests d’utilisabilité et de perception internes ou auprès d’utilisateurs peuvent également être envisagés à ce stade.

Qui peut réaliser mon maquettage ?

Il est fortement conseillé de confier cette étape à des designers graphiques spécialisés. L’agence UX Usabilis propose par exemple une prise en charge du maquettage Web sous forme de Wireframe. Il existe de nombreux logiciels permettant de réaliser une maquette par soi-même mais cela demande des compétences avancées en la matière. Le web possède de nombreuses contraintes de conception (ergonomie, architecture, etc.) et techniques (langages HTML, Java et CSS) qui rendent ces projets très différents d’une conception print.

Si vous décidez toutefois de vous lancer dans cette aventure, la vidéo suivante devrait vous apporter les bases dont vous avez besoin. Bon courage !

 

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *