Centre Français d'exploitation du droit de copie
Le Centre Français d'exploitation du droit de copie (CFC) est un organisme de gestion des droits des auteurs et des éditeurs principalement dans leur rediffusion et la défense des droits des créateurs.
Demande client
Dans une volonté d'évolution et de modernisation, le CFC nous a sollicités pour les accompagner dans leurs enjeux web pour plusieurs missions: mise en place d'un design system, refonte du site corporate CFC et création d'une nouvelle plateforme numérique autour de plusieurs applications web.
Technologies utilisées
UnoCSS
Solid.js
TypeScript
Web Components
Collaboration et design
Storybook
Vite
Figma
Les réponses efficaces pour un client satisfait
Nous avons imaginé des scénarios, personas, et élaboré des maquettes interactives pour valider tous les principes du projet, et ainsi s'assurer du succès de la démarche.
Les objectifs
- Créer un écosystème digital évolutif et pérenne
- Moderniser l’image du CFC
- Faciliter la gestion des services côtés clients et côté utilisateur
Des composants réactifs
Le design system est une bibliothèque de composants utilisée lors de la conception et du développement d’un projet web. Il regroupe la charte ergonomique et la charte graphique définies avec la société cliente. Des variantes existent pour chaque composant et état afin de s'adapter à un affichage en mode clair ou sombre (dark mode).
Le design system traduit l'identité de marque de l’entreprise dans l’ensemble de ses projets web. On y retrouve notamment les icônes, la typographie, les éléments graphiques, les couleurs, etc.
Il répond également aux impératifs projets et clients, par exemple dans notre cas, tout projet doit répondre aux exigences d’accessibilité numérique. L’ensemble de ces web components est donc accessible.
Le design d'interface
Le design d'interface graphique pour une application web consiste à créer une interface visuelle intuitive et agréable pour les utilisateurs, en organisant les éléments graphiques et interactifs de manière à faciliter la navigation et l'utilisation de l'application. Cela implique de choisir des couleurs, des typographies et des icônes appropriées, ainsi que de structurer le contenu de manière claire et cohérente. L'objectif est d'améliorer l'expérience utilisateur en rendant l'application à la fois fonctionnelle et esthétiquement plaisante.
La conception du Design system
Plusieurs phase constituent la réalisation du design system, elles peuvent se dérouler successivement ou par itérations.
Définition d'une charte graphique
Pour répondre à l'objectif de moderniser l'image de l'organisme, une nouvelle charte graphique a été mise en place.
Création d'un design system
Que ce soit un bouton, un fil d'ariane ou encore la pagination, ces éléments sont nécessaires sur chaque site. Nous les avons listés pour les réaliser avec la charte graphique du CFC et les transformer en web component.
Réalisation des web components
En parallèle du projet design system, nous avons pour objectif de réaliser les éléments front pour le projet Monark. Nous faisons d'une pierre - deux coups, nous lançons la réalisation des composants Monark en s'assurant de les garder assez standards, adaptables et personnalisables pour chaque site du CFC. Nous créons donc le composant standard sur le design system, puis nous lui ajoutons une couche de personnalisation avant de l'intégrer dans Monark.
Développement des blocs
Un bloc est le regroupement de plusieurs web components. Par exemple, le footer va comprendre : un logo, du texte, des boutons ou liens, etc. Ce bloc servira aussi sur d'autres sites à venir. Nous avons également listé plusieurs blocs pertinents à réaliser avant développement, toujours dans cette stratégie globale et long terme.
Phase de tests
Une fois mis en place sur Storybook, plusieurs membres de l'équipe contrôlent sa bonne intégration : l'UX designer ou encore l'experte en accessibilité. Un processus d'organisation de projet a été mis en place pour tous nous assurer de construire et transmettre un développement de qualité, évolutif, conforme aux impératifs.
