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 de contenu grâce au design

by
Length:ShortLanguages:
This post is part of a series called Design School for Developers.
An Introduction to Hierarchy
Building Visual Hierarchy into Your Designs

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

Retour au début de cette série, nous avons parlé beaucoup de contenu et de l’importance que le contenu a sur le travail de design. C’est quelque chose qui devrait évidemment être regardé et trié avant de commencer n’importe quel projet, mais vous pouvez seulement voir les vrais résultats de ce travail dès que vous commencerez à designer.

Lorsque nous travaillons avec du contenu au début du processus, nous devrions essayer de mettre en place une structure qui fonctionne pour le contenu. Nous devons également penser aux étapes croquis et wireframing du processus. Ici, nous avons examiné les idées que nous avons eu pour la mise en pages de notre contenu d’une manière qui a bien fonctionné et avait une bonne hiérarchie. Maintenant, nous voulons faire en sorte que cette hiérarchie de contenu fonctionne visiblement et visuellement grâce à nos créations.

The Fusion Ads homepage uses content to introduce the user to its product, whilst also showing the product in action.
La page d’accueil de Fusion Ads utilise le contenu pour présenter son produit à l’utilisateur tout en montrant également le produit en action.

Alors, comment procédons-nous ? Tout d’abord nous devons décider ce qui dans notre contenu est pertinent pour nos utilisateurs et pourquoi - nous devons être en mesure de justifier les décisions que nous prenons. Il faut aussi regarder ce qui doit être la priorité dans notre contenu, le bout d’information à auquel nous voulons vraiment que nos utilisateurs fassent attention. Ensuite, nous devons commencer à traduire cela en une forme plus visuelle.

Nous faisons cela en mettant en pages le contenu d’une manière qui est liée à notre structure originale de contenu souhaité. Ce n’est pas juste à propos des titres et paragraphes non plus, nous devons penser davantage à la façon dont le contenu se lit une fois qu'il est sur la page, et où l'emphase doit être mise sur tous les différents éléments. Dès que nous aurons un quelconque contenu de base en place, nous pouvons commencer à utiliser différents outils et aides pour aider à concentrer notre attention sur l’apport de certains bouts qui doivent être soulignés plus fortement et se distinguent le plus.

At the bottom of the Fusion Ads homepage, they have a FAQ where all the information is balanced and easy to read, which is super important for those kinds of content.
Au bas de la page d’accueil de Fusion Ads, ils ont une FAQ où toutes les informations sont équilibrées et faciles à lire, ce qui est super important pour ces types de contenu.

Outils et aides pour vous aider

Échelle & contraste

L'échelle peut concerner à la fois la taille des bouts individuels de contenu que vous avez dans votre design, mais aussi des autres éléments, tels que des images, et comment ils ne rivalisent pas les uns avec les autres. Par exemple, utilisez l'échelle pour attirer l’attention sur les titres principaux. Veillez à ce qu’ils soient peut-être plus grands que le contenu principal montre qu’ils ont un niveau différent d’importance et sont une chose à laquelle l’utilisateur doit faire attention.

L'échelle est également bien pour décomposer le contenu de votre page en petits morceaux et en mettant l’accent sur des petites parties de contenu qui sont importantes. Vous pouvez également utiliser l'échelle pour éloigner l’emphase de certains éléments ou bouts de contenu que vous voulez rendre moins visibles ou qui ne sont pas aussi importants que le reste. Cela se rattache aussi fortement au contraste - création d’une hiérarchie de contenu plus visuelle qui est tout à fait contrastée ajoute à l’impact visuel dans votre design.

Graisse et styles de polices de caractères

Utiliser habilement les graisses et styles de polices de caractères est une excellente façon d’ajouter une emphase subtile aux bouts de votre contenu qui pourraient être intercalés et pointillés autour avec le reste du contenu principal que vous avez. Se servir de polices de caractères qui sont plus lourdes que le reste de votre contenu (comme la version "bold" d’une police que vous avez dans votre design) ou dans un style de police différente (telle que l’italique) peuvent être bien pour accentuer des petits bouts de contenu, vous pouvez les ressortir et leur donner un peu plus de reconnaissance, sans envahir le reste du design.

Également, utiliser des graisses et des styles polices de caractères pour ajouter des effets met fortement de l'emphase sur vos créations. Par exemple, si le style de design le permet, alors utiliser la graisse « light » d’une police (qui est souvent beaucoup plus mince que la graisse normale de polices de caractères) peut bien fonctionner pour renforcer l’impact de grands titres, comme vous pouvez le voir dans l’exemple ci-dessous.

Although many of the A List Apart articles are extremely content-heavy, they still manage to display that content in a really balanced, digestible way - and their use of different font sizes and styles helps with this.
Tout comme bon nombre d'articles de A List Apart soient extrêmement riches en contenu, ils parviennent encore à afficher le contenu d’une façon vraiment équilibrée et digeste. Leur utilisation des styles et des tailles de police différentes aide à cela.

Couleur

La variation de couleur est un autre moyen avec lequel vous pouvez diviser et afficher le contenu de vos créations. Cela ne signifie pas que vous allez éclabousser de la couleur partout, utilisez la plutôt pour ajouter subtilement de l'emphase aux zones de votre design, que ce soit en obturant les zones de contenu ou en l’utiliser dans votre contenu pour mettre de l’emphase au texte qui en aurait besoin.

Alignement et position

Comment vous positionnez votre contenu a un grand impact sur la façon dont il est perçu par vos utilisateurs. Veillez à travailler sur votre système de grille et aligner votre contenu est super important. L’alignement crée également l’ordre dans votre design, aide à raconter l’histoire de votre site web et guider vos utilisateurs dans un parcours à travers votre site web.

Colour, alignment and grids play a large part in The Verge's website design. There's a lot of content to look at, but using colour they can make it easier to focus on what modules or bits of text are different to each other.
Couleur, alignement et grilles jouent une grande partie dans le design du site web de The Verge. Il y a beaucoup de contenu à regarder, mais se servir de la couleur peut rendent plus facile de se concentrer sur les modules ou des bouts de texte qui sont différents les uns des autres.

Proximité et espace vierge

En regardant de près ou de loin comment les éléments sont espacés dans votre design est essentiel à la construction d’une hiérarchie de contenu visuelle qui a de l'impact et du sens. Si les éléments qui sont liés sont trop éloignés, cela cassera le flux pour l’utilisateur lorsqu’il lira la page. Toutefois, la même chose peut être dite des éléments qui sont beaucoup trop espacés ou trop rapprochés. Les choses qui sont trop à l’étroit vont être difficiles à comprendre en ce qui concerne ce qui a le plus d'importance ou devrait avoir le plus d'emphase. En tant qu’utilisateur, il va alors être difficile de comprendre comment trouver votre chemin.

Gridset use a lot of whitespace on their homepage - along with different text styles and accompanying imagery - to highlight key features and examples.
Gridset utilise beaucoup d’espace vierge sur sa page d’accueil - ainsi que les styles de texte différents et d’images d'accompagnement - pour mettre en évidence des exemples et fonctionnalités principales.

Devoirs

Maintenant vous connaissez les différentes façons dont vous pouvez ajouter du poids visuel ou de l'emphase à des éléments particuliers, je veux que vous les mettiez en pratique dans votre propre design. Essayez d’intégrer chacune des techniques affichées ci-dessus pour ajouter plus de hiérarchie de contenu visuelle dans votre design.

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.