REX — Constitution d’un Design System

Vous n’avez pas pu assister au dernier meetup Vue.js Paris ? Voici un récap’ de la présentation faite par Sophie Moustard, Ingénieur développeur chez Alenvi !  Pour visionner le meetup en entier, ça se passe juste ici.

   

Exemple : Github

     

Exemple : ?

     

Exemple : Github

   

 

Design System — Kesako ?

     

Référentiel UX / UI évolutif : il est constitué d’une bibliothèque de composants, de visuels, de couleurs et de tout élément contribuant à l’identité visuelle et interactive de l’application.

 

REX — Premiers pas

     

• Duplication du code
• Copier / coller
• Risque d’incohérence et d’erreur
• Manque de lisibilité

Création d’une bibliothèque de composants

• Select
• Input
• DateTime

• Adresse
• Tableau — liste
• Modal
• DatRange — DateTimeRange

Evolutions apportées au fur et a mesure de la multiplication des usages

• Meilleure communication
• Rapidité de développement
• Responsive

   

Rex — Appronfondissement

• Entêtes

• Affichage des textes / heures / chiffres

→ Beneficiaire : NOM P. → Auxiliaire : Prénom M.

• Meilleure expérience utilisateur
• Meilleure compréhension et prise en main de l’outils

 

Rex — Avantages

• Meilleure communication dans l’équipe
• Lisibilité du code
• Efficacité / rapidité de développement
• Responsive
• Meilleure expérience utilisateur
• Meilleure compréhension et prise en main de l’outils
• Simplification de la css

 

Rex — Points clés

• Au bon rythme et au bon moment
• Référentiel partagé par toutes les parties prenantes
• Évolutif

 

Permet de donner une identité visuelle propre VOTRE l’application !