<aside>
Identité visuelle
Nos icons
csh Icon est la bibliothèque d’icones qui jour le rôle de “raccourci visuel” qui rend l'expérience de notre site internet fluide et transparente. Ils aident les gens à s’orienter, mettent en évidence les informations importantes et renforcent les aspects fondamentaux de notre marque : moderne, conviviale et universellement comprise.
Nous représentons les outils et les sujets aussi simplement que possible tout au long de notre production. Pour y parvenir, nous exploitons les métaphores existantes pour nos icônes. Certaines icônes sont par nature plus abstraites, mais des objets comme un chariot, un cœur, un crayon, une image et une loupe sont aussi universels que possible. Les métaphores restent cohérentes sur tous les systèmes d'exploitation et restent claires et additives à l'expérience.
Tailles
Nous utiliseront spécifiquement 3 tailles tailles d’icones dépendant des situations : 16px, 20px et 24px . Il est essentiel de garder à l’esprit qu’à mesure que la taille des icônes diminue, les détails sont souvent épurés et simplifiés pour une clarté optimale. L'identité d'une icône doit rester cohérente et facilement reconnaissable dans toutes les tailles.
Utilisation
Les icônes doivent être utilisées pour améliorer l'expérience utilisateur en fournissant des repères visuels intuitifs, en facilitant la navigation et en améliorant la convivialité, en particulier pour les actions ou les concepts communément compris. Ils ne doivent pas être surutilisés ni remplacés par du texte dans des scénarios où cela pourrait provoquer une ambiguïté ou une confusion, en particulier si elles ne représentent pas clairement des actions ou des concepts associés.
Pour la hiérarchie visuelle, les tailles d'icônes et de texte appropriées doivent être conservées lorsque vous placez ces éléments ensemble sur une seule ligne. Dans la plupart des cas, une seule ligne de texte sera placée à côté des icônes de 16 px et 24 px, car ces tailles d'icônes sont les plus courantes dans notre système de badges. La légende et le corps du texte peuvent être utilisés à côté des icônes de 16 px, tandis que le texte du sous-titre 2 et du sous-titre 1 peut être utilisé avec des icônes de 24 px.
Les icônes et le texte doivent être alignés sur les centres verticaux. Utilisez un espacement de 6 px entre les icônes et le texte de 16 px et de 8 px entre les icônes et le texte de 24 px.
Les icônes ont tous une version “line” et une version “filled”. Les versions filled sont utilisées pour indiquer un état sélectionné ou pour accroître leur importance au sein d'une hiérarchie.