Dissecting Design

Deck from my presentation at the Responsive Trends Web Conference in San Francisco, CA on February 12, 2014.

Transcript

1. Ben Callahan

   DISSECTING DESIGN
   @bencallahan
   

   View Slide

2. We used to pretend like
   things were pretty simple.
   

   View Slide

3. fixed width
   1024ish
   768ish
   

   View Slide

4. DESIGN FRONT-END BACK-END LAUNCH!
   Linear Workflow
   THINK ABOUT 

   USERS
   THROW IN
   SOME CONTENT
   

   View Slide

5. Slightly Better 

   Linear Workflow
   CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!
   

   View Slide

6. Why hello,
   RWD.
   

   View Slide

7. Why hello,
   tiny browsers.
   

   View Slide

8. Why hello,
   reality.
   

   View Slide

9. THIS IS AWESOME,
   LET’S JUMP IN!
   

   View Slide

10. Me too!
    Ditto!
    Old Linear Workflow
    Now with
    RWD!
    CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!
    

    View Slide

11. This doesn’t work.
    

    View Slide

12. We need to invite others
    into the process.
    

    View Slide

13. CONTENT UX
    FRONT-END
    DESIGN
    BACK-END
    “1 Deliverable” Workflow
    

    View Slide

14. CONTENT UX
    FRONT-END
    DESIGN
    BACK-END
    “1 Deliverable” Workflow
    

    View Slide

15. CONTENT UX
    FRONT-END
    DESIGN
    BACK-END
    “1 Deliverable” Workflow
    

    View Slide

16. CONTENT UX
    FRONT-END
    DESIGN
    BACK-END
    “1 Deliverable” Workflow
    

    View Slide

17. LAUNCH
    DESIGN
    FRONT
    END
    BACK
    END
    CONTENT
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    CONTENT UX
    FRONT-END
    DESIGN
    BACK-END
    

    View Slide

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

    View Slide

19. ONT-END
    DESIGN
    So, how do
    we advance
    design through
    a “1 deliverable”
    workflow?
    

    View Slide

20. WEB DESIGNERS STILL 

    USE PHOTOSHOP!
    

    View Slide

21. THANKS!
    @bencallahan
    

    View Slide

22. Dissecting Design
    PRODUCTIVITY
    TIME
    

    View Slide

23. Dissecting Design
    PRODUCTIVITY
    TIME
    

    View Slide

24. Dissecting Design
    PRODUCTIVITY
    TIME
    

    View Slide

25. Establish the Aesthetic
    DISSECTING DESIGN
    

    View Slide

26. Solve the Problem
    DISSECTING DESIGN
    

    View Slide

27. Refine the Solution
    DISSECTING DESIGN
    

    View Slide

28. View Slide

29. Establish the Aesthetic
    DISSECTING DESIGN
    

    View Slide

30. DISSECTING DESIGN
    ‣ Style Comparisons
    ‣ Style Tiles
    ‣ Style Prototypes
    Establish the Aesthetic
    

    View Slide

31. 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/
    

    View Slide

32. Style Comparisons
    ESTABLISH THE AESTHETIC
    Light vs Dark
    

    View Slide

33. Style Comparisons
    ESTABLISH THE AESTHETIC
    Flat vs Textured
    

    View Slide

34. Style Comparisons
    ESTABLISH THE AESTHETIC
    Illustration vs Photography
    

    View Slide

35. Style Tiles
    ESTABLISH THE AESTHETIC
    

    View Slide

36. Style Tiles
    ESTABLISH THE AESTHETIC
    

    View Slide

37. Style Tiles
    ESTABLISH THE AESTHETIC
    

    View Slide

38. Style Prototypes
    ESTABLISH THE AESTHETIC
    

    View Slide

39. USE TOOLS YOU ARE
    COMFORTABLE WITH
    TO ESTABLISH THE
    AESTHETIC
    HOW TO DECIDE
    

    View Slide

40. Cool, so what
    happens next?
    

    View Slide

41. Solve the Problem
    DISSECTING DESIGN
    

    View Slide

42. DISSECTING DESIGN
    ‣ Static Design Tools
    ‣ Responsive Design Tools
    ‣ HTML/CSS
    Solve the Problem
    

    View Slide

43. Static Design Tools
    SOLVE THE PROBLEM
    

    View Slide

44. Static Design Tools
    SOLVE THE PROBLEM
    

    View Slide

