Close the Loop: Designing and Developing Together.

Update to the talk that I gave with Kristin Marsicano on improving design and development communication.

Transcript

1. Close the Loop Designing and Developing Together Kristin Marsicano @kristinmars Zack Simon @zackiets Big Nerd Ranch @bignerdranch
2. Build Design
3. Kristin Marsicano @kristinmars Zack Simon @zackiets Well, what’s the problem? Kristin Marsicano @kristinmars Zack Simon @zackiets
4. Kristin Marsicano @kristinmars Zack Simon @zackiets We’re going to take you on a journey...
5. ? Kristin Marsicano @kristinmars Zack Simon @zackiets … and things will come up.
6. Kristin Marsicano @kristinmars Zack Simon @zackiets Kickoff Discovery Sprint 1 Sprint 2
7. Kristin Marsicano @kristinmars Zack Simon @zackiets Kickoff Discovery Sprint 1 Sprint 2
8. Kristin Marsicano @kristinmars Zack Simon @zackiets What’s a project kickoff meeting? Who does what? When do things happen? What tools?
9. ? Kristin Marsicano @kristinmars Zack Simon @zackiets Jump right in?
10. Kristin Marsicano @kristinmars Zack Simon @zackiets Don’t start work without knowing what your doing.
11. Kristin Marsicano @kristinmars Zack Simon @zackiets Kickoff Discovery Sprint 1 Sprint 2
12. Kristin Marsicano @kristinmars Zack Simon @zackiets Mapping it out
13. Kristin Marsicano @kristinmars Zack Simon @zackiets Kickoff Discovery Sprint 1 Sprint 2
14. Kristin Marsicano @kristinmars Zack Simon @zackiets Sprint 1 Stakeholder Review Developer Review Design Sprint Planning Design Login Developer Chores Sprint Retro
15. Kristin Marsicano @kristinmars Zack Simon @zackiets Sprint 1 Stakeholder Review Developer Review Design Sprint Planning Design Login Developer Chores Sprint Retro
16. ? Kristin Marsicano @kristinmars Zack Simon @zackiets What do devs do without designs?
17. Kristin Marsicano @kristinmars Zack Simon @zackiets Avoid implementing user- facing features without design.
18. Kristin Marsicano @kristinmars Zack Simon @zackiets Sprint 1 Stakeholder Review Developer Review Design Sprint Planning Design Login Developer Chores Sprint Retro
19. Wireframing Login
20. Kristin Marsicano @kristinmars Zack Simon @zackiets Creating a Style Guide Atoms Molecules Organisms Source: Brad Frost
21. Kristin Marsicano @kristinmars Zack Simon @zackiets Atoms
22. Kristin Marsicano @kristinmars Zack Simon @zackiets Molecules
23. Kristin Marsicano @kristinmars Zack Simon @zackiets Annotating Molecules
24. Kristin Marsicano @kristinmars Zack Simon @zackiets Annotating Wireframes
25. Kristin Marsicano @kristinmars Zack Simon @zackiets Style Guide Organisms are made of molecules are made of atoms
26. ? Kristin Marsicano @kristinmars Zack Simon @zackiets So designs are ready for stakeholder approval?
27. Kristin Marsicano @kristinmars Zack Simon @zackiets Always get developer feedback on your designs.
28. Kristin Marsicano @kristinmars Zack Simon @zackiets Sprint 1 Stakeholder Review Developer Review Design Sprint Planning Design Login Developer Chores Sprint Retro
29. Kristin Marsicano @kristinmars Zack Simon @zackiets (This is what compromise looks like.)
30. Kristin Marsicano @kristinmars Zack Simon @zackiets Sprint 1 Stakeholder Review Developer Review Design Sprint Planning Design Login Developer Chores Sprint Retro
31. Kristin Marsicano @kristinmars Zack Simon @zackiets Sprint 1 Stakeholder Review Developer Review Design Sprint Planning Design Login Developer Chores Sprint Retro
32. Kristin Marsicano @kristinmars Zack Simon @zackiets Kickoff Discovery Sprint 1 Sprint 2
33. Kristin Marsicano @kristinmars Zack Simon @zackiets Stakeholder Review Design Signup Sprint Planning Design QA Build Sprint Retro Developer Review Design Develop Login Sprint 2
34. Kristin Marsicano @kristinmars Zack Simon @zackiets 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.
35. Kristin Marsicano @kristinmars Zack Simon @zackiets What makes a good user story?
36. Kristin Marsicano @kristinmars Zack Simon @zackiets Labels and Epics
37. Kristin Marsicano @kristinmars Zack Simon @zackiets “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
38. Kristin Marsicano @kristinmars Zack Simon @zackiets “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
39. Kristin Marsicano @kristinmars Zack Simon @zackiets “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
40. Kristin Marsicano @kristinmars Zack Simon @zackiets Stakeholder Review Design Signup Sprint Planning Design QA Build Sprint Retro Developer Review Design Develop Login Sprint 2
41. Kristin Marsicano @kristinmars Zack Simon @zackiets Implementing with Shared Language
42. Kristin Marsicano @kristinmars Zack Simon @zackiets Mirroring the Relationships Atoms Molecules Organisms
43. Kristin Marsicano @kristinmars Zack Simon @zackiets Atoms: Colors <!-- 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> In values/colors.xml: In style guide:
44. Kristin Marsicano @kristinmars Zack Simon @zackiets Atoms: Colors <!-- Theme Colors --> <color name="colorPrimary">@color/blue</color> <color name="colorPrimaryDark">@color/blueDark</color> <color name="colorAccent">@color/red</color> <!-- 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> In style guide: In values/colors.xml:
45. Kristin Marsicano @kristinmars Zack Simon @zackiets Atoms: Type Styles <!-- 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> ... In style guide: In values/styles.xml:
46. Kristin Marsicano @kristinmars Zack Simon @zackiets Molecules: EditText Type Styles in atoms: StandardEditText in molecules:
47. Kristin Marsicano @kristinmars Zack Simon @zackiets Molecules: EditText <!-- 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> ... In values/styles.xml:
48. Kristin Marsicano @kristinmars Zack Simon @zackiets <!-- 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> ... Molecules: EditText In values/styles.xml: <!-- 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> ...
49. Kristin Marsicano @kristinmars Zack Simon @zackiets A Screen is an Organism <LinearLayout ...> <EditText ... style="@style/StandardEditText" /> <EditText ... style="@style/StandardEditText"/> ... </LinearLayout> In layout/activity_login.xml: In wireframes:
50. Kristin Marsicano @kristinmars Zack Simon @zackiets 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> ... In values/styles.xml:
51. ? Kristin Marsicano @kristinmars Zack Simon @zackiets So I followed the style guide. Am I done?
52. Kristin Marsicano @kristinmars Zack Simon @zackiets Always get designer feedback on your build.
53. Kristin Marsicano @kristinmars Zack Simon @zackiets Sprint 2 Stakeholder Review Design Signup Sprint Planning Design QA Build Sprint Retro Developer Review Design Develop Login
54. Kristin Marsicano @kristinmars Zack Simon @zackiets Sprint 2 Stakeholder Review Design Signup Sprint Planning Design QA Build Sprint Retro Developer Review Design Develop Login
55. Kristin Marsicano @kristinmars Zack Simon @zackiets Sprint 2 Stakeholder Review Design Signup Sprint Planning Design QA Build Sprint Retro Developer Review Design Develop Login
56. Kristin Marsicano @kristinmars Zack Simon @zackiets Kickoff Discovery Sprint 1 Sprint 2
57. ? Kristin Marsicano @kristinmars Zack Simon @zackiets So just do this, and everything’s great?
58. Kristin Marsicano @kristinmars Zack Simon @zackiets Software development is nothing without people.
59. Kristin Marsicano @kristinmars Zack Simon @zackiets Team must believe in the process.
60. Kristin Marsicano @kristinmars Zack Simon @zackiets It’s also about the individual.
61. Kristin Marsicano @kristinmars Zack Simon @zackiets Be responsive. Not reactive.
62. Kristin Marsicano @kristinmars Zack Simon @zackiets 3 things to remember 1. Be empathetic 2. Check your ego 3. Assume positive intent
63. Kristin Marsicano @kristinmars Zack Simon @zackiets Close the Loop!
64. Kristin Marsicano @kristinmars Zack Simon @zackiets
65. Kristin Marsicano @kristinmars Zack Simon @zackiets @kristinmars @zackiets @bignerdranch Atomic Design: http:/ /bradfrost.com/blog/post/atomic-web-design/