Design the Code

An in-depth look at how designers & developers can work closely together to deliver coded design deliverables for efficient collaboration and better ideas.

Transcript

1. DESIGN the CODE, not COMPS! @katiekovalcin Tuesday, October 14, 14
2. Tuesday, October 14, 14
3. COLLABORATION! Tuesday, October 14, 14
4. COLLABORATION! But why? Tuesday, October 14, 14
5. Bill Bernbach Thanks to Jeffrey Zeldman for the story! Tuesday, October 14, 14
6. Tuesday, October 14, 14
7. Tuesday, October 14, 14
8. In 2014, the web industry is repeating the same mistakes that advertising made in the 1940s. Tuesday, October 14, 14
9. Working in silos & phases Designers “throwing it over the wall” Tuesday, October 14, 14
10. Static Comp ≠ Coded Page Template Why is this what we hold everything to? Tuesday, October 14, 14
11. Duplicate deliverables! We all just love to build the same site ~3 times. Tuesday, October 14, 14
12. Something has to give. Tuesday, October 14, 14
13. Something has to give. And it’s usually creative iterations, timeline & budgets, or sanity. Tuesday, October 14, 14
14. Designers & Developers need to be “Creative Teams” Tuesday, October 14, 14
15. Rather than a more traditional design and development departmental split, why not create small teams with both design and development talent? That way, when someone has a good idea, it can be designed and prototyped without the hassle of multiple handoffs.” — Trent Walton, Where to Start “ Tuesday, October 14, 14
16. More realistic expectations can be met in the browser Tuesday, October 14, 14
17. “...duh, Katie. We’re devs. We’ve been doing it like that for years.” Tuesday, October 14, 14
18. Let designers design* Tuesday, October 14, 14
19. Let designers design* By whatever means they are most efficient and comfortable in, this may still be a static PSD Tuesday, October 14, 14
20. *But everyone needs to expand their skillset! Yes, developers should learn some design. Tuesday, October 14, 14
21. Developers: help designers use your tools! Tuesday, October 14, 14
22. Tuesday, October 14, 14
23. Designers: explain your nuanced decisions in design reviews Tuesday, October 14, 14
24. Tuesday, October 14, 14
25. Everybody: A design system takes two (skillsets) to tango Tuesday, October 14, 14
26. Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap- style systems custom tailored for your clients’ needs. These living code samples are self-documenting style guides that extend to accommodate a client’s needs as well as the needs of the ever-evolving multi-device web.” — Dave Rupert, Responsive Deliverables “ Tuesday, October 14, 14
27. Tuesday, October 14, 14
28. http://bradfrostweb.com/blog/post/atomic-web-design/ Tuesday, October 14, 14
29. Tuesday, October 14, 14
30. A Coded Design Process Case Study Tuesday, October 14, 14
31. Tuesday, October 14, 14
32. Tuesday, October 14, 14
33. Everyone involved from day 1 1 Tuesday, October 14, 14
34. Create goals together Things like: ✦ Performance budget ✦ Experience goals ✦ Prototyping ✦ Tools Tuesday, October 14, 14
35. “I have this really cool thing I want to try” ...said the developer to everyone except the team Tuesday, October 14, 14
36. 2 Educate the client Tuesday, October 14, 14
37. What should they expect for deliverables? Tuesday, October 14, 14
38. Define Vocabulary Things like: ✦ Template ✦ Module ✦ Style Guide ✦ Hamburger Icon Tuesday, October 14, 14
39. What should they give feedback on? Tuesday, October 14, 14
40. Establish Design Direction This is usually static. 3 Tuesday, October 14, 14
41. Coded Style Guide Preparing yourself for the system. 4 Tuesday, October 14, 14
42. Tuesday, October 14, 14
43. Tuesday, October 14, 14
44. Tuesday, October 14, 14
45. Design Full Page This also will probably be static. 5 Tuesday, October 14, 14
46. Tuesday, October 14, 14
47. Tuesday, October 14, 14
48. Tuesday, October 14, 14
49. Tuesday, October 14, 14
50. Deliver static pages faux “in browser” Get the client comfortable with viewing deliverables in the browser Tuesday, October 14, 14
51. Tuesday, October 14, 14
52. Evaluate feedback You’ll want to feel confident in iterations. 6 Tuesday, October 14, 14
53. Tuesday, October 14, 14
54. Tuesday, October 14, 14
55. Tuesday, October 14, 14
56. Tuesday, October 14, 14
57. Deliver design feedback via code Interactions are design. 7 Tuesday, October 14, 14
58. Tuesday, October 14, 14
59. Tuesday, October 14, 14
60. QA, QA, QA! Designer perfecting the design alongside the developer 8 Tuesday, October 14, 14
61. Tuesday, October 14, 14
62. These are design iterations, NOT BUGS! Tuesday, October 14, 14
63. Build & document modular, extensible code 9 Tuesday, October 14, 14
64. Tuesday, October 14, 14
65. Iterate back & forth This will be determined by how you & your teammates work well together. Be fluid. 10 Tuesday, October 14, 14
66. Tuesday, October 14, 14
67. This is a screenshot of the same module from the homepage. Does not need designed! Tuesday, October 14, 14
68. This was already established—does not need designed! Tuesday, October 14, 14
69. Only these two patterns needed to be designed for this entire page! Tuesday, October 14, 14
70. Tuesday, October 14, 14
71. Tuesday, October 14, 14
72. Open & Constant Communication Both with teammates and the client. 11 Tuesday, October 14, 14
73. Tuesday, October 14, 14
74. Happy developers build future pages! The system is built and ready to be extended. 12 Tuesday, October 14, 14
75. “Let us prove to the world that good taste, good art, and good writing can be good selling.” — Bill Bernbach Tuesday, October 14, 14
76. “Let us prove to the world that good design, good code, and good content can be good selling.” — Bill Bernbach, if he worked on the web today Tuesday, October 14, 14
77. Tuesday, October 14, 14
78. Tuesday, October 14, 14
79. Tuesday, October 14, 14
80. Tuesday, October 14, 14
81. Tuesday, October 14, 14
82. Tuesday, October 14, 14
83. Tuesday, October 14, 14
84. Tuesday, October 14, 14
85. Tuesday, October 14, 14
86. Tuesday, October 14, 14
87. Tuesday, October 14, 14
88. Tuesday, October 14, 14
89. Tuesday, October 14, 14
90. Tuesday, October 14, 14
91. THANK YOU! @katiekovalcin Tuesday, October 14, 14