Design the Code

DESIGN the CODE, not COMPS! @katiekovalcin Tuesday, October 14, 14

Tuesday, October 14, 14

COLLABORATION! Tuesday, October 14, 14

COLLABORATION! But why? Tuesday, October 14, 14

Bill Bernbach Thanks to Jeﬀrey Zeldman for the story! Tuesday,
October 14, 14

In 2014, the web industry is repeating the same mistakes
that advertising made in the 1940s. Tuesday, October 14, 14

Working in silos & phases Designers “throwing it over the
wall” Tuesday, October 14, 14

Static Comp ≠ Coded Page Template Why is this what
we hold everything to? Tuesday, October 14, 14

Duplicate deliverables! We all just love to build the same
site ~3 times. Tuesday, October 14, 14

Something has to give. Tuesday, October 14, 14

Something has to give. And it’s usually creative iterations, timeline
& budgets, or sanity. Tuesday, October 14, 14

Designers & Developers need to be “Creative Teams” Tuesday, October
14, 14

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 handoﬀs.” — Trent Walton, Where to Start “ Tuesday, October 14, 14

More realistic expectations can be met in the browser Tuesday,
October 14, 14

“...duh, Katie. We’re devs. We’ve been doing it like that
for years.” Tuesday, October 14, 14

Let designers design* Tuesday, October 14, 14

Let designers design* By whatever means they are most eﬃcient
and comfortable in, this may still be a static PSD Tuesday, October 14, 14

*But everyone needs to expand their skillset! Yes, developers should
learn some design. Tuesday, October 14, 14

Developers: help designers use your tools! Tuesday, October 14, 14

Designers: explain your nuanced decisions in design reviews Tuesday, October
14, 14

Everybody: A design system takes two (skillsets) to tango Tuesday,
October 14, 14

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

http://bradfrostweb.com/blog/post/atomic-web-design/ Tuesday, October 14, 14

A Coded Design Process Case Study Tuesday, October 14, 14

Everyone involved from day 1 1 Tuesday, October 14, 14

Create goals together Things like: ✦ Performance budget ✦ Experience
goals ✦ Prototyping ✦ Tools Tuesday, October 14, 14

“I have this really cool thing I want to try”
...said the developer to everyone except the team Tuesday, October 14, 14

2 Educate the client Tuesday, October 14, 14

What should they expect for deliverables? Tuesday, October 14, 14

Deﬁne Vocabulary Things like: ✦ Template ✦ Module ✦ Style
Guide ✦ Hamburger Icon Tuesday, October 14, 14

What should they give feedback on? Tuesday, October 14, 14

Establish Design Direction This is usually static. 3 Tuesday, October
14, 14

Coded Style Guide Preparing yourself for the system. 4 Tuesday,
October 14, 14

Design Full Page This also will probably be static. 5

Deliver static pages faux “in browser” Get the client comfortable
with viewing deliverables in the browser Tuesday, October 14, 14

Evaluate feedback You’ll want to feel conﬁdent in iterations. 6

Deliver design feedback via code Interactions are design. 7 Tuesday,
October 14, 14

QA, QA, QA! Designer perfecting the design alongside the developer
8 Tuesday, October 14, 14

These are design iterations, NOT BUGS! Tuesday, October 14, 14

Build & document modular, extensible code 9 Tuesday, October 14,
14

Iterate back & forth This will be determined by how
you & your teammates work well together. Be fluid. 10 Tuesday, October 14, 14

This is a screenshot of the same module from the
homepage. Does not need designed! Tuesday, October 14, 14

This was already established—does not need designed! Tuesday, October 14,
14

Only these two patterns needed to be designed for this
entire page! Tuesday, October 14, 14

Open & Constant Communication Both with teammates and the client.
11 Tuesday, October 14, 14

Happy developers build future pages! The system is built and
ready to be extended. 12 Tuesday, October 14, 14

“Let us prove to the world that good taste, good
art, and good writing can be good selling.” — Bill Bernbach Tuesday, October 14, 14

“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

THANK YOU! @katiekovalcin Tuesday, October 14, 14

Design the Code

Design the Code

More Decks by Katie Kovalcin

Other Decks in Design

Featured

Transcript