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

Close the Loop: Designing and Developing Together (Droidcon NYC, September 2016)

Close the Loop: Designing and Developing Together (Droidcon NYC, September 2016)

(Co-presented with Zack Simon. Will add link to video when posted.)

Whether you work as a developer or designer at a product company, as an independent contractor, or as part of a team of consultants, you will leave this session with new techniques to streamline your “dev+sign” process, making it a more enjoyable and effective experience for all.

At Big Nerd Ranch we’ve forged a process where Android developers and designers work hand-in-hand throughout the life of a project to support each other in creating the most awesome Android app possible. We will walk you through real examples from the trenches (names will be changes to protect the innocent!) and talk about what we learned from our mistakes.

From presenting a united front in advocating for standard Android conventions, to creating a shared language for common elements to reduce code redundancy and prevent a rat’s nest of styles, we will share details about processes we follow to solve problems we have faced in creating apps for clients.

Kristin Marsicano

September 30, 2016
Tweet

More Decks by Kristin Marsicano

Other Decks in Programming

Transcript

  1. Close the Loop
    Designing and Developing Together
    Kristin Marsicano
    @kristinmars
    Zack Simon
    @zackiets
    Big Nerd Ranch
    @bignerdranch

    View full-size slide

  2. Well, what’s the problem?

    View full-size slide

  3. Expectation Reality

    View full-size slide

  4. We’re going to take you
    on a journey...

    View full-size slide

  5. !
    … and we’ll encounter
    issues.

    View full-size slide

  6. Kickoff Discovery Sprint 1 Sprint 2

    View full-size slide

  7. Kickoff Discovery Sprint 1 Sprint 2

    View full-size slide

  8. What’s a project kickoff meeting?
    Who does what? When do
    things happen?
    What tools?

    View full-size slide

  9. !
    Jump right in?

    View full-size slide

  10. Kickoff Discovery Sprint 1 Sprint 2

    View full-size slide

  11. Mapping it out

    View full-size slide

  12. Kickoff Discovery Sprint 1 Sprint 2

    View full-size slide

  13. Sprint 1
    Stakeholder
    Review
    Develop Review Design
    Sprint Planning
    Design Login
    Developer Chores
    Sprint Retro

    View full-size slide

  14. Sprint 1
    Stakeholder
    Review
    Develop Review Design
    Sprint Planning
    Design Login
    Developer Chores
    Sprint Retro

    View full-size slide

  15. !
    What do devs do
    without designs?

    View full-size slide

  16. Sprint 1
    Stakeholder
    Review
    Develop Review Design
    Sprint Planning
    Design Login
    Developer Chores
    Sprint Retro

    View full-size slide

  17. Wireframing Login

    View full-size slide

  18. Creating a Style Guide
    Atoms Molecules Organisms
    Source: Brad Frost

    View full-size slide

  19. Annotating Molecules

    View full-size slide

  20. Annotating Wireframes

    View full-size slide

  21. Style Guide
    Organisms are made of molecules are made of atoms

    View full-size slide

  22. !
    So designs are ready
    for stakeholder approval?

    View full-size slide

  23. Sprint 1
    Stakeholder
    Review
    Develop Review Design
    Sprint Planning
    Design Login
    Developer Chores
    Sprint Retro

    View full-size slide

  24. Sprint 1
    Stakeholder
    Review
    Develop Review Design
    Sprint Planning
    Design Login
    Developer Chores
    Sprint Retro

    View full-size slide

  25. Sprint 1
    Stakeholder
    Review
    Develop Review Design
    Sprint Planning
    Design Login
    Developer Chores
    Sprint Retro

    View full-size slide

  26. Kickoff Discovery Sprint 1 Sprint 2

    View full-size slide

  27. Sprint 2
    Stakeholder
    Review Design Signup
    Sprint Planning
    Design QA Build
    Sprint Retro
    Develop Review Design
    Develop Login

    View full-size slide

  28. User Stories and Design
    User can see login screen
    when they launch the app.
    User can see error text when
    entering invalid email.
    User is logged into app after
    entering valid credentials and
    pressing the Login button.

    View full-size slide

  29. What makes a good user story?

    View full-size slide

  30. Labels and Epics

    View full-size slide

  31. “User sees login screen when they launch the app.”
    Preconditions/Test Steps:
    1. Make sure user is logged out
    2. Click app icon from launch screen

    View full-size slide

  32. “User sees login screen when they launch the app.”
    Preconditions/Test Steps:
    1. Make sure user is logged out
    2. Click app icon from launch screen
    Acceptance Criteria:
    1. Login screen is styled according to design, containing
    2. toolbar with title of app
    3. an email field
    4. a password field
    5. a login button with active, disabled, pressed, and focused state

    View full-size slide

  33. “User sees login screen when they launch the app.”
    Preconditions/Test Steps:
    1. Make sure user is logged out
    2. Click app icon from launch screen
    Acceptance Criteria:
    1. Login screen is styled according to design, containing
    2. toolbar with title of app
    3. an email field
    4. a password field
    5. a login button with active, disabled, pressed, and focused state
    Not Included:
    Error states for email and password fields
    Functionality of login button

    View full-size slide

  34. Sprint 2
    Stakeholder
    Review Design Signup
    Sprint Planning
    Design QA Build
    Sprint Retro
    Develop Review Design
    Develop Login

    View full-size slide

  35. Implementing with Shared Language

    View full-size slide

  36. Atoms: Colors
    In values/colors.xml:

    #48D8FD
    #3EC7EB
    #FF535F
    #2C2C2C
    #DCDCDC
    #8A8A8A

    View full-size slide

  37. Atoms: Colors
    In values/styles.xml:
    <br/><color name="colorPrimary">@color/blue</color><br/><color name="colorPrimaryDark">@color/blueDark</color><br/><color name="colorAccent">@color/red</color><br/>
    In values/colors.xml:

    #48D8FD
    #3EC7EB
    #FF535F
    #2C2C2C
    #DCDCDC
    #8A8A8A

    View full-size slide

  38. Atoms: Type Styles
    In values/styles.xml:

    <br/><item name="android:fontFamily">sans-serif</item><br/><item name="android:textStyle">bold</item><br/><item name="android:textSize">20sp</item><br/>
    ...
    <br/><item name="android:fontFamily">sans-serif</item><br/><item name="android:textStyle">normal</item><br/><item name="android:textSize">14sp</item><br/>
    ...

    View full-size slide

  39. Molecules: EditText
    In values/styles.xml:

    <br/><item name="android:textAppearance">@style/Body</item><br/><item name="android:textColor">@color/grayDark</item><br/><item name="android:textColorHint">@color/grayLight</item><br/>
    ...

    View full-size slide

  40. Molecules: EditText
    In values/styles.xml:

    <br/><item name="android:textAppearance">@style/Body</item><br/><item name="android:textColor">@color/grayDark</item><br/><item name="android:textColorHint">@color/grayLight</item><br/>
    ...

    View full-size slide

  41. Molecules: EditText
    In values/styles.xml:

    <br/><item name="android:textAppearance">@style/Body</item><br/><item name="android:textColor">@color/grayDark</item><br/><item name="android:textColorHint">@color/grayLight</item><br/>
    ...
    ...
    <br/><item name="android:fontFamily">sans-serif</item><br/><item name="android:textStyle">normal</item><br/><item name="android:textSize">14sp</item><br/>
    ...

    View full-size slide

  42. A Screen is an Organism
    In layout/activity_login.xml:

    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/login_email_hint"
    style="@style/StandardEditText" />
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/login_password_hint"
    style="@style/StandardEditText"/>
    ...

    View full-size slide

  43. A Screen is an Organism
    In layout/activity_login.xml:

    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/login_email_hint"
    style="@style/StandardEditText" />
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/login_password_hint"
    style="@style/StandardEditText"/>
    ...

    In values/styles.xml:
    <br/>...<br/>

    View full-size slide

  44. Leveraging the Theme

    <br/><item name="android:textAppearance">@style/Body</item><br/><item name="android:textColor">@color/red</item><br/><item name="android:textColorHint">@color/blue</item><br/>
    ...

    View full-size slide

  45. Theme Style

    <br/><item name="android:textAppearance">@style/Body</item><br/><item name="android:textColor">@color/red</item><br/><item name="android:textColorHint">@color/blue</item><br/>
    ...

    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/login_email_hint"
    style="@style/StandardEditText" />
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/login_password_hint"
    style="@style/StandardEditText"/>
    ...

    View full-size slide

  46. !
    So I followed the style
    guide. Am I done?

    View full-size slide

  47. Sprint 2
    Stakeholder
    Review Design Signup
    Sprint Planning
    Design QA Build
    Sprint Retro
    Develop Review Design
    Develop Login

    View full-size slide

  48. Sprint 2
    Stakeholder
    Review Design Signup
    Sprint Planning
    Design QA Build
    Sprint Retro
    Develop Review Design
    Develop Login

    View full-size slide

  49. Sprint 2
    Stakeholder
    Review Design Signup
    Sprint Planning
    Design QA Build
    Sprint Retro
    Develop Review Design
    Develop Login

    View full-size slide

  50. Kickoff Discovery Sprint 1 Sprint 2

    View full-size slide

  51. !
    So just do this, and
    everything’s great?

    View full-size slide

  52. Team must believe in the process.

    View full-size slide

  53. It’s also about the individual.

    View full-size slide

  54. Be responsive. Not reactive.

    View full-size slide

  55. 3 things to remember
    1. Be empathetic
    2. Check your ego
    3. Assume positive intent

    View full-size slide

  56. Close the Loop!

    View full-size slide

  57. @kristinmars
    @zackiets
    @bignerdranch
    Atomic Design:
    http://bradfrost.com/blog/post/atomic-web-design/

    View full-size slide