I have recently read quite a few posts on well respected design & code blogs that argue that it is time to stop showing clients static visuals. The alternative is a working prototype, which the client can use, click around & have a much richer experience of the proposed design.

There are a variety of reasons for this idea being put forward. The most obvious reason is that it is not possible to demonstrate interactive elements. Drop down menus, fluid grids and Javascript behaviors are invisible to the client on a static screen.

You need graphics to ‘wow’ a client, not clean code

Bad text rendering, a clumsy interface and constant crashing seem to be negative attributes awarded to Photoshop in the aforementioned articles. Photoshop allows you to create rich, visually interesting mockups. You make a mockup for one reason, to win work. A client at this stage will not be interested in lines of semantic code.

The introduction of CSS 3 allows for much nicer interface attributes to be applied to a working prototype, text-shadow, box-shadow, border-radius. Of course, unless you ask your client what browser they will be viewing your mockup in, pretty useless. A static image will look the same viewed anywhere.

But if I spend time on coding, then the client doesn’t like it, haven’t I wasted loads of time?

Yes you have, although every design process will go through some form of amendment before it is signed off. Regarding time required for revisions, making a quick change to a Photoshop document or a change to the CSS & XHTML is probably going to take roughly the same amount of time (depending on the change).

The flip side to this is if you once you have a CSS prototype signed off by the client, half the work is potentially complete.

I don’t want to code all my mockups, what other options do I have?

Almost all my designs start on paper, so a pencil is still very valid option. Although I don’t think a client would be very impressed with even your finest effort with a HB.

You can build an interactive wireframe document in InDesign. This is then exported as a PDF, which is ‘clickable’ and can give the client a good indication of the proposed website.

There is the iMockUp application for the iPad, allowing users to create simple application wireframes. Useful for quickly fleshing out of ideas, perhaps around the table at Starbucks. The version I have used on the iPad has limited export settings (PNG only) and only supports single page designs.

Photoshop will live on

Photoshop, the bread and butter image editor. I’ve been using Photoshop for years, and will continue to do so. A design is something that I get very precious about, therefore until sufficient cross browser support appears for CSS3 I will be sending a static image.