DESIGNING FOR  DEVELOPMENT                   WordCamp Philly 2012presented by Jayvie Canono | http://jayvie.com | @onefine...
O HAI!  • Used WordPress since it was b2.  • Background in print design (family biz!)  • Branching into developmentWordCam...
WHAT BRINGS US HERE?  • You’re a designer: and the developer    who once sliced your work doesn’t    talk to you anymore  ...
HOW DO WE WORK?  •    (Let’s assume a rock-solid sales process with a clear scope,       defined milestones and endpoint. ...
PITFALLS OF   PSD-CENTERED DESIGN  • CSS-3 unfriendly layer effects      • Use an online generator to double-        check...
LOVE YOUR DEVELOPER:    TYPE SELECTION  • Paid typefaces have to be paid for!      •   (What happens when the dev doing th...
LOVE YOUR DEVELOPER:    TYPE SELECTION  • Plenty of beautiful, affordable typefaces  • Choose @font-face–legal type      •...
EXPAND YOUR TYPELIBRARY FOR FREE OR CHEAP  • A comparison of Web Font    embedding services (Smashing Mag):    http://j.mp...
LOVE YOUR DEVELOPER:    MEASUREMENTS  • Avoid using free transform drag    handles. (You’ll get love handles if you do.)Wo...
LOVE YOUR DEVELOPER:AGREE ON A STYLE FRAMEWORK  • Despite the rise of responsive, 960.gs    isn’t half bad!    (Especially...
YOU MEAN I NEED TO   LEARN HOW TO CODE?!  • SORTA. Kinda. Ish.  • The medium of the web is code, not pixels.  • Responsive...
YOU MAY NOT HAVE TO CODESOMETHING YOURSELF, BUT…  • Understanding how a design is    actually converted into CSS, HTML    ...
LOVE YOUR DEVELOPER:        LAYERS!  •    When you understand document order, and theme files and       template parts, yo...
YOU KNOW WHAT HAPPENS WHEN A DEV LOVES YOU?  • They send you MOAR work.  • You learn MOAR about WordPress  • You get bored...
Upcoming SlideShare
Loading in...5
×

Wc philly 2012 presentation

1,163

Published on

Slides from WordCamp Philly:

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,163
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Wc philly 2012 presentation

  1. 1. DESIGNING FOR DEVELOPMENT WordCamp Philly 2012presented by Jayvie Canono | http://jayvie.com | @onefinejay
  2. 2. O HAI! • Used WordPress since it was b2. • Background in print design (family biz!) • Branching into developmentWordCamp Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay
  3. 3. 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.WordCamp Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay
  4. 4. 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 phasesWordCamp Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay
  5. 5. 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 clientWordCamp Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay
  6. 6. 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?)WordCamp Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay
  7. 7. LOVE YOUR DEVELOPER: 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.WordCamp Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay
  8. 8. EXPAND YOUR TYPELIBRARY 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 typefacesWordCamp Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay
  9. 9. LOVE YOUR DEVELOPER: MEASUREMENTS • Avoid using free transform drag handles. (You’ll get love handles if you do.)WordCamp Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay
  10. 10. LOVE YOUR DEVELOPER: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)WordCamp Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay
  11. 11. 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.WordCamp Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay
  12. 12. YOU MAY NOT HAVE TO CODESOMETHING YOURSELF, BUT… • Understanding how a design is actually converted into CSS, HTML and WordPress is key to saving yourself time and drama.WordCamp Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay
  13. 13. LOVE YOUR DEVELOPER: LAYERS! • When you understand document order, and theme files and template parts, you can create layers your developer will love.WordCamp Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay
  14. 14. 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.WordCamp Philly 2012 | Jayvie Canono | http://jayvie.com | @onefinejay
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×