UI DESIGN
Un petit peu de contexte...
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 ?
Avantages Design
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.
Avantages Dev
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 !
Donner du gourmand, qui donne envie. Entre paysage américain et gros plan gourmand… Ici, commence l'Amérique.
La mise en place du Design System
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.
Une logique atomique design
L'atomic design rend la création de sites web plus simple et efficace en divisant les éléments en petites pièces réutilisables. Ça permet de garder un look cohérent, de mettre à jour facilement les designs, et de gagner du temps en réutilisant des morceaux déjà créés. Bref, c'est super pratique pour les équipes de design et de développement !
Styles de Texte
Polices de caractères (familles de polices, tailles, poids)
Styles de texte prédéfinis (titres, paragraphes, etc.)
Palettes de Couleurs :
Couleurs principales
Couleurs secondaires
Gradients
Icônes/logo
Icônes spécifiques à l'application ou à la marque
Icônes génériques pour une utilisation courante
Composants d'État
États de boutons (normal, survolé, pressé, désactivé)
Grids et Systèmes de Mise en Page
Grilles pour le positionnement des éléments
Systèmes de mise en page réutilisables
Composants de Base
Boutons
Cartes
Icônes
Header
Footer
Éléments de navigation
Variantes de Composants
Variantes de boutons (grand, petit, principal, secondaire)
Variantes de cartes (avec ou sans image, etc.)
Les emails types
Email Commercial
Email relation client
Email cycle de vie
Guides de Conception et Documentation
Instructions pour l'utilisation des composants
Conventions de nommage
Exemples d'utilisation
