Créer un site web professionnel : La maquette #3

Dans ce troisième article, nous allons nous pencher sur l'aspect visuel du site web : La maquette. Si vous n'avez pas lu les premiers articles de cette série rendez-vous ici :

• Définir ses objectifs
• L'arborescence

Au programme de cet article sur la maquette

1️⃣ La maquette ?

Ce que l'on nomme "maquette" en design de site web est le visuel du futur site web. On distingue 2 types de maquettes :

• Le wireframe qui est une maquette simple, parfois réalisé sur papier qui reprend l'organisation des blocs et de leur emplacement. Cela donne une idée de la taille du contenu textuel et des images à fournir ou produire.
• Le webdesign est lui, la maquette graphique complète. Elle prend en compte les images et l'identité visuelle de l'entreprise. Mais également les contenus visuels et textuels. Ce webdesign servira pour l'étape suivante : l'intégration du site internet.

Wireframe pour "Coco Bongo"

Maquette finale du projet

2️⃣ Comment faire une maquette de site web ?

Mon premier et meilleur conseil : Faite de la veille sur Pinterest, chez les concurrents, sur des sites tel que Awwward ou CSS design Awards !

Après la réalisation d'un moodboard, ou d'une planche tendance, est une bonne idée, d'ailleurs je vous offre une mini-formation pour vous apprendre à la créer. C'est gratuit et téléchargeable juste ici ⬇️

Avec ce travail d'inspiration, une idée globale de l'univers graphique du site ressort. Avec l'arborescence, un premier wireframe est facilement établi.

Après validation, c'est le lancement du grand chantier : La création de la maquette finale grâce à des logiciels spécialisés comme Sketch ou AdobeXd, que les webdesigners maîtrisent sur le bout des doigts !

3️⃣ Les éléments à ne pas négliger dans la conception de la maquette

C'est parfois excitant de créer une maquette, on a tout de suite envie de passer à la création du design, mais de nombreux éléments sont à ne pas oublier :

• S'appuyer la charte graphique pour que l'image de marque soit parfaitement cohérente sur les supports numériques et physiques.
• Ne pas oublier les éléments légaux : Mentions légales, bandeau RGPD ainsi que les conditions générales de ventes si besoin !
• Fixer une taille de contenu. Si vous n'avez pas encore rédigé vos contenus, essayer d'avoir une idée globale du nombre de mots par paragraphe.

Le chiffre à retenir : 2 minutes 17 secondes ! C'est le temps moyen qu'un utilisateur passe sur un site web, c'est court pour convaincre. Soigné et étudier le design permet de retenir la personne plus longtemps !

4️⃣ Une fois la maquette du site internet fini ?

Après la validation de la maquette du site web et ses déclinaisons en format mobile et tablette, il s'agit de la phase d'intégration web front-end en HTML, CSS, JS... Ses termes techniques parleront forcément à un développeur front-end ! Promis, c'est le sujet du prochain article.

Tout compris sur la maquette ? Regroupe toutes tes idées pour ton futur site web dans un workbook conçu sur-mesure pour réussir ton site web. En remplissant le formulaire, tu le recevras sous 5 minutes dans ta boîte mail !