Designing for Clients
Careful! This post is looking a little old and could be inaccurate in many, many ways
It is very important to present a design to a client in best way possible so that they can visualise how the design will translate to the end product. The design can only communicate so much to a client, it is difficult to easily incorporate a sites narrative and interactions into a design, and it’s is usually impractical to do so.
How it was
Since I started as a web developer I have simply supplied a client with a high quality JPEG image of their new website design, usually via email, to view on their PC or Mac. This appeared to work well enough, communicating such common elements as layout, fonts and colour. But is that enough? Is it possible to provide more information to a client in a design without jumping into the build phase?
Finding a better way
Rather than present a client with an image of their new website design I provide a url. At this URL they can find the design as an image but presented in a HTML document. This may not seem like a big difference, but presenting a design this way allows for a few things to happen.
1. Browser
By hosting the design the client is forced to view the design in a web browser. Viewing the design in a web browser gives the client a much greater understanding of how the elements of the design fit together in the available space of a browser. Of course the browser is the final frame for the websites, so why shouldn’t the design be viewed the same way at the earliest stages. This allows the client to see how the design may work on different monitor sizes and what elements appear below the fold (though I feel the fold is an outdated concept).
2. Full Size
When viewing a large image on a desktop the image can be reduced to the window size. Most clients will be able to view the image in 100%, but some may not. By viewing in a HTML document you can ensure that the image is displayed at 100% size as the final site will be.
3. Background
Creating a design within the fixed dimensions of an image does not allow you to easily communicate how the background of a design may work. With a little bit of CSS styling you can easily create and display the background image as a fixed image, a repeating image or show how a texture may blend into a solid colour on wider screens. This gives a client a greater understanding of some of the design choices you are making as a designer.
4. PNG Transparency
Separating a background from the rest of the image design allows you to use PNG transparency. I wouldn’t recommend using this too much, but the freedom of transparent images allows you to show how the site elements may interact with a fixed background for example.
Conclusion
I’m sure the benefits I have described are not the only ones available, and I’m sure the process as a whole may not be the best. Some designers may use other techniques and apps to help with the design. However at the moment this process works well for me and the company I work for, and hopefully our clients see the benefits this process provides them.