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
- Track changes
- Ability to go back in time
- Not just for developers
– 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
- Help devs recognize the small things
- Colors, grid measurements, sizings, typography
- “We don’t like to make guesses”
- “Line-height is the one thing that really gets ignored.”
- em vs. px
- The more layered a PSD production guide, the easier it is for devs
– 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