Librairie Sketch : library-maif-picto-chromie I Comment synchroniser une librairie ?
Pictogramme polychrome
Elles illustrent grâce à un registre symbolique et simple les univers produits et services, sur tous types de supports.
Construction
L’illustration est composée d’aplats, elle s’inscrit dans un carré de 32 x 32 pixels dont elle occupe au maximum la surface.
Ce carré est centré dans un disque de 50 pixels de diamètre.
On privilégie les formes les plus géométrique et simples possible, en évitant les angles trop aigus.
Ce carré est centré dans un disque de 50 pixels de diamètre.
On privilégie les formes les plus géométrique et simples possible, en évitant les angles trop aigus.
Taille minimum
Couleurs
L’illustration comprends environ 50 % de rouge MAIF et 50 % de rouge foncé + une touche de gris ardoise et une touche de blanc (dans la mesure du possible).
On mettra les parties foncées à gauche. (Eclairage imaginaire en haut et droite). Elle s’utilise de 3 façons différentes :
1) Avec un disque gris ou blanc sur un fond perturbé ou de couleur proche de celles utilisées.
2) Avec le disque transparent sur fond ne nuisant pas la lisibilité de l’illustration.
On mettra les parties foncées à gauche. (Eclairage imaginaire en haut et droite). Elle s’utilise de 3 façons différentes :
1) Avec un disque gris ou blanc sur un fond perturbé ou de couleur proche de celles utilisées.
2) Avec le disque transparent sur fond ne nuisant pas la lisibilité de l’illustration.
Exemples
Exemples d'illustrations. L'exhaustivité des illustrations est disponible dans la base emedia MAIF
Exemples
Disque de couleur
La couleur est issue de la palette 30%. Elle peut être unie ou produite par un zoom de celle-ci.
Disque blanc
Incorporer un disque blanc autour de l'illustration lorsqu'elle est posée sur un fond perturbé
Disque transparent
Le fond doit être neutre et ne pas nuire à la lisibilité de l’illustration
Coupée
En série
Information
Emedia est une solution gérée par le studio MAIF.
À noter que les collaborateurs MAIF et les prestataires internes se connectent directement avec leur session et que les externes ne seront autorisés à accéder aux collections d'images qu'en se créant un compte.
Don't
Couleur
Une illustration vectorielle dans une mise en couleur non autorisée.
Vectoriel en dimension 2D ou 3D
Une illustration vectorielle dont le design ne correspond pas à ce qui a été défini. La représentation est nécessairement une vue à plat
Fond perturbé
Une illustration vectorielle sans son disque sur un fond pertubé.
Angulaire
Un pictogramme non filaire et / ou avec des angles pointus.
Non chartée
Des illustrations filaires qui ne proviennent pas du design system.
Filaire
Le filaire n’est ni un agent d’ambiance (pas d’ornement filaire, pas d’élément anecdotique) ni un agent conversationnel.
Illustration négative
Le filaire ne peut plus servir à représenter des situations très négatives.
#regles-de-nommage
Règles de nommage
- Nommer le document en insérant le mot-clé/expression ou sujet abordé, de façon compréhensible par l'internaute.
- Un système de suffixe permet de repérer rapidement avec le nom de quel type de représentation il s'agit. Il est décrit dans le schéma ci-contre.
- Ne pas indiquer de date ni de format pour pouvoir l'actualiser sans changer son nom (mesures valables pour tout type de document : images, pdf...).
- Le nom des contenus ne doit pas contenir de majuscules, d'accents, de caractères spéciaux (sauf le tiret : "-"), d'espaces, d'underscores. Les chiffres sont autorisés.
- Le nom de la contribution ne doit pas dépasser 64 caractères.
- À la contribution dans le CMS, il faut remplir la balise ALT (texte de remplacement de l'image) pour le référencement et l'accessibilité.
Code appliqué aux déclinaisons des pictogrammes polychromes :
Selon leur typologie, couleur et dimensions.
- -ill : seul, puis dimension
exemple : nompicto-ill-50.svg
arbo : Illustration/illus-defaut/50/_ - -illdsk : dans un disque, ajout de la couleur du disque (blanc, bleu, gris) puis ajout dimension
exemple : nompicto-illdsk-blanc-50.svg
arbo : Illustration/illus-disque/50/_
Pour aller plus loin
Les règles de création des pictos - Master
PDF2 Mo