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 full-size slide

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

    View full-size slide

  3. fixed width
    1024ish
    768ish

    View full-size slide

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

    USERS
    THROW IN
    SOME CONTENT

    View full-size slide

  5. Slightly Better 

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

    View full-size slide

  6. Why hello,
    RWD.

    View full-size slide

  7. Why hello,
    tiny browsers.

    View full-size slide

  8. Why hello,
    reality.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. This doesn’t work.

    View full-size slide

  12. We need to invite others
    into the process.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

  20. WEB DESIGNERS STILL 

    USE PHOTOSHOP!

    View full-size slide

  21. THANKS!
    @bencallahan

    View full-size slide

  22. Dissecting Design
    PRODUCTIVITY
    TIME

    View full-size slide

  23. Dissecting Design
    PRODUCTIVITY
    TIME

    View full-size slide

  24. Dissecting Design
    PRODUCTIVITY
    TIME

    View full-size slide

  25. Establish the Aesthetic
    DISSECTING DESIGN

    View full-size slide

  26. Solve the Problem
    DISSECTING DESIGN

    View full-size slide

  27. Refine the Solution
    DISSECTING DESIGN

    View full-size slide

  28. Establish the Aesthetic
    DISSECTING DESIGN

    View full-size slide

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

    View full-size slide

  30. 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 full-size slide

  31. Style Comparisons
    ESTABLISH THE AESTHETIC
    Light vs Dark

    View full-size slide

  32. Style Comparisons
    ESTABLISH THE AESTHETIC
    Flat vs Textured

    View full-size slide

  33. Style Comparisons
    ESTABLISH THE AESTHETIC
    Illustration vs Photography

    View full-size slide

  34. Style Tiles
    ESTABLISH THE AESTHETIC

    View full-size slide

  35. Style Tiles
    ESTABLISH THE AESTHETIC

    View full-size slide

  36. Style Tiles
    ESTABLISH THE AESTHETIC

    View full-size slide

  37. Style Prototypes
    ESTABLISH THE AESTHETIC

    View full-size slide

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

    View full-size slide

  39. Cool, so what
    happens next?

    View full-size slide

  40. Solve the Problem
    DISSECTING DESIGN

    View full-size slide

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

    View full-size slide

  42. Static Design Tools
    SOLVE THE PROBLEM

    View full-size slide

  43. Static Design Tools
    SOLVE THE PROBLEM

    View full-size slide

  44. Static Design Tools
    SOLVE THE PROBLEM

    View full-size slide

  45. Responsive Design Tools
    SOLVE THE PROBLEM

    View full-size slide

  46. SOLVE THE PROBLEM
    Responsive Design Tools

    View full-size slide

  47. SOLVE THE PROBLEM
    Responsive Design Tools

    View full-size slide

  48. SOLVE THE PROBLEM
    Responsive Design Tools

    View full-size slide

  49. HTML/CSS
    SOLVE THE PROBLEM

    View full-size slide

  50. HTML/CSS
    SOLVE THE PROBLEM

    View full-size slide

  51. HTML/CSS
    SOLVE THE PROBLEM

    View full-size slide

  52. Layout vs Modules
    SOLVE THE PROBLEM

    View full-size slide

  53. Layout vs Modules
    SOLVE THE PROBLEM

    View full-size slide

  54. Layout vs Modules
    SOLVE THE PROBLEM

    View full-size slide

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

    View full-size slide

  56. SOLVE THE PROBLEM

    View full-size slide

  57. Unconscious
    Incompetence
    SOLVE THE PROBLEM

    View full-size slide

  58. Unconscious
    Incompetence
    Conscious
    Incompetence
    SOLVE THE PROBLEM

    View full-size slide

  59. Unconscious
    Incompetence
    Conscious
    Incompetence Conscious
    Competence
    SOLVE THE PROBLEM

    View full-size slide

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

    View full-size slide

  61. Fluency
    SOLVE THE PROBLEM

    View full-size slide

  62. Refine the Solution
    DISSECTING DESIGN

    View full-size slide

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

    View full-size slide

  64. 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 full-size slide

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

    View full-size slide

  66. Instead of static design hand-
    offs, consider

    design pairing
    REFINE THE SOLUTION

    View full-size slide

  67. Design Pairing
    REFINE THE SOLUTION

    View full-size slide

  68. Design Pairing
    REFINE THE SOLUTION

    View full-size slide

  69. Design Pairing
    REFINE THE SOLUTION

    View full-size slide

  70. Design Pairing
    REFINE THE SOLUTION

    View full-size slide

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

    View full-size slide

  72. The Switching Point
    REFINE THE SOLUTION

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  75. Photo Credit: Jay Maisel

    View full-size slide

  76. Photo Credit: Jay Maisel

    View full-size slide

  77. Photo Credit: Jay Maisel

    View full-size slide

  78. 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 full-size slide

  79. 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 full-size 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 full-size slide

  81. Group Improvisation

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  85. Skill
    Humility
    Empathy

    View full-size slide

  86. Create guidelines instead
    of rigid process

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  89. Chill out and develop our people.

    View full-size slide

  90. Invest in people
    over process

    View full-size slide

  91. THANKS!
    @bencallahan

    View full-size slide