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. 5.
  2. 8.
  3. 16.
  4. 17.
  5. 18.
  6. 19.
  7. 20.
  8. 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.”
  9. 24.

  10. 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”
  11. 43.
  12. 44.
  13. 48.
  14. 49.
  15. 53.
  16. 55.
  17. 56.
  18. 57.
  19. 58.
  20. 60.
  21. 61.
  22. 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">
  23. 80.

    Button Default button Secondary button Primary button Designer Developer <Button/>

    <Button kind="primary"/> <Button kind=“secondary"/>
  24. 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
  25. 85.
  26. 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>
  27. 91.

    Text Normal text Dangerous text Secondary text Designer Developer <Text/>

    <Text kind="secondary"/> <Text kind="danger"/>
  28. 97.

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

    class="btn"> Text <p> Heading <h1>…<h6> Dropdown
  29. 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>
  30. 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
  31. 102.
  32. 103.
  33. 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”
  34. 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”
  35. 113.

    “Design system defines a set of UI primitives that can

    be re-used across single or multiple products”
  36. 115.

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

    of units that combine hierarchically and recursively into larger units.”
  37. 116.

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

    system of units primitives that combine hierarchically and recursively into larger units.”