Prototyping Style, 2013, Breaking Development Nashville

Deck from my 2013 Breaking Development Nashville presentation on prototyping style and RWD workflow.

Transcript

1. Ben Callahan
   PROTOTYPING
   STYLE
   @bencallahan
   Tuesday, October 22, 13
   

   View Slide

2. We used to pretend like
   things were pretty simple.
   Tuesday, October 22, 13
   

   View Slide

3. 1024ish
   768ish
   fixed width
   Tuesday, October 22, 13
   

   View Slide

4. DESIGN FRONT-END BACK-END LAUNCH!
   Linear Workflow
   Tuesday, October 22, 13
   

   View Slide

5. DESIGN FRONT-END BACK-END LAUNCH!
   THINK ABOUT
   USERS
   Linear Workflow
   Tuesday, October 22, 13
   

   View Slide

6. DESIGN FRONT-END BACK-END LAUNCH!
   Linear Workflow
   THINK ABOUT
   USERS
   THROW IN
   SOME CONTENT
   Tuesday, October 22, 13
   

   View Slide

7. Slightly Better
   Linear Workflow
   CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!
   Tuesday, October 22, 13
   

   View Slide

8. Why hello,
   RWD.
   Tuesday, October 22, 13
   

   View Slide

9. Why hello,
   tiny browsers.
   Tuesday, October 22, 13
   

   View Slide

10. Why hello,
    reality.
    Tuesday, October 22, 13
    

    View Slide

11. THIS IS AWESOME,
    LET’S JUMP IN!
    Tuesday, October 22, 13
    

    View Slide

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

    View Slide

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

    View Slide

14. This doesn’t work.
    Tuesday, October 22, 13
    

    View Slide

15. We need to invite others
    into the process.
    Tuesday, October 22, 13
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. CONTENT UX
    FRONT-END
    DESIGN
    BACK-END
    “1 Deliverable” Workflow
    Tuesday, October 22, 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
    Tuesday, October 22, 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
    Tuesday, October 22, 13
    

    View Slide

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

    View Slide

24. WEB DESIGNERS STILL
    USE PHOTOSHOP!
    Tuesday, October 22, 13
    

    View Slide

25. THANKS!
    @bencallahan
    Tuesday, October 22, 13
    

    View Slide

26. Dissecting Design
    PRODUCTIVITY
    TIME
    Tuesday, October 22, 13
    

    View Slide

27. Dissecting Design
    PRODUCTIVITY
    TIME
    Tuesday, October 22, 13
    

    View Slide

28. Dissecting Design
    PRODUCTIVITY
    TIME
    Tuesday, October 22, 13
    

    View Slide

29. Establish the Aesthetic
    DISSECTING DESIGN
    Tuesday, October 22, 13
    

    View Slide

30. Solve the Problem
    DISSECTING DESIGN
    Tuesday, October 22, 13
    

    View Slide

31. Refine the Solution
    DISSECTING DESIGN
    Tuesday, October 22, 13
    

    View Slide

32. Tuesday, October 22, 13
    

    View Slide

33. Establish the Aesthetic
    DISSECTING DESIGN
    Tuesday, October 22, 13
    

    View Slide

34. DISSECTING DESIGN
    ‣ Style Comparisons
    ‣ Style Tiles
    ‣ Style Prototypes
    Establish the Aesthetic
    Tuesday, October 22, 13
    

    View Slide

35. 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/
    Tuesday, October 22, 13
    

    View Slide

36. Style Comparisons
    ESTABLISH THE AESTHETIC
    Light vs Dark
    Tuesday, October 22, 13
    

    View Slide

37. Style Comparisons
    ESTABLISH THE AESTHETIC
    Flat vs Textured
    Tuesday, October 22, 13
    

    View Slide

38. Style Comparisons
    ESTABLISH THE AESTHETIC
    Illustration vs Photography
    Tuesday, October 22, 13
    

    View Slide

39. Style Tiles
    ESTABLISH THE AESTHETIC
    Tuesday, October 22, 13
    

    View Slide

40. Style Tiles
    ESTABLISH THE AESTHETIC
    Tuesday, October 22, 13
    

    View Slide

41. Style Tiles
    ESTABLISH THE AESTHETIC
    Tuesday, October 22, 13
    

    View Slide

42. Style Prototypes
    ESTABLISH THE AESTHETIC
    Tuesday, October 22, 13
    

    View Slide

43. USE TOOLS YOU ARE
    COMFORTABLE WITH
    TO ESTABLISH THE
    AESTHETIC
    HOW TO DECIDE
    Tuesday, October 22, 13
    

    View Slide

44. Cool, so what
    happens next?
    Tuesday, October 22, 13
    

    View Slide

45. Solve the Problem
    DISSECTING DESIGN
    Tuesday, October 22, 13
    

    View Slide

46. DISSECTING DESIGN
    ‣ Static Design Tools
    ‣ Responsive Design Tools
    ‣ HTML/CSS
    Solve the Problem
    Tuesday, October 22, 13
    

    View Slide

47. Static Design Tools
    SOLVE THE PROBLEM
    Tuesday, October 22, 13
    

    View Slide

48. Static Design Tools
    SOLVE THE PROBLEM
    Tuesday, October 22, 13
    

    View Slide

49. Static Design Tools
    SOLVE THE PROBLEM
    Tuesday, October 22, 13
    

    View Slide

50. Responsive Design Tools
    SOLVE THE PROBLEM
    Tuesday, October 22, 13
    

    View Slide

51. SOLVE THE PROBLEM
    Responsive Design Tools
    Tuesday, October 22, 13
    

    View Slide

52. SOLVE THE PROBLEM
    Responsive Design Tools
    Tuesday, October 22, 13
    

    View Slide

53. HTML/CSS
    SOLVE THE PROBLEM
    Tuesday, October 22, 13
    

    View Slide

54. HTML/CSS
    SOLVE THE PROBLEM
    Tuesday, October 22, 13
    

    View Slide

55. HTML/CSS
    SOLVE THE PROBLEM
    Tuesday, October 22, 13
    

    View Slide

56. Layout vs Modules
    SOLVE THE PROBLEM
    Tuesday, October 22, 13
    

    View Slide

57. Layout vs Modules
    SOLVE THE PROBLEM
    Tuesday, October 22, 13
    

    View Slide

58. Layout vs Modules
    SOLVE THE PROBLEM
    Tuesday, October 22, 13
    

    View Slide

59. YOU BEST SOLVE
    PROBLEMS USING
    TOOLS YOU ARE
    FLUENT WITH
    HOW TO DECIDE
    Tuesday, October 22, 13
    

    View Slide

60. Tuesday, October 22, 13
    

    View Slide

61. SOLVE THE PROBLEM
    Tuesday, October 22, 13
    

    View Slide

62. Unconscious
    Incompetence
    SOLVE THE PROBLEM
    Tuesday, October 22, 13
    

    View Slide

63. Unconscious
    Incompetence
    Conscious
    Incompetence
    SOLVE THE PROBLEM
    Tuesday, October 22, 13
    

    View Slide

64. Unconscious
    Incompetence
    Conscious
    Incompetence Conscious
    Competence
    SOLVE THE PROBLEM
    Tuesday, October 22, 13
    

    View Slide

65. Unconscious
    Incompetence
    Conscious
    Incompetence Conscious
    Competence
    Unconscious
    Competence
    SOLVE THE PROBLEM
    Tuesday, October 22, 13
    

    View Slide

66. Fluency
    SOLVE THE PROBLEM
    Tuesday, October 22, 13
    

    View Slide

67. Refine the Solution
    DISSECTING DESIGN
    Tuesday, October 22, 13
    

    View Slide

68. DISSECTING DESIGN
    ‣ Static Design Tools
    ‣ Design Pairing
    Refine the Solution
    Tuesday, October 22, 13
    

    View Slide

69. Don’t Use Static Design Tools
    REFINE THE SOLUTION
    LAUNCH
    DESIGN
    FRONT
    END
    BACK
    END
    CONTENT
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    Tuesday, October 22, 13
    

    View Slide

70. Don’t Use Static Design Tools
    REFINE THE SOLUTION
    Tuesday, October 22, 13
    

    View Slide

71. Instead of static design
    hand-offs, consider
    design pairing
    REFINE THE SOLUTION
    Tuesday, October 22, 13
    

    View Slide

72. Design Pairing
    REFINE THE SOLUTION
    Tuesday, October 22, 13
    

    View Slide

73. Design Pairing
    REFINE THE SOLUTION
    Tuesday, October 22, 13
    

    View Slide

74. Design Pairing
    REFINE THE SOLUTION
    Tuesday, October 22, 13
    

    View Slide

75. Design Pairing
    REFINE THE SOLUTION
    Tuesday, October 22, 13
    

    View Slide

76. Tuesday, October 22, 13
    

    View Slide

77. You don’t want to do the long
    tail more than once
    REFINE THE SOLUTION
    Tuesday, October 22, 13
    

    View Slide

78. The Switching Point
    REFINE THE SOLUTION
    Tuesday, October 22, 13
    

    View Slide

79. EFFICIENCY IS KEY
    WHEN REFINING A
    DESIGN SOLUTION
    HOW TO DECIDE
    Tuesday, October 22, 13
    

    View Slide

80. Establish
    Solve
    Refine
    ................. Comfort
    ....................... Fluency
    ................... Efficiency
    Guidelines for Selecting Tools
    Tuesday, October 22, 13
    

    View Slide

81. Establish
    Solve
    Refine
    ..... Style Prototype
    ......... Sketching + PSD
    .... In-Browser Pairing
    Tools we use at Sparkbox
    Tuesday, October 22, 13
    

    View Slide

82. Photo Credit: Jay Maisel
    Tuesday, October 22, 13
    

    View Slide

83. Photo Credit: Jay Maisel
    Tuesday, October 22, 13
    

    View Slide

84. Photo Credit: Jay Maisel
    Tuesday, October 22, 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
    Tuesday, October 22, 13
    

    View Slide

86. 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
    Tuesday, October 22, 13
    

    View Slide

87. 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
    Tuesday, October 22, 13
    

    View Slide

88. Group Improvisation
    Tuesday, October 22, 13
    

    View Slide

89. Group improvisation requires
    individuals on a team to...
    be skilled
    Tuesday, October 22, 13
    

    View Slide

90. Group improvisation requires
    individuals on a team to...
    be humble
    Tuesday, October 22, 13
    

    View Slide

91. Group improvisation requires
    individuals on a team to...
    be empathetic
    Tuesday, October 22, 13
    

    View Slide

92. Skill
    Humility
    Empathy
    Tuesday, October 22, 13
    

    View Slide

93. Tuesday, October 22, 13
    

    View Slide

94. Tuesday, October 22, 13
    

    View Slide

95. Tuesday, October 22, 13
    

    View Slide

96. Tuesday, October 22, 13
    

    View Slide

97. Tuesday, October 22, 13
    

    View Slide

98. Create guidelines instead
    of rigid process
    Tuesday, October 22, 13
    

    View Slide

99. The amount of process
    required is inversely
    proportionate to the
    skill and experience of
    your team.
    Tuesday, October 22, 13
    

    View Slide

100. Create the perfect, fully-
     documented, all-encompassing web
     design and development process.
     Or...
     Tuesday, October 22, 13
     

     View Slide

101. Chill out and develop our people.
     Tuesday, October 22, 13
     

     View Slide

102. Invest in people
     over process
     Tuesday, October 22, 13
     

     View Slide

103. THANKS!
     @bencallahan
     Tuesday, October 22, 13
     

     View Slide