Création de la hiérarchie de contenu via la conception

Il y a bien longtemps, au début de cette série, nous avons beaucoup parlé de contenu et de son importance dans tout travail de conception. C'est quelque chose qui doit évidemment être examiné et trié avant de commencer tout projet, mais vous ne pouvez voir les résultats réels de ce travail qu'une fois que vous avez commencé à concevoir..

Lorsque vous travaillez avec du contenu au début du processus, nous devrions essayer de définir une structure qui fonctionne pour le contenu. Repensez également aux étapes du processus de dessin et de fil de fer. Ici, nous avons examiné les idées que nous avions pour présenter notre contenu d’une manière qui fonctionnait bien et qui présentait une bonne hiérarchie. Maintenant, nous voulons que cette hiérarchie de contenu fonctionne de manière visible et visuelle à travers nos conceptions..

La page d'accueil Fusion Ads utilise du contenu pour présenter l'utilisateur à son produit, tout en le montrant en action..

Alors, comment faisons-nous cela? Premièrement, nous devons déterminer ce qui, dans notre contenu, présente un intérêt pour nos utilisateurs et pourquoi: nous devons pouvoir justifier les décisions que nous prenons. Nous devons également déterminer quel doit être le centre de notre contenu, le type d'informations auquel nous voulons vraiment que nos utilisateurs prêtent attention. Ensuite, nous devons commencer à traduire cela en une forme plus visuelle.

Pour ce faire, nous présentons le contenu de manière à correspondre à la structure de contenu souhaitée. Il ne s'agit pas uniquement d'en-têtes et de paragraphes, nous devons réfléchir davantage à la lecture du contenu une fois qu'il est affiché sur la page et à l'accent mis sur tous les éléments. Une fois que nous avons mis en place un contenu de base, nous pouvons commencer à utiliser différents outils et aides afin de concentrer notre attention sur le renforcement de certains éléments qui doivent être soulignés et mis en évidence davantage..

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 extrêmement important pour ce type de contenu..

Outils et aides pour vous aider

Taille et contraste

La taille peut correspondre à la fois à la taille des différents éléments de contenu de votre conception, à d'autres éléments, tels que des images, et à la manière dont ils s'opposent. Par exemple, utilisez la taille pour attirer l’attention sur les titres principaux. S'assurer qu'ils sont peut-être plus volumineux que le contenu principal montre qu'ils ont un niveau d'importance différent et que l'utilisateur doit y prêter attention..

La taille permet également de diviser le contenu de votre page en fragments plus petits et de mettre l'accent sur les petites parties du contenu qui sont importantes. Vous pouvez également utiliser la taille pour prendre l'emphase une façon de certains éléments ou éléments de contenu que vous souhaitez voir moins perceptibles ou qui ne sont pas aussi importants que le reste. Cela est également étroitement lié au contraste - créer une hiérarchie de contenu plus visuelle qui contraste assez ajoute à l'impact visuel de votre conception..

Poids et styles de police

Utiliser intelligemment les styles et les pondérations de police est un excellent moyen d'ajouter une emphase plus subtile aux parties de votre contenu qui pourraient être intercalées et dispersées avec le reste du contenu principal que vous avez. L'utilisation de grammages de police plus lourds que le reste de votre contenu (comme une version en gras d'une police de caractères que vous avez dans votre conception) ou dans un style de police différent (tel que l'italique) peut être très utile pour mettre davantage l'accent sur de petits éléments de contenu. peut vouloir sortir et donner un peu plus de reconnaissance, sans dominer le reste de la conception.

Utilisez également des poids et des styles de police pour ajouter un impact et une emphase forte à vos conceptions. Par exemple, si le style de conception le permet, l'utilisation d'un caractère de caractère "léger" (qui est souvent beaucoup plus fin que les poids de police standard) peut s'avérer très utile pour renforcer l'impact des gros titres, comme dans l'exemple ci-dessous..

Bien que de nombreux articles de A List Apart soient extrêmement chargés en contenu, ils parviennent toujours à afficher ce contenu de manière très équilibrée et digestible. Leur utilisation de différentes tailles et styles de polices facilite cette tâche..

Couleur

La variation des couleurs est un autre moyen efficace de diviser et d’afficher du contenu dans vos conceptions. Cela ne signifie pas que vous projetez des couleurs partout, mais que vous les utilisez pour ajouter une touche subtile aux zones de votre conception, soit en bloquant des zones de contenu, soit en l'utilisant dans votre contenu pour mettre davantage l'accent sur le texte qui pourrait l'exiger..

Position et alignement

La façon dont vous positionnez votre contenu a un impact important sur la façon dont il est perçu par vos utilisateurs. Il est extrêmement important de veiller à ce que vous travailliez sur votre système de grille et aligniez bien votre contenu. L'alignement crée également de l'ordre dans votre conception, contribuant ainsi à raconter l'histoire de votre site Web et à guider vos utilisateurs dans leur parcours sur votre site Web..

La couleur, l'alignement et les grilles jouent un rôle important dans la conception du site Web de The Verge. Il y a beaucoup de contenu à regarder, mais en utilisant la couleur, il est plus facile de se concentrer sur les modules ou les morceaux de texte qui sont différents les uns des autres..

Proximité et espace blanc

Il est essentiel d'examiner l'espacement des éléments distants ou distants de votre conception pour créer une hiérarchie de contenu visuel qui ait un impact et qui a un sens. Si les éléments liés sont trop éloignés l'un de l'autre, le flux sera interrompu pour l'utilisateur lorsqu'il lit la page. Cependant, on peut en dire autant des éléments beaucoup trop rapprochés. Les choses qui sont trop à l'étroit vont être difficiles à comprendre en termes de ce qui a le plus d'importance ou devrait avoir le plus d'importance. En tant qu'utilisateur, il sera alors difficile de comprendre comment s'y retrouver..

Gridset utilise beaucoup d'espaces sur sa page d'accueil, ainsi que différents styles de texte et images associées, pour mettre en évidence des fonctionnalités clés et des exemples..

Missions

Maintenant que vous connaissez différentes manières d'ajouter du poids visuel ou de mettre l'accent sur des éléments particuliers, je souhaite que vous mettiez cela en pratique dans votre propre conception. Essayez d’intégrer l’une des techniques présentées ci-dessus pour ajouter davantage de hiérarchie de contenu visuel à votre conception..