Mock Up - Courtesy of renewleeds on Flickr

The design phase of creating a website is fairly standard for most web designers however when it comes to presenting the mock up to a client before slicing / coding the design, some problems do arise so I went out and asked the community about how they present a web site design to a client.

After filtering through all the responses and summarising them I am now ready to present to you, 9 of the best ways to present a website design to a client, along with the advantages and disadvantages of each method.

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?

To some extent, I can understand the confusion… they are looking at something that looks like a website that is inside a browser or picture viewer, however, oddly, it doesn’t act like a website… obviously this fact would raise questions.

To find out what various web designers do to get around these problems I went and asked my friends on Twitter (Follow Me) and Facebook (Add Me) to see what they do when presenting a web design mock up to a client.

Methods of Presenting Web Design Mockups

Mock Up - Courtesy of _Marcel_

After getting replies from my Twitter / Facebook friends (big thank you) I came to these 9 methods of how to present a web design mock up to a client. In no particular order:

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. Thank you for the .tk tip Herbert.

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. (Thanks liamuk7 for this one.) 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.

Here is an example from IDesignStudios“I email clients with the URL for the client studio, as well as their Client ID, Username and Password. You have to have a username/password to even get into the first screen (w/ disclaimer and dropdown of client ID’s). A client can only continue on to their own client area (as in, all clients can see the first page w/ dropdown, but you can only login to 1 client area after that).” You can view a screenshot of the log in screen and inside the client studio.

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.

Original Responses

Twitter Logo - Facebook Logo

Below are some of the original responses from my friends on Twitter and Facebook… once again thank you. Follow Me On Twitter and Add Me On Facebook and while your at it, Join The Just Creative Design Facebook Group.

marioOlckers @justcreative Stealth live install on server to illustrate proof-of-concept and then back to drawing board after input and consultation.

netbramha @justcreative PNG, How about you?

brianyerkes @justcreative Save it as a jpeg, upload it to a directory on your server called /clients/clientname. Make an index.html page. Add jpg image.

brownaddesign @justcreative I just post the design on my web server, in a directory I create for the client, and email them a link to view.

🙂

marnieb @justcreative In JPG format. 

metalgod @justcreative I put together a PDF with annotations and send it over to the client. Then I follow up with a call to walk them through it.

trisnadi @justcreative Has the client seen the draft before? I normally do a full walk through before letting them touch it or ask questions.

ClarkleSparkle @justcreative Email.

bradsherrill @justcreative Have the client come into your office and let them view in 1:1 scale preferably jpeg format. If you can’t do that email them.

jessjoyce @justcreative – We send/upload .pngs of the Photoshop/Illustrator docs

spinfly321 @justcreative – Design in photoshop and present as a jpg

biwerw @justcreative – Create a web page with the .jpgs of the concepts on it and send them the link. Hope this helps.

liamuk7 @justcreative – Just as a image or using http://www.codedpreview.com

idesignstudios @justcreative –   I give clients access to their own “client studio” – they can login and view mockups (jpg’s on a html pg) as they approve…I put revisions on the same page (new jpg’s). Once approved I add a link to view the functional site in progress.

marcoslhc @justcreative – I generally deliver some physical sketches (paper and colour pencils) to the second meeting, and digital ones to the 3rd

stevemoseley @justcreative – Depends on 2 things: project size, and pickiness of the client.   If either – photoshop mockup. If neither, first cut of html.

adellecharles @justcreative I usually save for web and insert into and html doc / upload to server just so the client can see

craftisan @justcreative What I do depends on the client… sometimes live web previews or pdf/jpg mockups… mostly jpgs.

randaclay @justcreative JPG file, or sometimes PDF

EliteByDesign @justcreative Usually just a JPG via email or uploaded to my site. Nothing fancy, after all, it’s only a first draft!

pointlessramble @justcreative Stick it in a HTML file with any backgrounds needed/etc.

RyanDownie @justcreative To present mock-ups I put the image in a directory on server /name and then add a backgound image to tile full browser

Herbert via FaceBook: I usually upload the website with a free domain www.yourdomain.tk, it’s easy you redirect the path from your hosting to the free domain.

Steve via Facebook: We have a web.yourcompany.com setup and give the client the URL web.yourcompany.com/client.

Patrick McColley via Facebook: I usually post it on my server or if they let me, theirs.

Further Discussions

Below are some further articles on this topic of mock ups and presentation.

Those already linked to in this article:

So I ask you, how do you present your web design mockups and after seeing the methods suggested, what do you believe is the best way?

And if deserved, a digg would be appreciated. Thank you.