A Common Design Language

"Should designers code?" or "Should coders design?" — these 2 eternal questions are being asked for years with no particular answer given.

- How to let developers know what typography style or button variance they should be using on this particular screen?
- How to ensure that the whole UI is consistent?
- How to let designers know that some screen design doesn't fit the requirements and needs to be updated?

In order to answer those questions designers and developers have to speak the same language. But what language should it be. UI components and pattern libraries can provide this intermediate abstraction and be a common language for both designers and developers.

Transcript

1. A Common Design Language Let designers & developers talk to each other
2. , Helsinki!
3. Andrey @okonetchnikov
4. lint-staged
6. You don’t need to uglify your code if it’s already ugly!
7. https://twitter.com/chicoxyzzy/status/1116221021441470464
9. Vienna, $ The boring™ city
10. https://www.meetup.com/ReactVienna
11. https://reason-conf.com
12. Museum of History of Art Vienna, Austria
13. a.k.a. the place they use paintings as wallpapers
14. “The Tower of Babel” by Peter Breugel
15. 7,000+ https://www.ethnologue.com
21. –https://www.linguisticsociety.org/content/how-many-languages-are- there-world “Language is a system […] with a limited, finite system of units that combine hierarchically and recursively into larger units.”
22. Design language Photo by Maik Jonietz on Unsplash
23. Design language Typography Color Spacing
24. ∞
25. Are those buttons function the same way?
26. Design language Typography Color Spacing
27. Design language system Typography Color Spacing
28. https://airbnb.design/building-a-visual-language/
29. Design System
30. “Design system defines a set of design- related rules as a system of instructions that can be re-used across single or multiple products”
31. German government vs Austrian government
32. German federal government web-sites
33. German federal government web-sites
34. German federal government web-sites
35. Design system
36. Austrian federal government web-sites
37. Austrian federal government web-sites
38. Austrian federal government web-sites
39. Austrian federal government web-sites
40. No design system
41. Design language of digital products
42. User Interface = Language
44. Button
45. Button Avatar Text Button Icon
46. iOS UI Component Library
47. https://en.bem.info/methodology/key-concepts/
48. Bootstrap
49. but…
50. Designer’s Tools in Sketch
51. https://github.com/twbs/bootstrap/blob/v4-dev/scss/_buttons.scss
52. Developers & Designers speak different languages
54. https://www.cssauthor.com/wp-content/uploads/2015/07/HTML5-Cheat-Sheet.jpg
59. Designer’s Tools in Sketch
62. –Developers “Should designers code?”
63. –Designers “Should developers design?”
64. A common language?
65. Designer’s language Typography Color Spacing
66. Developer’s language HTML CSS JavaScript Typography Color Spacing
67. Common language? HTML CSS JavaScript Typography Color Spacing UI Primitives
68. UI Primitives
69. Text Button Icon Input Avatar
70. Text Button Icon Input Avatar
71. Login Form
72. Text Button Icon Input Avatar
73. Search Toolbar
74. Text Button Icon Input Avatar
75. Button Default Secondary Primary
76. Button Default button Secondary button Primary button Designer
77. Button Default button Secondary button Primary button Designer Developer <button class="btn"> <input type="button" class="bt <div class="btn"> <button class="btn btn-seconda <input type="button" class="bt <div class="btn btn-secondary” <button class="btn btn-primary <input type="button" class="bt <div class="btn btn-primary">
78. Are those buttons function the same way?
79. Button Default button Secondary button Primary button Designer Developer Button Button primary Button secondary
80. Button Default button Secondary button Primary button Designer Developer <Button/> <Button kind="primary"/> <Button kind=“secondary"/>
81. https://component-driven.github.io/component-driven-development/styleguide/
82. But HTML has <button>
83. <button> != <Button>
84. CSS has semantic value HTML can be anything CSS = expect unexpected Reusability Strict contract via propsTypes CSS isn’t the API HTML isn’t the API Reusability button != Button
85. Text
86. Text Normal Dangerous Secondary
87. Text Normal text Dangerous text Secondary text Designer
88. Text Normal text Dangerous text Secondary text Designer Developer <p>Text</ p> <span>Text</ span> <p class="secondary error">Tex <p style="color: red">Text</ p> <p class="secondary">Text</ p> <p style="font-size: 85%">Text <small>Text</ small>
89. Different font styles in one product
90. Text Normal text Dangerous text Secondary text Designer Developer Text Text secondary Text danger
91. Text Normal text Dangerous text Secondary text Designer Developer <Text/> <Text kind="secondary"/> <Text kind="danger"/>
92. <p> != <Text>
93. <h1> != <Heading>
94. https://component-driven.github.io/component-driven-development/styleguide/
95. https://component-driven.github.io/component-driven-development/styleguide/
96. there is another reason...
97. HTML Primitives Link <a href> Button <button class="btn"> <input type="button" class="btn"> Text <p> Heading <h1>…<h6> Dropdown
98. https://getbootstrap.com/docs/3.3/components/#dropdowns
99. <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded=“true" > Dropdown <span class="caret"></ span> </ button> <ul class="dropdown-menu" aria-labelledby=“dropdownMenu1" > <li><a href="#">Action</ a></ li> <li><a href="#">Another action</ a></ li> <li><a href="#">Something else here</ a></ li> <li role="separator" class="divider"></ li> <li><a href="#">Separated link</ a></ li> </ ul> </ div> HTML vs. Primitives <DropdownButton title="Title"> <MenuItem eventKey="1">Action</ MenuItem> <MenuItem eventKey="2">Another action</ MenuItem> <MenuItem eventKey="3" active>Active Item</ MenuItem> <MenuItem divider /> <MenuItem eventKey="4">Separated link</ MenuItem> </ DropdownButton>
100. HTML & CSS is the API Lots of CSS & HTML to write Lots of choices. Loose Design constraints Shared language No CSS & HTML to write Limited choice. Strict Design constraints HTML vs. Primitives
101. UI Primitives for designers?
104. https://ant.design/components/button/
105. https://github.com/ant-design/antd-sketchapp
106. https://airbnb.design/painting-with-code/
107. https://airbnb.design/painting-with-code/
108. https://medium.com/seek-blog/sketching-in-the-browser-33a7b7aa0526
109. https://twitter.com/markdalgleish/status/933919800685879297
110. UI Primitives for design systems
111. “Design system defines a set of design- related rules as a system of instructions that can be re-used across single or multiple products”
112. “Design system defines a set of design- related rules as a system of instructions UI primitives that can be re-used across single or multiple products”
113. “Design system defines a set of UI primitives that can be re-used across single or multiple products”
114. UI Primitives as a common language
115. “Language is a system […] with a limited, finite system of units that combine hierarchically and recursively into larger units.”
116. “Language UI is a system […] with a limited, finite system of units primitives that combine hierarchically and recursively into larger units.”
117. Language > Technology
118. component driven.io https://component-driven.io @okonetchnikov @iamsapegin @ComponentDriven