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