Component-Driven Design Systems Workshop

https://component-driven.io

Transcript

1. Component-Driven Design Systems Workshop
2. component driven.io https://component-driven.io @okonetchnikov @iamsapegin @ComponentDriven
3. @okonetchnikov UI developer with an experience in both design and development who specializes in interaction design, design systems and modern frontend development.
4. UI engineer working with web technologies since 1999. Creator of react- styleguidist and component-driven- development @iamsapegin
5. bit.ly/cddwrkshp Workshop GitHub page
6. What’s on your mind?
7. Plan for today
8. Plan for today ✓ DS theory ✓ UI Inventory ✓ Introduction to CDD ✓ Design Tokens ✓ UI Primitives ✓ Layout & Whitespace Management ✓ UI Composition
9. Design language Typography Color Spacing UX
10. No whitespace Added whitespace Typography
11. Low contrast High contrast Color
12. Spacing No structure Structured content
13. Design language • Establishes the brand • Adds consistency • Improves accessibility
14. Brand
15. Dropbox Yandex.Disk Brand
16. Consistency
17. Accessibility
18. Accessibility
19. How do we enforce design language?
20. Design Systems
21. “Design system defines a set of design- related rules as a system of instructions that can be re-used across single or multiple products”
22. German government vs Austrian government
23. German federal government web-sites
24. German federal government web-sites
25. German federal government web-sites
26. Design system
27. Austrian federal government web-sites
28. Austrian federal government web-sites
29. Austrian federal government web-sites
30. Austrian federal government web-sites
31. No design system
32. Component-driven Design Systems
33. The Process 1. Analyze & Plan 2. Execute 3. Maintain 4. PROFIT!
34. 1. Analyze & Plan
35. Where to start 1. Analyze & find problems (UI Inventory) 2. Document 3. Plan 4. Execute!
36. UI inventory process
37. UI inventory process
38. UI inventory process
39. UI inventory process
40. Document
41. Plan
42. https://bit.ly/2U3hdss
43. 2. Execute Building styleguides
44. Styleguides
45. “Styleguide is a collection of rules, patterns and components that are re- usable across single or multiple products.”
46. https://vueds.com/example/#!/Design%20Tokens
47. https://material-ui-next.com/style/color/
48. https://www.lightningdesignsystem.com/design-tokens/
49. https://vueds.com/example/#!/Design%20Tokens?id=all
50. https://ant.design/components/button/
51. https://react-bootstrap.github.io/components/buttons/
52. https://www.lightningdesignsystem.com/components/avatar/
53. https://dialogs.github.io/dialog-web-components/
54. http://jxnblk.com/rebass/getting-started
55. http://blueprintjs.com/docs/v2/#icons
56. Good styleguides • A common language for designers, developers, PMs • Easy to use: good structure + relevant content • Styleguide = documentation • Easy to create & maintain • Always up-to-date
57. Styleguide generators
59. https://storybook.js.org
61. https://www.catalog.style
62. react-cosmos
63. https://github.com/react-cosmos/react-cosmos
65. https://react.feedly.com
66. npm start
67. Directory structure for component-driven development
68. Design Tokens
69. –https://www.lightningdesignsystem.com/design-tokens/ “Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes”
70. Typography scale a a a a a a a a a a a a a a a a a
71. http://webtypography.net/3.1.1
72. Naming • x-small small medium large x-large • xs, sm, md, lg, xl • xs s m l xl • 0, 1, 2, 3, 4, 5 • alpha beta gamma delta epsilon
73. Linear progression Geometric progression Spacing scale
74. Spacing
75. https://design.lyft.com/re-approaching-color-9e604ba22c88 Color palettes
76. https://www.colorbox.io
77. https://colorsnapper.com
78. Color tokens
79. ⚒ DesignTokens
80. UI Primitives
82. Button
83. Label Button Icon Input Avatar
84. Label Button Icon Input Avatar
85. Login Form
86. Label Button Icon Input Avatar
87. Search Toolbar
88. Label Button Icon Input Avatar
89. ⚒ Primitives
90. Component variations <Button primary /> <Button secondary />
91. Component variations // Don't do this <Button primary /> <Button secondary /> // Impossible state! <Button primary secondary />
92. Component variations // Do this instead! <Button variant="primary" /> <Button variant="secondary" />
93. Accessing design tokens // Hard coded value styled.button`color: tomato;`
94. Accessing design tokens // Value from the static imported theme import {colors} from './theme.js'; styled.button`color: ${colors.primary};`
95. Accessing design tokens // Value coming from the theme styled.button` color: ${props => props.theme.colors.primary}; `
96. Accessing design tokens // Value coming from the theme (shorthand) import {themeGet} from 'styled-system'; styled.button` color: ${themeGet('colors.primary')}; `
97. API for design tokens import { color } from 'styled-system'; const Text = styled.p`${color};` Text.defaultProps = { color: 'primary' } // Renders text with primary color <Text/> // Renders text with secondary color <Text color="secondary"/> https://styled-system.com/how-it-works
98. ⚒ Whitespace & Layout
99. UI Patterns
101. –https://en.wikipedia.org/wiki/Design_pattern “A design pattern is the re-usable form of a solution to a design problem.”
102. A Pattern Language: Towns, Buildings, Construction Christopher Alexander
103. http://ui-patterns.com/patterns/PasswordStrengthMeter
104. https://react.feedly.com/#inputsuggestionlist
105. Patterns • A great way to communicate • Suitable for both designers & developers (and many others) • Solve particular design problems • Re-usable • …
106. 3. Maintain
107. Process Development Product Design
108. Process Product Design & Development
109. Process Product Design & Development Styleguide
110. Process Design & Development Design System
111. Process Design & Development Design System
112. Benefits of CDD • Develop in isolation • Faster feedback loop • See all possible states • Easier to refactor • Documentation!
113. Reasons for CDD • A common language for designers & developers • Enforce design language & design system • Consistent UI • Scales: single or multiple products • Up-to-date documentation
114. How to start? • Don’t ask for permission, just start! • Make a thing • Show it’s useful • Commit!
115. Discussion What problems are you facing…
116. Further reading
117. Atomic Design Brad Frost
118. Design Systems Alla Kholmatova
119. A Pattern Language: Towns, Buildings, Construction Christopher Alexander
120. The Elements of Typographic Style Robert Bringhurst
121. http://webtypography.net
122. • https://www.styled-components.com • github.com/jxnblk/styled-system • https://github.com/rebassjs/grid • https://github.com/rebassjs/space • https://github.com/sapegin/stack-styled • github.com/jxnblk/macro-components
123. component driven.io https://component-driven.io @okonetchnikov @iamsapegin @ComponentDriven