This document discusses collaboration between design and development teams. It emphasizes that design and development teams have shared goals of creating quality products, and should work together from an early stage. It provides tips for collaboration such as getting developers involved in decisions, using styleguides, doing research together, and being transparent about intentions and limitations. The overall message is that design and development teams are on the same side and need to communicate effectively to avoid issues down the line.

1. Hello!
I’m Amanda
@amandadorrell

2. I’m Amanda
Product design & front-end development

3. Timely
• 25 team members
• 8 Techbots
• Work remote

4. #timelylife

8. #timelylife

9. #timelylife

10. #efficientlife

11. Lean mean dev team

12. Lean mean dev team
+ designer

13. Lean mean dev team
+ designer ?

14. “There’s this massive
chasm between design
and development”
- Brad Frost

15. Design Development

16. Static psds with
measurements

18. but now• Responsive
• State changes
• Interactions
• Animations
• Web-based products

21. Disconnect

22. Us vs them

23. However…

24. We’re on the same
team

25. We’re on the same
team
With the same goals

26. To make a quality
product
Goal:

27. How do we
get there?
http://natlib.govt.nz/records/30665403

28. Collaboration

29. Design Development

30. Design
Development

31. Get involved ASAP

32. Get involved ASAP
Decisions without a dev?

33. Decisions
Browser support

36. caniuse.com

37. caniuse.com

38. Wire-framing

39. 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

41. Frameworks

42. Frameworks
(Or lack of)

43. Anything that moves

44. Anything that moves
• Drop-downs
• Hovers
• Interactions
• Animations

47. Styleguides

48. github.com/styleguide

49. github.com/styleguide

50. yelp.com/styleguide

52. revert.io

53. Styleguide

54. MVP Styleguide

56. Speed up development
useful for future additions
constant iteration
easy to test
consistent design
non-bloated CSS
Showing to stakeholders
Revert styleguide:

58. Visual inventory

60. Be Proactive

61. Research & Share
http://natlib.govt.nz/records/23223018

62. Performance
http://natlib.govt.nz/records/30665403

63. Performance
• Videos
• Animations
• Large images
• Fonts
• JS & CSS
http://natlib.govt.nz/records/30665403

64. The Checklist

65. The Checklist
Interactive items

66. The Checklist
Interactive items
State changes

67. The Checklist
Interactive items
State changes
Really long text

68. The Checklist
Interactive items
State changes
Really long text
Empty data

69. The Checklist
Interactive items
State changes
Really long text
Empty data
Different users

70. The Checklist
Interactive items
State changes
Really long text
Empty data
Different users
Performance

71. Transparency

72. http://xkcd.com/1425/

73. Surely it’s just
an if statement“
”

74. Communication
http://natlib.govt.nz/records/30665403

75. Intentions
Behind decisions

83. Do Not Compromise
on intentions

84. Remember your goal

85. OutcomeSurprise designs
Last minute decisions
Gaping holes
“Just add this”
Impossible to implement designs

86. OutcomeSurprise designs
Last minute decisions
Gaping holes
“Just add this”
Impossible to implement designs

87. OutcomeSurprise designs
Last minute decisions
Gaping holes
“Just add this”
Impossible to implement designs

88. OutcomeSurprise designs
Last minute decisions
Gaping holes
“Just add this”
Impossible to implement designs

89. OutcomeSurprise designs
Last minute decisions
Gaping holes
“Just add this”
Impossible to implement designs

90. OutcomeSurprise designs
Last minute decisions
Gaping holes
“Just add this”
Impossible to implement designs

91. Thank you!@amandadorrell