A recent post over on 37 Signals on why they skip Photoshop and head straight for the HTML and CSS portion of a design and a post by John Hicks on why he doesn't had me thinking about my own design methods.
John's point that designs created from scratch with HTML/CSS are dull is good one and I'd also add that you typically end up doing three or four times more work because of all the rewriting you need to do when testing layouts.
I suspsect jumping right into HTML/CSS works well for 37 Signals because most their products have a simple design (a good thing!) and don't include a lot of graphics. When a site involves gradients, logos, or heavy graphics, they need to be planned out beforehand.
Like a handful of others out there, I use InDesign for creating storyboards and the final graphics. Photoshop always feels kludgy and other methods like sketches, paper prototypes, and wireframes don't solidify my ideas well enough.
It's ironic that I find a program for printed publications best-suited for online design but it has its selling points:
- CSS-like Styling—The biggest selling point for me is the ability to apply styles to text just like CSS, but without all the code. Its paragraph and character styles like block and inline styles from CSS respectively. Typographical adjustments are a breeze, especially with the live preview. Photoshop's lack of such a feature makes typography rediculously tedious.
- Terrific text rendering—I realize that everyone sees text differently, but when the majority of your clients are IE/Windows users it gets the job done. The kerning is better than browsers so the text looks a bit cleaner but it's hardly noticeable.
- Master pages and multi-page files—Need to create several storyboards to show off a series of pages? Just create the shell as a master page and apply it to the rest of the pages. You can save it all in one file without dozens of layer folders or comps.
- Great grids—I can set up a grid—complete with gutters—to help me line everything up in a few seconds. It's a lot easier to tap two keys to toggle the grid than commenting/uncommenting some CSS code to hide/show a static grid overlay in a browser. (You could create shortcuts to do this too of course, but you get my point.)
Despite its great features, there are some aspects in dire need of improvment:
- Poor performance—It sucks up memory after using it for several hours due to a memory leak and the only fix is to close and re-open the program. When will Adobe's software stop hogging so much memory?
- Transparency troubles—If anything on a page is transparent (PNGs, drop shadows) or has an opacity lower than 100%, all text on that page is rendered either extra heavy or extra light (depending on the background behind it). The difference isn't huge but when you're trying to create subtle effects, it's pretty frustrating. The advice on the Adobe forums is to place all text higher in the stacking order than the transparent objects, but I've never gotten this to work and it's a pretty poor solution. I'm not sure if this has been fixed in CS3 or CS4 since I'm only using CS2 but if it has, that's great.
- Gradient grumbles—The gradients produced by InDesign are at best, subpar. They're not dithered and adjusting them with the gradient tool is like playing a game of darts blindfolded. Once a gradient's drawn, you can't adjust it by dragging either end of it like the one in Flash. You have to redraw it again and again and again to get it just right.
When all is said and done, I still prefer InDesign over any other tool because it allows me the flexibility of a graphics program combined with the power of CSS-like styles. After a design is created in InDesign, I can just take screenshots and crop them in Photoshop to get the graphics I need for the CSS. Now if Adobe could incoporate the layer options from Photohop into it, I'd be a very happy camper.