Putting Online Presentations onto a Website
The best way to showcase design directions online is to build a special project website just for the client. Ideally, this website is password-protected so no one but you and the client can enter; however, if your resources are limited, a hidden web address should suffice. A hidden web address is one so arcane that only you and the client could ever find it without knowing the direct path. An address like www.yourcompany.com/clientname/projectname should do the trick.
You should save each mock-up as one giant JPEG file, with 100% quality (no compression), and show it in the browser window. As the screenshot shows, this technique makes the page look real and shows where the cutoff points are that require a user to scroll. By showing a non-functioning JPEG that looks real, the client can get a sense of how the website will look before you commit to actually building it in HTML.
The project website is a design repository for everything from the approved sitemap and wireframes to the design directions. As you make your way through a project, you’ll find that you’ll want to present more than one round of design directions; the project site is also a good place to store past rounds so that a client can see the design’s evolution. In addition, clients like to be able to refer back to this project site and share designs with co-workers.
Organize a project index page that provides links to the pages of each design direction. In addition, it is useful to give a descriptive name to each design direction, such as Direction 1: colorful, geometric, to make it easier to refer to them. Because clients will be looking at the project site without your guidance, you might want to provide a short paragraph or bulleted list that explains the logic and the benefits of each direction.
The online presentation not only allows you to efficiently organize all the design directions in one convenient location, making it easy for a client to see all the directions, but also allows you a chance to include your own branding on an index page, or design a nice frame with your name and logo around the client comps for that extra professional touch.
For the most part, you don’t need to provide working HTML prototypes for your client presentations. Simple JPEG images should suffice to give a client a good idea of how the site will function. If you need to show how a complex interaction will work, you may consider showing a series of mock-ups in storyboard form rather than spending the extra time to make the online component really work.
In some cases, it may be worthwhile to make a small portion of the page actually function. In such cases, you can fake it by using minimal HTML and various technologies that are quick and easy to implement. For example, you may find that in the bidding stage of a project, you may have to invest time in a semi-working, animated presentation simply for the wow factor, to help win the project in the first place.