A Common Design Language

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.

69bb6b30cd7b682ba5d5a1f352e6862a?s=128

Andrey Okonetchnikov

May 25, 2018
Tweet

Transcript

  1. A Common Design Language Let designers & developers talk to

    each other
  2. , Helsinki!

  3. Andrey @okonetchnikov

  4. lint-staged

  5. None
  6. You don’t need to uglify your code if it’s already

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

  8. None
  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

  16. None
  17. None
  18. None
  19. None
  20. None
  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. Are those buttons function the same way?

  25. Design language Typography Color Spacing

  26. Design language system Typography Color Spacing

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

  28. Design System

  29. “Design system defines a set of design- related rules as

    a system of instructions that can be re-used across single or multiple products”
  30. German government vs Austrian government

  31. German federal government web-sites

  32. German federal government web-sites

  33. German federal government web-sites

  34. Design system

  35. Austrian federal government web-sites

  36. Austrian federal government web-sites

  37. Austrian federal government web-sites

  38. Austrian federal government web-sites

  39. No design system

  40. Design language of digital products

  41. User Interface = Language

  42. None
  43. Button

  44. Button Avatar Text Button Icon

  45. iOS UI Component Library

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

  47. Bootstrap

  48. but…

  49. Designer’s Tools in Sketch

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

  51. Developers & Designers speak different languages

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

  54. None
  55. None
  56. None
  57. None
  58. Designer’s Tools in Sketch

  59. None
  60. None
  61. –Developers “Should designers code?”

  62. –Designers “Should developers design?”

  63. A common language?

  64. Designer’s language Typography Color Spacing

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

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

  67. UI Primitives

  68. Text Button Icon Input Avatar

  69. Text Button Icon Input Avatar

  70. Login Form

  71. Text Button Icon Input Avatar

  72. Search Toolbar

  73. Text Button Icon Input Avatar

  74. Button Default Secondary Primary

  75. Button Default button Secondary button Primary button Designer

  76. 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">
  77. Are those buttons function the same way?

  78. Button Default button Secondary button Primary button Designer Developer Button

    Button primary Button secondary
  79. Button Default button Secondary button Primary button Designer Developer <Button/>

    <Button kind="primary"/> <Button kind=“secondary"/>
  80. https://component-driven.github.io/component-driven-development/styleguide/

  81. But HTML has <button>

  82. <button> != <Button>

  83. 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
  84. Text

  85. Text Normal Dangerous Secondary

  86. Text Normal text Dangerous text Secondary text Designer

  87. 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>
  88. Different font styles in one product

  89. Text Normal text Dangerous text Secondary text Designer Developer Text

    Text secondary Text danger
  90. Text Normal text Dangerous text Secondary text Designer Developer <Text/>

    <Text kind="secondary"/> <Text kind="danger"/>
  91. <p> != <Text>

  92. <h1> != <Heading>

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

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

  95. there is another reason...

  96. HTML Primitives Link <a href> Button <button class="btn"> <input type="button"

    class="btn"> Text <p> Heading <h1>…<h6> Dropdown
  97. https://getbootstrap.com/docs/3.3/components/#dropdowns

  98. <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>
  99. 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
  100. UI Primitives for designers?

  101. None
  102. None
  103. https://ant.design/components/button/

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

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

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

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

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

  109. UI Primitives for design systems

  110. “Design system defines a set of design- related rules as

    a system of instructions that can be re-used across single or multiple products”
  111. “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”
  112. “Design system defines a set of UI primitives that can

    be re-used across single or multiple products”
  113. UI Primitives as a common language

  114. “Language is a system […] with a limited, finite system

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

    system of units primitives that combine hierarchically and recursively into larger units.”
  116. Language > Technology

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