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

Dissecting Design

Ben Callahan
February 12, 2014

Dissecting Design

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

Ben Callahan

February 12, 2014
Tweet

More Decks by Ben Callahan

Other Decks in Design

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