Are We Having Fun Yet?

The form that websites take has evolved more quickly than the ways we go about building them. Multi-device design requires more collaboration and improv. If we fail to adapt process, friction will happen — the frustrating kind.

In this talk, Trent will share his successes and confess his failures in trying to chart a path down the road towards a better way to build together.

Transcript

1. ARE WE HAVING
   FUN YET?
   @TrentWalton
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. WHY?
    

    View Slide

16. PERCEPTION
    REALITY
    =
    ≠
    

    View Slide

17. PERCEPTION
    REALITY
    =
    ≠
    

    View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. PERCEPTION OF THE WEB
    REALITY OF THE WEB
    ≠
    =
    

    View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. BUT THAT’S NOT
    WHAT HAPPENED
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. flickr.com/photos/lukew/10412448136
    

    View Slide

45. —John Allsopp, A Dao of Web Design, 2000
    It is the nature of the web to be flexible, and it should be our role as
    designers and developers to embrace this flexibility, and produce
    pages which, by being flexible, are accessible to all.
    

    View Slide

46. whatyouseeiswhatyouget.net
    

    View Slide

47. EMBRACE THE
    MULTI-DEVICE WEB
    

    View Slide

48. VICTORY!
    

    View Slide

49. NOT SO FAST
    

    View Slide

50. MY PERCEPTION
    EVERYONE ELSE’S
    ≠
    =
    

    View Slide

51. View Slide

52. I hate everything
    he is saying.
    

    View Slide

53. View Slide

54. • Easy to Monetize
    • Plenty of Ad Spots
    • Good SEO
    • Increased Traffic
    

    View Slide

55. • Cluttered
    • Sluggish & Slow
    • Redundant
    • Manipulative
    

    View Slide

56. • Clear Hierarchy
    • Good Typography
    • Solid UX
    • Beautiful Imagery
    

    View Slide

57. • Inaccessible
    • Heavy File Size
    • JS Dependent
    • Hover Dependent
    

    View Slide

58. PERCEPTIONS ARE
    COMPARTMENTALIZED
    

    View Slide

59. THIS MAKES IT
    DIFFICULT TO WORK
    TOGETHER
    

    View Slide

60. IT’S NOT YOU OR ME.
    IT’S US.
    

    View Slide

61. ORGANIZATIONS SHOULD
    BE EDGELESS TOO
    IF THE WEB IS EDGELESS
    

    View Slide

62. ORGANIZATIONS SHOULD
    BE EDGELESS TOO
    IF
    

    View Slide

63. View Slide

64. –Frank Chimero, The Web’s Grain
    “[…] edgelessness means blurred lines between the disciplines that
    work together to make things for the web.”
    

    View Slide

65. –Frank Chimero, The Web’s Grain
    “[…] Everyone that I’ve spoken with that’s worked on a large
    responsive project with a big client says that the process disrupts
    workflows, expectations, and work culture.”
    

    View Slide

66. https://twitter.com/mulegirl/status/458674029717897216
    

    View Slide

67. View Slide

68. View Slide

69. View Slide

70. • Team not fully utilized
    • Iteration is slow
    • Morale drops
    • Perceptions are compartmentalized
    

    View Slide

71. View Slide

72. View Slide

73. This makes it easy for us to hate each other.
    

    View Slide

74. Paravel in 2006
    

    View Slide

75. Plan
    

    View Slide

76. View Slide

77. Design
    

    View Slide

78. View Slide

79. Code
    

    View Slide

80. View Slide

81. View Slide

82. View Slide

83. QUIT THROWIN’ STUFF
    OVER THE FENCE…
    

    View Slide

84. ORGANIZATIONAL
    CHANGE IS JUST THE
    BEGINNING
    

    View Slide

85. View Slide

86. There’s more to it than this.
    

    View Slide

87. View Slide

88. SASS JEKYLL GULP NODE
    SIGN-OFF SPRINTS FRAMEWORKS LESS
    MIXINS COMPATIBILITY GRUNT PATTERNS
    SCOPE BREAKPOINTS TYPOGRAPHY DOCUMENTATION
    

    View Slide

89. COMMUNICATION PATIENCE ACCOUNTABILITY RELATIONSHIPS
    HONESTY MORALE COLLABORATION BALANCE
    TRUST FUN VULNERABILITY DEBATE
    RESOLUTION DECISIVENESS UNDERSTANDING PRIDE
    

    View Slide

