How to Help a Developer…

…Faithfully Realize Your WordPress Theme Design

Notes from a talk by Helen Hou-Sandi of 10up

– Creating a better relationship between designers and devs

– Version control: “Sounds scary, but it’s not”

– Designers that send 7 versions of the same file slow down devs

Version Control

– Possible tool for this: LayerVault

– Sometimes developers can be color-blind to design changes, so some kind of version control definitely helps

– Layer control: “Shape 49 Copy, Shape 49, Shape 50…if nothing else, please name and group your layers appropriately.”

Style / Production Guides

– The screen is not a page. Print design and web design are very different.

– PSD files are better for grabbing assets and figuring out sizes than AI files.

– Developers should understand certain basic design principles and designers should undersand certain front-end developer principles.

– Trick to give user best sans-serif font is to not specify Helvetica or Arial. Just use font-family: sans-serif. Macs will default to Helvetica, PCs to Arial.

– Dont’ use fake bold or fake italics with fonts.

– Get to know WordPress. Set up a local installation (MAMP, XAMPP).

– Use Theme Unit Test Data

– Use the Monster Widget to see all the widgets. Helps for styling them.

– Test, test, test

Great talk and a lot of interesting ideas about working in tandem with designers. You can follow Helen on Twitter @helenhousandi

Notify of
Inline Feedbacks
View all comments

John Hartley is a Director of Product Engineering at Beam Dental in Columbus, OH. With 5+ years of leadership experience he has worked in startups, agencies, and began his career as a freelance Front End Developer. Always looking to iterate, this blog is a place for him to share his knowledge as well as hone his craft, challenge assumptions, and build a strong base of leadership and management knowledge. Connect with him on LinkedIn

Would love your thoughts, please comment.x