$30 off During Our Annual Pro Sale. View Details »

Design system

Maxime Frere
November 08, 2018

Design system

Maxime Frere

November 08, 2018
Tweet

Other Decks in Design

Transcript

  1. Design System
    Maxime Frere - 25 novembre 2018

    View Slide

  2. Qui suis-je ?
    Product & UX Designer
    Creative Studio - Capgemini
    Vice Président
    Flupa
    Partie de l’équipe de conception d’Horizon - le Design System de Airbus
    En charge de la partie mobile d’Horizon
    Premier Design System en 2014 - Startup
    Mais aussi utilisateur du Design System
    @maxime_frere

    View Slide

  3. C’est quoi un design
    system ?

    View Slide

  4. Un ensemble d’outils (contraintes, règles et principes) permettant aux
    designers et developers de construire et maintenir des expériences
    cohérentes au travers de produits et services
    Définition
    C’est quoi un design system ?

    View Slide

  5. C’est quoi un design system ?
    UI components
    Visual style
    Composition

    View Slide

  6. C’est quoi un design system ?
    Editorial Illustration Accessibilité
    Composition

    View Slide

  7. C’est quoi un design system ?
    Patterns Data Visualisation Motion
    Composition

    View Slide

  8. C’est quoi un design system ?
    Javascript
    React, Vue, Angular, etc.
    Tokens
    Code
    HTML + CSS
    Design asset
    Fichier sketch, Figma, etc.
    Cross-Platform
    IOS, Android, etc.
    Released

    View Slide

  9. C’est quoi un design system ?
    Living documentation
    Documenté

    View Slide

  10. Qui utilise un
    Design System ?

    View Slide

  11. Qui utilise un Design System ?

    View Slide

  12. Les avantages d’un
    Design System

    View Slide

  13. Les avantages d’un Design System
    COHÉRENCE &
    CLARTÉ

    View Slide

  14. Les avantages d’un Design System

    View Slide

  15. Les avantages d’un Design System
    Shopify Mobile, Web, et Point-of-Sale avant le design system

    View Slide

  16. Les avantages d’un Design System
    Shopify Mobile, Web, et Point-of-Sale avec le design system

    View Slide

  17. Les avantages d’un Design System
    COHÉRENCE &
    CLARTÉ
    SCALABILITÉ
    & EFFICIENCE

    View Slide

  18. Les avantages d’un Design System

    View Slide

  19. Les avantages d’un Design System
    COHÉRENCE &
    CLARTÉ
    SCALABILITÉ
    & EFFICIENCE
    COMMUNICATION
    DESIGNER / DEV

    View Slide

  20. Les avantages d’un Design System
    PRIMARY
    BUTTON
    PRINCIPAL
    BUTTON
    MAIN
    BUTTON

    View Slide

  21. Les avantages d’un Design System
    Activity view Action sheet Bottom sheet Modal Bottom sheet

    View Slide

  22. Les avantages d’un Design System
    COHÉRENCE &
    CLARTÉ
    SCALABILITÉ
    & EFFICIENCE
    COMMUNICATION
    DESIGNER / DEV
    QUALITÉ DE L’EXPÉRIENCE PERFORMANCE

    View Slide

  23. Les avantages d’un Design System
    COHÉRENCE &
    CLARTÉ
    SCALABILITÉ
    & EFFICIENCE
    COMMUNICATION
    DESIGNER / DEV
    QUALITÉ DE L’EXPÉRIENCE PERFORMANCE
    SE CONCENTRER SUR LA VALEUR AJOUTÉE

    View Slide

  24. Condition de succès d’un
    Design System

    View Slide

  25. Les conditions de succès d’un Design System
    VIVANT

    View Slide

  26. Les conditions de succès d’un Design System
    “A design system isn’t a project. It’s a product serving products.”

    View Slide

  27. Les conditions de succès d’un Design System
    Solitaire Centralisé Communautaire

    View Slide

  28. Les conditions de succès d’un Design System
    VIVANT ATOMIQUE &
    FLEXIBLE

    View Slide

  29. Les conditions de succès d’un Design System

    View Slide

  30. Les conditions de succès d’un Design System
    AGNOSTIQUE
    VIVANT ATOMIQUE &
    FLEXIBLE

    View Slide

  31. Les conditions de succès d’un Design System
    CONSTRUIT
    Grâce à un inventaire

    View Slide

  32. Les conditions de succès d’un Design System

    View Slide

  33. Les conditions de succès d’un Design System
    CONSTRUIT
    Grace un inventaire
    ADOPTÉ
    Par les projets

    View Slide

  34. Les conditions de succès d’un Design System
    BIG BANG INCREMENTAL

    View Slide

  35. Les conditions de succès d’un Design System

    View Slide

  36. Les conditions de succès d’un Design System
    KEEP IT SMALL & ORGANIC
    Essayer de ne pas limiter 

    les champs du possible
    IMPLIQUER AU MAXIMUM
    Et favoriser les échanges

    View Slide

  37. Les limites du
    Design System

    View Slide

  38. FAILLIR DANS LA
    DÉFINITION D’UN
    PÉRIMÈTRE
    COHÉRENCE
    VS
    UNIFORMISATION
    ÉVOLUTION
    VS
    ANTICIPATION
    Les limites d’un Design System
    TOMBER AMOUREUX DE SON PRODUIT

    View Slide

  39. FAILLIR DANS LA
    DÉFINITION D’UN
    PÉRIMÈTRE
    COHÉRENCE
    VS
    UNIFORMISATION
    ÉVOLUTION
    VS
    ANTICIPATION
    Les limites d’un Design System

    View Slide

  40. Les limites d’un Design System
    +15% de conversions
    BUTTON
    AB TEST
    BUTTON

    View Slide

  41. EN CONCLUSION
    « …build something that enables your designers to create better things
    faster and doesn’t just police the great designers you already have. »
    Kyle Peatt, Directeur de l’UX chez Shopify

    View Slide

  42. MERCI

    View Slide