Designing for Development: The Value of Collaborative Design

by Michelle Schulp Hunt

Slide 1

Slide 1 text

DESIGNING FOR DEVELOPMENT The value of collaborative design Flickr: Lars Plougmann

Slide 2

Slide 2 text

@marktimemedia HI, I’M MICHELLE @marktimemedia i do design for print&web&wordpress

Slide 3

Slide 3 text

@marktimemedia HI, I’M MICHELLE @marktimemedia i do a lot of work with developers&teams Can’t we all just get along?

Slide 4

Slide 4 text

WHAT IS COLLABORATIVE DESIGN? Flickr: simon blackley

Slide 5

Slide 5 text

WATERFALL METHOD Flickr: Stuck In Customs

Slide 6

Slide 6 text

@marktimemedia CONTENT DESIGN DEVELOPMENT

Slide 7

Slide 7 text

@marktimemedia PROJECT SCOPING ASSUMPTIONS

Slide 8

Slide 8 text

@marktimemedia INEFFICIENT COMMUNICATION

Slide 9

Slide 9 text

@marktimemedia HARD TO ADAPT TO CHANGING REQUIREMENTS

Slide 10

Slide 10 text

@marktimemedia DECISIONS MADE OUTSIDE OF EXPERTISE

Slide 11

Slide 11 text

@marktimemedia BLOATED TIMEFRAMES AND PROJECT DELAYS

Slide 12

Slide 12 text

COLLABORATIVE WORKFLOW Flickr: photography.andreas

Slide 13

Slide 13 text

@marktimemedia

Slide 14

Slide 14 text

@marktimemedia Flickr: Stéfan MORE ACCURATE SCOPING

Slide 15

Slide 15 text

@marktimemedia Flickr: Stéfan MORE DIRECT COMMUNICATION

Slide 16

Slide 16 text

@marktimemedia Flickr: Stéfan QUICKLY ADAPT TO CHANGING REQUIREMENTS

Slide 17

Slide 17 text

@marktimemedia Flickr: Stéfan LEVERAGE EVERYONE’S STRENGTHS AS NEEDED

Slide 18

Slide 18 text

@marktimemedia Flickr: Stéfan EFFICIENCY LEADS TO TIME AND MONEY SAVED

Slide 19

Slide 19 text

@marktimemedia PROTOTYPING PROGRAMMING STYLE APPLICATION QA LAUNCH CONTENT CREATION CONTENT ENTRY DESIGN from The Strategic Web Designer by Christopher Butler

Slide 20

Slide 20 text

COLLABORATIVE WORKFLOW: DESIGNER Flickr: carlaarena

Slide 21

Slide 21 text

@marktimemedia DESIGN ELEMENTS RATHER THAN LITERAL MOCKUPS http://styletil.es

Slide 22

Slide 22 text

@marktimemedia DESIGN WIREFRAMES

Slide 23

Slide 23 text

@marktimemedia DESIGN OF SYSTEM ASSETS

Slide 24

Slide 24 text

@marktimemedia DESIGN OF SYSTEM ASSETS

Slide 25

Slide 25 text

@marktimemedia MOCKUP STYLE GUIDE

Slide 26

Slide 26 text

@marktimemedia CSS STYLE GUIDE Colors Headings Text Lists Fonts Links Buttons Forms Icons Tooltips Navigation Asides POSSIBLE REUSABLE ELEMENTS:

Slide 27

Slide 27 text

COLLABORATIVE WORKFLOW: DEVELOPER Flickr: slworking2

Slide 28

Slide 28 text

BE INVOLVED EARLY Flickr: ibikempls

Slide 29

Slide 29 text

KNOW THE DESIGN SYSTEM

Slide 30

Slide 30 text

@marktimemedia Source: HOW Interac@ve Design RAPID PROTOTYPING, ITERATING & TESTING

Slide 31

Slide 31 text

COLLABORATIVE WORKFLOW: PROJECT MGMT Flickr: woodleywonderworks

Slide 32

Slide 32 text

BE THE BRIDGE BETWEEN EVERYONE’S GOALS Flickr: NatureNerd

Slide 33

Slide 33 text

UNDERSATAND DIFFERENT COMMUNICATION STYLES Flickr: the rik pics

Slide 34

Slide 34 text

COLLABORATIVE WORKFLOW: CLIENT Flickr: Jeff Youngstrom FEEDBACK CRITIQUE THOUGHTS

Slide 35

Slide 35 text

@marktimemedia PROVIDING DESIGN FEEDBACK Focus on overall “look and feel” rather than specific positions of elements on the page Think about Design Systems, not specific pages Evaluate clarity and communication Remember it’s for your audience, not for you Be specific!

Slide 36

Slide 36 text

@marktimemedia PROVIDING DEVELOPMENT FEEDBACK Focus on “how it works” not what it looks like Evaluate cross-platform usability and consistency of experience rather than pixel perfection Explain what you expect to happen in addition to what is actually happening Be speciﬁc!

Slide 37

Slide 37 text

COLLABORATIVE WORKFLOW: FOR EVERYONE Flickr: minnepixel

Slide 38

Slide 38 text

UNDERSTAND THE VOCABULARY Flickr: srgpicker

Slide 39

Slide 39 text

ASK LOTS OF QUESTIONS Flickr: Highways Agency

Slide 40

Slide 40 text

@marktimemedia DEFINE YOUR GOALS

Slide 41

Slide 41 text

COVER SLIDE WUT SUBTITLE ALL THE THINGS QUESTIONS? Michelle Schulp [email protected] @marktimemedia bit.ly/XXXXXX