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

Are We Having Fun Yet?

7aad555700fb85bf9787067349ac7ba9?s=47 Trent Walton
April 28, 2015

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.

7aad555700fb85bf9787067349ac7ba9?s=128

Trent Walton

April 28, 2015
Tweet

Transcript

  1. ARE WE HAVING FUN YET? @TrentWalton

  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. WHY?

  16. PERCEPTION REALITY = ≠

  17. PERCEPTION REALITY = ≠

  18. None
  19. None
  20. None
  21. None
  22. PERCEPTION OF THE WEB REALITY OF THE WEB ≠ =

  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. BUT THAT’S NOT WHAT HAPPENED

  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. flickr.com/photos/lukew/10412448136

  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.
  46. whatyouseeiswhatyouget.net

  47. EMBRACE THE MULTI-DEVICE WEB

  48. VICTORY!

  49. NOT SO FAST

  50. MY PERCEPTION EVERYONE ELSE’S ≠ =

  51. None
  52. I hate everything he is saying.

  53. None
  54. • Easy to Monetize • Plenty of Ad Spots •

    Good SEO • Increased Traffic
  55. • Cluttered • Sluggish & Slow • Redundant • Manipulative

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

    Beautiful Imagery
  57. • Inaccessible • Heavy File Size • JS Dependent •

    Hover Dependent
  58. PERCEPTIONS ARE COMPARTMENTALIZED

  59. THIS MAKES IT DIFFICULT TO WORK TOGETHER

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

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

  62. ORGANIZATIONS SHOULD BE EDGELESS TOO IF

  63. None
  64. –Frank Chimero, The Web’s Grain “[…] edgelessness means blurred lines

    between the disciplines that work together to make things for the web.”
  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.”
  66. https://twitter.com/mulegirl/status/458674029717897216

  67. None
  68. None
  69. None
  70. • Team not fully utilized • Iteration is slow •

    Morale drops • Perceptions are compartmentalized
  71. None
  72. None
  73. This makes it easy for us to hate each other.

  74. Paravel in 2006

  75. Plan

  76. None
  77. Design

  78. None
  79. Code

  80. None
  81. None
  82. None
  83. QUIT THROWIN’ STUFF OVER THE FENCE…

  84. ORGANIZATIONAL CHANGE IS JUST THE BEGINNING

  85. None
  86. There’s more to it than this.

  87. None
  88. SASS JEKYLL GULP NODE SIGN-OFF SPRINTS FRAMEWORKS LESS MIXINS COMPATIBILITY

    GRUNT PATTERNS SCOPE BREAKPOINTS TYPOGRAPHY DOCUMENTATION
  89. COMMUNICATION PATIENCE ACCOUNTABILITY RELATIONSHIPS HONESTY MORALE COLLABORATION BALANCE TRUST FUN

    VULNERABILITY DEBATE RESOLUTION DECISIVENESS UNDERSTANDING PRIDE
  90. EMOTIONS ARE HARD. WHAT DO WE DO?

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

  92. A FOUNDATION WHERE PERCEPTIONS EVOLVE TOGETHER

  93. SMART FOR PROCESS

  94. SEE THE SAME THINGS THE SAME WAY

  95. SEE THE SAME THINGS THE SAME WAY

  96. MINE VS OURS

  97. None
  98. None
  99. PROBLEM RESEARCH IDEA IDEA IDEA SOLUTION NEXT PROBLEM PROBLEM RESEARCH

    IDEA IDEA IDEA SOLUTION NEXT PROBLEM
  100. YOU HAD TO BE THERE

  101. None
  102. None
  103. PROBLEM RESEARCH IDEA IDEA IDEA SOLUTION NEXT PROBLEM

  104. None
  105. None
  106. None
  107. None
  108. IMPROVISATION VS BASTARDIZATION

  109. None
  110. None
  111. None
  112. Is that supposed to be a bowl? The toes look

    like french fries. Is the pedestal really necessary?
  113. BETTER MEETINGS

  114. None
  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!
  116. –IDEO “If a picture is worth a thousand words, a

    prototype is worth a thousand meetings”
  117. WHAT IF ? WHAT IF I JUST SHOW YOU? I

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

    JUST SHOW YOU?
  119. None
  120. None
  121. None
  122. – Jared Spool, on Shop Talk Show “The fidelity of

    your prototype should match the fidelity of your thinking.”
  123. None
  124. None
  125. None
  126. None
  127. SKILLS OVERLAP

  128. Design

  129. T-SHAPED

  130. Design

  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.”
  132. Design

  133. Design HTML GIT CSS SASS

  134. PERCEPTIONS OVERLAP

  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.”
  136. “CAN YOU HELP ME?”

  137. None
  138. PROTOTYPES WON’T LEAVE YOU WITH NOTHING

  139. CLOSER TO SHIPPING

  140. None
  141. EXECUTIVES LOVE IT

  142. IT’S GOOD FOR MORALE

  143. TEAMWORK UPGRADE

  144. WORK ON HOW YOU WORK TOGETHER

  145. COMMUNICATION PATIENCE ACCOUNTABILITY RELATIONSHIPS HONESTY MORALE COLLABORATION BALANCE TRUST FUN

    VULNERABILITY DEBATE RESOLUTION DECISIVENESS UNDERSTANDING PRIDE
  146. None
  147. PERCEPTIONS ARE VALUABLE

  148. None
  149. None
  150. THANKS! @TrentWalton

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