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 full-size slide

  2. Consumer Restaurant Rider

    View full-size slide

  3. Design system

    View full-size slide

  4. Visual Styles

    View full-size slide

  5. Visual Styles UI Components

    View full-size slide

  6. Visual Styles UI Components Guidelines

    View full-size slide

  7. Material Design

    View full-size slide

  8. Designers Engineers

    View full-size slide

  9. Consumer Restaurant Rider

    View full-size slide

  10. Consumer Restaurant Rider
    UiKit

    View full-size slide

  11. Private Maven Repository

    View full-size slide

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

    View full-size slide

  13. Major Minor Patch
    1.0.0

    View full-size slide

  14. Major Minor Patch
    1.0.0

    View full-size slide

  15. Major Minor Patch
    1.0.0

    View full-size slide

  16. Major Minor Patch
    1.0.0

    View full-size slide

  17. Creating components

    View full-size slide

  18. #00ccbc
    <br/>

    View full-size slide

  19. <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 full-size slide

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

    View full-size slide

  21. <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 full-size slide

  22. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  25. Button UiKitButton

    View full-size slide

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

    View full-size slide

  27. Forces consistency
    Simplifies the component

    View full-size slide

  28. Forces consistency
    Simplifies the component

    View full-size slide

  29. Designers + Engineers
    need to be aware
    of limitations

    View full-size slide

  30. (
    Communicate changes
    Document components

    View full-size slide

  31. (
    Communicate changes
    Document components

    View full-size slide

  32. (
    Clarify behaviour
    Enable easy access

    View full-size slide

  33. (
    Clarify behaviour
    Enable easy access

    View full-size slide

  34. Creating components

    View full-size slide

  35. Simplicity
    Consistency
    Reusability

    View full-size slide

  36. Simplicity
    Consistency
    Reusability

    View full-size slide

  37. Simplicity
    Consistency
    Reusability

    View full-size slide

  38. Updating
    components

    View full-size slide








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

    View full-size slide

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

    View full-size slide

  41. What’s next?

    View full-size slide

  42. Design Tokens

    View full-size slide

  43. JSON
    Android XML
    iOS plist
    Web CSS

    View full-size slide

  44. We’re still
    at the beginning

    View full-size slide

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

    View full-size slide