Design the Code, or Lessons from Kanye

This is an updated version of my Design the Code talk that was given at Smashing Conf NYC 2015. I talk about collaborative lessons designers & developers can learn from Kanye West.

Transcript

1. DESIGN THE CODE, NOT COMPS! @katiekovalcin
2. I’m Katie
 I design at Sparkbox
3. LESSONS FROM KANYE @katiekovalcin
5. “Art is to be free. Design is to fix.” –Kanye
6. …Except we need to fix how we design
7. Working in silos 
 & phases Designers “throwing it over the wall”
8. Static Comp ≠
   Coded Page Template Why is this what we hold everything to?
9. Duplicate deliverables! We all just love to build the same site ~3 times.
10. Something has
    to give.
11. Something has
    to give. And it’s usually iterations, budgets, or sanity.
12. More realistic expectations can be met in the browser
13. “...duh, Katie. Developers have been doing it like that for years.”
14. Let designers design* By whatever means they are most efficient and comfortable in, this may still be a static comp
16. *But everyone needs to expand their skillset! Yes, developers should learn some design.
18. Design Back-end Front-End
19. Design Back-end Front-End Me
20. Design Back-end Front-End Me Teammate
21. Design Back-end Front-End My Expanding Teammate
22. Design Back-end Front-End Teammate’s Expanding
24. codepen.seesparkbox.com
25. LEARN FROM EACH OTHERS’ STRENGTHS
28. Mentor One Another
29. Developers:
    help designers use your tools!
30. S-V-Gee whiz, this stuff’s cool!
33. Designers:
    explain your nuanced decisions in design reviews
36. Everybody:
    a design system takes two (skillsets) to tango
37. “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 http://daverupert.com/2013/04/responsive-deliverables/
39. http://bradfrostweb.com/blog/post/atomic-web-design/
42. Everyone involved from day 1
43. “Kanye’s process is communal—he literally goes around the room asking everyone there what ‘power’ means to them, throws out lines to see how they’re received, and works out his exact wording with whomever is around to help.” http://www.idolator.com/5697792/kanye-west-complex-profile- my-beautiful-dark-twisted-fantasy
44. Create goals together Things like: ✦ Performance budget ✦ Experience goals ✦ Prototyping ✦ Tools
46. “I have this really cool thing I want to try” ...said the developer to everyone except the team
47. Project Timeline Design Development
48. Design Development • Are there red flags? • Can you offer a solution? Design Reviews
49. WHAT TO MOCKUP
50. “It’s about the creative process even more than the final product. I think there’s something kind of depressing about a product being final, because the only time a product is really final is when you’re in a casket.” -Kanye West http://behindthehustle.com/2014/01/kanye-west-talks-creative- process-director-steve-mcqueen/
51. Element Collage
52. Element Collage
53. Element Collage
54. Designing full page
57. Epicenter Design
58. “Epicenter design focuses on the true essence of the page — the epicenter — and then builds outward.” https://gettingreal.37signals.com/ch09_Epicenter_Design.php
62. Realistic Fidelity
64. Keep an open, blank document and copy styles over to keep an internal inventory
65. [examples]
66. Deliver static pages faux “in browser” Get the client comfortable with viewing deliverables in the browser
68. Coded Style Guide
72. HAVE CONFIDENCE
74. Evaluate Feedback
79. Deliver design feedback via code Because interactions are design
82. REFINE YOUR IDEAS
90. Pairing for Visual QA
93. These are design iterations, NOT BUGS!
94. LET GO OF EGO
97. Where are the gaps?
99. This is a screenshot of the same module from the homepage. Does not need designed!
100. This was already established—does not need designed!
101. Only these two patterns needed to be designed for this entire page!
103. Open & Constant Communication
104. Weekly Checkins
105. “Go on”
108. Collaborative design systems are the Futch.
109. THANK YOU! @katiekovalcin