3. Maquettage

Le maquettage

Maintenant que vous avez une idée précise sur les contenus et sur l’allure que vous souhaitez donner à votre site, préparez une maquette qui permet de se faire une idée sur la structure globale des différentes pages du site. 

Pas besoin d’entrer dans les détails graphiques : l’objectif est simplement de créer un croquis général pour savoir où positionner les éléments (menu, barre latérale, composition de l’en-tête, etc.). 

Exemple de maquette :

Outils recommandés :

• Canva

• La suite adobe (Illustrator / photoshop)

• Papier / crayon + appareil photo

• Vous pouvez aussi tester MockFlow qui est un outil spécialement fait pour ça  -> https://mockflow.com/ 

Libre à vous de choisir l’outil avec lequel vous vous sentez le plus à l’aise !

Lectures recommandées : 

• Un petit cours sur la réalisation d’un zoning : https://openclassrooms.com/fr/courses/4296701-gerez-un-projet-digital-avec-une-methodologie-en-cascade/4308346-realisez-le-zoning-et-le-wireframe-dun-site-web
  
• Pour compléter la 1ère vidéo : https://graphiste.com/blog/comment-creer-wireframe-web
  
• Créer un wireframe avec Mockflow : https://www.youtube.com/watch?v=hC72nwGNF9U
  
• Créer un wireframe avec LucidChart : https://www.youtube.com/watch?v=rZaJ3kvzz1o

Exemple de wireframe à produire :

En bonus, voici un “dictionnaire visuel” des notions souvent utilisées en matière de création de site web avec leur équivalent en anglais :

Lien vers la suite : définition du cahier des charges graphique & technique -> /wordpress/wordpress-avance/projet-creer-votre-site-personnel/4-definir-votre-cahier-des-charges-graphique-technique/