The Problems

As web-savvy individuals, it’s quite easy to grasp and understand the concept that mock-ups are simply static images that depict what a site would look like. However, what many web designers have found is that this concept is incredibly difficult for clients to wrap their head around.

We, as designers and communicators, try to make it clear to clients that what they are looking at is a static and flat image of their potential site design. Still, many questions and comments come from the clients after you present the design, such as the ones Verne Ho of Creating Briefing and many others, have experienced below:

  • Why don’t any of the links work?
  • How do I edit the text on this?
  • How come I can’t highlight text?
  • The website is too small (occurs because the browser has shrunken the image by default)!
  • I don’t like the white space that surrounds the site.
  • Can we center the site?

Place the image on a web page and send them a link.

People can probably better identify an image when it appears as they normally see it, such as in a web browser however it does create many more questions as I previously outlined above.

If you choose this method try to personalise it by uploading it to your own server… use the directory/clients/clientname/index.htm. Another tip here was to use the free .tk domain provider so that you can send them a link such as http://clientsdomain.tk which also looks quite professional.

Send A JPEG or PNG via Email

Sending a mockup by email is probably the simplest way however it is not always the best… Some users have small screen resolutions which means the picture may shrink which means more questions along with the other ones that I outlined above.

Use some kind of web-based application

Using a web-based application to showcase mock-ups reinforces the idea that it’s something on ‘display’ and it is not a live example which may lead to less questions.

Use the website CodedPreview

CodedPreview allows you to create simple HTML preview pages, showing what a template should look like when coded.  Again, try to personalise it as much as you can, tailored to your client.

Create A ‘Client Studio‘

Rather than using an online based application, you can set up your own ’studio’ on your own server where the client can log in and view mock ups (jpg’s on a html page) which they approve… You can put revisions on the same page (new jpg’s) and once approved you can add a link to view the functional site in progress.

Export mock-ups in PDF

Rather than saving in jpeg or png format which is just an image that can be opened in the clients default image viewing software, having it in PDF format means, in most cases, that they must open the website in Adobe Reader. The advantage of this is that there’s less expectations for it to function like a website. The use of layer comps is also useful in PDFs to show variations of a design.

Skip photoshop and design in HTML

There are a few debates on this one and it usually comes down to whatever process best enables your creativity however this one is for you to decide.

Get The Client To Come Into Your Office

Although this is not always possible, it usually is the best way to present a web mock up to a client as it allows you to talk over the whole project together with the client. If you have this opportunity, always take it.

Send Them a JPEG or PNG & Ask Them To Print It

This was just an idea I came up with… if you send them a full scale JPEG mockup of the design and ask them to print it off, then they will not think that the website will function like it normally does which in turn will mean less questions. A disadvantage of this however is that the site will not be to scale.