9 Of The Best Ways To Present A Website To A Client

9 Of The Best Ways To Present A Website To A Client

We independently research, test, review, and recommend the best products—learn more about our process. If you buy something through our links, we may earn a commission.

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.

sponsored message

Adobe Creative Cloud Discount

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.

sponsored message

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:

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

sponsored message

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

sponsored message

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

sponsored message

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.

Share This Post:

73 thoughts on “9 Of The Best Ways To Present A Website To A Client”

  1. is it probable that alot of mistaken expectation from the client about design mockups actually starts from the beginning of the sales cycle? if you make it crystal upfront of the type of mock they will get then many of the questions will already be addressed, Or? 😉

    i’ve seen great designer’s many of them freelancing that haven’t a clue how to sell or communicate properly!

  2. Thanks for the mention! I love how there’s such a great community of designers/developers on twitter! 🙂

    I’ve got the Client Studio setup where I give clients login access to view the mockups (then the site in progress once we get to that point).

    When sending the email with login information, I do explain that it’s just a .jpg at this point so links won’t work yet. I also explain that the background will fill the entire screen once we’re working with the actual site, etc.

    What becomes difficult is having mockups of a flash animation (I’ll send several screenshots of what I envision for an animation before going through the work of developing it first… approval is key to making sure you don’t do a lot of work for nothing, lol).

    Anyway in cases like that I’ll write out a few lines or a paragraph or so explaining each .jpg (I do this directly under each image). There can still be some confusion, though, so sometimes a phone call is best to clear things up.

    Anyway, great suggestions to a common issue among designers!

  3. Azakers,
    Having creative freedom over projects is always great however if you’re like me and need a hand for the coding side of things (I only know the basics) then use of mock ups is critical.

    Powerpoint is an interesting approach, any reason you do not use PDF’s instead?

    Regarding Loreum ipsum question I always try to slip in the words dummy text somewhere and tell them before hand… if they seem not so tech savvy.

    It is strange how communicators can not communicate but very understandable, not everyone is great at public speaking but generally if they know what they are doing then they should be able to talk about it in length, even if the client is forced to ask questions.

    The client studio idea I would love to do if I got more web design jobs but I am not really focusing on that at the moment. Worth a shot though. Emails are working for me at the moment as most of my clients are pretty tech savvy.

    Would you be able to provide some screenshots? What type of website do you use?

    No worries, thanks for providing the screenshots and yeah Twitter is a great tool… I never would have thought it could be so handy.

    Thanks for the extended version of your process too.

    I was surprised there was no info about this topic on the web at all.

    Well here were the different methods used by various web designers!

    You’re welcome.

  4. Great article!

    Re: Client Studio
    Have you heard of or found a plugin for WordPress that would allow you to do this? I did some intensive searching about a year ago (before 2.5) and didn’t find anything. Would love to make use of the existing site infrastructure that I already have. Especially if that could also become the method by which they submit tickets / requests / etc.

  5. I do so much work before jumping into Photoshop that the client has an idea of what they are going to get before they see the design comp. We’ve talked about the primary and secondary audiences, what the site should feel like, and in most cases wireframed the content around those expectations so that we are making decisions based on strategy, not presentation.

    At first it might be a hard sell to do a lot of work before seeing a design, but if you do they won’t care what format the design is presented it, they are going to be focused on how users are using the design.

  6. I like the idea of posting the responses and their providers.

    Also a very informative post.

    Keep up the good work!!

  7. Great post, I am think I’m part “Skip photoshop and design in HTML” and part “Get The Client To Come Into Your Office”. To me it seems that designing in photoshop takes more time than just jumping in and in almost all cases it seems that getting in front of the client is always beneficial.

    Again great article !

  8. Some interesting ideas. Luckily, I’ve not had to do much back-n-forth with clients before, so I’ve been able to avoid much formal process.

    Generally I have full creative control over the web projects I contract, so I’m free to build live (CSS/HTML/PHP) with-out having to worry about scraping the whole thing because the client changes their mind about something.

    On more formal projects I use a combination of PhotoShop & PowerPoint to mock up and annotate a websites several templates & special features – and then present the PowerPoint directly, or on a conference call.

    I’ve found flat images or simple, mocked up HTML lead to too many of those silly questions (why don’t these links work, what does this lorem ipsum crap mean)

    The good thing about a formal presentation is that you get the chance to explain certain features & design choices proactively, which can help avoid having to invest time in code development or having the client misinterpret the images.

    AzAkerss last blog post..Yahoo Site Explorer Gets a Much Needed Makeover

  9. I just always sent a jpg via email but i think in the future i will try to send pdf files although the “client studio” idea is interesting too. hope it’s not confusing for clients

    Markuss last blog post..Nie mehr Outlook

  10. I have a website that I use specifically for client reviews. I upload the design to the domain and give them a link accompanied with a brief yet clear description of what to expect upon clicking. I’m not convinced that this is the best way, though, and am strongly considering setting up a new system… so that “client studio” concept is looking mighty appealing.

    Erikas last blog post..Miami Web Design

  11. Hello Jacob,Another tool that I have found interesting and I will be using when it is released is Get Sign Off. This looks like it is going to be a great product to use to help get the clients approval you can see Paul give a demonstration about it here.

  12. Thanks for the mention! GREAT article, worth the digg front page 🙂
    Keep up these great informational articles.

    adelles last blog post..Interviewed on Freelance Folder + More News

  13. Great post, this is definitely something so important, which should be so simple, yet is often times a disaster.

    I would only have to say that if you have the money, a service like basecamp or an organic solution can also help tremendously.

    Nice post!

    Matts last blog post..Friday’s Five: Week 9

  14. I mentioned in my tweet (pointlessramble) that I normally use an image within a html file + backgrounds. Although, now I normally skip photoshop all-together, and dive right into the html after initial sketches that the client agrees upon.

    Nicks last blog post..IE users: stop!

  15. I think Styletime is correct you have to be up front about what type of mock you provide. In my contract it states clearly that i provide a link to and image mock up. I include annotations on the image to help answer questions.

    Ryans last blog post..Why A Good Logo Is Important

  16. Great post, I definitely think clients need to see the bigger picture when it comes to viewing designs. The codedpreview site is a great tool indeed and is really simple and easy to use. We have a dedicated server for client mockups which is password protected, we then have a template that we use over and over that has our companies branding on the index page, we then have a list menu of the different design iterations so the client can preview all designs from start to finish.

    Max Weirs last blog post..Terminator 4 “Salvation: The Future Begins”

  17. I can’t believe only one mention of Basecamp here!

    It’s invaluable for getting client feedback as I can create a message and get feedback on it.

  18. Great post, I generally post a jpg into a index file inside a directory online then walk the client though it over the phone, ask them if they have in questions before they take time to to review the design. Thanks!

  19. I typically print them out and mount screenshots on foamboard, clients love it and i ofrten re-visit months after the end of a project and the screenshots are still displayed proudly in the MDs office.

  20. Great idea for putting the post together and some great responses. Good stuff.

    liams last blog post..Contest: Win a Copy of the brand new Papercut Theme

  21. I agree with projects managers like basecamp that let the client provide feedback on files and better management for you. Anyway, this is a useful post.

  22. Adelle,
    Thank you for the digg and praise 🙂

    No I have not… there was not even an article on the web on this subject of different methods to present mockups to clients. Did you find anything?

    I have yet to try basecamp… what did you mean when you mentioned organic solution?

    Brad C,
    That is a good method Brad however like you said, it is hard to sell a design based on wireframes. It depends on the client I suppose if they can envision it or not and the purpose of the website and how the users are going to use it.

    How detailed are your sketches?

    What type of annotations do you include? Do these take away from the actual presentation of the mockup?

    If you could get the client into your office every time that would be just swell.

    I am yet to use codedpreview however I will give it a try in the short future. Would you have an example / screenshots of your method, it sounds great!

    Steven, PureDezigner, Pike9, Mark, Liam, Acms, Navi, Ava, Mokokoma, Doug,
    Thank you for your feedback and input… much appreciated.

  23. Nice post and a unique idea to include responses in the post itself. I’ll try it out myself.

    Navis last blog post..Are you a loser on internet? Find Out!

  24. @JamieO – I’ve been looking for a plugin too, but so far haven’t found anything. I do that manually with a form field jump menu, as well as javascript that points to the URL’s. I’d love to automate the whole process, and as you say do a ticket submission type of thing.

    On the other hand, though – I like just having the designs (and eventually links to the site development in progress) through the client studio, so that clients can email me directly with approval or changes, etc. I just like keeping a good record of ALL communications, especially when signing off on a design, etc.

    One thought is to include a form on each page so clients can respond directly from the page. I haven’t implemented this yet, though…

  25. I think the best would be to present a printed mock-up in person to the client. The only problem is obviously that time / distance will not always be in your favour.

    Mokokomas last blog post..Skout’s progress and tips for growing an online offspring

  26. I use the web site review method. Send the client the URL (and password) to access the web page where they can see the work in progress.

    Doug C.s last blog post..Your Opinion: New Blog Title?

  27. Interesting article – I for one, go for a full page PhotoShop mockup uploaded to our office server in the client’s directory.

    When I send my client the link to the mockup, I always include a few lines about what it is, that it’s not clickable, etc. In the past 8 years, I’ve only had 2 clients that have not understood the mockup or what it’s purpose is.

    I find it very easy to go back and forth with my clients and Potential clients in this manner. I read this morning on another blog that they feel PHotoshop Mockups are ridiculous and prefer to do everything with drawings on paper – but I have to wonder – When working on the web with clients across the globe, how does that paper drawing bring the client a Realistic Design Approach?

  28. PDFs have been the most stream-lined way for myself in the past. You can get them lightweight, considering, text can be selected, and you can write notes to explain design considerations.

    When it comes down to it, you’ll need to inform your client that it is NOT a functional website. This is reliant upon the strong communications skills you should already have with your clients.

  29. Merideth,
    Thanks for explaining your process to us, it was insightful.

    I believe that paper drawings could work with some clients however I don’t think it shows off the the design as much as it does with a digital version. Sure, paper sketches are great for getting an idea of the layout at the start of the process but it doesn’t give the full picture so to speak.

    Do you keep all the feedback from the clients (that I presume they send through email) on the actual client studio site? Or do you just keep it in email format?

    The form idea would be handy. CformsII is a good plugin for easy forms however I think your skills are beyond that judging by your website 😉

    Thanks for your input… to show acrobat files at 100% you have to save them in that format… you change the preferences under file and set the document to open at 100% rather than full screen.

    Indeed, I agree… “This is reliant upon the strong communications skills you should already have with your clients.”

  30. Hi Jacob, thanks for your reply!

    I knew that I can set the initial pdf view to 100% but it still looked like it was blown up to about 130%.

    But I found out what my problem is 🙂 I had to change the ‘Page Display’ settings in my Adobe Acrobat 8 Preferences. ‘Resolution’ was set to ‘Custom Resolution: 98 pixels/inch’ and it should be 72 pixels/inch. Also the ‘Zoom’ needs to be 100% and not ‘Fit Page’.

    Carolin’s last blog post..“Green Space” named finalist for magazine award

  31. David,
    Why thank you, interesting some people actually find just one link out of the hundreds displayed there.

    Actually that was what I was trying to get across the Zoom function in the preferences… I was just going off memory before and yeah 72 does help 🙂 Strange it was on 98.

  32. Hi Jacob, found your website via the ProBlogger project and am very impressed. Thanks for an informative article on presenting concepts to clients, which, in all honesty, can be a nightmare at times.

    David Walker’s last blog post..ProBlogger Killer Title Project

  33. Great post! One thing I wonder is how Adobe Thermo project is going to change this discussion. From the videos on the web (Google Adobe Thermo), you’ll be able to take your Photoshop file and convert it into a Flex application with a couple of mouse clicks. This will allow your mock-up to become a “working” web page with sample data and provide some level of interaction using a flash player. This sort of technology should make it easier for to present a design to a client and allow them to get a good feeling of the overall site. Of course, we’ll need to wait until Adobe release Thermo to see if the marketing hype lives up to promise of the simplification of web site development.

  34. I use pages as i’m on a mac and use yellow bubbles that have a shadow with a line pointing to areas of note. I don’t think it takes away because the shadows make them seem on top.

  35. When I was on internship, I remember a client asking us to just print the webpages because they weren’t able to view it online for some pecular reasons. So, this post really makes sense! 🙂

  36. A couple of things I do:

    1) I try to meet face-to-face. If that’s not possible, I talk over the phone. I try to interview as much extensively as possible. I have to know how the client thinks and what he or she wants.

    2) When I do my updates, I put a “dummy page” on my own site, and show it to the client. When it’s all done, then I upload it to their webspace.

    I found these two ways work for me. But I’m always open to suggestions!

  37. mocklinkr.com is a mockup publisher specifically designed to help with this problem.

    In 3 bullets
    1) Hosted: we host your mockups
    2) Interactive: You can easily make images clickable to show the navigation
    3) Feedback: From the published view clients can select regions and leave comments

    Check it out!

  38. Hi.

    You really should check out RedMark (http://www.redmarkit.com)

    It’s amazingly easy to use. It offers just what I need : upload different versions of a mock-up, annotations/n, client access without login/password.

    Currently it’s free.

    Best regards.

  39. I feel like sending the client any type of mock up in a browser is a bad idea. This definitely gives them the impression that the site is close to finished. Many clients don’t understand the difference between a flat image and an interactive html page. Even if they aren’t expecting functionality from the mock up, seeing a mock up in a browser will make them think “Ok, so you’re almost done?” and that is definitely not the impression that you want to give after just drafting comps. We all know how much sweat goes into the project after the design is approved.

  40. We are currently beta testing a website similar to codedpreviews.com – however it will be a paid service. We think a paid version will make it a faster and more reliable way to preview your web designs.

    If anyone is interested in testing it out, you can register for free right now at HostedPreviews.com

  41. A great post. It also helps to simply explain them that the narrative has no life of it as of now. Also, sending it as PDF has advantages that they can re size them easily and then the layers advantages.

    Great points.

  42. I’ve been using Approval Manager to help with all of my proofs. They have a pretty solid proofing tool called Spark! where I can upload a PNG, send a link to a client (or add them to an approval) and they can make their comments right on the image. Best part… they have a free version. It’s made my life a heck of a lot easier with managing proofs. http://www.metacommunications.com/products/approval_manager

  43. Many a time, we choose to present in person, for reasons being, the chances of lots of questions and comments for changes are high, might as well kill two birds with one stone and call it in as a meeting.

  44. hello friend, where can we buy cheap [url=http://www.sportkits.net] soccer kits [/url] , could you tell me , thanks

  45. Maybe it is a old post, but I liked reading it. Many years I had ‘problems’ to show my clients my designs. I think I tried every way described in this blog. The best way, for me, was to upload them in a website as background image. This worked so good that I made a plugin for WordPress that does this for me now. It is called Mockup. It is a free plugin. I hope it will help some of you. 🙂

  46. A long time ago I’ve made a very simple tool for my webdesigners. It’s based on simple JPG in browser sharing. The main idea is that sending just a .jpg / .pdf or anything like this makes people don’t “see” how it is in the browser + they scale jpgs so you’re never sure how it will be displayed (80 % zoom..).

    If logged-in containing webdesigners upload history..
    Available here: http://im.24d.cz

  47. I disagree with all of the points above. I would rather suggest the opposite. DON’T PRINT. PUT IMAGES, etc.. just read it on the contrary and maybe it works

  48. I to have spent ages fighting over whats the best way (html/css visual Vs Photoshop visuals).

    I always give clients design options, so spend the time on Html/Css visuals – only for them to choose one of the options seem a little over the top and can be time consuming (if you not using templates). But flat photoshop visuals don’t convey the interaction – which is the bit clients seem to like…

    So my solution (right or wrong) is to provide photoshop visuals, with multiple versions showing hovers/functionality etc hooked up within a html page (home, home-nav (showing nav dropdowns), which then links through the various different page designs (home, Products, Services etc) – and also try and get the backgrounds working so not just an image centered, then i create a subdomain for each client client.domianname.com which takes them to there visual – with a landing page for to direct them to each option.

    I always talk clients trough the visuals and support the concepts with links to sliders and/or other jquery where used etc – either face to face or by webinar/skype.

    Not perfect but the route i use, which seems to help convey everything i want to client – and there not all web savy like us!

    Cheers Matt

  49. I put my screens in Apple’s Aperture and let it create a simple online gallery for me.
    But I wonder why adobe never came up with a “show at web resolution” option for acrobat. It would make things a lot easier.

    Cheers, Tim

  50. Great article . As from the side of Ux designer I can say I always send the mockup – jpg by email and it always works . Sometimes but not often I send .jpg by skype but it`s not good way .

  51. It’s also possible to use Adobe Muse to build an interactive Mockup. If you’re using PS or FW to design it, Muse makes the process even faster, and, you get to put your website online using Adobe Catalyst.

    Nice post, thanks.

  52. Such a great tips! I usually use an extension on my browser to crawl the webpage and send them pictures. I always update them about the daily progress. They use to like a lot. hihihi

    Great blog, buddy, I’m enjoying it!

  53. Hi,. . I want to post directly to my wordpress blog from my desktop, specifically from Command prompt. . . I know there is a protocol called xml-rpc, but that is of no help to me, as I don’t know what on earth it is. Any help would be appreciated..
    comment tomber enceinte rapidement en allaitant

  54. Now we have tools for that 😉 For example InVision, Symu.co, Concept.ly. In one place client and designer can “meet” and work. Clients can add comments and use hotspots which make offline project more interactive.

Comments are closed.