Excellent choix !  Patience

Enedis,

système numérique

Appelé par le « Programme numérique » pour adapter l’identité d’Enedis aux supports mobiles, j'ai finalement créé le design system du groupe et préconisé la mise en place d’outils graphiques adaptés et de nouvelles pratiques de conception.
Le design system est disponible depuis un site réalisé avec Webflow

L’identité visuelle Enedis créée par Marc Vernay, pour le compte de Nomen, répondait parfaitement aux besoins de l’entreprise en matière de communication imprimée.
Des éléments d’interface Web avaient même été esquissés.

Pourtant, depuis quelques années, l’entreprise a donné un coup d’accélérateur à sa transition numérique. La multiplication des besoins mais aussi la diversité des contributeurs imposait la création d’un outil de conception complet : la charte numérique.

Un système graphique…

La cible principale du produit est celle des porteurs de projets internes (personnel Enedis, PO, développeur interne ou externe), un public généralement peu sensibilisé aux questions de communication. L’accent a été porté sur la création d’un document simple, pédagogique et très pratique.

Extrait du système graphique Enedis : logotype et couleurs identitaires

Au menu, traduction de la charte graphique aux supports numériques : valeurs hexadécimales des couleurs, palettes accessibles, nomenclature pour préprocesseur css, fall-back des polices, etc.

Des questions spécifiques aux supports sont abordés : accessibilité des interfaces, distinction entre hiérarchie visuelle [M, L, XL…] et hiérarchie sémantique [H1, H2, H3…], bonnes pratiques SEO, grille responsive, etc.

Extrait du système graphique Enedis : couleurs complémentaires, typographie identitaire et échelle typographique (responsive)

Les ressources graphiques ont été converties au format natif web et mobiles (png, svg). L’ensemble est aussi disponible sous forme de fichiers sketch et de repository Zeplin.

La création de nouvelles interfaces mobiles a révélé un besoin nouveau :
des pictos adaptés aux petits écrans. Enedis ne disposant pas de graphiste en interne, il est impossible de créer ses visuels à la demande, pour chaque nouveau besoin.

Il restait ces alternatives : proposer un processus de commande, long et fastidieux, pour la création de visuels originaux ou sélectionner une bibliothèque d’icônes, large et complète. Nous avons préconisé l’utilisation des icônes Material de Google. Les motivations derrière ce choix :

  • les employés Enedis, tous équipés de mobiles Android, sont familiers de ces codes graphiques. La prise en main des interfaces n’en sera que plus rapide.
  • Une large communauté de designers contribue à la création de nouvelles icônes. Il est, donc, virtuellement impossible de ne pas trouver l’image qui convient.
Extrait du système graphique Enedis : icônes «fonctionnelles» tirées de la bibliothèque collaborative https://materialdesignicons.com/

Une bibliothèque de composants évolutive

Au lancement du projet, nous avons procédé à un inventaire détaillé des interfaces du groupe Enedis. Nous avons repéré les éléments d’interfaces essentiels et proposé une homogénéisation graphique et fonctionnelle de ces modules. Le fruit de ce travail de rationalisation a été organisé et classé dans une grande bibliothèque de composants.

Bibliothèques de composants : grilles responsive.
Bibliothèque de composants : les cartes
Bibliothèque de composants : navigations

Des ressources à télécharger…

Le dispositif a été complété par une série de fichiers sources à télécharger (sketch et zeplin) et de fiches pratiques.

Fichier sketch des composants mobiles pour applications professionnelles

Pour réduire la disparité des compétences, nous avons créé des modes d’emploi et organisé des formations pour expliquer le fonctionnement des différents outils.

Identité visuelle créée par Marc Vernay pour le compte de Nomen
Projets réalisés sous la direction de Romain Casimir, Programme numérique Enedis
Un projet réalisé avec l’agence