90. EMOTIONS ARE HARD.
    WHAT DO WE DO?
    

    View Slide

91. WE BUILD A DAMN
    PROTOTYPE. THAT’S
    WHAT WE DO.
    

    View Slide

92. A FOUNDATION WHERE
    PERCEPTIONS EVOLVE
    TOGETHER
    

    View Slide

93. SMART FOR PROCESS
    

    View Slide

94. SEE THE SAME THINGS
    THE SAME WAY
    

    View Slide

95. SEE THE SAME THINGS
    THE SAME WAY
    

    View Slide

96. MINE VS OURS
    

    View Slide

97. View Slide

98. View Slide

99. PROBLEM
    RESEARCH
    IDEA IDEA
    IDEA
    SOLUTION
    NEXT PROBLEM
    PROBLEM
    RESEARCH
    IDEA IDEA
    IDEA
    SOLUTION
    NEXT PROBLEM
    

    View Slide

100. YOU HAD TO
     BE THERE
     

     View Slide

101. View Slide

102. View Slide

103. PROBLEM
     RESEARCH
     IDEA IDEA
     IDEA
     SOLUTION
     NEXT PROBLEM
     

     View Slide

104. View Slide

105. View Slide

106. View Slide

107. View Slide

108. IMPROVISATION VS
     BASTARDIZATION
     

     View Slide

109. View Slide

110. View Slide

111. View Slide

112. Is that supposed to be a bowl?
     The toes look like french fries.
     Is the pedestal really necessary?
     

     View Slide

113. BETTER
     MEETINGS
     

     View Slide

114. View Slide

115. What about Mobile?
     What about a
     hamburgermenu?
     Let’s assume that’s
     possible. Jill, ETA on code?
     Hard to know for sure.
     2 Days?
     Great! I’ll get this in JIRA!
     If our assumptions are correct
     we’re home free!
     

     View Slide

116. –IDEO
     “If a picture is worth a thousand words, a prototype
     is worth a thousand meetings”
     

     View Slide

117. WHAT IF ?
     WHAT IF I JUST SHOW YOU?
     I JUST SHOW YOU?
     

     View Slide

118. WHAT IF ?
     WHAT IF I JUST SHOW YOU?
     I JUST SHOW YOU?
     

     View Slide

119. View Slide

120. View Slide

121. View Slide

122. – Jared Spool, on Shop Talk Show
     “The fidelity of your prototype should match the fidelity
     of your thinking.”
     

     View Slide

123. View Slide

124. View Slide

125. View Slide

126. View Slide

127. SKILLS OVERLAP
     

     View Slide

128. Design
     

     View Slide

129. T-SHAPED
     

     View Slide

130. Design
     

     View Slide

131. – Mark Otto, Fatten up those T's
     “Being T-shaped means you can shift yourself and provide value at
     just about any stage or type of project—like sketching,
     wireframing, visual design, and code.”
     

     View Slide

132. Design
     

     View Slide

133. Design
     HTML
     GIT
     CSS
     SASS
     

     View Slide

134. PERCEPTIONS
     OVERLAP
     

     View Slide

135. – Stephen Caver, Why Developers Need to Learn Design, 2014
     “Nothing is more toxic to a project than developers and designers
     seeing each other as rivals.”
     

     View Slide

136. “CAN YOU HELP ME?”
     

     View Slide

137. View Slide

138. PROTOTYPES WON’T
     LEAVE YOU WITH
     NOTHING
     

     View Slide

139. CLOSER TO
     SHIPPING
     

     View Slide

140. View Slide

141. EXECUTIVES LOVE IT
     

     View Slide

142. IT’S GOOD FOR MORALE
     

     View Slide

143. TEAMWORK
     UPGRADE
     

     View Slide

144. WORK ON HOW YOU
     WORK TOGETHER
     

     View Slide

145. COMMUNICATION PATIENCE ACCOUNTABILITY RELATIONSHIPS
     HONESTY MORALE COLLABORATION BALANCE
     TRUST FUN VULNERABILITY DEBATE
     RESOLUTION DECISIVENESS UNDERSTANDING PRIDE
     

     View Slide

146. View Slide

147. PERCEPTIONS ARE
     VALUABLE
     

     View Slide

148. View Slide

149. View Slide

150. THANKS!
     @TrentWalton
     

     View Slide

151. THAT’S ALL I HAVE TO
     SAY ABOUT THAT.
     @TrentWalton
     

     View Slide