Communiquer à l'aide des wierframe : hiérarchisation visuelle

Wireframe – Comment communiquer sur la hiérarchie visuelle

L’utilisation de la couleur est l’une des meilleures façons de communiquer sur la hiérarchie visuelle, mais sur un wireframe, il est l’un des pires. La plupart des concepteurs pensent qu’ils ont besoin d’utiliser de la couleur sur un wireframe. Si vous utilisez de la couleur pour afficher le poids visuel, la conception finale pourrait perdre sa clarté.

Définition sur Wikipédia

Noir et blanc : meilleure visibilité pour le wireframe

Il est facile de différencier l’importance d’un élément de couleur sur un wireframe car tout le reste est en noir et blanc. Mais il n’y a aucun moyen de savoir si cet élément aura la même clarté lorsque vous traduisez le wireframe en une maquette.

En effet, une maquette aura beaucoup d’autres couleurs qui entrent en compétition entre elles. Tout élément de couleur sur votre wireframe doit apparaît plus claire. Le poids visuel que vous lui avez donné diminue lorsque d’autres éléments de la page ont aussi la même couleur.

Un autre danger de l’utilisation de la couleur est que beaucoup de designers finissent par compter sur elle comme le principal moyen de montrer la hiérarchie visuelle du projet. Il est facile de faire des éléments qui se distinguent par la couleur.

Autres caractéristiques de la hiérarchie visuelle

En ajoutant de la couleur à votre wireframe, il est difficile d’évaluer l’importance des éléments visuelle. Car la couleur éclipse d’autres attributs hiérarchiques. Lorsque vous évitez la couleur, vous permettez aux éléments du wireframe de se démarquer. Le poids visuel des éléments de couleurs se perd sur une maquette, mais ces attributs restent intacts.

Taille

L’élément le plus gros est celui qui attire le plus notre attention. Pour travailler la taille, un élément a besoin d’être plus grand par rapport aux autres éléments autour d’elle.

Forme

Vous pouvez afficher du contenu sur vos pages, pour mettre en évidence une zone de contenu. Vous n’êtes pas limité à seulement la couleur et la taille. Utilisez également la forme, placer une boîte autour du contenu, cela donne de l’importance à la zone.

Wireframe d'un site internet
Exemple de wireframe

Le placement sur une maquette site web

Il y a des zones qui recevront plus d’attention que d’autres. Placer le contenu important dans ces domaines d’attention élevé. Le meilleur endroit pour placer vos éléments importants se trouve, au-dessus du fold, là où les yeux de l’utilisateur se rivent le plus.

Coloriage inverse

La colorisation inversée peut ajouter de la clarté dans la hiérarchie des informations. La plupart des wireframes utilisent des couleurs sombres sur un fond clair. En effet, la plupart des sites utilisent souvent une couleur d’arrière-plan neutre.

Lorsque vous inversez les couleurs, vous appliquez une couleur claire sur un fond sombre. Ceci est un moyen efficace pour communiquer un fond de couleur sans suggérer de couleur spécifique.

En suggérant une couleur sur votre wierframe, l’utilisateur comprend que la couleur aura une incidence sur le reste de la conception.

La colorisation inversé, est souvent utilisée pour les éléments d’interface qui ont besoin d’un remplissage de couleur fort. Boutons, menus et notifications, qui ont souvent besoin de cette clarté visuelle, car les utilisateurs interagissent avec eux.

Une hiérarchie visuelle sans couleur

Si votre hiérarchie visuelle n’est pas claire sans couleur, c’est que votre conception n’utilise pas assez d’attributs. Le wireframe sans couleur vous permet d’évaluer la clarté de votre structure et la mise en page. Un wireframe qui n’est pas clair, est un wireframe qui manque d’une hiérarchie forte. Ajouter de la couleur ne permettra pas une meilleure compréhension.

Outils pour la réalisation de vos wireframe

Il existe des outils qui peuvent vous aider à communiquer sur la hiérarchie visuelle. Ils permettent d’avoir une visualisation du wireframe dans son ensemble. Découvrez la liste des différents logiciels de prototypage.

Partagez votre amour