Share
Cet article est le troisième d’une série en trois parties présentant les nouvelles approches de l’iconographie que Iconic proposera. Si vous aimez ce que vous voyez dans cet article, merci de penser à soutenir Iconic sur Kickstarter.
Contenu sponsoriséCe contenu a été commandé par Iconic et écrit et / ou édité par l'équipe de Tuts +. Notre objectif avec le contenu sponsorisé est de publier des tutoriels pertinents et objectifs, des études de cas et des interviews inspirantes qui offrent une véritable valeur éducative à nos lecteurs et nous permettent de financer la création de contenu plus utile..
L'iconographie réactive consiste à afficher des icônes de fidélité appropriée en fonction de la taille d'affichage d'une icône pour assurer une lisibilité optimale..
Le contenu que nous créons est vu dans plus de permutations que jamais. Appareil, densité de l'écran, résolution, plate-forme, navigateur. Autant de variables qui ont toutes un impact (à des degrés divers) sur la lisibilité de notre contenu. Les icônes en particulier peuvent être très sensibles à la taille d'affichage..
La directive première d'une icône doit être comprise. Pour ce faire, la lisibilité d'une icône doit être garantie lors de son affichage. Il existe des moyens de concevoir des icônes pour une plus grande lisibilité, en particulier pour les petites tailles. Concevoir de la sorte peut souvent se faire au détriment de l'esthétique ou du moins d'options esthétiques..
L'esthétique joue également un rôle essentiel dans l'iconographie. Malheureusement, la lisibilité et l'esthétique peuvent souvent être des forces opposées. La conception d'une icône a généralement un taille optimale où la lisibilité et l'esthétique sont bien équilibrés. Très peu d'icônes, voire aucune, ne peuvent trouver un équilibre parfait entre lisibilité et esthétique, quelle que soit leur taille. Donc, si nous voulons que nos icônes soient lisibles et attrayant sur une large gamme de tailles, il nécessite plusieurs versions d’icônes optimisées pour des tailles spécifiques.
Cette idée n'est pas nouvelle. Auparavant, cette approche était commune aux icônes raster. Avec l'imprégnation de l'imagerie vectorielle sur le Web, nous, concepteurs d'icônes, avons confondu l'évolutivité avec la lisibilité. Alors, qu'est-ce qui rend Iconic unique sur cette ancienne approche? Iconic est livré avec trois tailles de chaque icône et il vient avec le code pour les icônes pour fournir automatiquement la version lisible de manière optimale de chaque icône.
Il existe deux méthodes de base pour ajuster les icônes. L'un joue sur l'hypothèse, l'autre est plus précis. L'un est simple, l'autre plus complexe. L'approche simple utilise des requêtes de média pour ajuster les icônes à des largeurs d'écran spécifiques. Ce pouvez fonctionne car la taille du contenu est souvent réduite par rapport à la taille de l'écran, ce qui signifie qu'une icône affichée sur un écran de bureau est susceptible d'être définie sur une taille supérieure à celle d'un écran de mobile. Peut être.
le droite Pour ce faire, appliquez la fonctionnalité de réponse d'une icône au niveau de l'élément, ce qui signifie que l'icône de droite est affichée en fonction des dimensions de l'icône, et non des dimensions de l'écran. La meilleure approche consiste pour les icônes à prendre conscience de leurs dimensions et à passer simplement à la version lisible / esthétique la plus appropriée. Cela finit par être un peu plus complexe…
Alors, comment pouvons-nous faire cela?
Remarque: Les exemples ci-dessous sont toujours des prototypes de validation de concept. Aucun des codes suivants n'est final, à plus forte raison une version bêta. Nous sommes toujours dans la phase de R & D de cette approche et nous savons que de nombreux problèmes doivent encore être résolus. Nous travaillerons sur une direction plus concrète pour cette méthode une fois la campagne Kickstarter terminée..
À ce stade, nous abordons l'iconographie réactive de différentes manières et les directions "finales" sont encore en suspens. Nous partagerons trois manières différentes de penser à la technique en ce moment.
Tout d'abord, l'approche la plus simple. SVG a toujours été au cœur d’Iconic, mais il est facile d’oublier qu’Iconic était l’un des premiers jeux à être également livré avec une police Web. Il s’avère que les polices Web fonctionnent énormément bien pour l'iconographie sensible. La raison pour laquelle les polices Web fonctionnent bien avec une iconographie réactive est que toutes les icônes sont ajoutées à une seule police. Cela permet de traiter les plages de taille comme un poids différent (par exemple, Iconic-Large.otf, Iconic-Medium.otf, Iconic-Small.otf). Chaque icône sur l’écran peut être changée simplement en changeant la poids de la police pour la web-fonte. Dans la démo ci-dessous, les icônes répondent à la largeur de l'écran..
Voir la démo Comme mentionné précédemment, ajuster les icônes en fonction de la largeur de l'écran n'est pas la meilleure approche pour garantir la lisibilité. Les icônes doivent répondre à leurs propres dimensions d'affichage. Malheureusement, nous n'avons pas encore la possibilité de créer des requêtes d'éléments dans CSS. La bonne nouvelle est que les gens réfléchissent à cela et créent des solutions de contournement. La démonstration ci-dessous utilise des requêtes d'éléments et des polices Web pour créer une icône à ajustement dynamique en fonction de sa taille d'affichage..
Il y a eu beaucoup de bonnes idées dans ce domaine, en particulier de la part d'Andreas Bovens, qui parle des points de rupture SVG depuis un certain temps déjà. Cette approche repose sur le fait que les requêtes multimédia dans un fichier SVG référencé en tant que img, intégrer ou objet utilisez les dimensions d'affichage du SVG. Sens une requête médiatique de largeur minimale: 400px au sein du SVG se déclencherait si l’image avait 400 pixels ou plus, quelle que soit la largeur de l’écran. La démo ci-dessous montre que la fonctionnalité en action.
Il y a actuellement un problème avec cette approche. Ces points d'arrêt internes ne fonctionnent plus lorsque le fichier SVG est injecté dans DOM. SVG DOM-injection est vital pour les autres fonctionnalités d’Iconic, c’est donc quelque chose que nous devrons déterminer dans un avenir proche..
Une icône illisible manque à son devoir le plus important. Nous devons cesser de penser à l’imagerie vectorielle comme la solution idéale pour la lisibilité des icônes. Nous devons concevoir des icônes adaptées à différentes tailles. Nous avons également besoin d’outils permettant d’afficher les icônes avec la fidélité voulue, en fonction de leur taille. Aucune des opinions actuelles n'est parfaite. Mais ils sont un pas en avant dans la bonne direction.
Iconic a pour objectif de fournir de nouvelles approches en iconographie..
Merci de penser à soutenir Iconic sur Kickstarter
Accentsconagua