Projet d'agence Libre Mullenlowe
Design System Emailing Buffalo
Buffalo nous ont donné la réalisation de la conception de leurs emails. Pour gagner en productivité et faciliter le dialogue avec les développeurs, un design system a été mis en place par mes soins.
Pourquoi mettre en place un Design Sytem ?
Assurer l'uniformité du design pour qu'il reste cohérent sur tous les emails
Gagner du temps, en expliquant clairement les intentions et les utilités de chaque token par le guideline.
Faciliter les discussions avec les devs grâce à des références communes.
Composants déjà prédéfinis faisant gagner du temps sur l'intégration
Réduction des erreurs en suivant la description de chaque token
Faciliter les mises à jour, si des changements de thèmes, design
Le design system est à découvrir sur rendez-vous !
Pour mettre en place le design system, il est essentiel de placer les tokens dit basique c'est à dire tous les tokens qui vont composer notre librairie. Pour ensuite créer les différents composants et les variants qui vont venir alimenter notre Design system. Voici le listing (non exhaustif) des différents éléments pour réaliser un bon design system et surtout efficace.
Boutons
Cartes
Icônes
Header
Footer
Éléments de navigation
Polices de caractères (familles de polices, tailles, poids)
Styles de texte prédéfinis (titres, paragraphes, etc.)
Couleurs principales
Couleurs secondaires
Gradients
Icônes spécifiques à l'application ou à la marque
Icônes génériques pour une utilisation courante
États de boutons (normal, survolé, pressé, désactivé)
Grilles pour le positionnement des éléments
Systèmes de mise en page réutilisables
Variantes de boutons (grand, petit, principal, secondaire)
Variantes de cartes (avec ou sans image, etc.)
Email Commercial
Email relation client
Email cycle de vie
Instructions pour l'utilisation des composants
Conventions de nommage
Exemples d'utilisation
