Wc miami 2013 designing for development

DESIGNING FOR
DEVELOPMENT
WordCamp Miami 2012
presented by Jayvie Canono | http://jayvie.com | @onefinejay

O HAI!
• Used WordPress since it was b2.
• Background in print design (family biz!)
• Branching into development with
WebDevStudios

WordCamp Miami 2013 | Jayvie Canono | http://jayvie.com
http://webdevstudios.com | @onefinejay

WHAT BRINGS US HERE?

• You’re a designer: and the developer
who once sliced your work doesn’t
talk to you anymore
• You’re a developer: you felt stabby
• You’ve been doing it right: and you
want to be assured of it.


HOW DO WE WORK?
• (Let’s assume a rock-solid sales process with a clear scope,
defined milestones and endpoint. Isn’t that everyone’s dream?)

• Designer creates the PSD
• Developer converts to WordPress,
HTML & CSS
• Client reviews at different phases


PITFALLS OF
PSD-CENTERED DESIGN

• CSS-3 unfriendly layer effects
• Use an online generator to double-
check effects! (http://layerstyles.org)
• Managing expectations with browser
compatibility (oh noes IE8!)
• Educate your client


LOVE YOUR DEVELOPER:
TYPE SELECTION
• Paid typefaces have to be paid for!
• (What happens when the dev doing the slicing
doesn’t have your typeface?)


TYPE SELECTION
• Plenty of beautiful, affordable typefaces
• Choose @font-face–legal type
• Developers have said goodbye to Cufon, SIFR, FIR
and other hacktacular techniques

• Hoefler Frere-Jones can take a break
• Embedding will happen soon; they’re working on it
• Hold my hand. Be assured: your design will not fail
just because you can’t use Gotham or Didot on
the web.


EXPAND YOUR TYPE
LIBRARY FOR FREE OR CHEAP

• A comparison of Web Font
embedding services (Smashing Mag):
http://j.mp/wcphlFFcomp
• Font Squirrel lets you filter for
@font-face–legal typefaces


MEASUREMENTS
• Avoid using free transform drag
handles. (You’ll get love handles if you do.)


AGREE ON A STYLE FRAMEWORK

• Despite the rise of responsive, 960.gs
isn’t half bad!
(Especially if the client won’t pay extra for
responsive. You charge extra for responsive, right? ) RIGHT?

• Other CSS Frameworks include Toast
(http://daneden.me/toast/), 1140fluid (http://cssgrid.net)


YOU MEAN I NEED TO
LEARN HOW TO CODE?!

• SORTA. Kinda. Ish.
• The medium of the web is code, not pixels.
• Responsive design has really
emphasized the fluid nature of the web.
• Very tedious to demonstrate
proportions for various viewport widths.
• PSD-centric design multiplies total
effort with every media query state.

YOU MAY NOT HAVE TO CODE
SOMETHING YOURSELF, BUT…

• Understanding how a design is
actually converted into CSS, HTML
and WordPress is key to saving
yourself time and drama.


LAYERS!
• When you understand document order, and theme files and
template parts, you can create layers your developer will love.


YOU KNOW WHAT HAPPENS
WHEN A DEV LOVES YOU?
• They send you MOAR work.
• You learn MOAR about WordPress
• You get bored pushing pixels
• You learn to develop. (Maybe!)
• You earn MOAR MONEY!
• You hire people.
• You retire rich.

Wc miami 2013 designing for development

More Related Content

What's hot (19)

Similar to Wc miami 2013 designing for development (20)

Wc miami 2013 designing for development