Pictogramme monochrome

Il se caractérise par un dessin en filet d'épaisseur normée et monochrome. Il est utilisé pour rendre explicite un objet ou une notion. Privilégier cet aspect filaire pour une utilisation descriptive et fonctionnelle.

Librairie Sketch : library-maif-picto-filaire I Comment synchroniser une librairie ?

Présentation

Pictogramme monochrome aspect filet

Chaque pictogramme est une simplification géométrique d’une illustration vectorielle.

Ce symbole est :

  • seul : impérativement lorsqu'il est fonctionnel (navigation) et pour une utilisation inférieur à 32 px
  • inscrit dans un cercle : pour une utilisation supérieur à 32 px
  • inscrit dans un disque : pour une utilisation supérieur à 32 px et positionné sur un fond coloré

Construction

Pour une utilisation ≥ 20px

règle de construction illustration
Exécution à 32 px
    Le pictogramme de type filaire :
  • s’inscrit dans un carré de 32 x 32 pixels
  • occupe au maximum la surface, soit au moins sa largeur ou sa hauteur est égale à 32px.
  • doit être centré dans ce carré, lui-même est centré dans un disque de 50 pixels

Son dessin est composée de filets d’épaisseur de 1,5 pixels auxquels on ajoute des filets de 0,85 pixels d’épaisseur pour les détails.

On privilégie les formes les plus géométrique et simples possible, en évitant les angles trop aigus.

Pour une utilisation fonctionnelle ≤ 20px

img-construction-small-20px.png
Éxécution à 20 pixels (-small)

Le pictogramme s’inscrit toujours dans un carré de 20 x 20 pixels dont elle occupe au maximum la surface.



    Les caractéristiques :
  • épaisseur unique des filets à 1,25 px
  • arrondi des angles principaux à 1,5 px, les secondaire de 0,5 à 0,7 px

Le disque et le cercle disparaissent et le picto se simplifie, élimination de certains détails superflus qui pourraient alourdir le visuel et permettre une lisibilité 
jusqu’à 12 x 12 pixels.

img-utilisation-small.png
Exemple : associé à un lien

Même règle que pour les pictos en dessous de 20px

Fichier d'exécution : MASTER

img-picto-master.png

Ce fichier nommé "Master" est constitué de plans de travail utiles à la production des déclinaisons du pictogramme. La représentation filaire est plus adaptée pour décliner le dessin de base aussi il est recommandé de débuter par celle-ci pour la conception du pictogramme.

Chaque plan correspond à une représentation spécifique.

    Le noms des déclinaisons portent en suffixe le nom du plan de travail (oter du nom l'attribut -RVB) :
  • -trav : plan contenant les tracés de base du pictogramme utiles pour concevoir de nouvelles créations
  • -cc : représentation du pictogramme entouré d'un cercle
  • -disk : représentation du pictogramme sur un disque
  • -blcc : représentation du pictogramme blanc entouré d'un cercle blanc
  • -32 : pictogramme seul exécuté dans un carré de 32 px. Les éléments sont au maximum réunis en une seule forme. Cette représentation est intégrée dans la maificone.

Téléchargez les fichiers d'éxécution

Master icone RVB et CMJN

ZIP1 Mo

Couleur : monochrome

img-picto-color.png

Chaque pictogramme est monochrome et avant tout utilisé en rouge MAIF ou en réserve blanche sur rouge MAIF. Il peut être également utilisé dans les couleurs principales de la charte (principalement dans les nuances de gris, ardoise et noir).

Sur fond de couleur

img-picto-color-diskblc.png
Cas générique

On ajoute un cercle blanc quand le picto est sur un fond de couleur

img-picto-color-exception.png
Mode état sélectionné

Le picto présent sur un composant en état sélectionné/cliquable/zone d’action n’a pas besoin de cercle blanc

img-picto-intro.png

En visuel d'introduction de taille maximale 80 px

Attention

Vous souhaitez utiliser les pictogrammes pour un site web MAIF ? consultez la section dédiée Police pictogrammes

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.

Accédez au répertoire des pictogrammes

Lien vers emedia

Don't

img-picto-dont01.png
Sur fond
img-picto-dont02.png
Couleur
img-picto-dont03.png
Taille
img-picto-dont05.png

Exemples

illus-picto-constr-3.png

#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é.
nommage-picto-jahia.png
Code appliqué aux déclinaisons des pictogrammes :
Selon leur typologie, couleur et dimensions.
  • sans suffixe : seuls, ajout du nom de la couleur du picto (noir, rouge, bleu) puis ajout dimension
    exemple : nompicto-noir-50.svg
    arbo : pictogrammes-filaire/filet/50/_
  • -cc : filaire dans un cercle (en rouge), puis ajout dimension
    exemple : nompicto-cc-50.svg
    arbo : pictogrammes-filaire/filet-cercle/50/_
  • -blcc : filaire dans un cercle (en blanc), puis ajout dimension
  • -dsk : dans un disque, ajout du nom de la couleur du disque (blanc, bleu, gris), puis ajout dimension
    exemple : nompicto-dsk-blanc-50.svg
    arbo : pictogrammes-filaire/filet-disque/50/_