Slides from my presentation at WordCamp Philly 2011.

1. Converting a layout to WP theme
by Jayvie Canono for WordCamp Philly 2011
Monday, November 7, 2011

2. Why are we here?
Explore the design workflow
Make things easier for designers
Make things easier for designers
Monday, November 7, 2011

3. Who are we?
Different skillsets:
Print background
PSD only
PSD, CSS & HTML and/or WordPress theme
Can, but won’t (specialization/agency structure)
Can and does. (Congratulations!)
Monday, November 7, 2011

4. Different workflows
General processes:
sales talk - proposal - signed contract - wireframe (optional) - PSD mockup - revisions -
HTML/CSS - WordPress theme
sales talk - proposal - signed contract - WordPress theme - add on graphics - screenshots -
revisions - payment - delivery
Large agencies have multiple layers of approval
Freelancers can play fast and loose with steps
Collaborative work develops workflows based on players
Monday, November 7, 2011

5. From mockup to WordPress theme
Your responsibilities as a designer: make it easy for your
developer to code your layout.
If you understand how markup and theme files relate, you can
layer your PSDs accordingly
Understanding CSS helps you coordinate with the dev for
repeating elements (classes)
Use proper measurements for mockup
Monday, November 7, 2011

6. What are we slicing today?
Monday, November 7, 2011

7. Translated into HTML
Monday, November 7, 2011

8. Translated into theme files
Monday, November 7, 2011

9. How it’s layered in Photoshop
Monday, November 7, 2011

10. Theme Directory
Monday, November 7, 2011