More thoughts on the value of prototyping and/or designing in HTML, this time from Jason Fried at 37 Signals. In his post, Why  we skip Photoshop, Jason outlines seven reasons. I don’t necessarily agree with all of them, but here’s where we agree:

  • 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.
  • …you can’t quickly change the text without going back into Photoshop, changing the text, saving the file, exporting it as a gif/png/jpg, etc…. Photoshop isn’t collaboration friendly.
  • If you’re not fast enough in HTML/CSS, then spend the time learning how to create in HTML/CSS faster. It’s time well spent.

If you are doing interaction design, you need to be able to represent interactions so that you get the most out of evaluation and iteration of your design. Photoshop, PowerPoint, OmniGraffle and other static tools can’t represent interactivity in any real way. HTML/CSS is a much more direct and efficient path and, as Jason points out, if you don’t know it it’s well worth the time spent learning it.

Here’s where we disagree:

  • When you use Photoshop you can’t help but pay attention to the details. The alignment, the specific colors, the exact shapes…
  • Photoshop puts the focus on production, not productivity. Photoshop is about building something to look at…

In my opinion Photoshop is a fine tool for expressing your ideas. I know many designers who are very efficient with the tool. True, you can focus too much, too early on how it looks, but you can commit that sin with any design tool, including HTML/CSS.  The initial stages of a design are about generating and vetting high-level concepts and giving the project shape. At that stage of design, use whatever tool you find most efficient. When it’s time to evaluate and iterate an interactive design (through usability testing, for example) HTML/CSS is the method that I’ve found most effective.