David FYON's profileClément Rogier's profile

Design System | ENS Lyon

Atomic Design

We’re not designing pages, we’re designing systems of components. — Stephen Hay

Brad Frost, l’inventeur de l'Atomic Design, utilise cette citation pour résumer et introduire son concept. Sa méthode doit permettre d’abandonner un mode de réflexion basée sur le nombre de pages, de gabarits à produire sur un projet pour adopter une approche orientée autour de systèmes de composants, d’éléments modulaires. 
Conception d'un Kit UI interactif pour l'ENS de Lyon

L'ENS avait la problématique suivante : un parc applicatif vaste (15/20 applications métiers) obsolète en terme UX/UI, combiné à la nécessité de le refondre progressivement en gardant une cohérence graphique et fonctionnelle, en embarquant les usages actuels (RWD, ergonomie, graphisme modernisée…) et en industrialisant le développement. 
La mise en place d'un kit UI basé sur l'Atomic Design à permis de répondre à cela en dotant l'ENS d'un outil pratique et simple d'utilisation pour ses développements actuels et futurs (copie du code d’un élément unitaire ou d'un groupe d'éléments, téléchargement de templates, téléchargement d’une feuillle de style dédiée...).
Atoms
Molecules / Organisms
Templates
Problématiques

- Mixer le style propre du framework avec la charte graphique du client
- Gérer la navigation du framework et celle du kit UI notamment en Responsive Design
- Gérer des devices différents sans resize manuel de la fenêtre du navigateur
- Mise en place d'une navigation simple pour pouvoir passer rapidement d'un élément à un autre
- Conception d'un design sobre pour ne pas impacter les éléments du client et pour pouvoir être réutilisable 
- Proposer des templates téléchargeables sous forme de fichier .zip et comprend tous les éléments nécéssaires à leur bon fonctionnement
- Donner la possibilité de copier facilement le code d'un élément
Caractéristiques techniques

- Boostrap + jQuery / Javascript 
- SASS pour gagner en productivité et en évolutivité
- RWD
Travail réalisé chez Econocom
Design System | ENS Lyon
Published:

Design System | ENS Lyon

Kit UI interactif

Published: