RWD Killed My Process, Converge RVA

Deck from my presentation at Converge RVA in Richmond, VA on October 12, 2013

Transcript

1. Ben Callahan
   RWD KILLED
   MY PROCESS
   @bencallahan
   Wednesday, October 16, 13
   

   View Slide

2. Wednesday, October 16, 13
   

   View Slide

3. Before RWD, we
   pretended like things
   were pretty simple.
   Wednesday, October 16, 13
   

   View Slide

4. 1024ish
   768ish
   fixed width
   Wednesday, October 16, 13
   

   View Slide

5. DESIGN FRONT-END BACK-END LAUNCH!
   Linear Workflow
   Wednesday, October 16, 13
   

   View Slide

6. DESIGN FRONT-END BACK-END LAUNCH!
   THINK ABOUT
   USERS
   Linear Workflow
   Wednesday, October 16, 13
   

   View Slide

7. DESIGN FRONT-END BACK-END LAUNCH!
   Linear Workflow
   THINK ABOUT
   USERS
   THROW IN
   SOME CONTENT
   Wednesday, October 16, 13
   

   View Slide

8. Slightly Better
   Linear Workflow
   CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!
   Wednesday, October 16, 13
   

   View Slide

9. Why hello, RWD.
   Wednesday, October 16, 13
   

   View Slide

10. Why hello, RWD.
    Wednesday, October 16, 13
    

    View Slide

11. THIS IS AWESOME,
    LET’S JUMP IN!
    Wednesday, October 16, 13
    

    View Slide

12. Linear Workflow
    Now with
    RWD!
    CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!
    Wednesday, October 16, 13
    

    View Slide

13. Ditto!
    Now with
    RWD!
    Linear Workflow
    CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!
    Me too!
    Wednesday, October 16, 13
    

    View Slide

14. This doesn’t work.
    Wednesday, October 16, 13
    

    View Slide

15. Linear Workflow Problem
    LAUNCH
    DESIGN
    FRONT
    END
    BACK
    END
    CONTENT
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    Wednesday, October 16, 13
    

    View Slide

16. We need to invite others
    into the process
    Wednesday, October 16, 13
    

    View Slide

17. CONTENT UX
    FRONT-END
    DESIGN
    BACK-END
    “1 Deliverable” Workflow
    Wednesday, October 16, 13
    

    View Slide

18. CONTENT UX
    FRONT-END
    DESIGN
    BACK-END
    “1 Deliverable” Workflow
    Wednesday, October 16, 13
    

    View Slide

19. CONTENT UX
    FRONT-END
    DESIGN
    BACK-END
    “1 Deliverable” Workflow
    Wednesday, October 16, 13
    

    View Slide

20. CONTENT UX
    FRONT-END
    DESIGN
    BACK-END
    “1 Deliverable” Workflow
    Wednesday, October 16, 13
    

    View Slide

21. LAUNCH
    DESIGN
    FRONT
    END
    BACK
    END
    CONTENT
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    CONTENT UX
    FRONT-END
    DESIGN
    BACK-END
    Wednesday, October 16, 13
    

    View Slide

22. LAUNCH
    DESIGN
    FRONT
    END
    BACK
    END
    CONTENT
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    CONTENT UX
    FRONT-END
    DESIGN
    BACK-END
    UX
    FRONT-END
    DESIGN
    LAUNCH
    DESIGN
    FRONT
    END
    BACK
    END
    CONTENT
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    Wednesday, October 16, 13
    

    View Slide

23. ND
    DESIGN
    So, how do
    we advance
    design through
    a “1 deliverable”
    workflow?
    Wednesday, October 16, 13
    

    View Slide

24. WEB DESIGNERS STILL
    USE PHOTOSHOP!
    Wednesday, October 16, 13
    

    View Slide

25. Dissecting Design
    PRODUCTIVITY
    TIME
    Wednesday, October 16, 13
    

    View Slide

26. Dissecting Design
    PRODUCTIVITY
    TIME
    Wednesday, October 16, 13
    

    View Slide

27. Dissecting Design
    PRODUCTIVITY
    TIME
    Wednesday, October 16, 13
    

    View Slide

28. Establish the Aesthetic
    DISSECTING DESIGN
    Wednesday, October 16, 13
    

    View Slide

29. Solve the Problem
    DISSECTING DESIGN
    Wednesday, October 16, 13
    

    View Slide

30. Refine the Solution
    DISSECTING DESIGN
    Wednesday, October 16, 13
    

    View Slide

31. Wednesday, October 16, 13
    

    View Slide

32. Establish the Aesthetic
    DISSECTING DESIGN
    Wednesday, October 16, 13
    

    View Slide

33. DISSECTING DESIGN
    ‣ Style Comparisons
    ‣ Style Tiles
    ‣ Style Prototypes
    Establish the Aesthetic
    Wednesday, October 16, 13
    

    View Slide

34. Style Comparisons
    ESTABLISH THE AESTHETIC
    “I could create an illustration or a 3D
    rendering of what I want my new office to
    look like, but that doesn’t take advantage
    of his great ideas. It’s dictation, not
    collaboration. Instead, I show him a
    Pinterest board my wife and I created.”
    @danielmall
    http://danielmall.com/articles/the-post-psd-era/
    Wednesday, October 16, 13
    

    View Slide

35. Style Comparisons
    ESTABLISH THE AESTHETIC
    Light vs Dark
    Wednesday, October 16, 13
    

    View Slide

36. Style Comparisons
    ESTABLISH THE AESTHETIC
    Flat vs Textured
    Wednesday, October 16, 13
    

    View Slide

37. Style Comparisons
    ESTABLISH THE AESTHETIC
    Illustration vs Photography
    Wednesday, October 16, 13
    

    View Slide

38. Style Tiles
    ESTABLISH THE AESTHETIC
    Wednesday, October 16, 13
    

    View Slide

39. Style Tiles
    ESTABLISH THE AESTHETIC
    Wednesday, October 16, 13
    

    View Slide

40. Style Tiles
    ESTABLISH THE AESTHETIC
    Wednesday, October 16, 13
    

    View Slide

41. Style Prototypes
    ESTABLISH THE AESTHETIC
    Wednesday, October 16, 13
    

    View Slide

42. USE TOOLS YOU ARE
    COMFORTABLE WITH
    TO ESTABLISH THE
    AESTHETIC
    HOW TO DECIDE
    Wednesday, October 16, 13
    

    View Slide

43. Cool, so what
    happens next?
    Wednesday, October 16, 13
    

    View Slide

44. Solve the Problem
    DISSECTING DESIGN
    Wednesday, October 16, 13
    

    View Slide

45. DISSECTING DESIGN
    ‣ Static Design Tools
    ‣ Responsive Design Tools
    ‣ HTML/CSS
    Solve the Problem
    Wednesday, October 16, 13
    

    View Slide

46. Static Design Tools
    SOLVE THE PROBLEM
    Wednesday, October 16, 13
    

    View Slide

47. Static Design Tools
    SOLVE THE PROBLEM
    Wednesday, October 16, 13
    

    View Slide

48. Static Design Tools
    SOLVE THE PROBLEM
    Wednesday, October 16, 13
    

    View Slide

49. Responsive Design Tools
    SOLVE THE PROBLEM
    Wednesday, October 16, 13
    

    View Slide

50. SOLVE THE PROBLEM
    Responsive Design Tools
    Wednesday, October 16, 13
    

    View Slide

51. SOLVE THE PROBLEM
    Responsive Design Tools
    Wednesday, October 16, 13
    

    View Slide

52. HTML/CSS
    SOLVE THE PROBLEM
    Wednesday, October 16, 13
    

    View Slide

53. HTML/CSS
    SOLVE THE PROBLEM
    Wednesday, October 16, 13
    

    View Slide

54. HTML/CSS
    SOLVE THE PROBLEM
    Wednesday, October 16, 13
    

    View Slide

55. Layout vs Modules
    SOLVE THE PROBLEM
    Wednesday, October 16, 13
    

    View Slide

56. Layout vs Modules
    SOLVE THE PROBLEM
    Wednesday, October 16, 13
    

    View Slide

57. Layout vs Modules
    SOLVE THE PROBLEM
    Wednesday, October 16, 13
    

    View Slide

58. YOU BEST SOLVE
    PROBLEMS USING
    TOOLS YOU ARE
    FLUENT WITH
    HOW TO DECIDE
    Wednesday, October 16, 13
    

    View Slide

59. Wednesday, October 16, 13
    

    View Slide

60. SOLVE THE PROBLEM
    Wednesday, October 16, 13
    

    View Slide

61. Unconscious
    Incompetence
    SOLVE THE PROBLEM
    Wednesday, October 16, 13
    

    View Slide

62. Unconscious
    Incompetence
    Conscious
    Incompetence
    SOLVE THE PROBLEM
    Wednesday, October 16, 13
    

    View Slide

63. Unconscious
    Incompetence
    Conscious
    Incompetence Conscious
    Competence
    SOLVE THE PROBLEM
    Wednesday, October 16, 13
    

    View Slide

64. Unconscious
    Incompetence
    Conscious
    Incompetence Conscious
    Competence
    Unconscious
    Competence
    SOLVE THE PROBLEM
    Wednesday, October 16, 13
    

    View Slide

65. Fluency
    SOLVE THE PROBLEM
    Wednesday, October 16, 13
    

    View Slide

66. Refine the Solution
    DISSECTING DESIGN
    Wednesday, October 16, 13
    

    View Slide

67. DISSECTING DESIGN
    ‣ Static Design Tools
    ‣ Design Pairing
    Refine the Solution
    Wednesday, October 16, 13
    

    View Slide

68. Don’t Use Static Design Tools
    REFINE THE SOLUTION
    LAUNCH
    DESIGN
    FRONT
    END
    BACK
    END
    CONTENT
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    Wednesday, October 16, 13
    

    View Slide

69. Instead of static design
    hand-offs, consider
    design pairing
    REFINE THE SOLUTION
    Wednesday, October 16, 13
    

    View Slide

70. Design Pairing
    REFINE THE SOLUTION
    Wednesday, October 16, 13
    

    View Slide

71. Design Pairing
    REFINE THE SOLUTION
    Wednesday, October 16, 13
    

    View Slide

72. Design Pairing
    REFINE THE SOLUTION
    Wednesday, October 16, 13
    

    View Slide

73. Design Pairing
    REFINE THE SOLUTION
    Wednesday, October 16, 13
    

    View Slide

74. Wednesday, October 16, 13
    

    View Slide

75. You don’t want to do the long
    tail more than once
    REFINE THE SOLUTION
    Wednesday, October 16, 13
    

    View Slide

76. The Switching Point
    REFINE THE SOLUTION
    Wednesday, October 16, 13
    

    View Slide

77. EFFICIENCY IS KEY
    WHEN REFINING A
    DESIGN SOLUTION
    HOW TO DECIDE
    Wednesday, October 16, 13
    

    View Slide

78. Establish
    Solve
    Refine
    ................. Comfort
    ....................... Fluency
    ................... Efficiency
    Guidelines for Selecting Tools
    Wednesday, October 16, 13
    

    View Slide

79. Establish
    Solve
    Refine
    ..... Style Prototype
    ......... Sketching + PSD
    .... In-Browser Pairing
    Tools we use at Sparkbox
    Wednesday, October 16, 13
    

    View Slide

80. Photo Credit: Jay Maisel
    Wednesday, October 16, 13
    

    View Slide

81. Photo Credit: Jay Maisel
    Wednesday, October 16, 13
    

    View Slide

82. Photo Credit: Jay Maisel
    Wednesday, October 16, 13
    

    View Slide

83. Group improvisation is a challenge.
    Aside from the weighty technical
    problem of collective coherent
    thinking, there is the very human,
    even social need for sympathy from
    all members to bend for the
    common result.
    Bill Evans
    Wednesday, October 16, 13
    

    View Slide

84. Group improvisation is a challenge.
    Aside from the weighty technical
    problem of collective coherent
    thinking, there is the very human,
    even social need for sympathy from
    all members to bend for the
    common result.
    Bill Evans
    Wednesday, October 16, 13
    

    View Slide

85. Group improvisation is a challenge.
    Aside from the weighty technical
    problem of collective coherent
    thinking, there is the very human,
    even social need for sympathy from
    all members to bend for the
    common result.
    Bill Evans
    Wednesday, October 16, 13
    

    View Slide

86. Group Improvisation
    Wednesday, October 16, 13
    

    View Slide

87. Group improvisation requires
    individuals on a team to...
    be skilled
    Wednesday, October 16, 13
    

    View Slide

88. Group improvisation requires
    individuals on a team to...
    be humble
    Wednesday, October 16, 13
    

    View Slide

89. Group improvisation requires
    individuals on a team to...
    be empathetic
    Wednesday, October 16, 13
    

    View Slide

90. Skill
    Humility
    Empathy
    Wednesday, October 16, 13
    

    View Slide

91. Wednesday, October 16, 13
    

    View Slide

92. Wednesday, October 16, 13
    

    View Slide

93. Wednesday, October 16, 13
    

    View Slide

94. Wednesday, October 16, 13
    

    View Slide

95. Wednesday, October 16, 13
    

    View Slide

96. Create guidelines instead
    of rigid process
    Wednesday, October 16, 13
    

    View Slide

97. The amount of process
    required is inversely
    proportionate to the
    skill and experience of
    your team.
    Wednesday, October 16, 13
    

    View Slide

98. Create the perfect, fully-
    documented, all-encompassing web
    design and development process.
    Or...
    Wednesday, October 16, 13
    

    View Slide

99. Chill out and develop our people.
    Wednesday, October 16, 13
    

    View Slide

100. Invest in people
     over process
     Wednesday, October 16, 13
     

     View Slide

101. THANKS!
     @bencallahan
     Wednesday, October 16, 13
     

     View Slide