Conception De L'interface Utilisateur
Conception pour la lisibilité - Un guide de typographie Web (avec infographie)
Le choix d'une police peut être fait par pratiquement n'importe qui - il suffit de cliquer sur un nom dans une liste déroulante. Et pourtant, en choisissant la droite la police de caractères est l'une des décisions les plus délibérées du processus de conception.
Concepteurs de typographie consacrent leur carrière à la création de formes de lettres. Dans ces petites formes, les experts équilibrent des choses comme l'émotion et la neutralité, la personnalité et l'aspect pratique, la lisibilité et la flexibilité. La sélection d'une police pour un dessin particulier s'accompagne d'une longue liste de considérations.
Traditionnellement, les graphistes ont toujours étudié les fondamentaux de la typographie en termes de conception d'impression. Mais comme le rôle du designer s'étend désormais à tous les types de supports numériques, la typographie est une plus grande bête à apprivoiser. Dans l'esprit de rafraîchir les principes de base, utilisez les conseils de typographie Web ci-dessous lors de la sélection d'une police et de sa mise en forme pour une meilleure expérience de lecture.
Les défis de la typographie numérique
En ce qui concerne la conception d'impression, il y a peu de variables dans la façon dont un utilisateur interagira avec elle. Une page imprimée ne changera pas de forme en fonction de la personne qui la tient: les couleurs peuvent être étroitement contrôlées et la police restera statique. Quel luxe. La typographie numérique est beaucoup plus fluide. Lorsque la typographie apparaît à l'écran, de nombreux facteurs contribuent à son affichage, dont certains incluent:
- Taille de l’écran: il est toutefois impossible de prévoir Conception réactive vise à s'adapter à tout léger changement de dimensions. Mais cela signifie que la composition peut parfois être faite en vain.
- Résolution de l'écran: la densité de pixels joue un grand rôle dans la lisibilité du texte. Les progrès technologiques ont rendu les écrans haute résolution plus accessibles aux masses, mais designers devrait garder à l'esprit les valeurs aberrantes avec des technologies plus anciennes.
- Calibrage de l'écran: les niveaux de luminosité déterminent la façon dont les couleurs apparaissent à l'écran. Les choix de couleurs pour la conception Web doivent s'adapter à tous les types de paramètres d'écran.
Choisir la meilleure police pour la lecture à l'écran
La conception numérique est un métier insaisissable. Il n'y a pas si longtemps, nous étions limités à seulement quelques polices compatibles avec les moniteurs basse résolution.
Nous avons fait des pas de géant dans notre options de police . Ils ont été conçus pour l'écran et sont conçus avec certaines nuances qui améliorent la lisibilité. Tout comme les polices imprimées trompent l'œil pour augmenter la lisibilité, comme pièges à encre , les bonnes polices Web feront de même.
Il n'est pas nécessaire qu'un dessin se limite aux polices de caractères universellement standard (Times New Roman peut maintenant être retiré). Il existe d'innombrables options permettant aux concepteurs de trouver des polices de caractères sécurisées pour le Web et accessibles. Polices Google , Bibliothèque de polices , et Adobe Typekit sont quelques-uns qui offrent une intégration facile et un large éventail de choix.
Formatage pour une expérience de lecture agréable
La sélection d'une police n'est que le début. Les décisions concernant la longueur et la hauteur des lignes peuvent faire ou défaire une conception numérique. Il existe des conseils simples: ne jamais utiliser toutes les majuscules et limiter le nombre de polices au minimum, mais de nombreuses décisions de mise en forme reposent sur des essais et des erreurs.
La taille de texte idéale dépend de la police choisie, car des facteurs tels que la hauteur d'x et l'ouverture du comptoir auront un impact sur la lisibilité. La taille du texte déterminera alors la hauteur et la longueur de la ligne. Un moyen simple de tester la relation entre ces décisions consiste à utiliser des outils tels que Amant de la grille , qui utilise des curseurs pour modifier l'apparence de chaque mesure.
Le choix de la couleur d'arrière-plan derrière un bloc de texte est tout aussi important que la couleur de la police elle-même. Le contraste entre les deux déterminera la lisibilité de la copie. WebAIM Vérificateur de contraste aide à déterminer facilement le rapport de contraste des combinaisons de couleurs afin qu'une palette réponde aux normes d'accessibilité.
Ne lésinez jamais sur les tests
Un guide est utile lors de la conception d'une expérience à l'écran, mais il y a trop de facteurs pour savoir quand une conception est réussie sans la regarder in situ. Testez la typographie sur les écrans et les paramètres d'affichage qui se situent à la limite de la moyenne, tels que les smartphones presque obsolètes, les plus grands moniteurs haute résolution et les écrans dont la luminosité est aveuglante. Les conceptions qui passent des conditions extrêmes sont prêtes pour un accès utilisateur complet.
Un guide de la typographie Web
Il y a beaucoup de choses à considérer lors de la conception de l'écran, et à mesure que la technologie et les produits progressent, les conditions de conception changeront continuellement. Cependant, en ce qui concerne la typographie, il y a certaines choses qui semblent toujours être vraies.
Voici un guide complet pour choisir la bonne police de caractères et la mettre en forme pour une meilleure lisibilité.
Lectures complémentaires sur le blog ApeeScape Design:
- Disséquer les subtilités de l'anatomie typographique
- Comprendre les nuances de la classification des polices
- Words Matter - La vraie valeur de UX Copy
- Création d'un guide de style d'interface utilisateur pour une meilleure expérience utilisateur
- Les principes de base de la refonte d'un site Web - Une étude de cas
Comprendre les bases
Qu'est-ce que la typographie dans la conception Web?
La typographie dans la conception Web est similaire à la conception d'impression, mais nécessite certaines considérations pour assurer la lisibilité sur tous les types d'écran. La police, la taille des caractères, la couleur, la hauteur des lignes et les formes des lettres sont quelques-uns des facteurs de la typographie qui doivent être soigneusement équilibrés pour offrir une expérience de lecture agréable.
Quelle police convient le mieux à la lecture à l'écran?
Les polices qui conviennent le mieux à la lecture à l'écran sont celles avec des formes de lettres distinctes et ouvertes. Proxima Nova, Georgia et Fira ont des caractéristiques qui facilitent la lecture sur divers écrans. D'autres facteurs ont un impact sur la lisibilité d'une police, tels que la taille du texte, la hauteur de ligne et le contraste de la police et de la couleur d'arrière-plan.
Quelle taille de police dois-je utiliser pour un site Web?
La taille de la police sur un site Web doit être adaptée à la taille de l'écran qui l'affiche. En général, une police doit être de 12 à 16 pt sur un écran mobile, de 15 à 19 pt sur une tablette et de 16 à 20 pt sur un écran d'ordinateur de bureau. Des facteurs tels que la taille du texte, la hauteur de la ligne et la longueur de la ligne doivent également être pris en compte.
Qu'est-ce qu'une bonne typographie?
Une bonne typographie, comme un bon design, est invisible. Le but principal de la typographie est de communiquer un message écrit. Le texte doit être conçu pour être lisible et offrir une expérience de lecture agréable. Des facteurs tels que la taille du texte, la hauteur de la ligne et la longueur de la ligne sont des éléments de typographie qui doivent toujours être pris en compte.
Combien de polices un site Web doit-il utiliser?
Un site Web doit maintenir le nombre de polices au minimum, pas plus de trois au total. Lorsqu'un site a trop de polices, l'utilisateur peut être désorienté avec autant de changements dans la conception visuelle. Les polices de caractères choisies doivent avoir une variété de poids et de styles qui peuvent être utilisés de manière stratégique dans la conception de l'interface utilisateur.
