Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DESIGNING FOR
  DEVELOPMENT
                   WordCamp Philly 2012
presented by Jayvie Canono | http://jayvie.com | @onef...
O HAI!
  • Used WordPress since it was b2.
  • Background in print design (family biz!)
  • Branching into development



...
WHAT BRINGS US HERE?

  • You’re a designer: and the developer
    who once sliced your work doesn’t
    talk to you anymo...
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-
        ...
LOVE YOUR DEVELOPER:
    TYPE SELECTION
  • Paid typefaces have to be paid for!
      •   (What happens when the dev doing...
LOVE YOUR DEVELOPER:
    TYPE SELECTION
  • Plenty of beautiful, affordable typefaces
  • Choose @font-face–legal type
   ...
EXPAND YOUR TYPE
LIBRARY FOR FREE OR CHEAP



  • A comparison of Web Font
    embedding services (Smashing Mag):
    http...
LOVE YOUR DEVELOPER:
    MEASUREMENTS
  • Avoid using free transform drag
    handles. (You’ll get love handles if you do....
LOVE YOUR DEVELOPER:
AGREE ON A STYLE FRAMEWORK


  • Despite the rise of responsive, 960.gs
    isn’t half bad!
    (Espe...
YOU MEAN I NEED TO
   LEARN HOW TO CODE?!

  • SORTA. Kinda. Ish.
  • The medium of the web is code, not pixels.
  • Respo...
YOU MAY NOT HAVE TO CODE
SOMETHING YOURSELF, BUT…



  • Understanding how a design is
    actually converted into CSS, HT...
LOVE YOUR DEVELOPER:
        LAYERS!
  •    When you understand document order, and theme files and
       template parts,...
YOU KNOW WHAT HAPPENS
 WHEN A DEV LOVES YOU?
  • They send you MOAR work.
  • You learn MOAR about WordPress
  • You get b...
Upcoming SlideShare
Loading in …5
×

of

Wc philly 2012 presentation Slide 1 Wc philly 2012 presentation Slide 2 Wc philly 2012 presentation Slide 3 Wc philly 2012 presentation Slide 4 Wc philly 2012 presentation Slide 5 Wc philly 2012 presentation Slide 6 Wc philly 2012 presentation Slide 7 Wc philly 2012 presentation Slide 8 Wc philly 2012 presentation Slide 9 Wc philly 2012 presentation Slide 10 Wc philly 2012 presentation Slide 11 Wc philly 2012 presentation Slide 12 Wc philly 2012 presentation Slide 13 Wc philly 2012 presentation Slide 14
Upcoming SlideShare
Converting a Layout to a WordPress theme
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Wc philly 2012 presentation

Download to read offline

Slides from WordCamp Philly:

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Wc philly 2012 presentation

  1. 1. DESIGNING FOR DEVELOPMENT WordCamp Philly 2012 presented 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 development WordCamp 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 phases WordCamp 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 client WordCamp 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 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 WordCamp 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 CODE SOMETHING 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

Slides from WordCamp Philly:

Views

Total views

1,667

On Slideshare

0

From embeds

0

Number of embeds

10

Actions

Downloads

8

Shares

0

Comments

0

Likes

0

×