How to present your designs to the client

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.

A flat image in the browser – View the Demo

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.

<html>
   <head>
      <title>Jpeg in the Browser Demo</title>
      <style type="text/css">
         body {
         background: #1a0f1f url(img/bg.jpg) no-repeat center top;
         }
         #image {
         margin: auto;
         width: 1440px;
         padding: 0;
         }
      </style>
   </head>
   <body>
      <div id="image">
         <img src="img/image.png" title="Presentation" alt="Design Presentation"/>
      </div>
   </body>
</html>

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)

Tim Van Damme

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).

Sam Brown

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.

Grace Smith

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.

David Perel

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.

Chris Spooner

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.

Jon Phillips

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.

A delayed view on trends in 2010

Social Media played a huge part in 2009 with Twitter reaching $155 million worth of capital funding directed at progressing them towards becoming financially viable without restricting their growth. In 2010, I see the biggest changes will be in collaboration between smaller companies, further development in software as a service (SaaS) and a social media slow down.

The progression of online collaboration tools such as 37 Signals BasecampHQ will enable smaller businesses and freelancers to collaborate and communicate effectively and give them the ability to go for much larger contracts.

Software as a Service (SaaS) could see yet another fruitful twelve months. In the digital technology profession we are now starting to see SaaS as the norm and expect for it to be that way. Cross platform software that you use on your laptop, home computer or mobile telephone is now ordinary and enables most people to achieve some sort of workload on the move.

A Social Media slow down in 2010? Really? It may well happen, just not in a general sense. Social Media is now ingrained in everything we do, we communicate using Facebook, Twitter and other Social Media tools but in 2010 we will grow past the hype. For the past 3 years we have been talking about Twitter being the ‘big thing’, and in the next twelve months we’ll see the hype reducing with more talk on the impact of businesses using Social Media well.

Do I regret?

A little while ago I wrote about “starting your at entrepreneurship” and how at a young age I wrote my own business plan for a few ideas I had. The content also contained a description of something which happened over Christmas that I was really impressed by.

The content seemed to gain a little interest and Ashley Baxter posted the comment below;

I don’t think it’s wrong for young people to be entrepreneurs, and I definitely don’t think it’s generally seen that way? Look at The Prince’s Trust charity; they are actively encouraging and funding youngsters to get into business. It was likely a few small minded adults who looked at you oddly, but I very much doubt people think it’s wrong. Sure, these kids are so few and far between that they can’t help but be seen as ‘different’, especially as kids are more so inclined to have fun than dedicate their time and energy into a profitable business (even though that is fun).

Your last paragraph says you shouldn’t hold back if you have a great idea. I couldn’t agree more myself and think too many people sit on their ideas, but do you ever regret not giving any of your early ideas a whirl?

I’d like to thank Ash for her comment, I wanted to reply straight away but then wanted to take some time away and taken her comment in to consideration and possibly reply later when had thought more about it. After much deliberation I thought it would be better to actually write a new post as to why I did/did not follow any of my ideas along the way of my youth.

Never hold it back

Like I said in my previous post, it’s definitely not wrong for a young person to be an entrepreneur or have the ideas to enable them becoming one. I think it would be defeatist to restrict an entrepreneur whether young or old. It’s something that is in ones blood and should be left alone. One hundred ideas could go wrong and one could go right and of course it could only take one idea to make someone a very comfortable lifestyle for the future.

I do believe, just like Ashley, that many people hold back on their ideas instead of taking them forward. More so because of their fear of risk. Risk can be looked upon in many ways, however, I believe in most cases it would either be the fear of failure or financial instability that stops entrepreneurial ideas from taking places. You can look upon risk in another way and view it as the difference to either making a decision or not… I wonder how many entrepreneurs have thought “what if…” long after they held back on taking an idea forward.

Regret

I have a lot of regret and it’s something that I think about quite a lot. I generally come up with crazy ideas quite often, of which I’m working on one at the moment. Looking back at my previous post about the business plans I wrote then I was 15, the idea would have needed to start almost immediately as at the time there was a surge of broadband connectivity throughout the country and it would have only lasted for 2 years. In that 2 years had I made any money I would have more than likely invested it in something else. That particular time of my life when I wrote them wasn’t the part I have regret about, I thoroughly enjoyed sitting with my Dad learning about cash-flows, targets and foot-fall. I do believe in fate and that everything happens or doesn’t happen for a reason, had I produced those businesses I might not be where I am today enjoying everything I am doing.

The only area of my youth that I regret giving up on is nVmax, the two and a half years that Andrew and I spent on creating the community based around nVmax was amazing. I’ve never been able to really put in to words what it was like maintaining a site of such size, working with all of the gaming companies to receive preview and review material (hardware, software and games). Back then, 2001 to 2003 we were getting serious amounts of traffic and had we taken it further we may have been able to make something of it. When we were working on it there wasn’t as much revenue involved in advertising online that we knew of, however looking back on it now I think we would have been more than comfortable had we carried on.

That is as far as the regret goes, whilst I miss nVmax a lot as it did take up much of my life whilst I was working on it, it did give me such a lot of experience for what I now do everyday. I am more than sure that the experience I gained through working on nVmax all those years ago has enabled me to succeed in the things I’m working on now.

In essence I regret giving up because of what could have happened, however I don’t regret getting the experience. That experience has helped me out in more ways than I’ll ever realise.