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 -> https://cours.dkts.fr/wordpress/wordpress-avance/projet-creer-votre-site-personnel/4-definir-votre-cahier-des-charges-graphique-technique/