Les maquettes

Les différentes étapes

Plusieurs éléments doivent être préparés en amont avec méthode de façon à aborder sereinement
l’élaboration de la maquette graphique. L’objectif commun à tous les projets reste de garantir la meilleure
expérience à ses visiteurs grâce à une ergonomie optimisée.

⁰¹Elaboration du cahier des charges

— — Pour le client
Garant du bon fonctionnement d’un projet le cahier des charges permet aux protagonistes de se coordonner. Attentes, contraintes, hébergement… Tout est passé en revu afin de cerner les grands objectifs.

— — Pour le prestataire
C’est une étape indispensable pour mesurer l’envergure du projet à réaliser.

CDC la Ridelière

⁰²Les couleurs

Partie intégrante de la charte graphique, les couleurs doivent être sélectionnées avec goût en prenant en compte les éléments déjà existants. Quelles soient profondes, dynamiques ou reposantes, elles sont toutes tintées d’une signification et nous inspirent un ressenti qui doit être en adéquation avec l’image de l’entreprise.

#e3007e

R 227 | V 0 | B 126

C 60% | M 100% | J 13% N 0%

#a39387

R 164 | V 148 | B 135

C 37% | M 38% | J 45% N 2%

#646363

R 100 | V 99 | B 99

C 60% | M 52% | J 52% N 22%

⁰³La typographie

Script, empattement ou à bâton, la typographie contribue largement à l’ambiance du site. Bien sélectionnée, elle peut également avoir un rôle bénéfique sur le référencement, ce qui est le cas pour la « Lato » ou encore la « Montserrat » régulièrement utilisée pour le texte de labeur.

⁰⁴Moodboard

Planche de tendance permettant de poser l’ambiance d’un site au travers de photos représentant un environnement, des couleurs, un style.

⁰⁵Arborescence

Dans quel sens doit-on emprunter le chemin qui mène à l’information pour en faire ressortir la meilleure expérience ? Organiser la structure d’un site, prendre en compte d’UX, et s’assurer de respecter la règle des trois clics, c’est toute la difficulté d’une arborescence bien pensée.

exemple d'arborescence

⁰⁶Les wireframes

Qu’il soit fait sur un bout de papier ou dans un logiciel dédié, le wireframe, plan d’un site web, est la première étape de la conception. Il permet de rassembler les informations afin de faire la jonction entre les idées du début, les besoins et la concrétisation du projet.

⁰⁷Les maquettes graphiques

Schéma du site plus élaboré qu’un wireframe, la maquette graphique prend en considération les couleurs choisies, les photos ainsi que l’emplacement la structure et la densité du texte.

larideliere.com