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
   

   View Slide

2. , Helsinki!
   

   View Slide

3. Andrey
   @okonetchnikov
   

   View Slide

4. lint-staged
   

   View Slide

5. View Slide

6. You don’t need to uglify
   your code if it’s already ugly!
   

   View Slide

7. https://twitter.com/chicoxyzzy/status/1116221021441470464
   

   View Slide

8. View Slide

9. Vienna, $
   The boring™ city
   

   View Slide

10. https://www.meetup.com/ReactVienna
    

    View Slide

11. https://reason-conf.com
    

    View Slide

12. Museum of History of Art
    Vienna, Austria
    

    View Slide

13. a.k.a. the place they use paintings as wallpapers
    

    View Slide

14. “The Tower of Babel”
    by Peter Breugel
    

    View Slide

15. 7,000+
    https://www.ethnologue.com
    

    View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

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.”
    

    View Slide

22. Design language
    Photo by Maik Jonietz on Unsplash
    

    View Slide

23. Design language
    Typography Color Spacing
    

    View Slide

24. ∞
    

    View Slide

25. Are those buttons function the same way?
    

    View Slide

26. Design language
    Typography Color Spacing
    

    View Slide

27. Design language system
    Typography
    Color
    Spacing
    

    View Slide

28. https://airbnb.design/building-a-visual-language/
    

    View Slide

29. Design System
    

    View Slide

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”
    

    View Slide

31. German government vs Austrian government
    

    View Slide

32. German federal government web-sites
    

    View Slide

33. German federal government web-sites
    

    View Slide

34. German federal government web-sites
    

    View Slide

35. Design system
    

    View Slide

36. Austrian federal government web-sites
    

    View Slide

37. Austrian federal government web-sites
    

    View Slide

38. Austrian federal government web-sites
    

    View Slide

39. Austrian federal government web-sites
    

    View Slide

40. No design system
    

    View Slide

41. Design language of
    digital products
    

    View Slide

42. User Interface = Language
    

    View Slide

43. View Slide

44. Button
    

    View Slide

45. Button
    Avatar Text Button Icon
    

    View Slide

46. iOS UI Component Library
    

    View Slide

47. https://en.bem.info/methodology/key-concepts/
    

    View Slide

48. Bootstrap
    

    View Slide

49. but…
    

    View Slide

50. Designer’s Tools in Sketch
    

    View Slide

51. https://github.com/twbs/bootstrap/blob/v4-dev/scss/_buttons.scss
    

    View Slide

52. Developers & Designers
    speak different languages
    

    View Slide

53. View Slide

54. https://www.cssauthor.com/wp-content/uploads/2015/07/HTML5-Cheat-Sheet.jpg
    

    View Slide

55. View Slide

56. View Slide

57. View Slide

58. View Slide

59. Designer’s Tools in Sketch
    

    View Slide

60. View Slide

61. View Slide

62. –Developers
    “Should designers code?”
    

    View Slide

63. –Designers
    “Should developers design?”
    

    View Slide

64. A common language?
    

    View Slide

65. Designer’s language
    Typography Color
    Spacing
    

    View Slide

66. Developer’s language
    HTML CSS
    JavaScript
    Typography Color
    Spacing
    

    View Slide

67. Common language?
    HTML CSS
    JavaScript
    Typography Color
    Spacing
    UI Primitives
    

    View Slide

68. UI Primitives
    

    View Slide

69. Text Button Icon
    Input
    Avatar
    

    View Slide

70. Text Button Icon
    Input
    Avatar
    

    View Slide

71. Login Form
    

    View Slide

72. Text Button Icon
    Input
    Avatar
    

    View Slide

73. Search Toolbar
    

    View Slide

74. Text Button Icon
    Input
    Avatar
    

    View Slide

75. Button
    Default
    Secondary
    Primary
    

    View Slide

76. Button
    Default button
    Secondary button
    Primary button
    Designer
    

    View Slide

77. Button
    Default button
    Secondary button
    Primary button
    Designer Developer
    
    
    
    

    View Slide

78. Are those buttons function the same way?
    

    View Slide

79. Button
    Default button
    Secondary button
    Primary button
    Designer Developer
    Button
    Button primary
    Button secondary
    

    View Slide

80. Button
    Default button
    Secondary button
    Primary button
    Designer Developer
    
    
    
    

    View Slide

81. https://component-driven.github.io/component-driven-development/styleguide/
    

    View Slide

82. But HTML has
    
    

    View Slide

83. !=
    

    View Slide

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
    

    View Slide

85. Text
    

    View Slide

86. Text
    Normal
    Dangerous
    Secondary
    

    View Slide

87. Text
    Normal text
    Dangerous text
    Secondary text
    Designer
    

    View Slide

88. Text
    Normal text
    Dangerous text
    Secondary text
    Designer Developer
    Text p>
    Text span>
    Tex
    Text p>
    Text p>
    Text
    Text small>
    

    View Slide

89. Different font styles in one product
    

    View Slide

90. Text
    Normal text
    Dangerous text
    Secondary text
    Designer Developer
    Text
    Text secondary
    Text danger
    

    View Slide

91. Text
    Normal text
    Dangerous text
    Secondary text
    Designer Developer
    
    
    
    

    View Slide

92. !=
    

    View Slide

93. !=
    

    View Slide

94. https://component-driven.github.io/component-driven-development/styleguide/
    

    View Slide

95. https://component-driven.github.io/component-driven-development/styleguide/
    

    View Slide

96. there is another reason...
    

    View Slide

97. HTML Primitives
    Link
    Button
    
    Text
    Heading …
    Dropdown
    

    View Slide

98. https://getbootstrap.com/docs/3.3/components/#dropdowns
    

    View Slide

99. 
    class="btn btn-default dropdown-toggle"
    type="button"
    id="dropdownMenu1"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded=“true"
    >
    Dropdown
    span>
    button>
    class="dropdown-menu"
    aria-labelledby=“dropdownMenu1"
    >
    Action a> li>
    Another action a> li>
    Something else here a> li>
    li>
    Separated link a> li>
    ul>
    div>
    HTML vs. Primitives
    
    Action MenuItem>
    Another action MenuItem>
    Active Item MenuItem>
    
    Separated link MenuItem>
    DropdownButton>
    

    View Slide

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
     

     View Slide

101. UI Primitives for
     designers?
     

     View Slide

102. View Slide

103. View Slide

104. https://ant.design/components/button/
     

     View Slide

105. https://github.com/ant-design/antd-sketchapp
     

     View Slide

106. https://airbnb.design/painting-with-code/
     

     View Slide

107. https://airbnb.design/painting-with-code/
     

     View Slide

108. https://medium.com/seek-blog/sketching-in-the-browser-33a7b7aa0526
     

     View Slide

109. https://twitter.com/markdalgleish/status/933919800685879297
     

     View Slide

110. UI Primitives
     for design systems
     

     View Slide

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”
     

     View Slide

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”
     

     View Slide

113. “Design system defines a set of
     UI primitives that can be re-used across
     single or multiple products”
     

     View Slide

114. UI Primitives
     as a common language
     

     View Slide

115. “Language is a system […] with a
     limited, finite system of units that
     combine hierarchically and recursively
     into larger units.”
     

     View Slide

116. “Language UI is a system […] with a
     limited, finite system of units primitives
     that combine hierarchically and
     recursively into larger units.”
     

     View Slide

117. Language > Technology
     

     View Slide

118. component
     driven.io
     https://component-driven.io
     @okonetchnikov @iamsapegin
     @ComponentDriven
     

     View Slide