La cohérence rendra votre conception meilleure, plus facile à utiliser et pratiquement invisible. Cela donne à l'utilisateur beaucoup d'espace pour expérimenter le design de la façon dont vous le souhaitez.
La conception de la cohérence est une évidence dans certains cas et un peu plus difficile à comprendre dans d'autres. Tout simplement, la cohérence est le fil conducteur qui unit les éléments dans une même conception. Il associe également les conceptions d'une même campagne ou d'une même marque à la création d'un produit distinct, utilisable et efficace. Prenez note de tous les exemples ci-dessous, chaque marque est un chef de file en matière de conception cohérente et utilisable.
1. Couleurs et teintes dominantes et secondaires
Il y a une raison pour laquelle il y a tant d'informations disponibles sur la création de superbes palettes de couleurs. La couleur peut être l'un des facteurs visuels clés qui lient une marque à un traitement visuel.
Un identificateur de couleur spécial peut indiquer aux utilisateurs qui vous êtes en un coup d'œil. Pensez à la manière dont certaines des plus grandes marques au monde - Coca-Cola, Facebook, T-Mobile - sont identifiées par une couleur. Reconnaîtriez-vous même ces marques sans leur couleur de signature?
Une bonne utilisation des couleurs aide également les utilisateurs à naviguer sur un site Web tout en sachant qu'ils se trouvent toujours au bon endroit. Si chaque clic vous menait à une page avec une nouvelle palette de couleurs, vous demanderiez si vous étiez au bon endroit?
Pour créer une belle palette de couleurs, choisissez une couleur dominante et utilisez les concepts de la théorie des couleurs pour ajouter une ou deux couleurs secondaires. Ensuite, notez un ensemble rapide de règles de style et d'utilisation pour chaque couleur et son utilisation dans le design. Tenez-vous en aux règles et vous avez la cohérence des couleurs. (Bonus: Créez une palette de couleurs estivale amusante.)
2. Taille, espacement et position de la typographie
Tout comme la couleur doit être basée sur une palette de règles de style, la typographie nécessite le même traitement. Et facile pour vous, le concept est le même que celui de la couleur.
- Choisissez une police et une taille dominantes.
- Choisissez des caractères et des tailles secondaires.
Cela peut être un peu plus complexe que celui de la typographie pour le Web, mais vous avez l’idée, non? En ce qui concerne les styles Web, vous devez associer des traitements de types spécifiques, la taille, l’espacement et le positionnement au CSS afin que chaque balise (telle que h1, h2, h3, body, etc.) appelle l’option de type appropriée.
Les autres types utilisés dans un seul endroit, comme la navigation, doivent être cohérents dans l’ensemble de cet élément. Les utilisateurs seront plutôt confus si chaque élément de navigation utilise un type de caractère différent. Cette cohérence s’applique sur l’ensemble du site; tous les éléments similaires doivent utiliser les mêmes traitements de texte.
3. Taille et relations des éléments
Quelle est la taille des éléments de votre conception? Est-ce que tous les boutons ont la même taille? Qu'en est-il des titres et des photos?
La taille des éléments doit être dictée par le style et rester la même pour chaque utilisation. (Imaginez à quel point votre curseur sera amusant si vous essayez de créer des photos de formes différentes. Cela ne fonctionnera pas.)
La taille commune et les relations entre les éléments aident les utilisateurs à voir les modèles et à créer un flux visuel. Ces points communs créent une harmonie et un équilibre qui rendent un design facile à digérer et fidélisent les utilisateurs.
4. L'espace et son utilisation
L'espace entre eux est tout aussi important que la taille des éléments. Il n'y a rien de plus gênant qu'un dessin où des éléments semblent simplement être déversés sur la toile, sans organisation ni règle - certaines photos se chevauchent alors que d'autres peuvent avoir beaucoup d'espace entre elles.
Le meilleur moyen d’établir des règles d’espacement communes et de s’en tenir à de telles règles consiste à utiliser un système de grille. Cet ensemble de lignes invisibles vous aidera à déterminer où et comment placer des éléments afin que chaque bloc, du texte aux boutons en passant par les images, s'harmonise parfaitement.
Lorsque vous songez à l’espace, n'oubliez pas de vérifier l’espacement constant verticalement et horizontalement. Cela inclut l'examen de la relation entre les éléments similaires et ceux qui sont différents. (C'est bien d'avoir des règles d'espacement pour chacun.)
5. Des visuels qui traversent des médiums
Les éléments visuels de la marque, tels que les images et les illustrations, doivent être diffusés sur plusieurs supports. Que vous conceviez un projet pour un site Web, une brochure, un babillard ou des médias sociaux, l'identité visuelle de la marque ne devrait pas changer.
Cela implique souvent l'utilisation d'un ensemble de photos commun. Certaines marques appliquent des règles détaillées concernant l’utilisation des éléments visuels - des superpositions de couleurs ou des filigranes sur toutes les images à un certain rapport hauteur / largeur pour toutes les photos. Indépendamment de ce que vous voulez que votre style soit, l'important est d'utiliser quel que soit le lieu.
Pour que cela soit le plus efficace possible, il est important de disposer d’un excellent ensemble de visuels contenant des images de haute qualité et haute résolution que vous pouvez utiliser et réutiliser.
6. Les modèles d’utilisateur qui fonctionnent naturellement
Votre conception doit fonctionner comme d’autres conceptions similaires et suivre les modèles d’utilisateur acceptés. Trop souvent, les concepteurs veulent faire quelque chose de différent avec la façon dont les choses fonctionnent. ne tombez pas dans ce piège.
Si un site Web, une application ou un élément imprimé fonctionne comme le souhaitent les utilisateurs, ils peuvent interagir facilement. Ils sauront quoi faire et le design devient quelque peu invisible à mesure que la convivialité transparaît. (Ceci est votre objectif réel en tant que designer.)
Il existe quatre types de modèles communément acceptés à considérer:
- Modèles de contenu: style et ton du contenu et de votre marque
- Modèles de balisage: HTML et CSS à concevoir sur plusieurs pages et sur l'ensemble du site
- Modèles de conception: l'aspect de chaque élément de la conception et de tous les styles associés
- Modèles d'utilisateur: comment les utilisateurs interagissent avec des éléments de conception tels que des boutons, des menus ou des icônes
7. éléments de l'interface utilisateur qui collent
Ce n'est pas une navigation difficile, mais c'est une idée similaire.
Chaque interaction et élément d'interface doit se comporter de la même manière.
- Les liens s'ouvrent directement ou dans un nouvel onglet (choisissez-en un pour chaque lien)
- Les boutons sont de la même couleur
- La navigation reste au même endroit et inclut les mêmes options
- Les pieds de page et les barres latérales doivent contenir un emplacement et une taille spécifiques (ne faites pas un pied de page énorme sur une page et minuscule sur la suivante).
- Les icônes sont reconnaissables et font ce que les utilisateurs attendent
- Les éléments cliquables sont toujours cliquables (comme les photos qui sont liées)
La liste à propos de est un tremplin qui présente tous les petits détails auxquels vous devez penser en termes de rigidité et de convivialité. Rappelez-vous que si vous autorisez un élément à exécuter une action, celle-ci devrait être universelle.
Conclusion
La cohérence de la conception crée la structure souhaitée par les utilisateurs. Il crée également un cadre que les utilisateurs comprennent, contribuant à la convivialité et à l’engagement globaux.
Cela commence par un ensemble de règles et un guide de style pour chaque projet. Même si vous travaillez seul, créez une liste de règles indiquant comment un projet utilisera les couleurs, le type, la taille, l'espace, les éléments de l'interface utilisateur et les interactions. Cela accélérera le processus de conception pour vous et conduira à une conception meilleure et plus utilisable.