Les structures filaires de site Web sont de simples dessins au trait montrant le placement d'éléments sur une page Web. Vous pouvez gagner beaucoup de temps en modifiant la mise en page d'une structure filaire simple au début du processus de conception, au lieu d'une conception complexe ultérieurement.
L'utilisation de structures filaires est un excellent moyen de commencer un projet de site Web, car elle vous permet, à vous et à votre client, de vous concentrer sur la mise en page sans vous distraire de la couleur, du type et des autres éléments graphiques. Concentrez-vous sur ce qui se passe sur vos pages Web et sur le pourcentage d’espace occupé par chaque élément, qui peut être déterminé en fonction des besoins de votre client.
Ce qu'il faut inclure dans une structure filaire de site Web
Tous les éléments importants d'une page Web doivent être représentés dans votre structure filaire. Utilisez des formes simples au lieu de graphiques, et étiquetez-les. Ces éléments comprennent:
- Navigation: boutons permettant aux utilisateurs de visiter les principales sections de votre site.
- Logo de l'entreprise: peut simplement être représenté par une boîte.
- Zones de contenu: Où figureront vos différentes sections de contenu?
- Zones de recherche
- Zones de connexion utilisateur
Comment créer des wireframes pour sites Web
Il existe différentes manières de créer une structure filaire pour site Web. Ils comprennent:
Le dessiner à la main sur du papier
Cette méthode est pratique lorsque vous vous trouvez face à face avec un client. Esquissez vos idées de mise en page sur du papier, en mettant l’accent sur les éléments qui devraient aller où.
Utilisation d'Adobe Photoshop, Illustrator ou d'autres logiciels
La plupart des progiciels graphiques sont dotés de tous les outils de base nécessaires à la création de structures filaires. Des lignes simples, des formes et du texte (pour étiqueter vos éléments) sont tout ce dont vous avez besoin pour créer une image filaire présentable.
Utilisation du logiciel créé pour ce type de tâche
Bien que Photoshop et Illustrator puissent faire l'affaire, certains packages logiciels ont été développés spécifiquement pour ce type de travail. OmniGraffle est un logiciel qui simplifie la création de structures filaires en fournissant des outils de forme, de ligne, de flèche et de texte à utiliser sur une toile vierge. Vous pouvez même télécharger des jeux de graphiques personnalisés (gratuitement) sur Graffletopia, ce qui vous donne plus d’éléments, comme des boutons Web courants, avec lesquels vous pouvez travailler.
03 sur 03Les avantages
Avec les structures filaires de site Web, vous avez l’avantage d’améliorer un simple dessin de ligne pour obtenir la mise en page souhaitée. Plutôt que de déplacer des éléments complexes autour d'une page, cela peut prendre très peu de temps pour faire glisser quelques cases dans de nouvelles positions. Il est également beaucoup plus productif pour vous ou votre client de se concentrer d'abord sur la mise en page… vous ne commencerez pas par des commentaires du type "Je n'aime pas cette couleur!" sur lequel baser votre design.
