Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Bâtir la hiérarchie visuelle dans vos créations

by
Length:MediumLanguages:
This post is part of a series called Design School for Developers.
Building Content Hierarchy Through Design
All About Trends in Web Design

French (Français) translation by Henri Lotin (you can also view the original English article)

Il est important de se rappeler que la hiérarchie n'a pas seulement à voir avec le contenu et les mots que vous avez sur une page. Les images que vous incluez dans vos créations, des photos aux icones, boutons et tout autre élément visuel autre que du texte, a un impact important sur la hiérarchie et la perception de votre site web.

Lorsque vous créez un site web, les images que vous utilisez aideront en grande partie à établir le ton d'ensemble du site, aux côtés de la couleur, de la typographie, etc.. Si les éléments d’image visuelle ne s’asseyent pas dans un design, alors ils peuvent briser assez souvent l’impression que vous souhaitez définir.

Neonmob is all about the visuals on their website - and rightly so as it has everything to do with their product Neonmob display their images in a great way though almost semi-realistically as if youre holding the card decks themselves
Neonmob ; tout sur les visuels sur leur site Web - et à juste titre, car il a tout à voir avec leur produit. Neonmob affichent ses images d'une grande manière, bien que, presque semi réaliste comme si vous teniez les cartes elles-mêmes. C’est super, car ça contribue à en dire plus sur l'histoire.

La création d’une bonne hiérarchie visuelle consiste à comprendre comment utiliser ces éléments visuels pour améliorer l’expérience des utilisateurs sur votre site web, sans briser le flux du contenu.

L’imagerie est également une autre forme de storytelling qui peut nous aider à encore plus expliquer à nos utilisateurs où ils devraient aller, ce qu’ils doivent faire et ce qu’ils peuvent attendre d’un site web. Bien plus que faire du storytelling avec du contenu, l'imagerie est un moyen vraiment visuel de vous aider à raconter votre histoire à vos utilisateurs.

Se servir d’éléments visuels tels qu'images et icones contribue également à créer des moyens plus visuellement excitant et créatifs pour attirer l’attention des utilisateurs, ce qui vous permet de mettre en évidence les domaines clés d’un design que vous souhaitez mettre en emphase.


Hiérarchie visuelle grâce à l’imagerie

Parcourons quelques conseils, qui vous aideront à atteindre une hiérarchie visuelle forte.

Pensez au ton que vous souhaitez mettre en place

Les images dans votre design illustrent le ton de votre site web. Si le style que vous souhaitez afficher est professionnel, détendu, décontracté, pratique (ou tout autre style) vous devez vous assurer que vos images lui correspondent.

Il est important que vous utilisiez des images pour améliorer votre site web, plutôt que d'avoir les images en place pour vous aider à expliquer ce que l’utilisateur doit faire. Un site web sans imagerie devrait toujours pouvoir raconter la même histoire comme si elle avait les images en place, car les images sont là pour renforcer cette histoire et faire encore mieux. Cependant, les images ne sont pas une réflexion après coup ; elles doivent toujours démontrer le soin et l’attention que vous prodiguez à d’autres domaines du design afin qu’ils travaillent aussi bien qu’ils le peuvent avec votre contenu.

Hopskoch need to tell their users about their product - and to do that they show it in action This type of strong single visual works well as it helps immediately attract users attention
Hopskoch veut parler de ses produits à ses utilisateurs - et pour cela, il le montre en action. Ce type de visuel fort et unique fonctionne bien comme il contribue à attirer immédiatement l’attention des utilisateurs.

Ne jamais utiliser des images en remplacement de texte

Ne supposez jamais que vos images sont faciles à comprendre. Je recommande toujours que vos images aient une légende ou un sous-titre pour aider les utilisateurs à comprendre votre histoire et faire le lien entre l’image et le texte. Cela rend aussi votre contenu accessible dans des circonstances où les images sont peut-être désactivées.

Stock photos ou photos personnalisées ?

Tout cela dépend du style du site et du niveau de design que vous souhaitez proposer, mais c'est à vous de décider si vous voulez utiliser des photos de banques d'images ou des photos personnalisées.

Personnellement j’ai toujours pensé que la photographie de banque d'image peut sembler assez générique, surtout si vous partez sur un look de bureau standard. Cela dit, la photographie personnalisée peut finir aussi comme ça, surtout si il est délibérément shootée de manière cheesy.

Photographie personnalisée, en particulier lorsqu’un photographe pro est embauché, cela peut avoir un effet brillant sur vos créations, car il vous donne souvent l’effet de levier visuel dont vous avez besoin pour élever un design et ajouter un certain contraste visuel.

Parfois, il peut également être nécessaire d'avoir des images personnalisées, comme avec les sites web e-commerce et puis, il est important de se rappeler que vous devez avoir la photographie qui correspond également au style et au look and feel de votre création. Dans le cas contraire, vous courez le risque d’avoir un site web magnifiquement conçu et une superbe photographie, mais qui donnent l'impression d'être disjoints lorsqu’ils sont mis ensemble.

Hopskoch also use custom icons to display their product and how it works - if these had been done in a stockdefault style the brand message and look wouldnt have been half as strong
Hopskoch utilise également des icones personnalisées pour afficher ses produits et la manière dont ils fonctionnent - si ceux-ci avaient été faits dans un style de stock/par défaut, le message et le look de la marque n’auraient pas été aussi forts, même de moitié.

Soyez prudent avec le dimensionnement & le contraste

