RWD Killed My Process

The deck from my presentation at @ConvergeFL in Jacksonville Florida on September 12, 2013.

Transcript

1. Ben Callahan RWD KILLED MY PROCESS @bencallahan Thursday, September 12, 13
2. Thursday, September 12, 13
3. Collaborative note-taking: http://bit.ly/1ejEfVD Thursday, September 12, 13
4. LET’S JUMP IN! Thursday, September 12, 13
5. Before RWD, we pretended like things were pretty simple. Thursday, September 12, 13
6. 1024ish 768ish fixed width Thursday, September 12, 13
7. DESIGN FRONT-END BACK-END LAUNCH! Linear Workflow Thursday, September 12, 13
8. DESIGN FRONT-END BACK-END LAUNCH! THINK ABOUT USERS Linear Workflow Thursday, September 12, 13
9. DESIGN FRONT-END BACK-END LAUNCH! Linear Workflow THINK ABOUT USERS THROW IN SOME CONTENT Thursday, September 12, 13
10. Slightly Better Linear Workflow CONTENT UX DESIGN FRONT-END BACK-END LAUNCH! Thursday, September 12, 13
11. Why hello, RWD. Thursday, September 12, 13
12. Why hello, RWD. Thursday, September 12, 13
13. Linear Workflow Now with RWD! CONTENT UX DESIGN FRONT-END BACK-END LAUNCH! Thursday, September 12, 13
14. Ditto! Now with RWD! Linear Workflow CONTENT UX DESIGN FRONT-END BACK-END LAUNCH! Me too! Thursday, September 12, 13
15. This doesn’t work. Thursday, September 12, 13
16. Linear Workflow Problem LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE Thursday, September 12, 13
17. We need to invite others into the process Thursday, September 12, 13
18. CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow Thursday, September 12, 13
19. CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow Thursday, September 12, 13
20. CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow Thursday, September 12, 13
21. CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow Thursday, September 12, 13
22. LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE CONTENT UX FRONT-END DESIGN BACK-END Thursday, September 12, 13
23. 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 Thursday, September 12, 13
24. ND DESIGN So, how do we advance design through a “1 deliverable” workflow? Thursday, September 12, 13
25. WEB DESIGNERS STILL USE PHOTOSHOP! Thursday, September 12, 13
26. Dissecting Design PRODUCTIVITY TIME Thursday, September 12, 13
27. Dissecting Design PRODUCTIVITY TIME Thursday, September 12, 13
28. Dissecting Design PRODUCTIVITY TIME Thursday, September 12, 13
29. Establish the Aesthetic DISSECTING DESIGN Thursday, September 12, 13
30. Solve the Problem DISSECTING DESIGN Thursday, September 12, 13
31. “I’ve been amazed at how often those outside the discipline of design assume that what designers do is decoration. Good design is problem solving.” @veen Thursday, September 12, 13
32. Refine the Solution DISSECTING DESIGN Thursday, September 12, 13
33. Thursday, September 12, 13
34. Establish the Aesthetic DISSECTING DESIGN Thursday, September 12, 13
35. DISSECTING DESIGN ‣ Style Comparisons ‣ Style Tiles ‣ Style Prototypes Establish the Aesthetic Thursday, September 12, 13
36. 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/ Thursday, September 12, 13
37. Style Comparisons ESTABLISH THE AESTHETIC Light vs Dark Thursday, September 12, 13
38. Style Comparisons ESTABLISH THE AESTHETIC Flat vs Textured Thursday, September 12, 13
39. Style Comparisons ESTABLISH THE AESTHETIC Illustration vs Photography Thursday, September 12, 13
40. Style Tiles ESTABLISH THE AESTHETIC Thursday, September 12, 13
41. Style Tiles ESTABLISH THE AESTHETIC Thursday, September 12, 13
42. Style Tiles ESTABLISH THE AESTHETIC Thursday, September 12, 13
43. Style Prototypes ESTABLISH THE AESTHETIC Thursday, September 12, 13
44. USE TOOLS YOU ARE COMFORTABLE WITH TO ESTABLISH THE AESTHETIC HOW TO DECIDE Thursday, September 12, 13
45. Cool, so what happens next? Thursday, September 12, 13
46. Solve the Problem DISSECTING DESIGN Thursday, September 12, 13
47. DISSECTING DESIGN ‣ Static Design Tools ‣ Responsive Design Tools ‣ HTML/CSS Solve the Problem Thursday, September 12, 13
48. Static Design Tools SOLVE THE PROBLEM Thursday, September 12, 13
49. Static Design Tools SOLVE THE PROBLEM Thursday, September 12, 13
50. Static Design Tools SOLVE THE PROBLEM Thursday, September 12, 13
51. Responsive Design Tools SOLVE THE PROBLEM Thursday, September 12, 13
52. SOLVE THE PROBLEM Responsive Design Tools Thursday, September 12, 13
53. SOLVE THE PROBLEM Responsive Design Tools Thursday, September 12, 13
54. HTML/CSS SOLVE THE PROBLEM Thursday, September 12, 13
55. HTML/CSS SOLVE THE PROBLEM Thursday, September 12, 13
56. HTML/CSS SOLVE THE PROBLEM Thursday, September 12, 13
57. Layout vs Modules SOLVE THE PROBLEM Thursday, September 12, 13
58. Layout vs Modules SOLVE THE PROBLEM Thursday, September 12, 13
59. Layout vs Modules SOLVE THE PROBLEM Thursday, September 12, 13
60. YOU BEST SOLVE PROBLEMS USING TOOLS YOU ARE FLUENT WITH HOW TO DECIDE Thursday, September 12, 13
61. Thursday, September 12, 13
62. SOLVE THE PROBLEM Thursday, September 12, 13
63. Unconscious Incompetence SOLVE THE PROBLEM Thursday, September 12, 13
64. Unconscious Incompetence Conscious Incompetence SOLVE THE PROBLEM Thursday, September 12, 13
65. Unconscious Incompetence Conscious Incompetence Conscious Competence SOLVE THE PROBLEM Thursday, September 12, 13
66. Unconscious Incompetence Conscious Incompetence Conscious Competence Unconscious Competence SOLVE THE PROBLEM Thursday, September 12, 13
67. Fluency SOLVE THE PROBLEM Thursday, September 12, 13
68. Refine the Solution DISSECTING DESIGN Thursday, September 12, 13
69. DISSECTING DESIGN ‣ Static Design Tools ‣ Design Pairing Refine the Solution Thursday, September 12, 13
70. Don’t Use Static Design Tools REFINE THE SOLUTION LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE Thursday, September 12, 13
71. Instead of static design hand-offs, consider design pairing REFINE THE SOLUTION Thursday, September 12, 13
72. Design Pairing REFINE THE SOLUTION Thursday, September 12, 13
73. Design Pairing REFINE THE SOLUTION Thursday, September 12, 13
74. Design Pairing REFINE THE SOLUTION Thursday, September 12, 13
75. Design Pairing REFINE THE SOLUTION Thursday, September 12, 13
76. Thursday, September 12, 13
77. You don’t want to do the long tail more than once REFINE THE SOLUTION Thursday, September 12, 13
78. The Switching Point REFINE THE SOLUTION Thursday, September 12, 13
79. EFFICIENCY IS KEY WHEN REFINING A DESIGN SOLUTION HOW TO DECIDE Thursday, September 12, 13
80. Establish Solve Refine ................. Comfort ....................... Fluency ................... Efficiency Guidelines for Selecting Tools Thursday, September 12, 13
81. Establish Solve Refine ..... Style Prototype ......... Sketching + PSD .... In-Browser Pairing Tools we use at Sparkbox Thursday, September 12, 13
82. Photo Credit: Jay Maisel Thursday, September 12, 13
83. 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 Thursday, September 12, 13
84. 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 Thursday, September 12, 13
85. 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 Thursday, September 12, 13
86. Group Improvisation Thursday, September 12, 13
87. Group improvisation requires individuals on a team to... be skilled Thursday, September 12, 13
88. Group improvisation requires individuals on a team to... be humble Thursday, September 12, 13
89. Group improvisation requires individuals on a team to... be empathetic Thursday, September 12, 13
90. Create guidelines instead of rigid process Thursday, September 12, 13
91. The amount of process required is inversely proportionate to the skill and experience of your team. Thursday, September 12, 13
92. Create the perfect, fully- documented, all-encompassing web design and development process. Or... Thursday, September 12, 13
93. Chill out and develop our people. Thursday, September 12, 13
94. Invest in people over process Thursday, September 12, 13
95. THANKS! @bencallahan Thursday, September 12, 13