Une structure filaire Web est un guide visuel simple qui vous montre à quoi ressemblerait une page Web. Il suggère la structure d'une page, sans utiliser aucun graphique ou texte. Une structure filaire de site Web montrerait l’ensemble de la structure du site - y compris les pages qui pointent vers où.
Les structures filaires Web constituent un excellent moyen de commencer votre travail de conception. Et bien qu'il soit possible de créer des structures filaires complexes avec une quantité de détails considérable, votre planification peut commencer avec une serviette en papier et un stylo. Pour créer de bonnes structures en fil de fer, il est essentiel de supprimer tous les éléments visuels. Utilisez des cases et des lignes pour représenter des images et du texte.
Éléments à inclure dans une structure filaire de page Web:
- boîtes pour éléments graphiques primaires
- placement des titres et des sous-titres
- une structure de mise en page simple
- appels à l'action
- blocs de texte
Comment construire une structure filaire Web simple
Créez une structure filaire de page Web en utilisant le moindre morceau de papier que vous avez sous la main. Voici comment je le fais:
- Dessinez un grand rectangle - cela peut représenter la page entière ou seulement la partie visible. Je commence habituellement par la partie visible, puis je l'étends pour inclure des éléments situés sous le pli.
- Esquisser la mise en page - est-ce 2 colonnes, 3 colonnes?
- Ajoutez une zone pour un graphique d'en-tête - Dessinez sur vos colonnes si vous voulez que ce soit un en-tête unique au-dessus des colonnes, ou ajoutez-le simplement à l'endroit souhaité.
- Écrivez "Titre" à l'endroit où vous souhaitez placer votre titre H1.
- Écrivez «Sous-tête» à l'endroit où vous souhaitez que les titres H2 et inférieurs soient. Cela aide si vous les rendez proportionnels - h2 plus petit que h1, h3 plus petit que h2, etc.
- Ajouter des cases pour d'autres images
- Ajouter à la navigation. Si vous planifiez des onglets, dessinez simplement des cases et écrivez "navigation" par-dessus. Ou placez des listes à puces dans les colonnes où vous souhaitez naviguer. Ne pas écrire le contenu. Écrivez simplement "navigation" ou utilisez une ligne pour représenter le texte.
- Ajoutez des éléments supplémentaires à la page - identifiez leur nature avec du texte, mais n'utilisez pas le texte du contenu réel. Par exemple, si vous voulez un bouton d’appel à l’action en bas à droite, cochez-y une case et nommez-le "appel à l’action". N'écrivez pas "Achetez maintenant!" dans cette boîte.
Une fois que vous avez écrit votre structure filaire simple et qu'il ne devrait pas vous falloir plus de 15 minutes pour en dessiner une, montrez-la à quelqu'un d'autre. Demandez-leur s'il manque quelque chose et pour d'autres commentaires. Selon ce qu’ils disent, vous pouvez écrire une autre structure filaire ou conserver celle que vous possédez.
Pourquoi les structures filaires en papier sont idéales pour les premières ébauches
Bien qu'il soit possible de créer des structures filaires à l'aide de programmes tels que Visio, vous devez vous en tenir au papier pour vos séances de brainstorming initiales. Le papier ne semble pas aussi permanent, et beaucoup de gens penseront que vous l’avez jeté en 5 minutes et n’hésitez pas à vous donner de bons retours. Mais lorsque vous utilisez un programme pour créer des structures filaires sophistiquées avec des carrés et des couleurs parfaits, vous courez le risque de vous perdre dans le programme lui-même et de passer des heures à perfectionner quelque chose qui ne sera jamais mis en ligne.
Les structures en fil de papier sont faciles à faire. Et si vous ne l'aimez pas, il vous suffit de froisser le papier, de le jeter au recyclage et de prendre une nouvelle feuille.
