Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing for Development: The Value of Collaborative Design

Michelle Schulp
December 05, 2014

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.

Michelle Schulp

December 05, 2014
Tweet

More Decks by Michelle Schulp

Other Decks in Design

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  [email protected]  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

    [email protected] @marktimemedia bit.ly/XXXXXX