45. Static Design Tools
    SOLVE THE PROBLEM
    

    View Slide

46. Responsive Design Tools
    SOLVE THE PROBLEM
    

    View Slide

47. SOLVE THE PROBLEM
    Responsive Design Tools
    

    View Slide

48. SOLVE THE PROBLEM
    Responsive Design Tools
    

    View Slide

49. SOLVE THE PROBLEM
    Responsive Design Tools
    

    View Slide

50. HTML/CSS
    SOLVE THE PROBLEM
    

    View Slide

51. HTML/CSS
    SOLVE THE PROBLEM
    

    View Slide

52. HTML/CSS
    SOLVE THE PROBLEM
    

    View Slide

53. Layout vs Modules
    SOLVE THE PROBLEM
    

    View Slide

54. Layout vs Modules
    SOLVE THE PROBLEM
    

    View Slide

55. Layout vs Modules
    SOLVE THE PROBLEM
    

    View Slide

56. YOU BEST SOLVE
    PROBLEMS USING
    TOOLS YOU ARE
    FLUENT WITH
    HOW TO DECIDE
    

    View Slide

57. View Slide

58. SOLVE THE PROBLEM
    

    View Slide

59. Unconscious
    Incompetence
    SOLVE THE PROBLEM
    

    View Slide

60. Unconscious
    Incompetence
    Conscious
    Incompetence
    SOLVE THE PROBLEM
    

    View Slide

61. Unconscious
    Incompetence
    Conscious
    Incompetence Conscious
    Competence
    SOLVE THE PROBLEM
    

    View Slide

62. Unconscious
    Incompetence
    Conscious
    Incompetence Conscious
    Competence
    Unconscious
    Competence
    SOLVE THE PROBLEM
    

    View Slide

63. Fluency
    SOLVE THE PROBLEM
    

    View Slide

64. Refine the Solution
    DISSECTING DESIGN
    

    View Slide

65. DISSECTING DESIGN
    ‣ Static Design Tools
    ‣ Design Pairing
    Refine the Solution
    

    View Slide

66. Don’t Use Static Design Tools
    REFINE THE SOLUTION
    LAUNCH
    DESIGN
    FRONT
    END
    BACK
    END
    CONTENT
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    DECISIONS
    MADE
    

    View Slide

67. Don’t Use Static Design Tools
    REFINE THE SOLUTION
    

    View Slide

68. Instead of static design hand-
    offs, consider

    design pairing
    REFINE THE SOLUTION
    

    View Slide

69. Design Pairing
    REFINE THE SOLUTION
    

    View Slide

70. Design Pairing
    REFINE THE SOLUTION
    

    View Slide

71. Design Pairing
    REFINE THE SOLUTION
    

    View Slide

72. Design Pairing
    REFINE THE SOLUTION
    

    View Slide

73. You don’t want to do the long
    tail more than once
    REFINE THE SOLUTION
    

    View Slide

74. The Switching Point
    REFINE THE SOLUTION
    

    View Slide

75. EFFICIENCY IS KEY
    WHEN REFINING A
    DESIGN SOLUTION
    HOW TO DECIDE
    

    View Slide

76. Establish
    !
    Solve
    !
    Refine
    ................. Comfort
    !
    ....................... Fluency
    !
    ................... Efficiency
    Guidelines for Selecting Tools
    

    View Slide

77. Photo Credit: Jay Maisel
    

    View Slide

78. Photo Credit: Jay Maisel
    

    View Slide

79. Photo Credit: Jay Maisel
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

83. Group Improvisation
    

    View Slide

84. Group improvisation requires
    individuals on a team to...
    !
    be skilled
    

    View Slide

85. Group improvisation requires
    individuals on a team to...
    !
    be humble
    

    View Slide

86. Group improvisation requires
    individuals on a team to...
    !
    be empathetic
    

    View Slide

87. Skill
    Humility
    Empathy
    

    View Slide

88. View Slide

89. View Slide

90. View Slide

91. View Slide

92. View Slide

93. View Slide

94. Create guidelines instead
    of rigid process
    

    View Slide

95. The amount of process
    required is inversely
    proportionate to the
    skill and experience of
    your team.
    

    View Slide

96. Create the perfect, fully-documented,
    all-encompassing web design and
    development process.
    !
    Or...
    

    View Slide

97. Chill out and develop our people.
    

    View Slide

98. Invest in people
    over process
    

    View Slide

99. THANKS!
    @bencallahan
    

    View Slide