Designing For Development - 2015

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. For project managers, contractors, agencies, and anyone else who has to manage or work with multiple team members on a web project

Transcript

1. DESIGNING FOR DEVELOPMENT The value of collaborative design
2. @marktimemedia HI, I’M MICHELLE @marktimemedia i do design for digital&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. @marktimemedia DESIGN DEVELOPMENT WTF?   …CONTENT?
13. COLLABORATIVE WORKFLOW Flickr: photography.andreas
14. @marktimemedia
15. @marktimemedia MORE ACCURATE SCOPING
16. @marktimemedia MORE DIRECT COMMUNICATION
17. @marktimemedia QUICKLY ADAPT TO CHANGING REQUIREMENTS
18. @marktimemedia LEVERAGE EVERYONE’S STRENGTHS AS NEEDED
19. @marktimemedia EFFICIENCY LEADS TO TIME AND MONEY SAVED
20. COLLABORATIVE WORKFLOW: DESIGNER Flickr: carlaarena
21. @marktimemedia AESTHETIC RULES http://styletil.es
22. @marktimemedia ELEMENT RULES
23. @marktimemedia SYSTEM RULES
24. @marktimemedia TEST THE RULES
25. @marktimemedia MOCKUP + SPECS https://www.specctr.com/
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
29. KNOW THE DESIGN SYSTEM
30. SPRINTS OR GOAL-BASED DELIVERABLES Flickr: ibikempls
31. @marktimemedia Source:  HOW  Interac:ve  Design   RAPID PROTOTYPING, ITERATING & TESTING
32. COLLABORATIVE WORKFLOW: PROJECT MGMT Flickr: woodleywonderworks
33. BE THE BRIDGE BETWEEN EVERYONE’S GOALS Flickr: NatureNerd
34. ADVOCATING FOR THE PROJECT AND/OR THE TEAM Flickr: flintman45
35. UNDERSATAND DIFFERENT COMMUNICATION STYLES Flickr: the rik pics
36. COLLABORATIVE WORKFLOW: CLIENT Flickr: Jeff Youngstrom
37. @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 specific systems/rules
38. @marktimemedia PROVIDING DESIGN FEEDBACK Think about Design Systems, not specific pages Evaluate clarity and communication Remember it’s for your audience, not for you Be specific! Ask questions! Good designers can always answer “why?”
39. @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 specific! Ask questions! Good developers can always answer “why?”
40. COLLABORATIVE WORKFLOW: FOR EVERYONE Flickr: minnepixel
41. UNDERSTAND THE VOCABULARY Flickr: srgpicker
42. ASK LOTS OF QUESTIONS
43. @marktimemedia DEFINE YOUR GOALS
44. QUESTIONS? Michelle Schulp @marktimemedia bit.ly/design-collaboration-2015 michelle@marktimemedia.com