Dissecting Design

Fe8510ee8e06c36d02799dbf8f934b9c?s=47 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.

Fe8510ee8e06c36d02799dbf8f934b9c?s=128

Ben Callahan

February 12, 2014
Tweet

Transcript

  1. Ben Callahan
 DISSECTING DESIGN @bencallahan

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

  3. fixed width 1024ish 768ish

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

    THROW IN SOME CONTENT
  5. Slightly Better 
 Linear Workflow CONTENT UX DESIGN FRONT-END BACK-END

    LAUNCH!
  6. Why hello, RWD.

  7. Why hello, tiny browsers.

  8. Why hello, reality.

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

  10. Me too! Ditto! Old Linear Workflow Now with RWD! CONTENT

    UX DESIGN FRONT-END BACK-END LAUNCH!
  11. This doesn’t work.

  12. We need to invite others into the process.

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

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

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

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

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

    MADE DECISIONS MADE DECISIONS MADE CONTENT UX FRONT-END DESIGN BACK-END
  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
  19. ONT-END DESIGN So, how do we advance design through a

    “1 deliverable” workflow?
  20. WEB DESIGNERS STILL 
 USE PHOTOSHOP!

  21. THANKS! @bencallahan

  22. Dissecting Design PRODUCTIVITY TIME

  23. Dissecting Design PRODUCTIVITY TIME

  24. Dissecting Design PRODUCTIVITY TIME

  25. Establish the Aesthetic DISSECTING DESIGN

  26. Solve the Problem DISSECTING DESIGN

  27. Refine the Solution DISSECTING DESIGN

  28. None
  29. Establish the Aesthetic DISSECTING DESIGN

  30. DISSECTING DESIGN ‣ Style Comparisons ‣ Style Tiles ‣ Style

    Prototypes Establish the Aesthetic
  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/
  32. Style Comparisons ESTABLISH THE AESTHETIC Light vs Dark

  33. Style Comparisons ESTABLISH THE AESTHETIC Flat vs Textured

  34. Style Comparisons ESTABLISH THE AESTHETIC Illustration vs Photography

  35. Style Tiles ESTABLISH THE AESTHETIC

  36. Style Tiles ESTABLISH THE AESTHETIC

  37. Style Tiles ESTABLISH THE AESTHETIC

  38. Style Prototypes ESTABLISH THE AESTHETIC

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

    HOW TO DECIDE
  40. Cool, so what  happens next?

  41. Solve the Problem DISSECTING DESIGN

  42. DISSECTING DESIGN ‣ Static Design Tools ‣ Responsive Design Tools

    ‣ HTML/CSS Solve the Problem
  43. Static Design Tools SOLVE THE PROBLEM

  44. Static Design Tools SOLVE THE PROBLEM

  45. Static Design Tools SOLVE THE PROBLEM

  46. Responsive Design Tools SOLVE THE PROBLEM

  47. SOLVE THE PROBLEM Responsive Design Tools

  48. SOLVE THE PROBLEM Responsive Design Tools

  49. SOLVE THE PROBLEM Responsive Design Tools

  50. HTML/CSS SOLVE THE PROBLEM

  51. HTML/CSS SOLVE THE PROBLEM

  52. HTML/CSS SOLVE THE PROBLEM

  53. Layout vs Modules SOLVE THE PROBLEM

  54. Layout vs Modules SOLVE THE PROBLEM

  55. Layout vs Modules SOLVE THE PROBLEM

  56. YOU BEST SOLVE PROBLEMS USING TOOLS YOU ARE FLUENT WITH

    HOW TO DECIDE
  57. None
  58. SOLVE THE PROBLEM

  59. Unconscious Incompetence SOLVE THE PROBLEM

  60. Unconscious Incompetence Conscious Incompetence SOLVE THE PROBLEM

  61. Unconscious Incompetence Conscious Incompetence Conscious Competence SOLVE THE PROBLEM

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

    PROBLEM
  63. Fluency SOLVE THE PROBLEM

  64. Refine the Solution DISSECTING DESIGN

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

    the Solution
  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
  67. Don’t Use Static Design Tools REFINE THE SOLUTION

  68. Instead of static design hand- offs, consider
 design pairing REFINE

    THE SOLUTION
  69. Design Pairing REFINE THE SOLUTION

  70. Design Pairing REFINE THE SOLUTION

  71. Design Pairing REFINE THE SOLUTION

  72. Design Pairing REFINE THE SOLUTION

  73. You don’t want to do the long tail more than

    once REFINE THE SOLUTION
  74. The Switching Point REFINE THE SOLUTION

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

    DECIDE
  76. Establish ! Solve ! Refine ................. Comfort ! ....................... Fluency

    ! ................... Efficiency Guidelines for Selecting Tools
  77. Photo Credit: Jay Maisel

  78. Photo Credit: Jay Maisel

  79. Photo Credit: Jay Maisel

  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
  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
  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
  83. Group Improvisation

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

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

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

    empathetic
  87. Skill Humility Empathy

  88. None
  89. None
  90. None
  91. None
  92. None
  93. None
  94. Create guidelines instead of rigid process

  95. The amount of process required is inversely proportionate to the

    skill and experience of your team.
  96. Create the perfect, fully-documented, all-encompassing web design and development process.

    ! Or...
  97. Chill out and develop our people.

  98. Invest in people over process

  99. THANKS! @bencallahan