Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design system

483e82c683b252a4177b4c75e2b1d303?s=47 Maxime Frere
November 08, 2018

Design system

483e82c683b252a4177b4c75e2b1d303?s=128

Maxime Frere

November 08, 2018
Tweet

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