First, I would go read these two articles. The first one, by Brad Frost, identifies many of the problems and traps of creating mockups with Photoshop.

The Post-PSD Era.

The second, by Dan Mall, points out where the root of this problem lies.

The Post-PSD Era – A problem of expectations

I’m going to agree with both gentleman’s thesis. Through out my time as a developer, mockups done in Photoshop have created more problems than they have solved. I’ve worked with talented designers who didn’t fully understand the web and convinced clients of designs that didn’t have much of chance to be easily build able. I’ve also worked on projects where myself and a designer went from initial sketch to working v1 to polished v2 that was being used by real customers. The second was much more fun and ended with more people happy.

In my eyes, The steps from idea to launch should be as few as possible. Once the basic idea is thought of, there should be a brainstorming session and then a whiteboard or paper wire frame should be created. From this, the most basic minimal version of the product/feature should be created using an existing style guide.

The style guide the most valuable tool for a front end developer. By deciding on the standards for how things should look, by picking our fonts, text sizes, colors, and main interactive elements ahead of time, we can more easily stay consistent inside our products and move quicker to getting actual user data to inform our designs. After all, Akin’s first law of spacecraft design is “Engineering is done with numbers. Analysis without numbers is only an opinion.” The style guide moves us to Design Engineering.