Icônes

Une icône est un petit pictogramme représentant une action, un objet, un logiciel, un type de fichier, etc.

L’usage d’un pictogramme doit faciliter la compréhension d’un élément en un coup d’œil. (ref. 1.3.6 Identifier l’objectif) Si sa signification est complexe ou n’est pas immédiatement évidente, le pictogramme doit :

• Être accompagné d’un texte qui en précise le sens. (NNG)

• Être positionné à proximité de ce texte.

S’il n’est pas envisageable d’associer un texte à certains pictogrammes dont le sens peut porter à confusion, des solutions sont possibles, comme la présentation d'une légende, ou l'ajout d'infobulles, par exemple.

Pour la création de nouvelles icônes, n'hésitez pas à vous adresser au Studio numérique.

Références

• 7 Principles of Icon Design : Clarity, Readability, Alignment, Brevity, Consistency, Personality, Ease of Use (UX Collective, 2020)

• Icon Usability (NNG, 2014)

• Yes, Icons Need Text Labels (NNG, 2018)

• Material Icons (Google)

• IBM Design Language (IBM)

• https://www.mongodb.design/foundation/icon-creation/

• https://design.firefox.com/photon/visuals/iconography.html

Annexe

Icônes DX

Comment créer une nouvelle icône DX. Les icônes doivent être :

• Légèrement arrondies

• Lisibles à une taille de 20 pixels

• Disponibles en une version pleine (fill) et lignes de contour (outline) au besoin

• Nommées en anglais selon la fonction qui leur est destinée (p. ex. search, et non magnifier) autant que possible.

• Être partagées sur Figma, Sketch ou Adobe XD

• Exportées et optimisées en SVG pour le Web et les applications Android

• Exportées en fonte d'icônes pour les applications iOS (à confirmer)

Météorologie

Thématiques de l'Info

Utilisées sur l'application Info

Open