Outils & ressources
Le Wireframe de Ta Page
Pose la structure avant de penser au design.
Choisis les blocs, range-les dans l’ordre, décide ce que chacune des sections de ton site web contient. Est-ce qu'il y a un visuel, 1, 2 ou 3 colonnes, un texte court ou long. Un wireframe, c'est le squelette de ton site web. C'est une organisation très basique, juste assez précise pour clarifier ce qu’il faut écrire et prévoir, avant de passer à la mise en page.
Construire la page
En savoir plus
C'est quoi un wireframe ?
Le squelette de la page, avant la couleur et la police.
Un wireframe, c'est un plan de page réduit à l'essentiel. On se demande quels blocs de contenu se suivent, dans quel ordre, avec quel niveau de détail. On ne met vollontairement pas de couleurs définitives, pas de police précise, pas d'image finale. Ce qui nous intéresse, c'est juste la structure et la manière de naviguer sur ton site web.
L'intérêt ? Pouvoir discuter et trancher sur l'organisation d'une page (qu'est-ce qu'on montre en premier ? a-t-on vraiment besoin d'un visuel ici et pour quel objectif ? trois colonnes ou une seule ?) sans se laisser distraire par le design.
Une fois cette structure validée, l'étape suivante, c'est l'habillage visuel. Et ça va beaucoup plus vite quand on a déjà réalisé des wireframes bien pensés. 😊
- Un wireframe permet de bien penser le design system de ton site web. Ça veut dire quoi ? Qu'on identifie des modèles de section et qu'on évite de réinventer l'eau chaude à chaque nouvelle page. Sur des sites web complets, ça permet de travailler plus vite tout en gagnant en cohérence.
- Le wireframe te permet de tester plus rapidement des parcours utilisateurs.
- Si tu dois écrire ton propre contenu, les wireframes vont t'aider à bien identifier tes besoins en écriture.
