Web design process (and the "Grey Box Methodology")

This is an interesting piece outlining one designer’s process for coming up with web design comps. This addresses some common issues and starting in a vector format gives you some tools for accommodating different browser widths, content lengths, font/graphic proportions.

I agree wholly with his point that moving into the target medium too soon (html/css) is limiting - you can easily end up with colored boxes with varying borders and padding/margins (sound familiar?). But the interactive aspects of a page, and the different uses and contexts a given template might be used in (lots of content, no content) are still a problem. Yes, you can iterate over a load of cases - but who really has time to explore all the options, with every design variation? This needs to be made easier by the tool.

This is where working in the medium can be valuable. Once in html/css, its easier to test a comp by screwing with the browser (expand/contract, bump font sizes up/down, employ your various bookmarklets for grey scaling / graphics off / css off / override color/background colors etc, as well as pushing more/less content into the various content areas.

There’s obviously a balance to be had, and a good process would start with sketching; defining layout and content/design element placement; some visual treatments; prototype in target medium; repeat. The key is that there be a full feedback loop through each step. The more cumbersome any one step is, the less likely it is to be employed with any frequency.