Utiliser la couleur dans les wireframes ... est-ce un "non non"?
Récemment, un débat interne a été lancé au travail concernant l'utilisation de la couleur dans les wireframes. Un concepteur junior avait terminé une belle série de wireframes et a finalement dit de tout transformer en niveaux de gris! On leur a dit que la couleur ne devait pas être en fil de fer.
Je peux voir quelques raisons pour lesquelles la conception en niveaux de gris peut aider:
- pour l'accessibilité (donc vous n'êtes pas obligé de compter sur les couleurs pour la différenciation)
- ne pas se tromper en communiquant la conception visuelle dans des wireframes (parfois les clients peuvent associer un choix de couleur à une décision de conception visuelle par opposition à un moyen de communiquer la différence visuelle)
J'utilise en fait une palette d'icônes colorées et utiliserai la couleur pour aider à communiquer la différence visuelle. Parfois, vous ne pouvez pas faire grand-chose en utilisant différentes nuances de gris ou en utilisant des motifs.
Quelle est la pratique courante? J'ai vu des wireframes avec et sans couleur.
On dirait que vos collègues se sont un peu perdus dans les hypothèses sans penser à la fonction d'un filaire. Commençons par ne définition vague fournie par Wikipedia :
Un filaire de site Web (également "filaire Web", "filaire Web", "filaire Web") est un guide visuel de base utilisé dans la conception d'interface pour suggérer la structure d'un site Web et les relations entre ses pages. Un filaire de page Web est une illustration similaire de la disposition des éléments fondamentaux de l'interface. En règle générale, les structures filaires sont terminées avant que toute illustration ne soit développée.
Comme pour tout mot ou terme, il est important de considérer ce que cela signifie vraiment. Un modèle filaire est un terme utilisé dans la modélisation 3D pour parler de la représentation de la structure physique d'un modèle polygonal, qui est rendu en montrant les points de connexion entre les sommets. Quel est l'intérêt d'un modèle filaire? C'est montrer les "tripes" d'une structure pour mieux comprendre sa composition.
Lorsqu'il est transféré au wireframing d'un site Web lorsque Wikipédia en parle, nous devons examiner comment ce sens s'applique, et la définition de Wikipédia le définit: "un guide visuel de base utilisé pour suggérer la structure d'un site Web et les relations entre ses pages".
Comme vous pouvez le constater, il n'y a aucune mention de la couleur ou de l'apparence de ce guide visuel. Tout ce qui compte, c'est qu'il suggère le fonctionnement de la structure du site Web. Tant qu'il y parvient, c'est un filaire efficace. Ainsi, par exemple, ce sont tous des filaires "valides":
- croquis sur une serviette
- esquisses dans 37signals 'Draft ou une autre application sur iPad
- wireframes à la recherche sommaires réalisés à l'aide d'un outil comme Balsamiq Mockups
- des images filaires plus étroites faites en utilisant quelque chose comme Axure ou Illustrator
- conceptions légères d'un site réalisé dans Photoshop, où la structure de la page est rendue apparente tout en incluant des éléments de conception le cas échéant
- Conceptions HTML exportables dans Fireworks qui vous permettent de voir de quels éléments se compose une page
- wireframes HTML/CSS entièrement interactifs
C'est juste une question de fidélité et de détail. Vous devriez peut-être préciser le type de fidélité attendu dans le livrable et guider vos concepteurs dans cette voie. Mais ce n'est pas une question de "si la couleur doit être utilisée dans un filaire" - si la couleur aide à communiquer la structure du site, alors absolument la couleur doit être utilisée dans un filaire!
D'accord.
Typiquement, la couleur apporte des connotations émotionnelles/culturelles à une discussion qui est "supposée" concerner la structure de base, la disposition et l'IA (architecture de l'information). Bien que cela puisse être débattu, nous pouvons convenir que l'utilisation de Color transmettra au moins PLUS d'informations au rendu.
L'intérêt du wireframe est de communiquer UNIQUEMENT ce qui est nécessaire et rien d'autre.
D'après mon expérience dans la pratique, les gens utilisent le terme "filaire" pour désigner chacune des listes d'artefacts Rahul.
D'après mon expérience, c'est principalement la deuxième raison que vous avez énumérée:
- Parfois, même les parties prenantes internes sont déroutées par des wireframes qui semblent trop "réels". Mes maquettes Axure sont beaucoup plus fidèles que les autres maquettes PowerPoint utilisées dans mon organisation, donc je reçois parfois des commentaires qui ont à voir avec la conception graphique, tels que des boutons qui semblent différemment ou des panneaux qui ne règlent pas leur hauteur en fonction de leur contenu, etc.
- Un de mes amis a créé un tel filaire hi-fi que le client l'a tellement aimé qu'il l'a immédiatement mis en place :)
Je suis passé de l'échelle de gris à la couleur et inversement. Je trouve que le quadrichromie a tendance à être une véritable distraction pour les discussions qui doivent avoir lieu.
Soit dit en passant, il se trouve que je suis sur un projet où il n'y a pas de graphiste entre moi et les développeurs, et donc les wireframes "réalistes" ou "vraiment jolis" courent le risque d'être implémentés tels quels. Cela garantit à peu près le désastre car je ne suis pas graphiste ...
Un inconvénient de la couleur sur une structure filaire est que - avec (ce qui est perçu) une fidélité plus élevée des contrôles et autres - tôt ou tard, l'un de vos développeurs supposera qu'il doit faire ressembler l'interface graphique tout comme la structure filaire.
Je connais. Je connais. Cela indique une idée fausse majeure sur l'objectif d'un filaire.
Mais cela arrive vraiment.
J'ai tendance à réserver l'utilisation de la couleur pour annoter les composants. Je m'assure que les morceaux de texte qui sont censés se comporter comme des hyperliens sont en bleu et soulignés, par exemple, même si la conception finale du site peut avoir une histoire de couleurs complètement différente. Les bits de texte qui ne sont pas statiques et varieront en fonction de l'entrée utilisateur obtiennent une autre couleur. S'il y a plusieurs boîtes et lignes qui sont dans le doute ou si je sais que j'ai besoin de plus de polissage, je les définirai pour qu'elles aient des lignes rouges. Les blocs de texte qui sont des annotations déposées juste au-dessus du filaire obtiennent un fond jaune pâle.
C'est très effrayant à regarder, visuellement, mais ça sert à communiquer. Ne pas représenter.
Personnellement, je pense que c'est bien d'utiliser la couleur si elle donne une sorte de fonctionnalité.
J'ai tendance à utiliser la couleur sur les éléments interactifs de mes wireframes, tels que les liens et les boutons étant bleus. Cela permet de mettre clairement en évidence les éléments interactifs lors de la présentation au client.
J'ai également utilisé le vert, l'orange et le rouge pour désigner différents états d'avertissement dans une liste d'éléments. J'ai trouvé que cela aidait à communiquer les fonctionnalités au client plus rapidement, ce qui était moins apparent dans les versions antérieures, uniquement en niveaux de gris.
Cependant, je n'utiliserais pas la couleur comme élément décoratif, du moins pas dans les premiers wireframes ou maquettes. Comme certains autres ont répondu, les clients peuvent parfois se laisser prendre par l'apparence d'une chose, par rapport à son fonctionnement. Cela peut ralentir un peu le processus.