Slide 1
Slide 1 text
DESIGN FOR DEVELOPMENT:
THE VALUE OF COLLABORATIVE DESIGN
Flickr:
derrickcollins
Slide 2
Slide 2 text
HI, I’M MICHELLE
@marktimemedia
i do design for
print&web&wordpress
Slide 3
Slide 3 text
HI, I’M MICHELLE
@marktimemedia
i also do a lot of work with
developers
Can’t we all just
get along?
Slide 4
Slide 4 text
WHAT IS
COLLABORATIVE DESIGN?
Flickr:
the
rik
pics
Slide 5
Slide 5 text
Flickr:
Stuck
In
Customs
WATERFALL
METHOD
Slide 6
Slide 6 text
CONTENT
DESIGN
DEVELOPMENT
Slide 7
Slide 7 text
PROJECT SCOPING
ASSUMPTIONS
Slide 8
Slide 8 text
INEFFICIENT
COMMUNICATION
Slide 9
Slide 9 text
HARD TO ADAPT TO
CHANGING REQUIREMENTS
Slide 10
Slide 10 text
DECISIONS MADE OUTSIDE
OF EXPERTISE
Slide 11
Slide 11 text
BLOATED TIMEFRAMES
AND PROJECT DELAYS
Slide 12
Slide 12 text
Flickr: photography.andreas
COLLABORATIVE
WORKFLOW
Slide 13
Slide 13 text
• Additional process method (book p. 29)
• Iterations, dynamic, overlap
Slide 14
Slide 14 text
Flickr: Stéfan
MORE ACCURATE SCOPING
Slide 15
Slide 15 text
Flickr: Stéfan
MORE DIRECT
COMMUNICATION
Slide 16
Slide 16 text
Flickr: Stéfan
QUICKLY ADAPT TO
CHANGING REQUIREMENTS
Slide 17
Slide 17 text
Flickr: Stéfan
LEVERAGE EVERYONE’S
STRENGTHS AS NEEDED
Slide 18
Slide 18 text
Flickr: Stéfan
EFFICIENCY LEADS TO
TIME AND MONEY SAVED
Slide 19
Slide 19 text
• Additional process method (book p. 29)
• Iterations, dynamic, overlap
PROTOTYPING PROGRAMMING
STYLE
APPLICATION
QA LAUNCH
CONTENT CREATION CONTENT ENTRY
DESIGN
from The Strategic Web Designer
by Christopher Butler
Slide 20
Slide 20 text
Flickr: carlaarena
COLLABORATIVE
WORKFLOW: DESIGNER
Slide 21
Slide 21 text
DESIGN ELEMENTS RATHER
THAN LITERAL MOCKUPS
http://styletil.es
Slide 22
Slide 22 text
DESIGN OF SYSTEM ASSETS
Slide 23
Slide 23 text
DESIGN OF SYSTEM ASSETS
Slide 24
Slide 24 text
MOCKUP STYLE GUIDE
Slide 25
Slide 25 text
CSS STYLE GUIDE
Colors
Headings
Text
Lists
Fonts
Links
Buttons
Forms
Icons
Tooltips
Navigation
Asides
POSSIBLE REUSABLE ELEMENTS:
Slide 26
Slide 26 text
Flickr: slworking2
COLLABORATIVE
WORKFLOW: DEVELOPER
Slide 27
Slide 27 text
Source: HOW Interactive Design
RAPID PROTOTYPING,
ITERATING AND TESTING
Slide 28
Slide 28 text
COLLABORATIVE
WORKFLOW: CLIENT
Flickr: Jeff Youngstrom
Slide 29
Slide 29 text
PROVIDING DESIGN
FEEDBACK
Focus on overall “look and feel” rather than specific
positions of elements on the page
Think about Design Systems, not specific site pages
Evaluate clarity and communication
Remember it’s for your audience, not for you
Be specific!
Slide 30
Slide 30 text
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 specific!
Slide 31
Slide 31 text
QUESTIONS?
Michelle Schulp
[email protected]
@marktimemedia
bit.ly/collaborative-design
Flickr: dcmaster