Construire la cohérence et les relations dans vos conceptions

Un élément clé de la composition consiste à comprendre comment créer de la cohérence dans vos conceptions et comment afficher les relations entre chacun des éléments de la page..


Construire Consis- Quoi?

Tout d’abord, l’un de vos principaux objectifs avec un site Web devrait être de renforcer la relation entre l’utilisateur et le site Web. La raison étant de créer confiance avec l'utilisateur, afin qu'il se sente à l'aise pour naviguer et interagir avec le site Web. Grâce à la conception et aux fonctionnalités, vous pouvez offrir à vos utilisateurs une meilleure expérience..

La cohérence de vos conceptions contribue également à renforcer votre marque et à garder le message de la marque clair. Pour un client, il est important pour son entreprise que le message de la marque (en ligne, hors ligne ou sur tout autre support) soit cohérent, car cela renforcera à nouveau la confiance avec sa clientèle. Si le message d'une marque est incohérent, déroutant ou difficile à comprendre, cela peut choquer les clients et peut même affecter les ventes et les demandes de renseignements, ce qui finit par avoir un effet néfaste sur les activités de vos clients..

Même vous-même, en tant qu’individu, devez comprendre l’importance de la cohérence dans votre marque. Vous êtes vous-même une marque. Même si vous avez un blog personnel, vous vous mettez sur le Web et devriez vous soucier de votre marque et de votre image. Parfois, en particulier dans le secteur du Web, il est encore plus important de créer une cohérence de marque pour vous-même, car cela contribue à vous différencier et à vous rendre unique..

Construire la cohérence et les relations dans vos conceptions consiste également à créer des relations entre les éléments individuels les plus petits de vos conceptions..


Le site Web gov.uk est extrêmement cohérent, reflétant le ton et le professionnalisme attendus du site Web du gouvernement..

Pourquoi c'est important

Ce n’est pas parce que vous travaillez sur le Web que les valeurs du marketing et du design hors ligne traditionnels doivent disparaître. Au lieu de cela, vous devriez rendre cette transition transparente.

Par exemple, si vous travaillez sur un site Web pour un magasin traditionnel (qui a des locaux de vente au détail!), Vous devez utiliser cette marque dans le design que vous avez créé pour son site Web. Vous voulez que les utilisateurs se sentent heureux et à l'aise de naviguer sur leur site Web, sachant que ce dernier leur est familier, même s'ils ne l'ont jamais visité auparavant. Dans l’ensemble, concevoir avec cohérence a pour résultat un système de conception et de conception plus solide et plus fiable.

Concevoir avec cohérence présente également un avantage pour vous, en tant que développeur. Avez-vous déjà reçu un motif incohérent, avec des marges, des polices et des tailles d'espacement très différentes? C'est vraiment énervant, n'est-ce pas? Si au lieu de cela vous concevez avec cohérence, vous pourrez repérer des motifs dans votre conception qui vous aideront lorsque vous en êtes au stade du développement, accélérant ainsi votre flux de travail de développement et réduisant le temps que vous devez consacrer à la détermination des tâches en dehors.

Il est également important de penser à la cohérence dans son ensemble. Plutôt que de simplement penser visuellement à ce à quoi les choses pourraient ressembler et comment les garder cohérentes, pensez plutôt aux interactions et aux comportements dans vos conceptions. Réfléchissez à la manière dont les utilisateurs vont interagir avec votre site Web, aux animations et à la manière dont différents éléments pourraient réagir aux commentaires des utilisateurs. Si vous modifiez radicalement ces modèles de page en page, vous ne pourrez que dérouter vos utilisateurs..


Chez inc, il y a un style visuel clair qui représente vraiment la marque sur tout leur site web.

Comment concevoir avec cohérence

Concevoir avec une cohérence en tête devrait être assez simple. Comme nous l'avons expliqué précédemment, la cohérence permet de maintenir visuellement une marque forte et de maintenir la relation entre une marque et ses utilisateurs, ou ses clients, à un niveau élevé..

