Utilisation de wireframes pour rationaliser votre processus de développement
La création d'une structure filaire est l'une des premières étapes à franchir avant de concevoir un site Web.
Un wireframe vous aide à organiser et à simplifier les éléments et le contenu d' un site Web et constitue un outil essentiel dans le processus de développement.
Un wireframe est essentiellement une représentation visuelle de la mise en page du contenu dans une conception de site Web .
Le wireframe agit comme un prototype qui affiche l'emplacement des entités de la page, telles que l'en-tête, le pied de page, le contenu, les barres latérales et la navigation.
Il spécifie également l'emplacement des éléments dans ces zones de contenu. Si vous souhaitez développer un site qui correspond exactement aux exigences du client et minimiser les révisions de projet, le wireframing vous gardera sur la bonne voie.
Avantages du wireframing
La création d'une structure filaire donne au client, au développeur et au concepteur la possibilité de jeter un regard critique sur la structure du site Web et de les modifier facilement au début du processus.
Wireframing apporte les avantages clés suivants:
- Il donne au client une vue rapprochée et rapide de la conception du site (ou de sa nouvelle conception).
- Il peut inspirer le concepteur, résultant en un processus de création plus fluide.
- Il donne au développeur une image claire des éléments qu’il devra coder.
- Cela rend clair l'appel à l'action sur chaque page.
- Il est facile à adapter et peut montrer la disposition de nombreuses sections du site.
Outils pour le développement filaire
Vous avez beaucoup d'outils à choisir lors de la création d'une structure filaire:
- Le dessin à la main sur papier est toujours un bon point de départ pour tout designer. Il offre un moyen simple et rapide de se concentrer et de s’organiser. Si vous êtes très précis en matière de croquis, vous pouvez même l'utiliser comme image filaire finale. (Voir Figure 1.)
- Un organigramme ou un logiciel de cartographie mentale , tel que Visio . Ces options logicielles sont fournies avec des éléments préemballés qui vous permettent de créer facilement des représentations de diagramme de votre structure filaire.
- Logiciel de prototypage Web , tel que Gliffy ou Balsamiq . Des outils comme ceux-ci ont été créés spécialement pour générer des wireframes et disposent de fonctions de prototypage faciles à utiliser.
- Logiciels graphiques , tels que Photoshop ou Illustrator. L'avantage d'utiliser ces outils est que la structure filaire peut être convertie directement en une maquette graphique de la conception du site Web. Cependant, l'inconvénient est que vous devrez créer tous les éléments à la main.
- (X) Les wireframes HTML ressemblent presque à des sites réels eux-mêmes. Vous pouvez disposer le modèle filaire avec du code avant d’appliquer les styles, ou vous pouvez créer une mise en page entièrement stylée et haute fidélité qui ressemble beaucoup à une conception finale. (Voir Figure 2.)
En fin de compte, le développeur ou le concepteur doit sélectionner l’outil qu’il préfère. Personnellement, j'utilise Photoshop parce que j'aime la façon dont il organise le processus et avec quelle facilité je peux convertir le fichier en une maquette.
Exemple filaire
Le niveau de détail d'une structure filaire dépend de plusieurs facteurs, notamment: la direction et le contenu fournis par le client, la complexité du contenu, la distance dans le processus et le niveau de détail souhaité. .
Voici des exemples de structures filaires créées à l'aide de différents outils et présentant différents niveaux de détail et de couleur:
Figure 1: cette simple esquisse filaire du site Web Coastal Capital Partners (désormais appelé Broad Reach Retail Partners) a été utilisée pour créer des maquettes graphiques et, éventuellement, la conception finale. Par Mike Rohde .
Figure 2: Fil de fer HTML très basse fidélité. Utile pour démontrer à quoi un site ressemblera avant l'ajout du style. Très utile pour les utilisateurs malvoyants.
Figure 3: modèle filaire basse fidélité pour la communauté Embrace Pet , par Jesse Bennett-Chamberlain de 31Trois .
Figure 4: Une maquette préliminaire d’un outil de conférence sociale basé sur Tiddlywiki pour utilisation sur Le Web 3. Les notes pour l'accompagner sont à tiddleleweb.tiddlyspot.com . Filaire par Phil Hawksworth.
Figure 5: Celle-ci est basée sur l'utilisation avancée d'un système de publication de blog (WordPress). Par Mattheiu Mingassson ou Activeside Internet Strategies and Consulting .
Figure 6: un fil de fer pour la communauté Embrace Pet , par Jesse Bennett-Chamberlain de 31Trois .
Figure 7: Une structure filaire avec des couleurs et des images. Fil de page de l'auteur par Bokhandel .
Figure 8: Un autre fil de fer de couleur. Par Mattheiu Mingassson de Activeside Internet Strategies and Consulting .
Les meilleures pratiques
Pour obtenir des résultats optimaux, il convient de garder à l’esprit plusieurs points importants lors du développement d’une structure filaire:
- Simplicité. L'essentiel est de le garder suffisamment simple pour être clair pour le client et être flexible pour le concepteur, mais suffisamment détaillé pour guider le programmeur. Comme mentionné, vous pouvez créer une structure filaire haute fidélité, mais cela peut être source de confusion pour le client, qui peut le prendre pour une version finale.
- Travailler en niveaux de gris. Lorsque vous créez des éléments pour une structure filaire, il est préférable de travailler en niveaux de gris afin de pouvoir vous concentrer sur la mise en page sans être distrait par la conception. Si vous avez reçu un logo en couleur, convertissez-le également en niveaux de gris. Pour distinguer et catégoriser différents éléments, montrez les formes et les contours dans différentes nuances de gris.
- Utilisez des wireframes en tandem avec un sitemap. Un wireframe est une représentation visuelle d'un bon sitemap, pas un remplacement. Un sitemap est un outil utile pour tout site Web et il serait certainement utile de s'y référer au cours du processus de développement.
- Concentrez-vous sur le résultat souhaité. Bien comprendre comment votre client souhaite que les utilisateurs répondent à la page avant de créer votre wireframe. Les appels à l'action doivent être très clairs, simplement en regardant le fil de fer.
- Créez un fil de fer plein format s'il s'agit d'un site Web. Cela donnera la représentation la plus précise de la page réelle.
- Planifiez les éléments en sécurisant le contenu à l'avance. Dans le meilleur des cas, votre client vous a déjà fourni les éléments qui doivent apparaître sur chaque page, tels que le logo, les annonces, les lecteurs Flash ou vidéo, les fonctionnalités, les sections de navigation et les éléments de barre latérale, d'en-tête et de pied de page. Si vous ne possédez pas encore cette information, rencontrez votre client et obtenez (ou créez) un sitemap. Si vous re-concevez des éléments existants, vous pouvez les rassembler à partir d’un examen attentif du site Web. Dans ce scénario, assurez-vous d'abord de vérifier avec votre client que vous ne serez pas obligé d'ajouter ou de supprimer des éléments, car ne pas avoir une compréhension claire de leurs attentes ralentira le processus.
Niveaux de gris vs couleur
Lors de la création d'une structure filaire, travailler en niveaux de gris permet de rester concentré sur la fonction principale du processus , qui consiste à finaliser la mise en page et non sur la conception (voir Figure 3). Un autre risque de travailler en couleur est que le client peut confondre le fil de fer pour la maquette finale.
La couleur peut toutefois s'avérer utile pour afficher l'emplacement de chaque appel à l'action. Une page pouvant contenir plusieurs appels à l'action, il est important de les hiérarchiser. Les wireframes peuvent aider à déterminer quel appel à l'action pour attirer l'attention de l'utilisateur en premier.
J'ai récemment travaillé sur un projet avec un logo très dynamique qui, dans ce cas, était le principal appel à l'action car il représentait un magazine récemment lancé.
Lorsque vous utilisez la couleur, vous pouvez plus facilement déterminer si certains éléments dépassent l'appel principal à l'action. Ce processus relève encore du schéma filaire, plutôt que de la conception de maquettes, car les emplacements des éléments sont toujours en cours de détermination.
La couleur peut être progressivement ajoutée à la structure filaire à mesure que le projet avance , ce qui est plus efficace que de procéder à des maquettes avant que l’emplacement des éléments ne soit verrouillé. Ce faisant, le logiciel graphique peut vous aider à passer directement à une maquette lorsque vous êtes prêt.
Quoi éviter
À l'instar d'autres aspects de votre processus de développement, le fil de fer peut avoir ses pièges s'il n'est pas exécuté correctement. Voici quelques conseils sur ce qu'il faut éviter pour obtenir les résultats les plus efficaces:
- Trop de choses se passent sur la page. Laissez suffisamment d'espace blanc pour que le motif ne soit pas trop occupé ou encombré.
- Accent sur la couleur et le design. Le fil de fer sert à décider de la disposition et de l'emplacement des éléments. Même si une structure filaire peut influencer la conception, l'ajout de graphiques et de couleurs ne ferait que détourner l'attention de son objectif.
- Trop de détails. Vous pouvez toujours ajouter plus de détails ultérieurement, mais si vous en incluez trop au début, le client peut confondre le wireframe avec la maquette finale.
Si vous souhaitez en savoir plus sur les wireframes, Magazine Filaire est une excellente ressource qui partage des échantillons, discute des techniques et résout les problèmes liés à l'architecture de l'information.
La création d'une structure filaire pour le site Web de votre client constitue un outil de communication efficace pour toutes les parties concernées.
Même la construction d'une structure filaire simple permettra de gagner du temps à long terme et de faciliter le processus de développement pour le concepteur, le développeur et le client.
Écrit exclusivement pour WDD par Eric Shafer.
Utilisez-vous des wireframes pour votre conception? Quels sont les meilleurs moyens de créer des wireframes efficaces?