How to present your designs to the client

Over the many years I’ve been designing I’ve lost count of the number of times I’ve had to present my designs to a client. It is the one thing you’ll never be able to get away from.

Presenting your design to the client is always one of the most daunting parts of the design process. After all, design is so subjective it can leave the client thinking we were mad and our idea of perfect is like being poked in the eye, twice.

There are many different ways of presenting our designs. We all design differently, whether we design in the browser, sketch or design entirely in Photoshop. Below I take you through various ways of presenting your client designs.

HTML/CSS (Build it in browser)

Building a design in the browser to deliver as a design presentation? Sounds quite mad doesn’t it? Let’s put it this way, how about designing in the browser? It still sounds just as dangerous… Well maybe not. A lot has changed in the past couple of months and with the improvements in many browsers including Safari, Firefox and Chrome with a little bit of IE7, IE8 and Opera we can achieve lots more with the likes of CSS3, webkit and jQuery.

Photoshop or Fireworks can leave a design looking so perfect that when you get to building the design it no longer looks like the original design. There is only so much a browser and code can do and some browsers do not display things in the same way.

If you were feeling extravagant, like Andy Clarke, you could present your web designs to clients in the browser. This allows them to see how the design will look normally as though they’re using it themselves. You can do all of the wireframes before the build phase and fingers crossed the client viewing it in the browser will see everything in the same light as you.

You could just present one template or you could choose to present many, however firstly look at your billing procedures to see if your first invoice (paid) covers the amount of time it’s taken to build your design in the browser. You certainly don’t want to be left high and dry if the client doesn’t like it and you’re then endlessly working backwards and forwards.

Design Board (Visual)

This method is very rare in web design and is mostly seen in the print design world. If you have to present a design to a committee or even large client you could print your web design on to an A3 sheet of paper and mount it against some board. This makes the design rigid so you can carry it into the presentation and even pass around A4 smaller versions to help the client see the design up close. You could add tags or mini-descriptions on to the design to aid in the explanations.

This is one of the easier ways of presenting a design in the browser. By setting the background as a flat jpeg with CSS and adding a png image into the html you can view the design within the browser. This eliminates any file sending issues with your client.

You can do this is in a sub-folder or sub-directory of your pleasing. For this demonstration I’ve simply created a sub-folder called ‘jpegbrowser’. If your design has a common place colour, set this with CSS so if there is over-scroll it won’t matter too much. Save your background whether it be tiled or flat as bg.jpg. Save your design without the background as a .png keeping all transparent aspects, transparent.

The code below shows that we’ve setup a .html page titled “Jpeg in the Browser Demo”. We’ve added the background colour, image and set it so it’s positioned to the center and top whilst making sure it doesn’t repeat.

We’ve then created an ‘image’ div setting the width to the width of your image. I chose 1440px as any ‘normal’ client user should have a screen size of at least 1440px even if they’re using a laptop. I’ve added the margin: auto line to make sure the image sits in the middle of the page if the client happens to have a larger monitor. You could go as far to pre-check what resolution your client is using and setting everything up for their screen size.

This then allows the .png design to sit over the main bg.jpg thus making it look like their website to be is in the browser. A plus point to presenting your design this way is that the client will get an idea of size, a negative being an image is just that, it’s a graphical representation of how their design will look and not everything will be the same once built. Obox Themes have kindly donated their ‘DEPTH’ Theme design to be used as the example in the demo, you can purchase the wordpress theme DEPTH from Obox Design. View the Demo

Flat JPEG sent via email

The easiest presentation that you can do is the simple jpeg via email method. This doesn’t leave much to the imagination and can cause many problems for not tech-savvy clients. Trying to write an email in a way that they will understand what you are talking about is quite difficult. Nine times out of ten, they will attempt to print the design off, in ‘fit-to-page’ mode of course. This shrinks down a possible 2000px long design to an A4 sheet. Great news is they will need a magnifying glass to see what you’re talking about.

