Design Systems: it seems that everyone is talking about them these days! But what's really hiding behind these words? What are they exactly? What’s inside? What are the different kinds of systems? And do you really need one?

1. 1
Design Systems
À votre marque… Prêts ? Partez !
Meetup Design Systems

2. 2
Meetup Design Systems

3. 3
Meetup Design Systems

4. #1 What is it?
#2 Should I do it?
#3 Ready? Go!
#4 Go the distance

5. A design system is…

6. 6
What is a Design System?
A sketch file with atomic design symbols?

7. 7
A library, shared with all designers?
What is a Design System?

8. 8A coded pattern library?
What is a Design System?

9. 9
What is a Design System?
Actually it’s all of these things… And so much more!

10. 10
What is a Design System?

11. 11
A Design System
is the story of how your organization
designs and builds digital products
Brad Frost

12. 12
Quelques exemples

13. 13
Quelques exemples

14. 14
Quelques exemples

15. 15
Why now?
Why are we talking about this now?

16. 16
NASA Graphics Standards Manual - 1975
Why now?

17. 17
A designer receiving 300 pages of graphical guidelines…
Why now?

18. Should I do it?

19. 19
What kind of problems will this resolve?
J’y vais ou j’y vais pas ?

20. 20
Who will use it and how?
J’y vais ou j’y vais pas ?
What kind of problems will this resolve?

21. 21
For which products?
J’y vais ou j’y vais pas ?
Who will use it and how?
What kind of problems will this resolve?

22. 22
Process and
methodologies
audits
J’y vais ou j’y vais pas ?

23. 23
Teams
Interviews
J’y vais ou j’y vais pas ?

24. 24
Inventory
J’y vais ou j’y vais pas ?

25. 25
What kind of system
should we create?
J’y vais ou j’y vais pas ?

26. 26
J’y vais ou j’y vais pas ?
Strict or loose?

27. 27
Types of Design systems
Strict

28. 28
J’y vais ou j’y vais pas ?

29. 29
Loose
Types of Design systems

30. 30
Types of Design systems

31. 31
J’y vais ou j’y vais pas ?
Modular or integrated?

32. 32
Modular or integrated?
Types of Design systems

33. 33
Modular or integrated?
Types of Design systems

34. 34
J’y vais ou j’y vais pas ?
Centralized or distributed?

35. 35
Centralized or distributed?
Types of Design systems

36. 36
Types of Design systems
Centralized or distributed?

37. 37
Place your system on a scale
Strict Loose
Modular Integrated
Centralized Distributed
Types of Design systems

38. 38
Place your system on a scale
Types of Design systems
Strict Loose
Modular Integrated
Centralized Distributed

39. Ready? Go!

40. 40
Ready? Go!
What’s inside?

41. 41

42. 42

43. 43
Where are we going? Why? And How?
Goals, values & principles
Shared goals

44. 44
Goals, values & principles
Brand values

45. 45
Goals, values & principles
Design Principles

46. 47

47. 48
Brand identity & language

48. 49
• colors
• shapes
• fonts
• spaces
• icons
• illustrations
• photos
• anim’
• ton of voice
• sounds
Brand
Vocabulary
Brand identity & language

49. 50
With their grammar
& conjugation rules
Brand identity & language

50. 52

52. With their usage
Guidelines
Composants & Patterns

53. Go the distance

54. 56
Les fondamentaux

55. Tenir la distance
Made for
teams

56. Made for
teams
with
Tenir la distance

57. Tenir la distance
Work together

58. 60
Meetup Design Systems

59. 61

60. Tenir la distance
Help and support

61. 63

62. Tenir la distance
Improve continuously

63. 65

64. Take aways

65. 67
Meetup Design Systems
Take time

66. 68
Meetup Design Systems
to align your teams
Take time

67. 69
Meetup Design Systems
to think about what makes sense for you
Take time

68. 70
Meetup Design Systems
to build the system together
Take time

69. 71
Les fondamentaux

70. Merci
72
@audreyhacq
Des questions ?