Une petite chose à laquelle penser est la taille de l’image que vous utilisez. Si possible, essayez de garder les images qui fonctionnent avec le rythme vertical que vous avez créé précédemment. Cela ensuite, à son tour, aidera à maintenir le flux de contenu mobile et fluide, sans qu'il soit difficile de naviguer à travers.

Sachez également que la taille réelle des images et des éléments visuels que vous utilisez aura un effet sur la manière dont le contenu est lu. Vous ne voulez pas créer un contraste trop drastique entre la taille des images et celle du texte, ou tout cela deviendra illisible et brisera complètement le flux. Cela dit, vous pouvez bien sûr briser cette règle et où il est utile pour le design d’avoir des images plus grandes, n’hésitez pas à les utiliser et à ajouter un intérêt visuel à la page.

Fitbit is all about the product - and they use size and contrast to help display their products in action whilst also displaying the other products that they also have
Fitbit est tout au sujet du produit - et ils utilisent la taille et le contraste pour afficher leurs produits en action, tout en affichant les autres produits qu’ils ont aussi.

Utiliser la couleur à votre avantage

Lorsque vous utilisez des éléments visuels dans votre design, il doit y avoir une raison à cela. Que vous choisissiez d’utiliser la couleur, une de ces raisons est qu'habituellement elle va attirer l’attention sur cette partie du design ou séparer de la section suivante ou précédente.

Utiliser la couleur de cette façon peut être réellement efficace et constitue un moyen rapide de faire en sorte que vos éléments puissent atteindre le poids visuel que vous voulez qu’ils aient. Vous pouvez également savamment utiliser des couleurs avec le contraste des éléments afin que vous puissiez aider à attirer l’attention sur ce qui est plus important. Jouez avec la couleur de cette manière pour voir comment les couleurs que vous utilisez dans les icones, par exemple, pourraient éventuellement changer la perception et le message qui est dépeint pour cet élément spécifique dans votre design.

Fitbit are one of those companies that seem to get their brand and how they should work with it on the web - they use their colours consistently throughout their website - and also their other online services - and in their badge designs which helps subtly bring the whole design together
Fitbit est une de ces sociétés qui semblent font en sorte que leur marque et comment elle doit fonctionner sur le web soit une réalité - ils utilisent leurs couleurs constamment à travers tout leur site web - et aussi leurs autres services en ligne - et dans leur design de badge, qui contribue à subtilement rassembler tout le design.

N’oubliez pas la forme !

Forme est méconnue mais souvent oubliée quand il s’agit de nos éléments visuels. N’ayez pas peur de jouer avec la forme pour mélanger toutes vos images et votre contenu. Bien que les cercles soient très populaires dans le design d’aujourd'hui, n’hésitez pas à jeter un oeil à d’autres formes et voir comment vous pouvez les utiliser dans vos créations. Que ce soit la forme d’un icone ou de la façon dont vous masquez visuellement une photo, ça peut faire une différence sur l’impact que le design de votre site web peut avoir.


Schémas typiques de hiérarchie visuelle

Il y a un couple de mise en pages de composition visuelle qui peut nous aider quand nous essayons de travailler une hiérarchie visuelle forte. Celles-ci sont présentées en détail dans les articles portant sur la composition, mais sont brièvement mentionnés ici car ils peuvent vraiment aider à penser à la hiérarchie visuelle.

La mise en pages en Z

La mise en pages en Z est une disposition commune de composition que l'on voit dans de nombreux designs. Il se réfère à où le regard est attiré dans un schéma sur un site web, où il semble partir du haut à gauche, horizontalement vers la droite, en diagonale vers le bas pour la gauche, puis à travers vers la droite ; sous la forme de la lettre « Z ».

The Z-Layout as seen in action on BBC News
Le Z-Layout, comme on le voit en action sur BBC News.

Nombre d’or

La section d’or est bien connue dans les industries du print et du design. Elle fait référence à une façon particulière (très axée sur les mathématiques !) de découvrir quelle est la partie la plus efficace d’un design pour placer un élément et comment il peut prêter un poids visuel particulier à ces zones. Très similaire à la règle des tiers, le contenu principal est habituellement placé dans la plus grande partie de cette section avec moins de contenu important, secondaire placé dans la plus portion petite.

The golden ratio seen in action on Twitter Screenshot taken by Ryan Schroeder
Le nombre d’or, vu en action sur Twitter. Capture d’écran prise par Ryan Schroeder.

Cela peut très bien fonctionner avec nos éléments visuels - nous pouvons choisir de montrer des images plus importantes dans les plus grandes sections aux côtés de notre contenu principal, avec des images secondaires dans les sections plus petites. Nous pouvons aussi traverser ces deux, en utilisant éventuellement des photos moyennes qui s'alignent avec une autre colonne dans notre grille et se terminent à la fin de la section la plus faible - mais ça en vaut totalement la peine d'expérimenter pour voir ce qui fonctionne bien dans le cadre de votre propre création.


Devoirs

Maintenant, vous devriez savoir tout à propos de la hiérarchie, tant en ce qui concerne le contenu et visuellement. Vous devriez déjà avoir eu à vous amuser avec la hiérarchie de contenu, et maintenant je veux que vous fassiez la même chose, mais cette fois avec les éléments visuels sur votre page.  Observez s’ils sont en phase avec votre rythme vertical, et voyez comment vous pouvez les rendre visuellement plus intéressants ou contrastés et utilisez les techniques ci-dessus pour améliorer vos créations.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.