Une technique de marketing ancestrale consiste à concevoir en répétant vos messages pour aider vos utilisateurs à se souvenir des choses. Bien que cela puisse être utilisé dans vos conceptions, c'est une cohérence d'une autre manière à laquelle je souhaite que vous réfléchissiez davantage..

Pensez à la façon dont vous concevez tous les éléments de votre conception, tels que:

  • couleur (focus, couleurs secondaires)
  • visuels (images, photos, icônes, boutons)
  • typographie (taille, hiérarchie, positionnement)
  • taille (du contenu, des images, des relations)

Pensez au style visuel de ces éléments et à la manière dont ils se comparent. Vous avez appris à utiliser la couleur, la taille et une hiérarchie visuelle pour cibler des éléments particuliers. Je souhaite maintenant que vous réfléchissiez à la manière dont vous pouvez rendre tous ces éléments cohérents. Tout comme nous n'utiliserions pas (normalement!) Huit polices de caractères différentes dans un paragraphe ou une zone de notre conception, nous devrions être identiques à nos autres éléments de conception..

Construire la cohérence dans vos conceptions concerne tous les petits détails qui pourraient passer inaperçus, mais même dans ce cas, leur fournirait inconsciemment une meilleure expérience. Cependant, ce sont les petits détails qui seront appréciés par ceux qui faire remarquez le temps et l'attention supplémentaires consacrés à ces choses supplémentaires.

Veillez également à être cohérent d'une page à l'autre (à moins que cela fasse spécifiquement partie de cette conception d'avoir une conception différente pour chaque page, par exemple sur un blog dirigé par des artistes). Mais même dans ce cas, il est extrêmement important d'être cohérent dans les éléments qui sont plus susceptibles rester le même, comme la position du logo ou de la navigation. Il est important de ne pas abandonner tous les aspects de votre conception et de vous familiariser avec les domaines les plus adaptés à la cohérence..

Le site Web OnSite a une excellente marque, avec un design simple qui reste fidèle tout au long de la page d'accueil et d'autres pages de haut niveau..

Construire des relations dans vos conceptions

Couleur

Comme expliqué dans les articles précédents de cette session, la couleur a un impact considérable sur les personnes et leur perception du design. Bien que vous ne puissiez pas vous concentrer sur les relations personnelles de chaque individu, vous pouvez utiliser la couleur dans un sens plus large pour créer une relation entre un public cible potentiel et votre conception..

La couleur a un impact sur les personnes personnellement - mentalement, via des émotions ou des sentiments, mais aussi physiquement - et cela peut se retrouver dans la marque, en construisant éventuellement des relations plus solides entre les utilisateurs et le site Web, si le message reste cohérent.

Ton et caractère

La tonalité est importante dans toute conception et impressionne grandement vos utilisateurs. La tonalité peut apparaître dans tous les aspects de votre conception, du contenu aux images en passant par tous les autres styles visuels..

Il est également tout à fait possible d'ajouter de la personnalité à une marque. Vous pouvez le faire grâce à ce que vous avez appris sur la couleur et la typographie. Des décisions subtiles comme celle-ci se reflètent dans la personnalité, que vous pouvez ensuite améliorer par le contenu et les images, créant ainsi un style visuel cohérent dans votre conception..

Perceptions de l'utilisateur

Pensez également à la manière dont un utilisateur pourrait associer avec votre marque, et comment ils le feraient ressentir à propos de ça. Pensez à comment vous pourriez vouloir que vos utilisateurs ressentent lorsqu'ils s'associent à la marque et tentent de refléter cela dans votre conception. Prenez les sentiments et les perceptions que vous souhaitez que vos utilisateurs aient et utilisez une cohérence dans vos éléments de conception pour projeter ces sentiments sur le site Web..

WooThemes a un style visuel et un ton remarquables qui sont définis sur l'ensemble de leur site Web - ce qui peut être plus difficile à faire lorsque vous avez de plus grands sites comme celui-ci..

Outils pour la cohérence des bâtiments

Vous pouvez créer vous-même ou fournir à vos clients de nombreux outils pour les aider à comprendre l'importance de la cohérence..

Guides de style

Un guide de style est presque comme un design et des directives de marque normaux avec lesquels vous pourriez travailler, mais au lieu d’être lié à la marque, il se rapporte plutôt à certains styles et éléments clés de la conception de votre site Web..

Voir: tuiles de style pour d'autres idées.

Bibliothèques de patrons

Les bibliothèques de motifs sont comme un pas en avant d'un guide de style; ils constituent un document de tous les styles possibles d'éléments inclus dans la conception de votre site Web. Des styles de texte aux styles de bouton en passant par les styles de liste et les motifs d'image, ces bibliothèques de motifs peuvent être très utiles pour la maintenance future de la conception d'un site Web et pour garantir la cohérence des modifications à venir..

J'aime penser aux bibliothèques de modèles pour trois domaines clés: les modèles de conception, les modèles de balisage et les modèles de contenu..

  • Modèles de conception: Tout élément de design que vous avez sur votre site web. Ce sera un document qui comprend tous les styles pour le texte, les en-têtes, les boutons, les icônes, etc..
  • Modèles de balisage: Il s'agit d'une copie HTML et CSS de la bibliothèque de modèles de conception - avec le code HTML approprié (et la classe CSS appropriée, si nécessaire) fourni pour la maintenance future de l'ajout de sections au site Web..
  • Modèles de contenu: Ceux-ci aident à dicter le style et le ton du contenu qui devrait être utilisé sur le site Web. Bien qu'il soit peu probable que vous puissiez fournir un contenu exact (car vous ne savez pas comment le site Web sera développé à l'avenir), vous pouvez au moins nous aider à donner le ton pour vos travaux futurs. Bien que le contenu ne soit pas nécessairement quelque chose que vous avez fourni à un client, il peut être judicieux de s’assurer qu’ils comprennent que le contenu n’est qu’un aspect de la cohérence de votre site Web - et bien que vous puissiez fournir les aspects conception et développement, il peut être difficile de les faire fonctionner aussi bien avec un contenu qui ne correspond pas au reste du site.

