How to Help a Developer…

Posted on: September 8th, 2012

…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

Tags: , , , ,

previous post: Becoming a more efficient freelancer next post: Designing for WordPress Without WordPress