3. Maquettage

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

Pas besoin d'entrer dans les détails graphiques : l'objectif est 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, pied de page, etc.).

Faites au minimum 3 maquettes : la page d'accueil, une page d'article et la page qui liste les articles d'une catégorie. Ce sont les trois « modèles » que l'agent devra construire ; toutes les autres pages en découleront.

Exemple de maquette :

Exemple de maquette de site

Outils recommandés :

  • Canva
  • La suite Adobe (Illustrator / Photoshop)
  • Papier / crayon + appareil photo
  • MockFlow, un outil spécialement fait pour ça

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

Nouveau : même un croquis papier pris en photo est directement exploitable. Vous le donnerez à l'agent en pièce jointe, et il s'en servira comme plan de construction. Soignez donc la lisibilité : nommez chaque zone (« menu », « dernier article », « bouton contact ») plutôt que de dessiner des rectangles vides.

Lectures recommandées :

Exemple de wireframe à produire :

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 :

Dictionnaire visuel du vocabulaire de base du webdesign

Retenez bien les termes anglais (header, footer, hero, card, sidebar…) : ce sont ceux que les IA comprennent le mieux, et ils vous feront gagner beaucoup de précision dans vos demandes.

← 2. Veille et recherche d’idée · 4. Définir votre cahier des charges graphique & technique →