Designing for Development: The Value of Collaborative Design (Short)

The old "waterfall" model of design, development, and client partnerships, where projects are expected to be handed off from one entity to the next, often falls short among changing scopes, project discovery processes, and evolving requirements. We will discuss the added value that up-front communication and agile collaboration methods bring to a web-based project to save time, money, and headaches.

Transcript

1. DESIGN FOR DEVELOPMENT: THE VALUE OF COLLABORATIVE DESIGN Flickr:  derrickcollins  
2. HI, I’M MICHELLE @marktimemedia i do design for print&web&wordpress
3. HI, I’M MICHELLE @marktimemedia i also do a lot of work with developers Can’t we all just get along?
4. WHAT IS COLLABORATIVE DESIGN? Flickr:  the  rik  pics  
5. Flickr:  Stuck  In  Customs   WATERFALL METHOD
6. CONTENT DESIGN DEVELOPMENT
7. PROJECT SCOPING ASSUMPTIONS
8. INEFFICIENT COMMUNICATION
9. HARD TO ADAPT TO CHANGING REQUIREMENTS
10. DECISIONS MADE OUTSIDE OF EXPERTISE
11. BLOATED TIMEFRAMES AND PROJECT DELAYS
12. Flickr: photography.andreas COLLABORATIVE WORKFLOW
13. •  Additional process method (book p. 29) •  Iterations, dynamic, overlap
14. Flickr: Stéfan MORE ACCURATE SCOPING
15. Flickr: Stéfan MORE DIRECT COMMUNICATION
16. Flickr: Stéfan QUICKLY ADAPT TO CHANGING REQUIREMENTS
17. Flickr: Stéfan LEVERAGE EVERYONE’S STRENGTHS AS NEEDED
18. Flickr: Stéfan EFFICIENCY LEADS TO TIME AND MONEY SAVED
19. •  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
20. Flickr: carlaarena COLLABORATIVE WORKFLOW: DESIGNER
21. DESIGN ELEMENTS RATHER THAN LITERAL MOCKUPS http://styletil.es
22. DESIGN OF SYSTEM ASSETS
23. DESIGN OF SYSTEM ASSETS
24. MOCKUP STYLE GUIDE
25. CSS STYLE GUIDE Colors Headings Text Lists Fonts Links Buttons Forms Icons Tooltips Navigation Asides POSSIBLE REUSABLE ELEMENTS:
26. Flickr: slworking2 COLLABORATIVE WORKFLOW: DEVELOPER
27. Source: HOW Interactive Design RAPID PROTOTYPING, ITERATING AND TESTING
28. COLLABORATIVE WORKFLOW: CLIENT Flickr: Jeff Youngstrom
29. 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!
30. 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!
31. QUESTIONS? Michelle Schulp michelle@marktimemedia.com @marktimemedia bit.ly/collaborative-design Flickr: dcmaster