Converting a layout to WP theme

by Jayvie Canono for WordCamp Philly 2011

Monday, November 7, 2011

Why are we here?

Explore the design workflow

Make things easier for designers

Make things easier for designers

Monday, November 7, 2011

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

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

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

What are we slicing today?

Monday, November 7, 2011

Translated into HTML

Monday, November 7, 2011

Translated into theme files

Monday, November 7, 2011

How it’s layered in Photoshop

Monday, November 7, 2011

Theme Directory

Monday, November 7, 2011