Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design the Code

Katie Kovalcin
October 13, 2014

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.

Katie Kovalcin

October 13, 2014

More Decks by Katie Kovalcin

Other Decks in Design


  1. In 2014, the web industry is repeating the same mistakes

    that advertising made in the 1940s. Tuesday, October 14, 14
  2. Static Comp ≠ Coded Page Template Why is this what

    we hold everything to? Tuesday, October 14, 14
  3. Duplicate deliverables! We all just love to build the same

    site ~3 times. Tuesday, October 14, 14
  4. Something has to give. And it’s usually creative iterations, timeline

    & budgets, or sanity. Tuesday, October 14, 14
  5. 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
  6. Let designers design* By whatever means they are most efficient

    and comfortable in, this may still be a static PSD Tuesday, October 14, 14
  7. 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
  8. Create goals together Things like: ✦ Performance budget ✦ Experience

    goals ✦ Prototyping ✦ Tools Tuesday, October 14, 14
  9. “I have this really cool thing I want to try”

    ...said the developer to everyone except the team Tuesday, October 14, 14
  10. Define Vocabulary Things like: ✦ Template ✦ Module ✦ Style

    Guide ✦ Hamburger Icon Tuesday, October 14, 14
  11. Deliver static pages faux “in browser” Get the client comfortable

    with viewing deliverables in the browser Tuesday, October 14, 14
  12. Iterate back & forth This will be determined by how

    you & your teammates work well together. Be fluid. 10 Tuesday, October 14, 14
  13. This is a screenshot of the same module from the

    homepage. Does not need designed! Tuesday, October 14, 14
  14. Only these two patterns needed to be designed for this

    entire page! Tuesday, October 14, 14
  15. Happy developers build future pages! The system is built and

    ready to be extended. 12 Tuesday, October 14, 14
  16. “Let us prove to the world that good taste, good

    art, and good writing can be good selling.” — Bill Bernbach Tuesday, October 14, 14
  17. “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