×
REX — Constitution d’un Design System

REX — Constitution d’un Design System

Nos Meetups

Accueil > Blog > Nos Meetups > 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

 

 

r1

 

Exemple : ?

 

 

r2

 

Exemple : Github

 

 

r3

r4

r5

 

Design System — Kesako ?

 

 

r6

 

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

 

 

r7

 

  • 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

r89

  • 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 !

Retrouvez toutes nos offres !

Date de publication : 24 mars 2020