Share
Il est important de se rappeler que la hiérarchie ne concerne pas uniquement le contenu et les mots que vous avez sur une page. Les images que vous incluez dans vos conceptions, des photos aux icônes, boutons et autres éléments visuels autres que le texte, ont un impact important sur la hiérarchie et la perception de votre site Web..
Lorsque vous concevez un site Web, les images que vous utilisez contribueront grandement à donner le ton du site, aux côtés de la couleur, de la typographie, etc. Si les éléments d'image visuels ne font pas partie du dessin, ils peuvent souvent briser l'impression que vous souhaitez définir..
Neonmob; tout sur les visuels sur leur site Web - et à juste titre, car il a tout à voir avec leur produit. Cependant, Neonmob affiche ses images de manière très réaliste, presque de façon quasi réaliste, comme si vous teniez les jeux de cartes eux-mêmes. C'est formidable, car cela permet de raconter plus d'une histoire. Créer une bonne hiérarchie visuelle implique de comprendre comment utiliser ces éléments visuels pour améliorer l'expérience des utilisateurs sur votre site web, sans interrompre le flux de contenu..
L'imagerie est également une autre forme de narration qui peut nous aider encore plus à expliquer à nos utilisateurs où ils doivent aller, ce qu'ils doivent faire et ce qu'ils peuvent attendre d'un site Web. Encore plus que la narration avec contenu, les images sont un moyen très visuel d'aider vos utilisateurs à raconter votre histoire..
L'utilisation d'éléments visuels, tels que des images et des icônes, permet également de créer des moyens plus attrayants et créatifs d'attirer l'attention des utilisateurs, vous permettant ainsi de mettre en évidence les zones clés d'un design sur lequel vous souhaitez mettre l'accent..
Passons en revue quelques conseils qui vous aideront à atteindre une forte hiérarchie visuelle..
Les images dans votre conception décrivent le ton de votre site Web. Si le style que vous souhaitez afficher est professionnel, décontracté, décontracté, pratique (ou tout autre style), vous devez vous assurer que vos images reflètent bien cette image..
Il est important que vous utilisiez des images pour améliorer votre site Web, plutôt que de devoir disposer d'images en place pour vous aider à expliquer ce que l'utilisateur devrait faire. Un site Web sans images devrait toujours pouvoir raconter la même histoire que s'il disposait des images en place, car les images sont là pour améliorer cette histoire et la rendre encore meilleure. Cependant, les images ne sont pas une idée après coup; il faut toujours leur montrer le soin et l'attention que vous devez porter aux autres zones de la conception afin qu'elles fonctionnent aussi bien que possible avec votre contenu.
Hopskoch doit informer ses utilisateurs de son produit. Pour ce faire, il le montre en action. Ce type de visuel unique puissant fonctionne bien car il permet d'attirer immédiatement l'attention des utilisateurs.. Ne présumez jamais que vos images sont faciles à comprendre. Je recommanderais toujours que vos images comportent une légende ou un sous-titre pour aider les utilisateurs à comprendre votre récit et à établir un lien entre l'image et le texte. Cela rend également votre contenu accessible dans des circonstances où les images sont peut-être désactivées.
Tout dépend du style du site Web et du niveau de conception que vous souhaitez publier, mais vous devez décider si vous souhaitez utiliser la photographie d'archives ou la photographie personnalisée..
Personnellement, je pense toujours que la photographie de stock peut paraître assez générique, en particulier si vous recherchez un look de bureau standard. Cela dit, la photographie personnalisée peut aussi se retrouver de cette façon, surtout si elle est délibérément prise dans un sens ringard..
La photographie personnalisée, en particulier lorsqu'un photographe professionnel est embauché, peut avoir un effet brillant sur vos conceptions, car elle vous donne souvent l'effet de levier visuel dont vous avez besoin pour relever un dessin et ajouter un contraste visuel..
Parfois, il peut également s'avérer nécessaire de réaliser des photographies personnalisées, telles que les sites Web de commerce électronique, et il est important de se rappeler que vous devez disposer de photographies qui correspondent également au style et à la convivialité de votre conception. Sinon, vous courez le risque d'avoir un site Web magnifiquement conçu et des photographies époustouflantes, mais qui paraissent disjoints quand ils sont associés.
Hopskoch utilise également des icônes personnalisées pour afficher son produit et son fonctionnement. Si cela avait été fait dans un style stock / défaut, le message de la marque et son apparence n'auraient pas été deux fois moins forts.. Une petite chose à considérer est la taille des images que vous utilisez. Si possible, essayez de conserver des images qui fonctionnent avec le rythme vertical que vous avez créé précédemment. Cela aidera ensuite à maintenir le flux de contenu en mouvement et à ne pas se sentir bégayer ou difficile à poursuivre en naviguant dans.
Sachez également que la taille réelle des images et des éléments visuels que vous utilisez aura une incidence sur la façon dont le contenu est lu. Vous ne voulez pas créer un contraste trop brutal entre la taille des images et le texte, sinon cela deviendrait illisible et interromprait complètement le flux. Cela dit, vous pouvez bien sûr enfreindre cette règle et, lorsqu'il est utile de créer des images plus grandes, n'hésitez pas à les utiliser et à ajouter un intérêt visuel à la page..
Fitbit est tout au sujet du produit - et ils utilisent la taille et le contraste pour aider à afficher leurs produits en action, tout en affichant les autres produits qu'ils ont également. Lorsque vous utilisez des éléments visuels dans votre conception, il doit y avoir une raison à cela. Quelle que soit la couleur choisie, l’une de ces raisons est généralement d’attirer l’attention sur cette partie du dessin ou de la séparer de la section suivante ou de la section précédente..
L'utilisation de la couleur de cette manière peut s'avérer très efficace et constitue un moyen rapide de vous assurer que vos éléments peuvent atteindre le poids visuel que vous souhaitez qu'ils aient. Vous pouvez également utiliser la couleur de manière intelligente avec des éléments contrastés afin d'attirer l'attention sur ce qui est le plus important. Jouez avec les couleurs de cette manière pour voir comment les couleurs que vous utilisez dans certaines icônes, par exemple, pourraient éventuellement changer la perception et le message représentés pour cet élément particulier de votre conception..
Fitbit est une de ces entreprises qui semblent avoir leur marque et comment elles doivent l’utiliser sur le Web - elles utilisent leurs couleurs de manière cohérente sur tout leur site Web - ainsi que leurs autres services en ligne - et dans la conception de leurs badges, ce qui contribue subtilement à ensemble du design ensemble. La forme est l’une de ces choses sous-estimées mais souvent oubliées en ce qui concerne nos éléments visuels. N'ayez pas peur de jouer avec les formes pour mélanger le contenu et les images. Bien que les cercles soient très populaires dans les conceptions actuelles, n'hésitez pas à regarder d'autres formes et à voir comment vous pouvez les utiliser dans vos conceptions. Qu'il s'agisse de la forme d'une icône ou de la manière dont vous masquez visuellement une photo, tout cela peut faire toute la différence pour l'impact de la conception de votre site Web..
Deux dispositions de composition visuelle peuvent nous aider lorsque nous essayons de travailler dans une hiérarchie visuelle forte. Celles-ci sont discutées plus en détail dans les articles de composition, mais sont brièvement mentionnées ici car elles peuvent réellement aider à penser visuellement à la hiérarchie..
La mise en page Z est une mise en page compositionnelle courante que l'on retrouve dans de nombreux modèles. Il fait référence au motif où l'œil est tracé selon un motif sur un site Web, où il apparaît en haut à gauche, de droite à gauche, en diagonale à gauche et de nouveau à droite; sous la forme de la lettre 'Z'.
Le Z-Layout vu en action sur BBC News. La section d'or est assez bien connue dans les industries de l'impression et du design. Il fait référence à un moyen particulier (très mathématique!) De découvrir quelle est la partie la plus efficace d'un dessin pour placer un élément et comment il peut donner un poids visuel particulier à ces zones. Très semblable à la règle des tiers, le contenu principal est généralement placé dans la plus grande partie de cette section, le contenu secondaire moins important étant placé dans la plus petite partie..
Le nombre d'or, vu en action sur Twitter. Capture d'écran prise par Ryan Schroeder. Cela peut également très bien fonctionner avec nos éléments visuels - nous pouvons choisir de montrer des images plus importantes dans les grandes sections, parallèlement à notre contenu principal, avec des images secondaires dans les petites sections. Nous pouvons également les croiser, en utilisant éventuellement des photos de taille moyenne alignées sur une autre colonne de notre grille et se terminant à la fin de la plus petite section - mais il est tout à fait intéressant d'essayer de voir ce qui fonctionne bien dans le contexte de votre propre conception..
Vous devez maintenant tout savoir sur la hiérarchie, tant en ce qui concerne le contenu que visuellement. Vous devriez déjà avoir eu un jeu avec la hiérarchie de contenu et maintenant je veux que vous fassiez de même, mais avec les éléments visuels de votre page. Assurez-vous qu’ils s’alignent sur votre rythme vertical, voyez comment vous pouvez les rendre visuellement plus intéressants ou plus contrastés et utilisez les techniques ci-dessus pour améliorer vos conceptions..
Accentsconagua