Design system

Transcript

1. Design System Maxime Frere - 25 novembre 2018

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

3. C’est quoi un design system ?

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 ?

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

   Composition

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

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

   Composition

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

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

10. Qui utilise un Design System ?

11. Qui utilise un Design System ?

12. Les avantages d’un Design System

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

14. Les avantages d’un Design System

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

    avant le design system

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

    avec le design system

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

    EFFICIENCE

18. Les avantages d’un Design System

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

    EFFICIENCE COMMUNICATION DESIGNER / DEV

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

    BUTTON

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

    sheet Modal Bottom sheet

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

    EFFICIENCE COMMUNICATION DESIGNER / DEV QUALITÉ DE L’EXPÉRIENCE PERFORMANCE

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

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

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

26. Les conditions de succès d’un Design System “A design system

    isn’t a project. It’s a product serving products.”

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

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

    FLEXIBLE

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

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

    & FLEXIBLE

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

    un inventaire

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

33. Les conditions de succès d’un Design System CONSTRUIT Grace un

    inventaire ADOPTÉ Par les projets

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

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

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

37. Les limites du Design System

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

39. FAILLIR DANS LA DÉFINITION D’UN PÉRIMÈTRE COHÉRENCE VS UNIFORMISATION ÉVOLUTION

    VS ANTICIPATION Les limites d’un Design System

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

    TEST BUTTON

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

42. MERCI