Photoshop Prototypes

July 28, 2008

As part of the design process of the webapp project I’m currently on, I’m creating a prototype in Photoshop (actually, ghettoshop). Yes I know – not ideal. But they tell me it’s the best way to help the business owners get a feel for using the application, as a part of requirements elicitation. So I’ll create mockup screenshots, wire them together into HTML files that actually have the user click where they need to click, etc.

This process has been one big challenge to my perfectionism. Here are a few things I’ve learned so far:

  1. Get the general requirements nailed down as much as you can at first. If you find out you need another column in a table, you’ll need to rerender all of your screenshots.
  2. Group things so that you can hide or show a “step” with one click. I think I remember that Fireworks had a great way to do this by grouping layers into folders, which you could hide or show all at once. Photoshop probably has this too. The Gimp doesn’t seem to have it, so I’m having to make do by merging down into one layer per step. Reduces editability, but it’s a necessary evil.
  3. Don’t let the ugliness make you sad. The pixels will be off, and there will be artifacts and garbage. If there isn’t, you’re spending too much time on it for a prototype. As long as it looks like a web page to the users, and lets them click through, it’ll meet the goals.