Designing For Development - 2015

Slide 1

Slide 1 text

DESIGNING FOR DEVELOPMENT The value of collaborative design

Slide 2

Slide 2 text

@marktimemedia HI, I’M MICHELLE @marktimemedia i do design for digital&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

@marktimemedia DESIGN DEVELOPMENT WTF? …CONTENT?

Slide 13

Slide 13 text

COLLABORATIVE WORKFLOW Flickr: photography.andreas

Slide 14

Slide 14 text

@marktimemedia

Slide 15

Slide 15 text

@marktimemedia MORE ACCURATE SCOPING

Slide 16

Slide 16 text

@marktimemedia MORE DIRECT COMMUNICATION

Slide 17

Slide 17 text

@marktimemedia QUICKLY ADAPT TO CHANGING REQUIREMENTS

Slide 18

Slide 18 text

@marktimemedia LEVERAGE EVERYONE’S STRENGTHS AS NEEDED

Slide 19

Slide 19 text

@marktimemedia EFFICIENCY LEADS TO TIME AND MONEY SAVED

Slide 20

Slide 20 text

COLLABORATIVE WORKFLOW: DESIGNER Flickr: carlaarena

Slide 21

Slide 21 text

@marktimemedia AESTHETIC RULES http://styletil.es

Slide 22

Slide 22 text

@marktimemedia ELEMENT RULES

Slide 23

Slide 23 text

@marktimemedia SYSTEM RULES

Slide 24

Slide 24 text

@marktimemedia TEST THE RULES

Slide 25

Slide 25 text

@marktimemedia MOCKUP + SPECS https://www.specctr.com/

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

Slide 29

Slide 29 text

KNOW THE DESIGN SYSTEM

Slide 30

Slide 30 text

SPRINTS OR GOAL-BASED DELIVERABLES Flickr: ibikempls

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

COLLABORATIVE WORKFLOW: PROJECT MGMT Flickr: woodleywonderworks

Slide 33

Slide 33 text

BE THE BRIDGE BETWEEN EVERYONE’S GOALS Flickr: NatureNerd

Slide 34

Slide 34 text

ADVOCATING FOR THE PROJECT AND/OR THE TEAM Flickr: ﬂintman45

Slide 35

Slide 35 text

UNDERSATAND DIFFERENT COMMUNICATION STYLES Flickr: the rik pics

Slide 36

Slide 36 text

COLLABORATIVE WORKFLOW: CLIENT Flickr: Jeff Youngstrom

Slide 37

Slide 37 text

@marktimemedia PROVIDING DESIGN FEEDBACK The Old Way: Looking at literal mockups Evaluating layout, design, and content all at once as pages The New Way: Start with evaluating look and feel Evaluating design as a series of increasingly speciﬁc systems/rules

Slide 38

Slide 38 text

@marktimemedia PROVIDING DESIGN FEEDBACK Think about Design Systems, not speciﬁc pages Evaluate clarity and communication Remember it’s for your audience, not for you Be speciﬁc! Ask questions! Good designers can always answer “why?”

Slide 39

Slide 39 text

@marktimemedia PROVIDING DEVELOPMENT FEEDBACK Focus on “how it works.” 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! Ask questions! Good developers can always answer “why?”

Slide 40

Slide 40 text

COLLABORATIVE WORKFLOW: FOR EVERYONE Flickr: minnepixel

Slide 41

Slide 41 text

UNDERSTAND THE VOCABULARY Flickr: srgpicker

Slide 42

Slide 42 text

ASK LOTS OF QUESTIONS

Slide 43

Slide 43 text

@marktimemedia DEFINE YOUR GOALS

Slide 44

Slide 44 text

QUESTIONS? Michelle Schulp @marktimemedia bit.ly/design-collaboration-2015 [email protected]