Conseils d'utilisation du contraste pour améliorer la lisibilité

Un bon design est un design lisible. Sans message clair, affiché de manière simple à comprendre, il est facile de perdre le sens de tout travail de conception. C'est pourquoi il est si important que toute conception soit facile à lire.

Concevoir pour la lisibilité est une leçon de typographie, mais aussi de contraste. Le contraste est la clé pour améliorer la lisibilité et aider à créer un flux dans le texte de manière logique afin que les utilisateurs comprennent exactement ce que vous voulez dire.

Contraste de couleur

Le lettrage doit se distinguer de la toile. Il doit avoir une présence qui attire le regard.

Il existe de nombreuses façons de créer un contraste de couleurs, mais le plus populaire est le texte noir sur une toile blanche ou légère. Et c'est populaire parce que ça marche. (La combinaison opposée fonctionne aussi bien.)

Lors du placement de texte, il est essentiel de réfléchir à la manière dont les lettres apparaîtront sur l’arrière-plan. Sont-ils faciles à voir? Cette considération revêt une importance particulière lorsque vous travaillez avec des lettres au-dessus d’images ou de vidéos, les couleurs de l’arrière-plan pouvant être positionnées différemment en fonction de la taille de l’écran ou du mouvement du contenu.

L'un des moyens utilisés par les concepteurs pour résoudre ce problème consiste à superposer des couleurs sur des images ou des vidéos, ce qui crée un peu d'assurance de lisibilité. Qu'il s'agisse d'une transparence sombre ou d'une teinte claire, une superposition peut garantir que le texte apparaît comme prévu, indépendamment de ce qui se passe en arrière-plan.

L’autre option, qui gagne du terrain, consiste à supprimer du texte d’images ou de vidéos et à les jumeler côte à côte. Cela laisse de la place pour les deux éléments sans sacrifier le contenu de l’un ou de l’autre.

Styles de caractères contrastés

Les différences de typographie ou de style peuvent attirer immédiatement l’attention sur le lettrage. L’intérêt visuel augmente avec des polices de caractères assez différentes, telles que le script et le serif associés dans le traitement du logo principal de Le Farfalle.

Chaque caractère est intéressant en soi, mais la différence entre les deux crée toute la composition.

Associer des caractères de cette manière peut s'avérer un peu délicat, car certaines paires de styles très différents peuvent laisser les utilisateurs mal à l'aise. Optez pour des polices présentant des similitudes qui ne sont pas aussi évidentes pour l'utilisateur habituel, telles que des hauteurs x communes, des formes de lettre (vérifiez les minuscules pour voir si les styles sont arrondis ou plus ovales) ou en biais. En gardant une sensation similaire dans ces zones, les styles peuvent être mélangés et combinés de manière à créer beaucoup de contraste sans interrompre le flux du design.

Variabilité de la taille

Un moyen de surprendre les utilisateurs avec un contraste est d'utiliser un lettrage surdimensionné ou sous-dimensionné.

Une typographie surdimensionnée peut être très amusante à concevoir et constitue un moyen frappant d'inciter les utilisateurs à continuer à naviguer sur un site Web. Bien que les lettrages trop petits puissent être tout aussi efficaces, ils sont beaucoup plus difficiles à utiliser.

Associez des options surdimensionnées à des blocs de texte de taille plus traditionnelle pour mettre en évidence les différences entre les tailles de texte. Cela aidera à fournir un point central dans la conception et à rendre les gros mots impossibles à éviter. Continuez le thème au-delà du lettrage, et considérez également les sous-en-têtes légèrement plus grands que la normale, de sorte que le même concept surdimensionné et conciliant suive les utilisateurs tout au long de la conception.

Considérer les alignements

Beaucoup de gens oublient l'alignement quand il s'agit de lisibilité.

Il y a deux écoles de pensée:

  • Utilisez des alignements contrastés pour l'affichage et les en-têtes par rapport au texte.
  • Utilisez le même alignement pour tout.

Les deux idées sont justes à leur manière. Pensez à l'alignement du texte par rapport au reste de la conception. L'alignement fournit-il suffisamment de contraste pour sortir de l'arrière-plan? Cela peut inclure tout, de l'espacement entre le bord du canevas et du texte au placement en relation avec d'autres éléments.

En ce qui concerne l’alignement, la meilleure façon d’y réfléchir consiste peut-être à imaginer un bouton. Comment le texte est-il aligné dans le bouton? La plupart des concepteurs opteraient pour center, mais cela ne signifie pas que le reste du site Web inclura du texte centré. L'alignement est dicté par l'élément lui-même. Maintenant, réfléchissez à la conception dans son ensemble.

Flux de texte

Le flux de texte devient plus important avec le plus de texte inclus dans un dessin. Si les éléments de texte ne circulent pas de manière transparente et hiérarchique, les utilisateurs peuvent se perdre ou manquer des informations en les lisant de manière illogique.

Les considérations clés en matière de flux de texte incluent:

  • Taille des blocs de texte
  • Balles et listes
  • Hauteurs et longueurs de lignes
  • Gras ou italique
  • Couleur

Chacun de ces attributs de texte permet de différencier les mots clés, les informations et les phrases des autres. Ils fournissent des points d'entrée visuels pour la numérisation de texte, de sorte que les informations les plus importantes ressortent pour l'utilisateur.

L'utilisation de styles variés dans de longs blocs de texte - ceci est particulièrement important pour les contenus de forme longue ou les blogs - peut réduire la fatigue du lecteur. Si l'utilisateur est fatigué de lire la copie parce qu'il est difficile à regarder et à digérer, il n'en consommera pas le contenu. Découpez-le en plusieurs parties qui facilitent la lecture.

Gardez-le cohérent

La clé finale de la lisibilité est la cohérence. Quoi que vous fassiez sur la page d’accueil ou pour l’en-tête ou le corps du texte pour créer un contraste, restez-y.

L'utilisation des mêmes couleurs, styles ou traitements de type tout au long de la démonstration montrera aux utilisateurs qu'ils ne sont pas perdus dans la conception. Peu importe où la navigation les mène, il ressemblera toujours à votre site Web.

Ntgrate fait un travail de dieu en établissant un fond noir et blanc et une combinaison de blocs de texte dès le début. La combinaison de couleurs yin et yang est présentée au-dessus de l'image du héros dans l'en-tête. Les zones de texte suivantes du site contiennent le même texte et le même motif de couleur.

Conclusion

Le contraste est l'un des outils permettant d'établir un intérêt visuel pour tout projet de conception.Il est également important de créer une typographie lisible avec hiérarchie.

Le contraste élevé est l'option la plus lisible. Des couleurs en sourdine ou des styles trop similaires peuvent presque toujours poser des problèmes de lisibilité. Les utilisateurs peuvent facilement comprendre ce que vous voulez dire avec un design très lisible offrant beaucoup de contraste entre le texte et d’autres éléments.