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.

0f97fa53edac850ba4c64c2df5bd9fb1?s=128

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
  2. Well, what’s the problem?

  3. Expectation Reality

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

  5. ! … and we’ll encounter issues.

  6. Kickoff Discovery Sprint 1 Sprint 2

  7. Kickoff Discovery Sprint 1 Sprint 2

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

    things happen? What tools?
  9. ! Jump right in?

  10. Kickoff Discovery Sprint 1 Sprint 2

  11. Mapping it out

  12. Kickoff Discovery Sprint 1 Sprint 2

  13. Sprint 1 Stakeholder Review Develop Review Design Sprint Planning Design

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

    Login Developer Chores Sprint Retro
  15. ! What do devs do without designs?

  16. Sprint 1 Stakeholder Review Develop Review Design Sprint Planning Design

    Login Developer Chores Sprint Retro
  17. Wireframing Login

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

  19. Atoms

  20. Molecules

  21. Annotating Molecules

  22. Annotating Wireframes

  23. Style Guide Organisms are made of molecules are made of

    atoms
  24. ! So designs are ready for stakeholder approval?

  25. Sprint 1 Stakeholder Review Develop Review Design Sprint Planning Design

    Login Developer Chores Sprint Retro
  26. None
  27. Sprint 1 Stakeholder Review Develop Review Design Sprint Planning Design

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

    Login Developer Chores Sprint Retro
  29. Kickoff Discovery Sprint 1 Sprint 2

  30. Sprint 2 Stakeholder Review Design Signup Sprint Planning Design QA

    Build Sprint Retro Develop Review Design Develop Login
  31. 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.
  32. What makes a good user story?

  33. Labels and Epics

  34. “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
  35. “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
  36. “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
  37. Sprint 2 Stakeholder Review Design Signup Sprint Planning Design QA

    Build Sprint Retro Develop Review Design Develop Login
  38. Implementing with Shared Language

  39. Atoms: Colors In values/colors.xml: <!-- Custom Colors --> <color name="blue">#48D8FD</color>

    <color name="blueDark">#3EC7EB</color> <color name="red">#FF535F</color> <color name="grayDark">#2C2C2C</color> <color name="grayLight">#DCDCDC</color> <color name="gray">#8A8A8A</color>
  40. Atoms: Colors In values/styles.xml: <style name="AppTheme" parent=“Theme.AppCompat.Light.DarkActionBar"> <color name="colorPrimary">@color/blue</color> <color

    name="colorPrimaryDark">@color/blueDark</color> <color name="colorAccent">@color/red</color> </style> In values/colors.xml: <!-- Custom Colors --> <color name="blue">#48D8FD</color> <color name="blueDark">#3EC7EB</color> <color name="red">#FF535F</color> <color name="grayDark">#2C2C2C</color> <color name="grayLight">#DCDCDC</color> <color name="gray">#8A8A8A</color>
  41. Atoms: Type Styles In values/styles.xml: <!-- Text Styles --> <style

    name="Title" parent="TextAppearance.AppCompat"> <item name="android:fontFamily">sans-serif</item> <item name="android:textStyle">bold</item> <item name="android:textSize">20sp</item> </style> ... <style name="Body" parent="TextAppearance.AppCompat"> <item name="android:fontFamily">sans-serif</item> <item name="android:textStyle">normal</item> <item name="android:textSize">14sp</item> </style> ...
  42. Molecules: EditText In values/styles.xml: <!-- Molecules --> <style name="StandardEditText" parent="Widget.AppCompat.EditText">

    <item name="android:textAppearance">@style/Body</item> <item name="android:textColor">@color/grayDark</item> <item name="android:textColorHint">@color/grayLight</item> </style> ...
  43. Molecules: EditText In values/styles.xml: <!-- Molecules --> <style name="StandardEditText" parent="Widget.AppCompat.EditText">

    <item name="android:textAppearance">@style/Body</item> <item name="android:textColor">@color/grayDark</item> <item name="android:textColorHint">@color/grayLight</item> </style> ...
  44. Molecules: EditText In values/styles.xml: <!-- Molecules --> <style name="StandardEditText" parent="Widget.AppCompat.EditText">

    <item name="android:textAppearance">@style/Body</item> <item name="android:textColor">@color/grayDark</item> <item name="android:textColorHint">@color/grayLight</item> </style> ... <!-- Text Styles --> ... <style name="Body" parent="TextAppearance.AppCompat"> <item name="android:fontFamily">sans-serif</item> <item name="android:textStyle">normal</item> <item name="android:textSize">14sp</item> </style> ...
  45. A Screen is an Organism In layout/activity_login.xml: <LinearLayout ...> <EditText

    android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/login_email_hint" style="@style/StandardEditText" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/login_password_hint" style="@style/StandardEditText"/> ... </LinearLayout>
  46. A Screen is an Organism In layout/activity_login.xml: <LinearLayout ...> <EditText

    android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/login_email_hint" style="@style/StandardEditText" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/login_password_hint" style="@style/StandardEditText"/> ... </LinearLayout> In values/styles.xml: <style name="StandardEditText" parent="Widget.AppCompat.EditText"> ... </style>
  47. Leveraging the Theme <!-- Base application theme. → <style name="AppTheme"

    parent="Theme.AppCompat.Light.DarkActionBar"> ... <item name="editTextStyle">@style/StandardEditText</item> </style> <!-- Molecules --> <style name="StandardEditText" parent="Base.Widget.AppCompat.EditText"> <item name="android:textAppearance">@style/Body</item> <item name="android:textColor">@color/red</item> <item name="android:textColorHint">@color/blue</item> </style> ...
  48. Theme Style <!-- Base application theme. → <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

    ... <item name="editTextStyle">@style/StandardEditText</item> </style> <!-- Molecules --> <style name="StandardEditText" parent="Base.Widget.AppCompat.EditText"> <item name="android:textAppearance">@style/Body</item> <item name="android:textColor">@color/red</item> <item name="android:textColorHint">@color/blue</item> </style> ... <LinearLayout ...> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/login_email_hint" style="@style/StandardEditText" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/login_password_hint" style="@style/StandardEditText"/> ... </LinearLayout>
  49. ! So I followed the style guide. Am I done?

  50. Sprint 2 Stakeholder Review Design Signup Sprint Planning Design QA

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

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

    Build Sprint Retro Develop Review Design Develop Login
  53. Kickoff Discovery Sprint 1 Sprint 2

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

  55. Team must believe in the process.

  56. It’s also about the individual.

  57. Be responsive. Not reactive.

  58. 3 things to remember 1. Be empathetic 2. Check your

    ego 3. Assume positive intent
  59. Close the Loop!

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