Over on 37 Signals, there’s an interesting post about why they don’t use Photoshop, and prefer to go straight to HTML and CSS to create a UI. I agree with a lot of what Jason says here, especially point number 3 - you can never get text in a static comp to look the way it does on the web. (This is unless your name is Malarkey and you create your comp text by screenshotting text from the browser!)
I would also add a couple more points in favour of going straight to HTML/CSS:
- You can’t demonstrate a fluid design with a static comp, and show how it reflows with window sizes. This is a biggie.
- Why spend time recreating form widgets in Photoshop, when you can have the real thing by just typing the html tag? Also whoever looks at the design, sees these widgets in the style of their OS, rather than one fixed style in a static comp.
This is the approach that I’ve been taking over the last year, and it felt right at the time. It felt like removing the middle man, and being more efficient.
The one drawback was the designs were often dull, dull, dull.
This is not an approach that encourages visual richness. That’s not to say you can’t create a good design this way, or that a design needs ‘superflous eye candy’, but my thought processes were definitely being constrained by the tool I was using. As Jeff Croft points out in the comments on , this is an approach that works well for a 37 Signals style application, but not necessarily for everything else.
I’ve been trying to think through why this is the case, and the only thing I can come up with, is that it’s easier and quicker to move stuff around in a graphics editor. Also, I find Photoshop the wrong tool for mockups. Fireworks, rules my roost, and here’s a few reasons why:
- I can keep all the page designs of a site in just one file - with shared layers for common elements like navigation. When it’s time to export, Fireworks can create an individual file from each page with one click.
- The ‘9-slice tool’, in combination with it’s Symbols Library, means I can have a pre-made set of form widgets and other interface elements that I can drop in to the page, and resize without losing the integrity of the image. Mocking up is fast.
- The vector tools are superb. Create a pixel-constrained layout in Illustrator is a pain, and Photoshop was never meant to be a vector creator. Any Photo collage work is done in Photoshop though.
- The Fireworks colour picker can sample from anywhere on the screen, not just the open document. (Apparently Photoshop can now do this by clicking and holding!)
Yes I still have to create it in HTML and CSS at the end of it, but by that point I know exactly what I need to do.
Fireworks still isn’t the absolute ideal tool though. The ideal tool hasn’t been created yet, and would be a mixture of the two, but that’s for another post I think!