Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ADDC 2019 - Maria Neumayer - Consistency is Key - Working with a Design System

ADDC 2019 - Maria Neumayer - Consistency is Key - Working with a Design System

Working with a design system can be hugely rewarding: layouts can be created and modified using shared components. This should result in faster design and development and consistent designs across the app. But getting there is a slow and painful process. When implementing a design system you have to make many decisions, like: Where do you start? What actually makes a component? And how flexible should components be? This talk will shed some light on these issues by taking you through Deliveroo's process of adopting a design system in its three Android apps.

Recordings & more: https://addconf.com/

More Decks by ADDC - App Design & Development Conference

Other Decks in Technology

Transcript

  1. CONSISTENCY IS KEY Working with a design system Maria Neumayer

    - @marianeum
  2. Consumer Restaurant Rider

  3. Deliveroo

  4. Design system

  5. Visual Styles

  6. Visual Styles UI Components

  7. Visual Styles UI Components Guidelines

  8. Material Design

  9. ! ⁉ #

  10. None
  11. Designers Engineers

  12. None
  13. None
  14. Consumer Restaurant Rider

  15. Consumer Restaurant Rider UiKit

  16. Private Maven Repository

  17. implementation "com.deliveroo.android:ui-kit:1.0.0"a

  18. Major Minor Patch 1.0.0

  19. Major Minor Patch 1.0.0

  20. Major Minor Patch 1.0.0

  21. Major Minor Patch 1.0.0

  22. None
  23. None
  24. None
  25. Creating components

  26. None
  27. <color name="teal_100">#00ccbc</color> <style name=“UIKit.TextAppearance.Heading.Medium”>

  28. None
  29. None
  30. None
  31. None
  32. <style name="Special.Button" parent="Body.Medium.Bold.White"> <item name="android:minHeight">@dimen/button_height</item> <item name="android:paddingStart">@dimen/padding_sides</item> <item name="android:paddingEnd">@dimen/padding_sides</item> <item

    name="android:paddingTop">@dimen/padding_top_bottom</item> <item name="android:paddingBottom">@dimen/padding_top_bottom</item> <item name="android:foreground">?selectableItemBackground</item> <item name="android:stateListAnimator">@animator/button_animator</item> </style> <style name="Special.Button.Primary"> <item name="android:background">@drawable/button_bg_primary</item> </style> <style name="Special.Button.Secondary"> <item name="android:background">@drawable/button_bg_secondary</item> <item name="android:textStyle">normal</item> <item name="android:textColor">@color/teal_120</item> </style>
  33. <style name="Special.Button.Primary.Green"> <item name="android:background">@drawable/button_bg_green</item> </style> $

  34. <style name="Special.Button.Primary.Green"> <item name="android:background">@drawable/button_bg_green</item> </style> % <style name="Special.Button.Primary.Red"> <item name="android:background">@drawable/button_bg_red</item>

    </style> <style name="Special.Button.Primary.Small"> <item name="android:paddingStart">@dimen/padding_small</item> <item name="android:paddingEnd">@dimen/padding_small</item> <item name="android:paddingTop">@dimen/padding_small</item> <item name="android:paddingBottom">@dimen/padding_small</item> </style> <style name="Special.Button.Secondary.Large"> <item name="android:minHeight">@dimen/button_large</item> </style> ⁉ #
  35. <Button style="@style/Special.Button.Primary" android:layout_width="match_parent" android:layout_height="wrap_content" android:drawableStart="@drawable/ic_star" android:text="@string/button_label" /> Wanted Result

  36. <com.deliveroo.common.ui.UiKitButton android:layout_width="match_parent" android:layout_height="wrap_content" app:icon="@drawable/ic_star" app:text="@string/button_label"/> Result

  37. Styles + Easy to setup + Easy to extend -

    Less consistency - Might be restrictive Custom Views + Full control + Decide properties and restrictions - Harder to extend ⚖
  38. Button

  39. Button UiKitButton

  40. <declare-styleable name="UiKitButton"> <attr name="text" format="string"/> <attr name="icon" format="reference"/> <attr name="type"

    format="enum"> <enum name="primary" value="0"/> <enum name="secondary" value="1"/> <enum name="tertiary" value="2"/> <enum name="destructive" value=“3"/> </attr> <attr name="inverted" format="boolean"/> <attr name="loading" format="boolean"/> <attr name="enabled" format="boolean"/> </declare-styleable>
  41. button.type = UiKitButton.Type.PRIMARY button.text = "Hello ADDC”

  42. Forces consistency Simplifies the component

  43. Forces consistency Simplifies the component

  44. Designers + Engineers need to be aware of limitations

  45. '

  46. ( Communicate changes Document components

  47. ( Communicate changes Document components

  48. ( Clarify behaviour Enable easy access

  49. ( Clarify behaviour Enable easy access

  50. Communicate

  51. Creating components

  52. Simplicity Consistency Reusability

  53. Simplicity Consistency Reusability

  54. Simplicity Consistency Reusability

  55. Updating components

  56. <declare-styleable name="UiKitButton"> <attr name="type" format="enum"> <enum name="primary" value="0"/> <enum name="secondary"

    value="1"/> <enum name="tertiary" value="2"/> <enum name="destructive" value=“3"/> </attr> </declare-styleable>
  57. <declare-styleable name="UiKitButton"> <attr name="type" format="enum"> <enum name="primary" value="0"/> <enum name="secondary"

    value="1"/> <enum name="tertiary" value="2"/> </attr> <attr name="destructive" format="boolean"/> </declare-styleable>
  58. <attr name="type" format="enum"> <enum name="primary" value="0"/> <enum name="secondary" value="1"/> <enum

    name="tertiary" value="2"/> <!-- {@deprecated Use property instead.} --> <enum name="destructive" value="3"/> </attr> enum class Type { PRIMARY, SECONDARY, TERTIARY, @Deprecated("Use property instead") DESTRUCTIVE }
  59. None
  60. None
  61. )

  62. implementation "com.deliveroo.android:icon-set:1.9.0"a *

  63. What’s next?

  64. Design Tokens

  65. JSON Android XML iOS plist Web CSS

  66. Dark mode

  67. We’re still at the beginning

  68. THANK YOU Maria Neumayer - @marianeum We’re hiring - deliveroo.co.uk/careers