The fuzzy line between design + development

1,619 views

Published on

The state of web design is rapidly changing and our processes are falling behind - it’s becoming more difficult to justify a designer stopping at the point of static mockups to pass on to developers. So where does the designing end and the developing start? This talk will focus on collaborating with designers to create a smoother workflow.

Published in: Design, Software, Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,619
On SlideShare
0
From Embeds
0
Number of Embeds
197
Actions
Shares
0
Downloads
28
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

The fuzzy line between design + development

  1. 1. Hello! I’m Amanda @amandadorrell
  2. 2. I’m Amanda Product design & front-end development
  3. 3. Timely • 25 team members • 8 Techbots • Work remote
  4. 4. #timelylife
  5. 5. #timelylife
  6. 6. #timelylife
  7. 7. #efficientlife
  8. 8. Lean mean dev team
  9. 9. Lean mean dev team + designer
  10. 10. Lean mean dev team + designer ?
  11. 11. “There’s this massive chasm between design and development”  - Brad Frost
  12. 12. Design Development
  13. 13. Static psds with measurements
  14. 14. but now• Responsive • State changes • Interactions • Animations • Web-based products
  15. 15. Disconnect
  16. 16. Us vs them
  17. 17. However…
  18. 18. We’re on the same team
  19. 19. We’re on the same team With the same goals
  20. 20. To make a quality product Goal:
  21. 21. How do we get there? http://natlib.govt.nz/records/30665403
  22. 22. Collaboration
  23. 23. Design Development
  24. 24. Design Development
  25. 25. Get involved ASAP
  26. 26. Get involved ASAP Decisions without a dev?
  27. 27. Decisions Browser support
  28. 28. caniuse.com
  29. 29. caniuse.com
  30. 30. Wire-framing
  31. 31. 0 100 text text text text text bacon ipsum because I want to and I can bacon ipsum because I want to and I can
  32. 32. Frameworks
  33. 33. Frameworks (Or lack of)
  34. 34. Anything that moves
  35. 35. Anything that moves • Drop-downs • Hovers • Interactions • Animations
  36. 36. Styleguides
  37. 37. github.com/styleguide
  38. 38. github.com/styleguide
  39. 39. yelp.com/styleguide
  40. 40. revert.io
  41. 41. Styleguide
  42. 42. MVP Styleguide
  43. 43. Speed up development useful for future additions constant iteration easy to test consistent design non-bloated CSS Showing to stakeholders Revert styleguide:
  44. 44. Visual inventory
  45. 45. Be Proactive
  46. 46. Research & Share http://natlib.govt.nz/records/23223018
  47. 47. Performance http://natlib.govt.nz/records/30665403
  48. 48. Performance • Videos • Animations • Large images • Fonts • JS & CSS http://natlib.govt.nz/records/30665403
  49. 49. The Checklist
  50. 50. The Checklist Interactive items
  51. 51. The Checklist Interactive items State changes
  52. 52. The Checklist Interactive items State changes Really long text
  53. 53. The Checklist Interactive items State changes Really long text Empty data
  54. 54. The Checklist Interactive items State changes Really long text Empty data Different users
  55. 55. The Checklist Interactive items State changes Really long text Empty data Different users Performance
  56. 56. Transparency
  57. 57. http://xkcd.com/1425/
  58. 58. Surely it’s just an if statement“ ”
  59. 59. Communication http://natlib.govt.nz/records/30665403
  60. 60. Intentions Behind decisions
  61. 61. Do Not Compromise on intentions
  62. 62. Remember your goal
  63. 63. OutcomeSurprise designs Last minute decisions Gaping holes “Just add this” Impossible to implement designs
  64. 64. OutcomeSurprise designs Last minute decisions Gaping holes “Just add this” Impossible to implement designs
  65. 65. OutcomeSurprise designs Last minute decisions Gaping holes “Just add this” Impossible to implement designs
  66. 66. OutcomeSurprise designs Last minute decisions Gaping holes “Just add this” Impossible to implement designs
  67. 67. OutcomeSurprise designs Last minute decisions Gaping holes “Just add this” Impossible to implement designs
  68. 68. OutcomeSurprise designs Last minute decisions Gaping holes “Just add this” Impossible to implement designs
  69. 69. Thank you!@amandadorrell

×