Screencast: One-minute mockup with Photoshop 22 Mar 2006
49 comments Latest by Gerald Denim
In general I don’t believe in mocking up screens with Photoshop. Your HTML/CSS screens will never look quite the same as the initial mock, so it’s easy to waste time pushing pixels that won’t even exist later.
That said, I use Photoshop nearly every day to test design ideas before I’m convinced they deserve time in the terminal. One minute in Photoshop can save the fifteen I would spend finding files, templates, and styles only to decide I don’t like the change.
This morning I loaded SvN and saw that Jason added a yellow “software deal of the day” bar to the top (screenshot). I wondered, would the yellow bar look better above the site header instead of below it?
Changing the HTML isn’t straightforward. SvN is built with templates and spewed out by Movable Type. The header is an include, and I haven’t looked at the styles in a while to determine where the margins are coming from. To view the change on the site, I’d have to deal with MT and rebuild the index. Alternatively I could copy the source of the live page to a local file, copy the CSS file, change the link to the CSS, and search and replace the image paths to the server. What a waste of time to test out an idea!
So I used Photoshop to make a one-minute mock — literally. Download the 1 minute, 30MB screencast (QT).
It turns out Jason’s version was better anyway. Glad I didn’t waste too much time on it!