$30 off During Our Annual Pro Sale. View Details »

ADDC 2018: Jolanda Verhoef - Apps can have design systems too!

ADDC 2018: Jolanda Verhoef - Apps can have design systems too!

How do you maintain a consistent design for your native apps? This talk will present a solution for creating a living design system on mobile platforms. You'll walk away with the knowledge to start your own design system journey!

More about the talk, authors & slides: https://addconf.com/2018/schedule/apps-can-have-design-systems-too!/
Read about the conference: https://addconf.com

More Decks by ADDC - App Design & Development Conference

Other Decks in Technology

Transcript

  1. @lojanda Apps can have Design Systems too!

  2. @lojanda ME

  3. @lojanda

  4. @lojanda

  5. @lojanda

  6. @lojanda Apps can have Design Systems too!

  7. None
  8. @lojanda

  9. @lojanda

  10. @lojanda

  11. @lojanda Design System

  12. @lojanda Design System One place with a detailed documentation of

    all the designs, kept in sync with the actual implementation
  13. @lojanda

  14. @lojanda What about Android & iOS?* * Famous last words

  15. @lojanda Design Systems are currently web-oriented HTML CSS npm install…

    SASS Storybook ReactJS
  16. @lojanda

  17. @lojanda What about native?

  18. @lojanda What about native? Here is a library for React

    Native!
  19. @lojanda What about native? Here is a library for React

    Native! Awesome! But I don’t use React Native.
  20. @lojanda What about native? Here is a library for React

    Native! Awesome! But I don’t use React Native. I think most people just work on web…
  21. @lojanda ME

  22. @lojanda Apps can have Design Systems too!

  23. @lojanda WHAT?

  24. @lojanda Design System Design tokens Components Vision Management

  25. @lojanda Design System Design tokens Components Vision Management

  26. @lojanda Design tokens Core properties that every website and app

    consists out of
  27. @lojanda Colors #C36F60 subtleRed #E2B75E peaceYellow #69B1A8 hipsterBlue

  28. @lojanda Typography Title The quick brown fox jumps over the

    lazy dog. Audiowide, 72px, white Body The quick brown fox jumps over the lazy dog. Helvetica, 48px, white
  29. @lojanda Spacings Spacing small 8px Spacing medium 16px Spacing large

    24px
  30. @lojanda Icons ic_android ic_web ic_chat ic_location

  31. @lojanda Design tokens Colors Typography Spacings Icons

  32. @lojanda Design System Design tokens Components Vision Management

  33. @lojanda Design System Design tokens Components Vision Management

  34. @lojanda Components Core elements that the website and app are

    built out of
  35. @lojanda Components Button Toggle Text input

  36. @lojanda Design System Design tokens Components Vision Management

  37. @lojanda Design System Design tokens Components Vision Management

  38. @lojanda Vision High-level principles that guide you on how to

    create good designs
  39. @lojanda Design System Design tokens Components Vision Management

  40. @lojanda Design System Design tokens Components Vision Management

  41. @lojanda Management Rules surrounding the development and maintenance of the

    Design System
  42. @lojanda Design System Design tokens Components Vision Management

  43. @lojanda

  44. @lojanda Living design system

  45. @lojanda WHY?

  46. @lojanda Apps can have Design Systems too!

  47. @lojanda Design System Design tokens Components Vision Management

  48. 1. Share Design Tokens 2. Component library & demo app

    3. Component website
  49. @lojanda Share Design Tokens Colors Typography Spacings Icons

  50. @lojanda Share Design Tokens Web == Android == iOS

  51. @lojanda Share Design Tokens Web != Android != iOS

  52. @lojanda Share Design Tokens WEB hsl(9, 45%, 57%) ANDROID #C36F60

    iOS rgb(195, 111, 96) subtleRed
  53. @lojanda Share Design Tokens WEB hsl(9, 45%, 57%) ANDROID #C36F60

    iOS rgb(195, 111, 96) ORIGIN subtleRed #C36F60
  54. @lojanda Web != Android != iOS Share Design Tokens subtleRed

    #C36F60 Original format Converters to web / android / iOS Setup to automatically publish changes rgb(195, 111, 96) Theo
  55. @lojanda Share Design Tokens - Workflow subtleRed #CC0000 subtleRed #C36F60

    Alice
  56. @lojanda Share Design Tokens - Core elements of your UI

    - Shared among web, Android, iOS - Different representation on web, Android, iOS - Changes are automatically distributed
  57. 1. Share Design Tokens 2. Component library & demo app

    3. Component website
  58. @lojanda Components Button Toggle Text input

  59. @lojanda Web Design System

  60. @lojanda iOS Design System Android Design System

  61. @lojanda Android App Button Code Android Design System

  62. @lojanda 2. Component library Button Code Toggle Code Input Code

  63. @lojanda 2. Component library Design System App Button Code Toggle

    Code Input Code
  64. @lojanda 2. Component library Live App Button Code Toggle Code

    Input Code Design System App
  65. @lojanda Component Library - Workflow Alice

  66. @lojanda 2. Component library & app - Re-usable elements -

    Separate library - Demo app for iOS - Demo app for Android
  67. 1. Share Design Tokens 2. Component library & demo app

    3. Component website
  68. @lojanda Android Design System iOS Design System

  69. @lojanda Android iOS Web

  70. @lojanda iOS Android Web

  71. @lojanda Upload screenshots to Design System

  72. @lojanda https://github.com/facebook/screenshot-tests-for-android

  73. @lojanda Component website - Workflow Record Pablo Verify

  74. @lojanda Component website - Workflow Pablo Verify

  75. @lojanda Upload screenshots to Design System Full customisation No dependencies

    Technically hard No interactions No animations
  76. @lojanda Run an emulator in your browser

  77. @lojanda Run an emulator in your browser Appetize.io * I’m

    not commercially linked to these products
  78. @lojanda Run an emulator in your browser Easy integration Full

    experience 3rd party dependency Pretty expensive Not directly visible
  79. @lojanda 3. Component website - One place for the Design

    System - Upload screenshots - Run emulator in browser
  80. 1. Share Design Tokens 2. Component library & demo app

    3. Component website
  81. @lojanda ME

  82. @lojanda Resources • Twitter: @lojanda • Theo: github.com/salesforce-ux/theo • appetize.io:

    appetize.io • Run that app: runthatapp.com • Sample: github.com/jolandaverhoef/living-design-system-android
  83. @lojanda Apps can have Design Systems too! Join the discussion

    at design-systems.slack.com / #topic-mobile
  84. @lojanda Q&A