Design system

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