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