You could send the file and then immediately ring them to make sure they’re opening the file correctly. And then talk them through it on the phone however this can with some clients seem a little un-professional especially if you’re working with some very big clients.

Use a Web App

You can present, share and annotate your designs online with a web app like Notable App. Created by the guys over at Zurb, Notable App takes the pain out of presenting a design and being able to describe it to a client. It also enables the client to provide feedback on your designs online. The app allows you to provide feedback directly on the web page, highlighting their own points exactly so nothing can get confused or miss-translated. With Notable App, feedback can be left over time, so if you’re a remote designers you do not have to be there exactly when your client is wanting to leave feedback.

The ability to make annotations within 60 seconds of receiving a link to your presentation can make the feedback process more streamlined than it has ever been before. Depending on who you client is could lead to feedback by committee and there may be more than one person involved with providing it. Notable App allows you to have multiple people accessing and leaving notes on the same design.

Other point of views

I was interested to hear other point of views on how to present design to a client. The designers below were kind enough to share their thoughts. (Thanks to all)

I know there’s been a lot of discussions going on recently about how you shouldn’t present static designs to your clients, but it’s still my most preferred way. BUT… I only show them one page like this. I usually take the most complicated page of the entire website/-app and design that in Photoshop. After I showed them this page, I do most of the other pages straight in the browser (until there’s a complicated component, than I jump back in Photoshop).

My clients are usually located overseas and communication is done remotely, so for me the best method to display static designs to a client is in the browser itself. I embed the design into the background of a blank page and with some simple CSS can control the format of the page, all I have to do then is send the client a link. This method has many benefits, not least of which is the client gets an accurate picture of how the design will look in the browser but it alleviates a whole host of other problems such as file formats and images not being viewed at 100% actual size.

The key however is always in the communication, I like to be ‘there’ when clients open design mockups so I can help explain the process, my choices and help answer any questions they may have. Lately however I have been doing a lot of design in the browser – sending links to static pages is also a common way I present designs to clients.

Previously I used a subdomain to present designs to a client by creating a subdomain and a static HTML page which held links to the design and revisions (if required). This gave a good representation of how the design would look and feel like when viewed through a browser.

However at the start of the year I started using Notable and have been so impressed by it, I’ve now switched to using it to present designs (website and logo) to the client. It enables me to get instant feedback and allows the client to make notes on any piece of the design. Overall I’ve found it’s better empowered the client and made for more effective communication throughout the design process. Notable also allows you to create sets within a project workspace, thus allowing me to separate the project into discreet sections.

A recent client actually expressed to me how good the communication was throughout the project, I think a part of this is down to using a tool like Notable which allows for instant, open feedback.

Once I made the mistake of sending a client, who was very much a layman, screenshots via email. We went through the whole design process via this method, everything from the home page to multiple sub pages. When the client finally signed everything off I got down to the CSS.

Once I had completed the CSS of the home page I sent them a link to preview it. Upon review they sent me back a message which said “Why is the site so big?”. This question blew up into a 2 day debate while I tried to understand why they didn’t like the design despite it being signed off.

I eventually figured out that they were infact viewing the emailed screenshots at about 70% magnification and were not viewing them in full size. The result is they perceived the site to be smaller than it actually was.

So my suggestion is that you never send your clients screenshots via email. Rather present it to them via a link in your browser, use CSS to size up the body and use the background-image property to display the design. This way the client can get a very clear idea of what the site will look like when live.

Matthew Smith

I present my designs to the client on basecamp in jpg format. Its not ideal for all clients, but my clients tend to have a pretty high level of web savviness to accommodate for the difference between image and html. Ideally, a web image would be presented in an html page with the image centered and the background-image repeated horizontally behind the image. This would be the most “web like” experience for the user.

I always talk my clients through the entirety of the design making points about each design decision and how that decision effects their business goals. I try to use plain language that communicates more about business and the actual use of the website rather than the art of design. The design calls are the time where I really earn the trust of my clients. They get to see how invested in their success I am, and how driven I am to produce a product that promotes that success.