Listes de contrôle

Je suis un grand fan de listes et je pense qu'une chose très simple à faire pour vérifier la cohérence des éléments dans votre conception est de créer une liste de contrôle simple et facile..

  1. Tout d’abord, comment se présente la typographie? Est-ce cohérent? Les en-têtes sont-ils cohérents d'une page à l'autre? Le type tombe-t-il dans un joli rythme vertical sur la page? Le rythme vertical tombe-t-il à la place des images? Ou tout est beau?
  2. Images / cohérence visuelle; à quoi ressemblent les images? Est-ce que tout a un style et un ton similaires, ou existe-t-il des styles de photo très différents? Tout est-il recadré ou façonné de la même manière ou est-ce que tout est trop différent? Les tailles d'image sont-elles similaires ou ont-elles des tailles définies sur l'ensemble du design? Les icônes ont-elles la même taille, le cas échéant? Les boutons ont-ils le même remplissage et les mêmes espaces?
  3. Cohérence des couleurs; à quoi ressemblent les couleurs? Est-ce que les couleurs fonctionnent bien de page en page? Les couleurs sont-elles appropriées? Est-ce que les couleurs fonctionnent bien les unes avec les autres? Les couleurs sont-elles exactement les mêmes lorsqu'elles sont utilisées plus d'une fois?

Missions

Tout ce qui précède devrait vous aider lorsque vous essayez de créer une conception plus cohérente et qui vous aidera à établir des relations entre chacun de vos éléments. Je veux que vous utilisiez la liste de contrôle à la fin (ou créez la vôtre!) Pour voir à quel point votre conception est cohérente. Si ce n'est pas le cas, prenez le temps d'intégrer cette cohérence à vos conceptions..