Prototyping Style, 2013, Breaking Development

The slides from my July 23, 2013 Breaking Development presentation on prototyping style in responsive web design.

Transcript

1. Ben Callahan PROTOTYPING STYLE @bencallahan Wednesday, July 24, 13
2. Wednesday, July 24, 13
3. LET’S JUMP IN! Wednesday, July 24, 13
4. Before RWD, we pretended like things were pretty simple. Wednesday, July 24, 13
5. 1024ish 768ish fixed width Wednesday, July 24, 13
6. DESIGN FRONT-END BACK-END LAUNCH! Linear Workflow Wednesday, July 24, 13
7. DESIGN FRONT-END BACK-END LAUNCH! THINK ABOUT USERS Linear Workflow Wednesday, July 24, 13
8. DESIGN FRONT-END BACK-END LAUNCH! Linear Workflow THINK ABOUT USERS THROW IN SOME CONTENT Wednesday, July 24, 13
9. Slightly Better Linear Workflow CONTENT UX DESIGN FRONT-END BACK-END LAUNCH! Wednesday, July 24, 13
10. Why hello, RWD. Wednesday, July 24, 13
11. Why hello, RWD. Wednesday, July 24, 13
12. Linear Workflow Now with RWD! CONTENT UX DESIGN FRONT-END BACK-END LAUNCH! Wednesday, July 24, 13
13. Ditto! Now with RWD! Linear Workflow CONTENT UX DESIGN FRONT-END BACK-END LAUNCH! Me too! Wednesday, July 24, 13
14. This doesn’t work. Wednesday, July 24, 13
15. Linear Workflow Problem LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE Wednesday, July 24, 13
16. We need to invite others into the process Wednesday, July 24, 13
17. CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow Wednesday, July 24, 13
18. CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow Wednesday, July 24, 13
19. CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow Wednesday, July 24, 13
20. CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow Wednesday, July 24, 13
21. A “1 deliverable” workflow... is centered on iteration Wednesday, July 24, 13
22. A “1 deliverable” workflow... requires collaboration Wednesday, July 24, 13
23. A “1 deliverable” workflow... results in natural decisions Wednesday, July 24, 13
24. A “1 deliverable” workflow... conflicts with organizational structure Wednesday, July 24, 13
25. http://www.zeldman.com/2007/07/02/let-there-be-web-divisions/ “...[A]lmost no one who makes websites works in their company or organization’s web division. That’s because almost no company or organization has a web division. And that void on the org chart is one reason we have so many bloated, unusable failures where we should be producing great user experiences.” @zeldman, 2007 Wednesday, July 24, 13
26. A “1 deliverable” workflow... requires the right team Wednesday, July 24, 13
27. LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE CONTENT UX FRONT-END DESIGN BACK-END Wednesday, July 24, 13
28. 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 Wednesday, July 24, 13
29. ND DESIGN So, how do we advance design through a “1 deliverable” workflow? Wednesday, July 24, 13
30. WEB DESIGNERS STILL USE PHOTOSHOP! Wednesday, July 24, 13
31. Dissecting Design PRODUCTIVITY TIME Wednesday, July 24, 13
32. Dissecting Design PRODUCTIVITY TIME Wednesday, July 24, 13
33. Dissecting Design PRODUCTIVITY TIME Wednesday, July 24, 13
34. Establish the Aesthetic DISSECTING DESIGN Wednesday, July 24, 13
35. Solve the Problem DISSECTING DESIGN Wednesday, July 24, 13
36. Refine the Solution DISSECTING DESIGN Wednesday, July 24, 13
37. Wednesday, July 24, 13
38. Establish the Aesthetic DISSECTING DESIGN Wednesday, July 24, 13
39. DISSECTING DESIGN ‣ Style Comparisons ‣ Style Tiles ‣ Style Prototypes Establish the Aesthetic Wednesday, July 24, 13
40. 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/ Wednesday, July 24, 13
41. Style Comparisons ESTABLISH THE AESTHETIC Light vs Dark Wednesday, July 24, 13
42. Style Comparisons ESTABLISH THE AESTHETIC Flat vs Textured Wednesday, July 24, 13
43. Style Comparisons ESTABLISH THE AESTHETIC Illustration vs Photography Wednesday, July 24, 13
44. Style Tiles ESTABLISH THE AESTHETIC Wednesday, July 24, 13
45. Style Tiles ESTABLISH THE AESTHETIC Wednesday, July 24, 13
46. Style Tiles ESTABLISH THE AESTHETIC Wednesday, July 24, 13
47. Style Prototypes ESTABLISH THE AESTHETIC Wednesday, July 24, 13
48. USE TOOLS YOU ARE COMFORTABLE WITH TO ESTABLISH THE AESTHETIC HOW TO DECIDE Wednesday, July 24, 13
49. Cool, so what happens next? Wednesday, July 24, 13
50. Solve the Problem DISSECTING DESIGN Wednesday, July 24, 13
51. DISSECTING DESIGN ‣ Static Design Tools ‣ Responsive Design Tools ‣ HTML/CSS Solve the Problem Wednesday, July 24, 13
52. Static Design Tools SOLVE THE PROBLEM Wednesday, July 24, 13
53. Static Design Tools SOLVE THE PROBLEM Wednesday, July 24, 13
54. Static Design Tools SOLVE THE PROBLEM Wednesday, July 24, 13
55. Responsive Design Tools SOLVE THE PROBLEM Wednesday, July 24, 13
56. SOLVE THE PROBLEM Responsive Design Tools Wednesday, July 24, 13
57. SOLVE THE PROBLEM Responsive Design Tools Wednesday, July 24, 13
58. HTML/CSS SOLVE THE PROBLEM Wednesday, July 24, 13
59. HTML/CSS SOLVE THE PROBLEM Wednesday, July 24, 13
60. HTML/CSS SOLVE THE PROBLEM Wednesday, July 24, 13
61. Layout vs Modules SOLVE THE PROBLEM Wednesday, July 24, 13
62. Layout vs Modules SOLVE THE PROBLEM Wednesday, July 24, 13
63. Layout vs Modules SOLVE THE PROBLEM Wednesday, July 24, 13
64. YOU BEST SOLVE PROBLEMS USING TOOLS YOU ARE FLUENT WITH HOW TO DECIDE Wednesday, July 24, 13
65. Wednesday, July 24, 13
66. SOLVE THE PROBLEM Wednesday, July 24, 13
67. Unconscious Incompetence SOLVE THE PROBLEM Wednesday, July 24, 13
68. Unconscious Incompetence Conscious Incompetence SOLVE THE PROBLEM Wednesday, July 24, 13
69. Unconscious Incompetence Conscious Incompetence Conscious Competence SOLVE THE PROBLEM Wednesday, July 24, 13
70. Unconscious Incompetence Conscious Incompetence Conscious Competence Unconscious Competence SOLVE THE PROBLEM Wednesday, July 24, 13
71. Fluency SOLVE THE PROBLEM Wednesday, July 24, 13
72. Refine the Solution DISSECTING DESIGN Wednesday, July 24, 13
73. DISSECTING DESIGN ‣ Static Design Tools ‣ Design Pairing Refine the Solution Wednesday, July 24, 13
74. Don’t Use Static Design Tools REFINE THE SOLUTION LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE Wednesday, July 24, 13
75. Instead of static design hand-offs, consider design pairing REFINE THE SOLUTION Wednesday, July 24, 13
76. Design Pairing REFINE THE SOLUTION Wednesday, July 24, 13
77. Design Pairing REFINE THE SOLUTION Wednesday, July 24, 13
78. Design Pairing REFINE THE SOLUTION Wednesday, July 24, 13
79. Design Pairing REFINE THE SOLUTION Wednesday, July 24, 13
80. Wednesday, July 24, 13
81. You don’t want to do the long tail more than once REFINE THE SOLUTION Wednesday, July 24, 13
82. The Switching Point REFINE THE SOLUTION Wednesday, July 24, 13
83. EFFICIENCY IS KEY WHEN REFINING A DESIGN SOLUTION HOW TO DECIDE Wednesday, July 24, 13
84. Establish Solve Refine ................. Comfort ....................... Fluency ................... Efficiency Guildliens for Selecting Tooling Wednesday, July 24, 13
85. Establish Solve Refine ..... Style Prototype ......... Sketching + PSD .... In-Browser Pairing Tools we use at Sparkbox Wednesday, July 24, 13
86. Photo Credit: Jay Maisel Wednesday, July 24, 13
87. 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 Wednesday, July 24, 13
88. 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 Wednesday, July 24, 13
89. 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 Wednesday, July 24, 13
90. Group Improvisation Wednesday, July 24, 13
91. Group improvisation requires individuals on a team to... be great Wednesday, July 24, 13
92. Group improvisation requires individuals on a team to... be humble Wednesday, July 24, 13
93. Group improvisation requires individuals on a team to... be empathetic Wednesday, July 24, 13
94. Create guidelines instead of rigid process Wednesday, July 24, 13
95. Invest in people over process Wednesday, July 24, 13
96. THANKS! @bencallahan Wednesday, July 24, 13