From Paper to Code

June 3rd, 2008

Why we skip Photoshop – (37signals)

You can’t click a Photoshop mockup. This is probably the number one reason we skip static mockups. They aren’t real. Paper isn’t real either, but paper doesn’t have that expectation. A Photoshop mockup is on your screen. If it’s on your screen it should work. You can’t pull down menus in a Photoshop mockup, you can’t enter text into a field in a Photoshop mockup, you can’t click a link in a Photoshop mockup. HTML/CSS, on the other hand, is the real experience.

While I sympathize (I don’t even own Photoshop), I am not sure sketching it on paper and then going straight to HTML and CSS would work for me. I mockup new projects in OmniGraffle, which is simple and makes the process quick. This allows me to see the design and figure out what works and what doesn’t, much more effectively than sketching it does.

This saves time and effort while coding the page because I don’t have to make comparably-significant changes. I can iterate quickly, rather than focusing on little CSS/HTML problems.