Designing for Development: The Value of Collaborative Design

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. DESIGNING FOR DEVELOPMENT The value of collaborative design Flickr: Lars Plougmann
2. @marktimemedia HI, I’M MICHELLE @marktimemedia i do design for print&web&wordpress
3. @marktimemedia HI, I’M MICHELLE @marktimemedia i do a lot of work with developers&teams Can’t we all just get along?
4. WHAT IS COLLABORATIVE DESIGN? Flickr: simon blackley
5. WATERFALL METHOD Flickr: Stuck In Customs
6. @marktimemedia CONTENT DESIGN DEVELOPMENT
7. @marktimemedia PROJECT SCOPING ASSUMPTIONS
8. @marktimemedia INEFFICIENT COMMUNICATION
9. @marktimemedia HARD TO ADAPT TO CHANGING REQUIREMENTS
10. @marktimemedia DECISIONS MADE OUTSIDE OF EXPERTISE
11. @marktimemedia BLOATED TIMEFRAMES AND PROJECT DELAYS
12. COLLABORATIVE WORKFLOW Flickr: photography.andreas
13. @marktimemedia
14. @marktimemedia Flickr:  Stéfan     MORE ACCURATE SCOPING
15. @marktimemedia Flickr:  Stéfan     MORE DIRECT COMMUNICATION
16. @marktimemedia Flickr:  Stéfan     QUICKLY ADAPT TO CHANGING REQUIREMENTS
17. @marktimemedia Flickr:  Stéfan     LEVERAGE EVERYONE’S STRENGTHS AS NEEDED
18. @marktimemedia Flickr:  Stéfan     EFFICIENCY LEADS TO TIME AND MONEY SAVED
19. @marktimemedia PROTOTYPING   PROGRAMMING   STYLE    APPLICATION   QA   LAUNCH   CONTENT  CREATION   CONTENT  ENTRY   DESIGN   from  The  Strategic  Web  Designer     by  Christopher  Butler  
20. COLLABORATIVE WORKFLOW: DESIGNER Flickr: carlaarena
21. @marktimemedia DESIGN ELEMENTS RATHER THAN LITERAL MOCKUPS http://styletil.es
22. @marktimemedia DESIGN WIREFRAMES
23. @marktimemedia DESIGN OF SYSTEM ASSETS
24. @marktimemedia DESIGN OF SYSTEM ASSETS
25. @marktimemedia MOCKUP STYLE GUIDE
26. @marktimemedia CSS STYLE GUIDE Colors Headings Text Lists Fonts Links Buttons Forms Icons Tooltips Navigation Asides POSSIBLE  REUSABLE  ELEMENTS:  
27. COLLABORATIVE WORKFLOW: DEVELOPER Flickr: slworking2
28. BE INVOLVED EARLY Flickr: ibikempls
29. KNOW THE DESIGN SYSTEM
30. @marktimemedia Source:  HOW  Interac@ve  Design   RAPID PROTOTYPING, ITERATING & TESTING
31. COLLABORATIVE WORKFLOW: PROJECT MGMT Flickr: woodleywonderworks
32. BE THE BRIDGE BETWEEN EVERYONE’S GOALS Flickr: NatureNerd
33. UNDERSATAND DIFFERENT COMMUNICATION STYLES Flickr: the rik pics
34. COLLABORATIVE WORKFLOW: CLIENT Flickr: Jeff Youngstrom FEEDBACK CRITIQUE THOUGHTS
35. @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!
36. @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 specific!
37. COLLABORATIVE WORKFLOW: FOR EVERYONE Flickr: minnepixel
38. UNDERSTAND THE VOCABULARY Flickr: srgpicker
39. ASK LOTS OF QUESTIONS Flickr: Highways Agency
40. @marktimemedia DEFINE YOUR GOALS
41. COVER SLIDE WUT SUBTITLE ALL THE THINGS QUESTIONS? Michelle Schulp michelle@marktimemedia.com @marktimemedia bit.ly/XXXXXX