DESIGNING FOR  DEVELOPMENT                  WordCamp Miami 2012presented 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  ...
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. Is...
PITFALLS OF   PSD-CENTERED DESIGN  • CSS-3 unfriendly layer effects     • Use an online generator to double-       check e...
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, you ...
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 miami 2013 designing for development

550 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
550
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Wc miami 2013 designing for development

  1. 1. DESIGNING FOR DEVELOPMENT WordCamp Miami 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 development with WebDevStudiosWordCamp Miami 2013 | Jayvie Canono | http://jayvie.comhttp://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.comhttp://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.comhttp://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.comhttp://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.comhttp://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.comhttp://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.comhttp://webdevstudios.com | @onefinejay
  9. 9. LOVE YOUR DEVELOPER: MEASUREMENTS • Avoid using free transform drag handles. (You’ll get love handles if you do.)WordCamp Miami 2013 | Jayvie Canono | http://jayvie.comhttp://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.comhttp://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.comhttp://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.comhttp://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.comhttp://webdevstudios.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 Miami 2013 | Jayvie Canono | http://jayvie.comhttp://webdevstudios.com | @onefinejay

×