Presenting my designs to clients has actually been something I’ve experimented myself. Usually I’ll supply a JPEG graphic with the design mocked up, and write out an explanation of the design along with some thought processes behind each element in the subsequent email. This often helps show reasoning behind a design and can help avoid changes. Generally speaking for logos, I’ll supply a A4 sized graphic with the primary logo prominently in the top centre, followed by three smaller variations showing how the logo works in single colour, mono and reversed. I’ve also tested out the method of showing a design in situ, for instance a logo overlaid onto a business card or a product. This can sometimes give the client that extra aid to their imagination so that they can see how this logo could work for them.

I usually ask as many questions as possible to get an idea of what the client wants and when I’m ready, I’ll either send mock-ups (in jpg format) to my client for review, or in some cases I’ll send a link to a test site with my mock-ups in HTML/CSS (pretty much like Meagan Fisher described in her 24Ways article and use things like border-radius and text-shadow to replicate the effects I would normally do in Photoshop. I think it depends on the project. Some clients prefer Photoshop mock-ups while others like to be able to interact with the site – which they can do if I send them a HTML/CSS mock-up on a test site.

How do you present yours?

I hope you would be able to share how you present your designs to clients so others can learn what the best approach might be. Don’t forget to follow me on twitter.

It depends on the clients IT experience how I present the clients design.

Normally its done with a locked, slightly watermarked PDF file if being sent over by email to a client and if done face to face its done via a powerpoint presentation on the laptop screen.

If its a corporate identity and branding job it is done on a multi page pdf.

Great post, think this is an area some people just don’t know the best way to go, print is expensive especially for brochures/letter heads as not many people have an A3 printer capable of doing a full bleed shot on an A4 mock up. Its kinda hard to say this is what your brochure will look like but please ignore the white frame as my printer doesn’t print that far on the page.

I’ve always defaulted to prototyping in code anyhow. So, if I ever show a client a static image, it’s most likely a screen-shot of the page in the browser. It just never made sense to me to spend time designing a site in Photoshop or something only to have to redo it all in code.

Good article, you showed different ways to present a website. One way I would no go is to print it and show it to the client. Espescially for those client who think that after printing the website it does not look the same as on the screen…

I agree with Terri. I have always sent clients a coded prototype in a browser. It is usually the home page and a secondary page through a subdomain link. To me it is more efficient and gives the client a clearer idea of how the site will look live. Seems to be counterproductive to design it completely as a static image to present just to go back and do it all over again in code. Plus if I am only presenting one or two pages making revisions to the design would not be too much work.

Hello Gavin,
Last year I got opinions from a number of designers on how to present a website to your client and posted by findings (linked in my name) on my blog, it’s interesting to see that not much has changed, though there were a few other options that weren’t mentioned here. Thanks for the posting Gavin.

I never thought about designing in the browser. Not certain if that is a method for us as I am afraid of the added production time doing this. Especially if the client rejects the mock up. 🙁

Generally, we provide static jpg images in Basecamp for our clients. If, upon viewing them, they request to see how a design will look in a browser window, we will create a static HTML page in a subfolder and use the mock up as a background image that is centered. I find that we generally don’t have to do much more than that.

Meagan Fisher had a great article at 24ways (http://ow.ly/1esa3 ) on designing in markup. So I tried it with my next client and I’m not sure I’d go back to the old way. We know that sites will never look the same in all browsers without extensive work-arounds (and some not even then). So why not allow the client to see exactly what they’re getting in the environment they use most? Even if the design itself is still being fleshed out, it shouldn’t be that hard to change if the underlying code and content is well organized and semantic.

I present flat images mounted inside a flash presentation to add basic mock functionality. It offers me the advantage of being able to show the design in the browser, having basic interactivity and minimal work as I just load flat images into a flash movie that has all the necessary libraries.

I usually present the client with static views in the browser which they have to approve before coding is started. Like Tim said, it usually is the most complicated page and/or the homepage (dependent on project size etc).

I use static image files in the browser. Seems like (even given how much easier it is to code effects in the browser) it’s still a lot of detail work to do justice for a design which may not be chosen by the client. (Assuming they’re choosing from a few variations)

IMHO printing design is the last century. I doubt that there is someone who prints his mockups nowadays. It’s very expensive and is not a convenient method. As many IT-employees I work remotely, I have a lot of clients abroad. So what you will suggest me? Sending printed mockups by post from NYC to Capetown? And then waiting for a months for feedback?

As for sending JPEG by email, it’s not about me too. I’m not going to spend all my traffic by sending the mockups here and there, revising design 100 times a day.

I like the idea to upload the mockups via Internet and send the links to my clients. It’s really convenient and doesn’t require any investments.

I think Web App is a really great thing! It allows you to save your time while revising and editing design and as a result to make more money.

But it’s not a cheap thing. The quote varies from $24 to $119 per month. And even though, I doubt if every client can use it. First you should show your clients how to use it.

Never present the design as an xhtml website. I had a client rip off all of my work that way and refuse to pay me. I made the mistake of designing the entire site for them, and instead of signing off, they copied all of the pages and images, and uploaded to there own server.

We’re gravitating towards browser (HTML/CSS) mockups, though if the client wants to see something sooner, they’re presented with a flat PNG file, but are told that this represents the ‘look and feel’ of the website, and that this might change depending on the browser a visitor uses to view the website in.

Although it takes a little longer (we still design flat files, but don’t show the client these), we’ve managed to work this in to project schedules, and the client doesn’t notice. The benefits are not just ours, though – I think it’s a much more rewarding experience for the client as they generally appreciate something they can click (even if clicking does nothing!).

For years (been doing this a long time, over 10 years) it was a case of building a static html gallery to showcase jpegs of designs, banner storyboards, flash storyboards, etc. This was a really time consuming process so we built http://www.Vyoopoint.com (pronounced view-point), basically to make my life easier 🙂

Now I use it everyday to present designs, wireframes, swf files, pdf, and video files. Client’s review on the site and leave their comments, updates take seconds and I smile inside remembering what a pain it used to be and how much time this saves me.

It’s been an interesting process also marketing the app. The biggest roadblock is that people are pretty set in their ways and don’t have the time (they think) to integrate something new into the workflow, even if those existing ways are not the most efficient, but once they try it out and spend about 10 minutes getting situated they seem really happy.

I recently spoke with a big ad agency in NYC who still sends designs via email as attachments! It looks like they’ll start using Vyoopoint now.

Bottom line I think is no matter how you present your work, the most important thing is to hold the clients hand through the process so they understand all the aspects of what you are trying to communicate for them through the design you do.

I like the Notable App approach, it looks very professional and useful at the same time. Just it is a little bit overpriced from my point of view with that basic plan starting from 24$, because I usually deal with 1-2 clients per month. Is there any similar solution for free, open source or slightly cheaper?

Well I use to show designs in Flash Swf movie clips.. That was pretty much easier ..But truly speaking never liked it.. Because it was confusing and hard..As most of my clients think that it is the actual site in Flash..Well screens to don’t work good as For Hover events It cannot make transition effects…Well I have tried many ways… But the best was an HTML page with CSS…on my sub-domains.. That’s the easiest way i figured..

I wish I would have read this post before building my own WordPress theme as a solution–there are some neat ideas here.

I had never heard of Notable and had tried the Basecamp route only for it to get messy on the clients end. Sending png files via email definitely leaves too much up to chance (i.e. spam filters blocking because of attachments, inbox limits on attachment sizes, people who don’t know how to zoom in on a design with their default image viewer, clients who complained their design looked bad when printed out, etc.).

Nice article, well written and some good ideas being tossed around. If possible I like to upload the site to a subdomain folder on my site and then it can be experienced in a browser with functionality intact such as links, mouseovers, popout menus, etc. Maybe it depends on the site though.

I prefer “A flat image in the browser”. 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?).