Since my agile design process presentation last summer, I’ve been constantly refining and iterating my design process. It’s evolved to include more Photoshop design—sometimes my brain just works better in the tool I’ve used for the past 18 years. But I still want to avoid having to build 50 Photoshop comps before a line of code gets written.
I still make a lot of wireframes—especially for sketching out how content needs to behave at different mobile breakpoints. Sometimes I use Balsamiq, sometimes I use a template I created for the Divi theme, and sometimes I sketch on the back of a printout. It doesn’t really matter, as long as I have a quick way to let the developer know what’s going on in my head.
My web design style guide has evolved the most
I’m pretty particular about design (OK, I’m extremely OCD), and I’ve written my own code for most of my career. Now that I partner with talented developers, I need a way to communicate all of those picky little details without constant emails and hovering and micromanaging. I’d like to continue working with them, so none of those are an option, lol! That’s why I create pretty extensive web design style guides that spell out all the teeny little details that I care about in black and white.
I’ve just finished working on a new theme called Kerouac for Aesop Story Engine. I just delivered two Photoshop files, several wireframes and a nine page web design style guide to Nick. I hope it’s going to make both of our lives easier. He won’t have to try to read my mind or use the info palette to grab padding values, and I won’t have to go back after coding and change a bunch of stuff on him to make it match what’s in my head. Win-win.
So how effective is this iteration?
I’ll give you an update in a week or two, once the build has been completed. In the meantime, why not download an excerpt of this web design style guide for the upcoming Kerouac theme for Aesop Story Engine to see how I set up a web design style guide. I’d love to hear what you think!