Définition d’une maquette

Une maquette physique ou numérique sert à créer l’ébauche et à communiquer autour d’un projet. Elle sert notamment en architecture, en édition et publicité, mais aussi pour la création du site web, c’est ce qu’on appelle Wireframe.

• Zoning: Elle permet de découper en plusieurs la page que l’on réalise. Cela permet de visualiser le parcours qu’effectue un individu sur le site web.
• Wireframe: C’est une maquette fonctionnelle, on y retrouve les différentes explications définies par le Zoning (texte, image, vidéo, bouton,..)
• Graphiste ou réaliste: Comme son nom l’indique elle est réel et regroupe les différents éléments qui composent l‘identité visuel de l’entreprise (pole, logo, slogan,…). Souvent composée de photos, elle représente le site web sans qu’il ne soit encore développé.

• La structure du contenu du site web :  Tout d’abord il faut prévoir l’agencement du contenu, c’est-à-dire l’architecture du site en choisissant le positionnement de chaques éléments sur chaques pages ( Page d’accueil, page de contenu, page article de blog, page catégorie, page produit, page contact, page recrutement,…). Il faut également dans cette étape définir les différents éléments qui donneront une base au design du site.
• Les éléments graphiques : La deuxième concerne les couleurs, mettre un nombre de couleurs qui seront utilisées sur le site et bien se renseigner sur leur signification serait un plus. Pour chaque couleur choisie, il faut attribuer une catégorie, pour que le site garde en cohérence et ne soit pas surchargé (4 à 5 différences de tons suffisent pour commencer). Pour éviter que le site ne soit pas cohérent ou trop chargé, il est recommandé de choisir une dominante foncée (élégance, luxe, sophistication) ou claire (simplicité, pureté, jeunesse), de reprendre les couleurs du logo pour créer une harmonie, d’opter pour du contraste entre le fond et les lettres et de jouer sur les nuances et l’équilibre entre les couleurs vives et neutres. Pour le choix des types de typographie, on prend en compte la lisibilité, la flexibilité et la diversité qui seront utiles pour créer une hiérarchie dans le site, mais aussi la compatibilité avec n’importe quel navigateur ou système d’exploitation.
• Et enfin la création des visuels à intégrer: Cette étape est importante pour donner vie aux écrits, que la trame du site ne donne pas un rendu monotone. Il est également possible d’inclure des vidéos qui illustreront le contenu.

Lorsque toutes ces étapes sont respectées, les éléments peuvent être mis ensemble. Cela permet d’avoir une vue globale sur l’ensemble du site qui sera créé et corriger les problèmes de cohérences ou d’harmonies.

Design, slogan, identité de marque, wireframe.