Close the Loop: Designing and Developing Together.

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Build Design

Slide 3

Slide 3 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Well, what’s the problem? Kristin Marsicano @kristinmars Zack Simon @zackiets

Slide 4

Slide 4 text

Kristin Marsicano @kristinmars Zack Simon @zackiets We’re going to take you on a journey...

Slide 5

Slide 5 text

? Kristin Marsicano @kristinmars Zack Simon @zackiets … and things will come up.

Slide 6

Slide 6 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Kickoff Discovery Sprint 1 Sprint 2

Slide 7

Slide 7 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Kickoff Discovery Sprint 1 Sprint 2

Slide 8

Slide 8 text

Kristin Marsicano @kristinmars Zack Simon @zackiets What’s a project kickoff meeting? Who does what? When do things happen? What tools?

Slide 9

Slide 9 text

? Kristin Marsicano @kristinmars Zack Simon @zackiets Jump right in?

Slide 10

Slide 10 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Don’t start work without knowing what your doing.

Slide 11

Slide 11 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Kickoff Discovery Sprint 1 Sprint 2

Slide 12

Slide 12 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Mapping it out

Slide 13

Slide 13 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Kickoff Discovery Sprint 1 Sprint 2

Slide 14

Slide 14 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Sprint 1 Stakeholder Review Developer Review Design Sprint Planning Design Login Developer Chores Sprint Retro

Slide 15

Slide 15 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Sprint 1 Stakeholder Review Developer Review Design Sprint Planning Design Login Developer Chores Sprint Retro

Slide 16

Slide 16 text

? Kristin Marsicano @kristinmars Zack Simon @zackiets What do devs do without designs?

Slide 17

Slide 17 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Avoid implementing user- facing features without design.

Slide 18

Slide 18 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Sprint 1 Stakeholder Review Developer Review Design Sprint Planning Design Login Developer Chores Sprint Retro

Slide 19

Slide 19 text

Wireframing Login

Slide 20

Slide 20 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Creating a Style Guide Atoms Molecules Organisms Source: Brad Frost

Slide 21

Slide 21 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Atoms

Slide 22

Slide 22 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Molecules

Slide 23

Slide 23 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Annotating Molecules

Slide 24

Slide 24 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Annotating Wireframes

Slide 25

Slide 25 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Style Guide Organisms are made of molecules are made of atoms

Slide 26

Slide 26 text

? Kristin Marsicano @kristinmars Zack Simon @zackiets So designs are ready for stakeholder approval?

Slide 27

Slide 27 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Always get developer feedback on your designs.

Slide 28

Slide 28 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Sprint 1 Stakeholder Review Developer Review Design Sprint Planning Design Login Developer Chores Sprint Retro

Slide 29

Slide 29 text

Kristin Marsicano @kristinmars Zack Simon @zackiets (This is what compromise looks like.)

Slide 30

Slide 30 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Sprint 1 Stakeholder Review Developer Review Design Sprint Planning Design Login Developer Chores Sprint Retro

Slide 31

Slide 31 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Sprint 1 Stakeholder Review Developer Review Design Sprint Planning Design Login Developer Chores Sprint Retro

Slide 32

Slide 32 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Kickoff Discovery Sprint 1 Sprint 2

Slide 33

Slide 33 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Stakeholder Review Design Signup Sprint Planning Design QA Build Sprint Retro Developer Review Design Develop Login Sprint 2

Slide 34

Slide 34 text

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.

Slide 35

Slide 35 text

Kristin Marsicano @kristinmars Zack Simon @zackiets What makes a good user story?

Slide 36

Slide 36 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Labels and Epics

Slide 37

Slide 37 text

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Stakeholder Review Design Signup Sprint Planning Design QA Build Sprint Retro Developer Review Design Develop Login Sprint 2

Slide 41

Slide 41 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Implementing with Shared Language

Slide 42

Slide 42 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Mirroring the Relationships Atoms Molecules Organisms

Slide 43

Slide 43 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Atoms: Colors #48D8FD #3EC7EB #FF535F #2C2C2C #DCDCDC #8A8A8A In values/colors.xml: In style guide:

Slide 44

Slide 44 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Atoms: Colors @color/blue @color/blueDark @color/red #48D8FD #3EC7EB #FF535F #2C2C2C #DCDCDC #8A8A8A In style guide: In values/colors.xml:

Slide 45

Slide 45 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Atoms: Type Styles <item name="android:fontFamily">sans-serif</item> <item name="android:textStyle">normal</item> <item name="android:textSize">14sp</item> ... In style guide: In values/styles.xml:

Slide 46

Slide 46 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Molecules: EditText Type Styles in atoms: StandardEditText in molecules:

Slide 47

Slide 47 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Molecules: EditText <item name="android:textAppearance">@style/Body</item> <item name="android:textColor">@color/grayDark</item> <item name="android:textColorHint">@color/grayLight</item> ... In values/styles.xml:

Slide 48

Slide 48 text

Kristin Marsicano @kristinmars Zack Simon @zackiets <item name="android:textAppearance">@style/Body</item> <item name="android:textColor">@color/grayDark</item> <item name="android:textColorHint">@color/grayLight</item> ... Molecules: EditText In values/styles.xml: ... <item name="android:fontFamily">sans-serif</item> <item name="android:textStyle">normal</item> <item name="android:textSize">14sp</item> ...

Slide 49

Slide 49 text

Kristin Marsicano @kristinmars Zack Simon @zackiets A Screen is an Organism ... In layout/activity_login.xml: In wireframes:

Slide 50

Slide 50 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Leveraging the Theme <item name="android:textAppearance">@style/Body</item> <item name="android:textColor">@color/red</item> <item name="android:textColorHint">@color/blue</item> ... In values/styles.xml:

Slide 51

Slide 51 text

? Kristin Marsicano @kristinmars Zack Simon @zackiets So I followed the style guide. Am I done?

Slide 52

Slide 52 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Always get designer feedback on your build.

Slide 53

Slide 53 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Sprint 2 Stakeholder Review Design Signup Sprint Planning Design QA Build Sprint Retro Developer Review Design Develop Login

Slide 54

Slide 54 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Sprint 2 Stakeholder Review Design Signup Sprint Planning Design QA Build Sprint Retro Developer Review Design Develop Login

Slide 55

Slide 55 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Sprint 2 Stakeholder Review Design Signup Sprint Planning Design QA Build Sprint Retro Developer Review Design Develop Login

Slide 56

Slide 56 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Kickoff Discovery Sprint 1 Sprint 2

Slide 57

Slide 57 text

? Kristin Marsicano @kristinmars Zack Simon @zackiets So just do this, and everything’s great?

Slide 58

Slide 58 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Software development is nothing without people.

Slide 59

Slide 59 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Team must believe in the process.

Slide 60

Slide 60 text

Kristin Marsicano @kristinmars Zack Simon @zackiets It’s also about the individual.

Slide 61

Slide 61 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Be responsive. Not reactive.

Slide 62

Slide 62 text

Kristin Marsicano @kristinmars Zack Simon @zackiets 3 things to remember 1. Be empathetic 2. Check your ego 3. Assume positive intent

Slide 63

Slide 63 text

Kristin Marsicano @kristinmars Zack Simon @zackiets Close the Loop!

Slide 64

Slide 64 text

Kristin Marsicano @kristinmars Zack Simon @zackiets

Slide 65

Slide 65 text

Kristin Marsicano @kristinmars Zack Simon @zackiets @kristinmars @zackiets @bignerdranch Atomic Design: http:/ /bradfrost.com/blog/post/atomic-web-design/