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

    View Slide

  2. Consumer Restaurant Rider

    View Slide

  3. Deliveroo

    View Slide

  4. Design system

    View Slide

  5. Visual Styles

    View Slide

  6. Visual Styles UI Components

    View Slide

  7. Visual Styles UI Components Guidelines

    View Slide

  8. Material Design

    View Slide

  9. !
    ⁉ #

    View Slide

  10. View Slide

  11. Designers Engineers

    View Slide

  12. View Slide

  13. View Slide

  14. Consumer Restaurant Rider

    View Slide

  15. Consumer Restaurant Rider
    UiKit

    View Slide

  16. Private Maven Repository

    View Slide

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

    View Slide

  18. Major Minor Patch
    1.0.0

    View Slide

  19. Major Minor Patch
    1.0.0

    View Slide

  20. Major Minor Patch
    1.0.0

    View Slide

  21. Major Minor Patch
    1.0.0

    View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. Creating components

    View Slide

  26. View Slide

  27. #00ccbc
    <br/>

    View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. <br/><item name="android:minHeight">@dimen/button_height</item><br/><item name="android:paddingStart">@dimen/padding_sides</item><br/><item name="android:paddingEnd">@dimen/padding_sides</item><br/><item name="android:paddingTop">@dimen/padding_top_bottom</item><br/><item name="android:paddingBottom">@dimen/padding_top_bottom</item><br/><item name="android:foreground">?selectableItemBackground</item><br/><item name="android:stateListAnimator">@animator/button_animator</item><br/>
    <br/><item name="android:background">@drawable/button_bg_primary</item><br/>
    <br/><item name="android:background">@drawable/button_bg_secondary</item><br/><item name="android:textStyle">normal</item><br/><item name="android:textColor">@color/teal_120</item><br/>

    View Slide

  33. <br/><item name="android:background">@drawable/button_bg_green</item><br/>
    $

    View Slide

  34. <br/><item name="android:background">@drawable/button_bg_green</item><br/>
    %
    <br/><item name="android:background">@drawable/button_bg_red</item><br/>
    <br/><item name="android:paddingStart">@dimen/padding_small</item><br/><item name="android:paddingEnd">@dimen/padding_small</item><br/><item name="android:paddingTop">@dimen/padding_small</item><br/><item name="android:paddingBottom">@dimen/padding_small</item><br/>
    <br/><item name="android:minHeight">@dimen/button_large</item><br/>

    #

    View Slide

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

    View Slide

  36. android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:icon="@drawable/ic_star"
    app:text="@string/button_label"/>
    Result

    View Slide

  37. Styles
    + Easy to setup
    + Easy to extend
    - Less consistency
    - Might be restrictive
    Custom Views
    + Full control
    + Decide properties
    and restrictions
    - Harder to extend

    View Slide

  38. Button

    View Slide

  39. Button UiKitButton

    View Slide














  40. View Slide

  41. button.type = UiKitButton.Type.PRIMARY
    button.text = "Hello ADDC”

    View Slide

  42. Forces consistency
    Simplifies the component

    View Slide

  43. Forces consistency
    Simplifies the component

    View Slide

  44. Designers + Engineers
    need to be aware
    of limitations

    View Slide

  45. '

    View Slide

  46. (
    Communicate changes
    Document components

    View Slide

  47. (
    Communicate changes
    Document components

    View Slide

  48. (
    Clarify behaviour
    Enable easy access

    View Slide

  49. (
    Clarify behaviour
    Enable easy access

    View Slide

  50. Communicate

    View Slide

  51. Creating components

    View Slide

  52. Simplicity
    Consistency
    Reusability

    View Slide

  53. Simplicity
    Consistency
    Reusability

    View Slide

  54. Simplicity
    Consistency
    Reusability

    View Slide

  55. Updating
    components

    View Slide









  56. View Slide









  57. View Slide








  58. enum class Type {
    PRIMARY,
    SECONDARY,
    TERTIARY,
    @Deprecated("Use property instead")
    DESTRUCTIVE
    }

    View Slide

  59. View Slide

  60. View Slide

  61. )

    View Slide

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

    View Slide

  63. What’s next?

    View Slide

  64. Design Tokens

    View Slide

  65. JSON
    Android XML
    iOS plist
    Web CSS

    View Slide

  66. Dark mode

    View Slide

  67. We’re still
    at the beginning

    View Slide

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

    View Slide