website presentation to client

11 Ways to Present Web Design Mockups to Clients

As a web designer, you need to present your web design mockups to clients before building them out or going live. This gives the client the opportunity to give you feedback before you (or your developer) spend a lot of time coding and building out the design.

The faster we receive feedback and can move into building the site, the more profitable the project is and the sooner the client will see results from your work. 

#1 Never send the design and wait to hear back

No matter how you decide to present your design to your client, when at all possible present live. When you present live, you will receive feedback right then and there, you can control the feedback by asking specific questions (see #4) and in doing so, this will help you receive the final approval you need from the client to build out the site.

When presenting the design to client this is an opportunity to remind them of exactly why they hired you in the first place. Remind them of their number one goal and share with them why you designed the website the way you did in order to help them Reach the goal. this keeps the conversation high level, focused on what is most important and out of small details like moving an icon a little to the right or using a slightly lighter color of blue.

When you start the  presentation, you should be explaining Your Design decisions as they relate to the client’s goal. Then you can ask specific questions about specific elements of the website that you would like direct feedback about.  in explaining or design decisions you can also make statements like “do you see how this will help you generate more leads?” or “do you see how much potential this design change has to generate more phone calls for you?”

1. In person

As that’s not always an option, there are plenty of ways to present web design mockups to clients virtually while receiving all the same benefits of presenting to a client in person.

2. Present live online

3. pre-record a presentation.

If for any reason, such as a big timezone difference, pre-record your presentation as you would give it if the client was live with you. Use a free tool such as the Nimbus Screenshot & Screen Video Recorder that allows you to customize screenshots or record a video of yourself while sharing your screen. 

4. Visual website feedback tools

Usersnap and Pastel are other good options.

5. Use client dashboard

Client portal is an easy to use client dashboard that allows you to house any and all of the files and information needed regarding each client. This also gives your client a place to login where they can easily find and view the information pertaining to their web design project.

6. Use a staging site

In some cases it makes sense to skip the design phase and jump straight into building the site. And these cases that can take less time to build this out when you are dealing with a smaller site that is less complicated and you are clear on what the clients need.

7. Design & Prototyping Software

Invision lets you Turn your design into a clickable, interactive prototype or mock-up.  Simply put, you can present your design in a web that feels like an actual web browsing experience.

8. Wireframing Tools

If you create wireframes for your web design clients, a wireframing tool like Balsamiq not only lets you create thh wireframes you need, you also have several modes to present your designs to clients including:

9. Via a WordPress plugin

Project Huddle helps you receive organized feedback from clients. You have the option to receive feedback from an image (your mockup) or on a live website.

10. Use a Jpeg 

11. with a pdf.

For some clients a JPEG can be hard to understand. When the file is opened it can appear much smaller than the actual website, they can see additional white space on the sides and may not understand how the sizing will actually look  when the website is live.

Deciding how you will present web design mockups to clients

Which options jumped out to you? From those options, create free accounts, start a free trial or view the demo to try out different options. Then pick the one option you will use and get to know that option really well. Doing so will help you improve your presentation skills as you won’t be thinking about how to use the tool but rather how to best communicate with your client.

You may also like

How to create effective website navigation design for user experience, how to optimize seo for website visibility, the importance of video content for effective website engagement, how to create css animations for engaging website interactions.

Alex Devero Blog

Learn about development, and programming, especially in JavaScript, TypeScript and React, and design.

How to Present Web Design to Clients Like a Pro

Table of Contents

In the previous four articles we discussed how professional web design process looks like and how you can use it to create high quality work every time. Your next step is to present web design to your client in a professional way. This will be the main subject of this article. Today, you will learn the best practices to present web design. You will also learn how to work with client’s feedback and do required adjustments. Are you ready to learn how to present web design like a pro?

One challenge everybody knows

Your web design process will not be complete nor sustainable without knowing how to present web design to your client. There are many great and hard-working web designers delivering amazing results. These guys and girls know how to work with colors. They know the psychology  behind it and how to is. They can tell you the whole history of graphic even if you wake them up in the middle of the night. The same thing applies to design theory. These people are walking reservoirs of knowledge.

Unfortunately, the amount of skill these people have is not everything. The reality is that it doesn’t matter how great web designer your are. You also must be able to present web design to your client, employer or anyone else. This one of the issues many professional web designers have to deal with. The ability to present web design is often also that one thing that keeps them from taking their craft on another level, not to mention make more money.

Delivery is just beginning

Let’s suppose you just finished the first iteration of the website. You also discussed the web design with your colleagues or another web designers and did user testing  to get valuable feedback. Now it’s time to present the web design to your client. This is the place where some web designers are doing first mistake – they send the prototype of the website by e-mail. If you want to retain at least some control over the process of presentation, always present web design to your client in person. This doesn’t mean that you have to fly at the other end of the world.

Simple Skype call or hangout will work great. The key is to present web design in the real time. Personal presentation gives you every advantage you can get. First, personal contact will improve your relationship with your client. As a result, he will be more likely to remember you and hire you in the future. Second, personal presentation will allow you to frame your work in wider context. Third, you will have a chance to answer client’s questions right on the spot. In other words, say good-bye to e-mails about nonsensical remarks and comments.

Fourth, your client will gain confidence in you. There is only handful of web designers willing to take the time and present web design in person. Good preparation requires certain level of professionalism and preparation. The fifth, and last, advantage of presentation done in person is obtaining valuable feedback by watching clients reaction. Your client can tell or write you one thing. However, the reaction you can see on your own eyes is irreplaceable. What’s more, if you are good at body language , you can spot sign your client might not even know about.

Present web design like a pro

You know about the biggest challenge the majority of web designers have to handle. You also know the greatest advantages you can gain by learning how to present web design like a pro. Now, I will give you six-step process to master this softer part of your work.

The first step is to describe the problem. You need to present to your client the assignment you worked with. As someone well-versed in web design and also someone who went through all phases of web design process, it’s quite easy for you understand it. You still have everything in your memory – all assumptions, hypothesis, users’ feedback. Unfortunately, this is not true for your clients. For this reason, the first step is to familiarize your client with the problem.

Second step, is to “go” through the business of your client and his customers. This step is more about describing what you were building the website on. Your goal is not directly to present web design. It is showing your client that you understood his business. Otherwise, you could end up with a house built on the wrong meadow. Third step is to describe your  four-phase web design process  you used. Briefly describe individual phases and information you obtained. You should also talk about how you used these information to design the website.

Fourth step is presenting your prototype of the website. This is your chance to show the fruits of your labor in the best light. Just for case, I suggest that you test all features of the prototype before the presentation. Otherwise, if something went wrong it would jeopardize the entire project. While you will present web design, make sure to comment everything your client may not understand. Also, encourage your client to ask questions. Presenting the prototype is not the only thing to do. You should also explain how the website fits the whole picture.

Meaning, describe how the website will support and complete your client’s branding and how it will help his business. Remember, focus on benefits instead of features. The fifth step is to answer any questions. Even if your client doesn’t look like he has any questions, it is still better to ask him directly. There might be things your client may not be completely sure about, but he will hesitate to ask about. If you want to test client’s comprehension, you can ask him for a quick summary (don’t do that).

The sixth and last step is to give your client some time for feedback. This last step will typically take about a week, sometimes longer. The time it will take depends mostly on two factors. The first is your client. Some people will need only couple hours after you present web design to summarize their thoughts and give you feedback. Others will need days or weeks. That’s normal. So, if your client is not responding in the first five days, don’t panic. Remember that the website you designed is part of his business. Your client has to make sure to think about it properly.

The second factor that will have an impact is the size of the project. Large projects will require more time for your client to review than smaller ones. In case of bigger projects, there will be also more people involved. In other words, your client may not be the only person reviewing your work. The more people will be involved in the project, the longer it will take before you may get any reaction on your presentation. Still, there is something you can use to navigate through this.

If you are working on a smaller project – small business website or personal website – and your client didn’t get in touch with you for more than two weeks, take the initiative and write him first. In case of bigger project – website for bigger company – give it three or four weeks. Then, again, take the initiative and get in touch with your client. In all situations, always contact your client in polite and calm way. Another condition you can use is the time it took from the first phase of your web design to the moment you had to present web design to your client.

Adjustments and iterations

The moment you were hearing about is here. Your client wants you to change, add or remove something. As you will see, this change will be mostly related to the desktop “version” of the homepage. When your client has a concrete requirement, your job is to read between the lines. You have to understand the reason behind it. What your client wants to achieve by making this change? This also means that you will not blindly follow the orders and agree with everything.

Your clients are intelligent people who want their web to be successful. This is the number one reason they are working with you. Client’s change requests are often based on a good reason. All you have to do is only adjust its form, metaphorically speaking. In situation such as this one, you have two pros. First, your client is not just some middleman delivering information from higher levels of hierarchy. He is probably decision-maker. This means that every change from the side of your client is “approved” in advanced.

Second, you went through the whole web design process. You have information and arguments for why to do something and why not. It is possible that client’s request will create something new you will have to process, analyze and assign specific priority to it and implement it. Then, you will probably have to present web design to your client again. Where is that second benefit? If the change is bigger, your client will be more likely to increase the budget.

Generally speaking, it can also be useful to make one trade-off for your client. This can, in the future, lead to trade-off from the side of your client. It is also nonsense to fight with your client about whom will define the content of the website. Both of you will lose. You will not get hired again by this client in the future for another project. Your client will have angry and demotivated web designer, and probably malfunctioning website. Also, remember that your client has always one ace in his sleeve – money to pay your invoice.

Dealing with harsh feedback

There will be times in your career when you will get feedback that will be similar to punch in the stomach. The more attached to your work you are, the hard the punch will be. Unfortunately, there is no way to avoid harsh feedback. Even if your work is flawless, you can still encounter client who will crush it. Thorough your career, you will stumble different types of clients. You can’t control them or their thoughts. Trying to do so is like fighting windmills. What you can change is your reaction. So, how can you change your reaction to your benefit?

No.1: Take a deep breath

The first tip for dealing with tough feedback is to take a deep breath and detach yourself from the situation. It doesn’t matter how crushing the feedback is. Never react defensively or aggressively. It can hurt, you may feel disappointed, but you have to keep your head calm and act like a professional. Taking a deep breath and gaining some distance are great first steps. If you are communicating over email, it is also useful to write the e-mail and save it for at least 30 minutes. Then, when you get back to it, you will have calm mind.

No.2: Seek first to understand

The second tip is to always try to clarify the feedback. You need to understand exactly what is the thing your client doesn’t like. This must be done before trying to explain or defend your position. Your ability to read between the lines is essential. Your goal is to understand what are client’s criteria for judgment. Then, you need to find why and how the web design fails to meet these criteria. Ask for specific things your client doesn’t like. Ask for specific examples. Go as deep and be as specific as you can. Remember, you need to get through the semantics straight to the core.

No.3: Direct the conversation

The third tip is to always direct the conversation to some solution. This can be basically done in two ways. First, you and your client will agree on the current form and shape. Meaning, you will not have to make any changes. Second, you and your client will agree on what changes you will make, and you make them. Offer solution for every issue or request your client has and ask if the solution is acceptable.

No.4: Solution-focused mindset

The fourth tip is to always present web design with solution-focused mindset. Your client is not your enemy. So, don’t try to turn the presentation into battle. Your goal is to end the presentation with agreement, both of you will benefit from. Present web design as a win-win. Show your client that you care about his business and you want to help him improve it. When your client will see genuine interest from your side, he will be more willing to consider different ideas and solutions.

Tips for getting better feedback

Feedback from our clients is a cornerstone of our work. It is also a crucial part of any collaboration between a client and a designer (you). The problem arises when you are unable to manage this feedback. Then, even if you get some feedback from your client, this feedback can be completely useless and your work will suffer. Can you somehow avoid this situation?

No.1: Plan ahead

For every project you will work on, you should agree with your client on a specific date he will provide you with feedback. You and your client has to take this date seriously. I also suggest that you notify your client about the feedback couple days in advance. You should also agree in advance with your client on the form of feedback. Some clients will want to give you their feedback over the call or in person. Others may prefer written form such as e-mail. Resolve these questions before getting in touch for the feedback.

No.2: Clarify vague feedback

One of the problems with feedback is that it is often vague. Vague feedback gives you close to nothing to work with. One thing to avoid this situation is to clarify what kind of feedback are you looking for. This is not about trying to manipulate your client to tell you only what you want to hear. That would be not helpful at all. Instead, provide your client with guidelines for giving constructive feedback. The most important aspect of actionable feedback is being specific.

Your client should tell you what exactly he doesn’t like along with specific reasons. Make it clear that feedback such as plain “I don’t like that green color” is not constructive . I suggest that you take the risk and tell your client you will ignore any objections lacking reasons. Otherwise, your client can tell your that “that blue button is ugly” and you’ll waste the next hour trying to figure out how to “fix it”. This is also waste of your client’s time and money.

The best way to change the quality of feedback your client gives you is to make him see the website from the point-of-view of the visitors and users. Tell your client that when they’re reviewing the project, they should put themselves in the shoes of the people visiting the website. They should think about what their wants and needs are. Keep in mind that it is easy to fall back into personal taste. When this happens, gently nudge your client into the right direction.

Also remember that our clients often don’t know how to provide constructive and actionable feedback. Why should they? They may have no prior experience with it. In many cases, you will be the first web designer they worked with. It is up to you to help your client understand how constructive feedback looks like. I know … Another responsibility on your shoulders.

No.3: Explain the design process

My third tip is to help your client understand your design process. Give your client a quick run-through on individual phases of your design process and what each phase includes. Also, tell your client that when you present web design, it is just another piece of the puzzle, another cog in the wheel. Your client will also know what adjustments will be more expensive. He will also understand that some changes will get more difficult with time.

Lastly, when your client understands all different phases of your design process, the project and your mutual cooperation will be much easier. He will know what to expect and when to expect it.

No.4: Problems first

Some of the clients you will work with will want to help by offering solutions instead of referring to problems. Unfortunately, this can make your work rather harder. Your client may really think that he is helping you, but he is not. For example, your client may suggest that you make the button bigger or font smaller. This is one of the possible solutions for certain issue, with button or font. The problem is that it doesn’t addresses the problem.

Tell your client that you need to understand the problem first, before you can find the best solution. So, when your client will start to give you solutions, ask them to re-frame their feedback. Ask them to frame it as problem or challenge. However, that doesn’t mean that you should conceive hatred for your client’s solution. All you want is to go a little bit deeper. You want to see under the surface because there can be some bigger problem that you may not see.

Looking back at the web design process

One of the main goals of every web designer should be understanding the difference between two things. The first one is well thought website design. Second is mockup for homepage. Someone who is not a web designer by trade can see these two things in the same way. This person will also see the homepage as the most important part of the website. This is what leads to his obsession with having pixel-perfect homepage (and good looking rest of the website).

As a professional web designer, you have to resist designing only polished homepage, even if your client is willing to pay you for that. If this was the first time you encountered web design process, give it some time. Everything is hard when you do it for the first time. The more will you practice web design process and how to present web design, the better you will get at it.

Depending on your work you may use faster, cheaper and more agile tools and methods. This will be mostly true for web designers working with or in design agencies. Web designers working with teams in bigger corporations will incline to slower pace and higher number of iterations. Another thing important for successful presentation and completing whole web design process is to never be afraid dead-ends. It is exploring these dead-ends what moves you closer to the finish. In other words, web design process is never linear.

The same thing can be said about budget and investments into the website. Skipping any of the four phases of the process can cost as much money as doing them, if not more. Sure, you can present web design with prototype based on your own assumptions instead of user research. However, the ROI of the web design will go down while the risk of failure will go up. Trying to estimate the price of web design by the number of wireframes, mockups and pages that you give to your client, is just nonsense.

Closing thoughts on how to present web design to clients like a pro

Last words? The only sure way to learn how to present web design like a professional is through trial and error. You have to try different tips and concepts and see which works for you and which not. The good news is that nobody was born with this ability. Just think about Steve Jobs. Many people would say that he was one of the greatest presenters (and sellers). Sure, he wasn’t interested in how to present web design to clients.

Anyway, what I want to say is that he spent hundreds of hours training and improving his presentations. He was still trying new ideas. He was willing to fail again and again and learn from these failures. This is what helped him brought his presentations to perfection. So, don’t worry. It doesn’t matter where your presentation skills are right now. With time and practice, you too, will present web design like a pro.

Do you have any questions, recommendations, thoughts, advice or tip you would like to share with other readers of this blog, and me? Please share it in a comment. You can also send me a mail . I would love to hear from you.

If you liked this article, please subscribe so you don't miss any future post.

Also, you can find me on GitHub , Twitter and Dribbble .

If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂

By Alex Devero

I'm Founder/CEO of DEVERO Corporation. Entrepreneur, designer, developer. My mission and MTP is to accelerate the development of humankind through technology.

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed .

• Mobile Forms
• INTEGRATIONS
• See 100+ integrations
• FEATURED INTEGRATIONS

• Jotform Teams NEW
• Enterprise Mobile
• Prefill Forms
• HIPAA Forms
• Secure Forms
• Assign Forms
• Online Payments
• See more features
• Multiple Users
• Admin Console
• White Labeling
• Contact Sales
• Help Center

Get a dedicated support team with Jotform Enterprise.

• Sign Up for Free

• 3 Ways to Present Your Client's Website Before it Goes Live

3 Ways to Present Your Client’s Website Before it Goes Live

You’ve used WordPress to create a fantastic website that exactly meets your client’s needs, and paid attention to all desires and requests. However, there is a hazard: your customer does not want the website to go live before he has seen it. Other customers ought to see the progress on the site on a regular basis. Either way, a proper method of presentation is needed.

Sign up for a free Jotform account to create powerful online forms in minutes — with no coding required.

In Advance: Check All Important Factors

There are multiple factors to consider when it comes to keeping your customers up to date the best way possible. For example:

• How much time will it take the client to check the website?
• Will the customer conduct a purely visual or in-depth test?
• For how long should the preview be available? The longer you allow the client to test, the more comments, wishes, and requests you will receive.
• How long will your method of presentation take?
• Can you match the schedule with your client and set up an extended live demonstration?

There are many ways to approach and solve this issue. The final choice depends on the customer, your preferences, the workflow, and the purpose of the presentation. In this article, we focus on three methods that you could choose for the display.

Method 1: Keep the Website Local and Present it Live

The Direct Presentation of Your Work During a Visit of Your Client.

The easiest and best method when your client doesn’t have a lot of time, and only wants to gain a quick overview. Just keep your website on your computer and start a presentation using a tool like Teamviewer or Google Hangouts, for example. Now, your client can see how you present the website on their computer.

Of course, you can also meet up with your client. This lets you show him the website directly on your notebook, allowing him to test it first hand.

A personal meet up should be a good choice when it comes to approving the website.

Method 2: Put the Website Online and Protect it Via Password

A live presentation is not always the optimal way for every client. Another obvious option would be the migration of the website to a web server. The website can then be protected from unauthorized access via password. The site can only be viewed after entering the access information.

However, to do so, a hosting method needs to be found first. Of course, it is possible to host the website on your server for a short time to assure a presentation. That wouldn’t be clever, though. The smarter solution will be hosting it directly on the client’s server if he happens to own a website already.

If the client does not have a website yet, he also needs to own a server or web hosting package to be able to host the website you created. Thus, the preview site should be hosted using that. You could directly set up the site with a sub-domain of the future live website.

Afterward, add a password protection to make your client happy. However, you should prevent the search engine from indexing the preview website. To do that, move into “Settings > Reading” in the WordPress admin panel and place the according checkmark.

The majority of customers will love this type of presentation. That’s because it allows them to look at the website when they have the time to do so. They don’t have to agree on an appointment at a time that could’ve possibly been used more effectively. On top of that, it also has the advantage that the client can test the website on different devices.

The Bad News:

The client could easily put all of his free time into checking your website and might end up pelting you with suggestions and requests. Additionally, change requests could occur even after a previously defined testing period.

The Solution:

If you end up choosing this method, agree on a very precise period of time in which the website is available to the customer. Afterwards, the website will either be removed, or the password will be changed.

Adding Password Protection to Websites:

There are many WordPress plugins that are capable of blocking a website, and equipping it with an access protection. Two examples of them are Maintenance and Maintenance Mode . Both plugins are in active development.

Method 3: Install the Website on a USB Stick

When your client wants to take his time for an in-depth site test, but an online demo is out of the question, this option might be the one for you. All you need to do is install a local server on a USB stick, and subsequently, migrate the website.

After that, all that’s left to do is hand the stick to your client, alongside a guide on how to start the server, and how the website is accessed. Sounds complicated? It’s not. By now, there are good solutions to this problem, and you could use Xampp or Instant WordPress, for example.

If you were to use Xampp, make sure to not use the installer during installation, but instead, only copy the unzipped packages onto the stick.

You are not sure whether it is a good idea to give the customer the preview option via USB stick?

Here Are the Pros:

• The website is completely offline, and there is no way to accidently make it accessible to the public.
• The security: you client can’t change anything about the website. If he were to play with the stick, no real damage could be dealt.
• Customer friendly: you customer can take a look at the website at any time. He is not bound to appointments, and able to take all the time necessary to review the website.

Of Course, There Are Cons as Well:

• Out of all three methods, this is the most complicated one. It takes time to realize, as not only does the website have to be migrated, but it is also necessary to install a local web server on the stick.
• There is no solution for Apple. Thus, both you and your client require access to a Windows computer.
• The solution is not suitable for every customer. Customers with a little bit of technological knowledge would be needed.
• You give away every bit of control over an appropriate testing period.

Choosing the right method of giving the client a control option is complicated. There are too many things to consider, and every customer is different. However, it is generally advantageous when the choosen method contains a very clear testing period, and guarantees you qualified feedback afterward.

RECOMMENDED ARTICLES

Population vs sample in research: What’s the difference?

Retail QR codes: How to use them effectively

How to build a restaurant app without coding

How to market a hospice program

9 examples of ranking survey questions

Social media survey questions: Examples and best practices

Organic vs paid marketing: Why you should use both

How to create an employee QR code time clock

SharePoint vs DocuShare: The pros and cons of each

Google Workspace Business vs Enterprise

Send Comment :

3 comments:.

I don't know why "Online presentation through Screen sharing " is not included into the list. and why we have included thumb Drive, do you think thumb drive can contains LIVE HTTP servers if website is required to run?

I just put it in a subfolder and add noindex tag. Any reason not to do this?

i prefer the solution via password online.

Thanks for verification!

Jotform Blog Newsletter

Life Without Pants

Jan 5, 2016

Web design. How to present your work. And why a good presentation matters (a lot).

At Proof , my branding agency, we preach (and practice) the importance of explaining the why behind the what in our creative work. In this case, I’m primarily referencing our web work, but the concept really does apply to anything within the creative services spectrum, and, as you’ll read here, many of the “lessons” apply to presenting virtually anything you’d ever be asked to present in your career.

A product without purpose is empty. Design without intent is a dead- end. It’s a pretty thing that sits on a shelf and collects dust. It doesn’t convert. It doesn’t inspire. It doesn’t contribute to tangible, positive results.

“How does it work? Why is it the way it is? What do we intend the user to do? Why should they care. What next? What now?”

These are all questions we seek to answer both during the creative process, and when it all comes to head in presenting to the client. A few key themes always (should) come up.

→ Prioritize.

What is the most important thing for the user to do? What is the *one* things that the user absolutely must do before leaving the site/page/section?

→ Show the flow.

What happens when I click? What’s the next thing I see after I do _______? Recently, we moved away from the more traditional model of having the client approve the homepage first, followed by interior pages — to a model that involves us presenting all of the primary pages on the site at one time. Why? So we can explain user flow and articulate “if this, then that.”

→ Scale. Scale. Scale.

A common mistake in web design mockups is designing everything to (only) fit into a very perfect layout. Even if you do have all of the final content in-hand before heading into the design phase (big “if” there, no matter how strong your process is), everything should be designed with the ability to scale. What if the text is longer than expected? What if a blog post doesn’t have an image? What if they want to remove a section entirely? Remember that a website is much different that a “finite” print piece, and scalability/flexibility must be a consideration from the beginning.

→ Re-enforce the user.

One of the deadliest traps to fall into is asking the client, “ do you like it? ” While we, of course, want our client to love everything we create, they should like it because it works. Because it’s what’s best for their user (something we define very early in the process). Remember, through all of this, you’re not designing for the client , you’re designing for the client’s customer/supporter/client/user.

A few other quick words of wisdom on enhancing your presentation skills:

• Smile. Nobody likes a sourpuss.
• Rehearse. Doing your homework makes you look really, really smart.
• Use the client’s name. It matters. A lot.
• Make eye contact. Also matters a lot.
• Eliminate disqualifying statements. Never “it may”, always “it will”.
• Get excited. The simple act of saying, “I/we love it” can and does go a long way.

Clients will like you, trust you, believe you, and believe in what you create if you’re confident, clearly understand the problem, and are able to articulate solutions. Explaining the “why” behind the “what” is important, and being a genuine, positive person that your client feels comfortable with matters a lot. Now go give the best presentation of your life!

→ I’d love to connect on twitter and instagram . And, to stay in the loop with my work, life, and writing endeavors, subscribe to my newsletter . ←

More from Life Without Pants

Opinions and thoughts from entrepreneur and Saved by the Bell aficionado Matt Cheuvront. Work smarter. Live better. Pants optional.

About Help Terms Privacy

Get the Medium app

Matt Cheuvront

Entrepreneur. Writer. Saved by the Bell Aficionado. Say hello: @mattchevy. http://proofbranding.com

Text to speech

Presenting New Website Ideas To Consumers Plays A Crucial Role In Success

How to win over new consumers by presenting them with your new website ideas ahead of time. Check out these tips by Barrack Diego and win over consumers.

If you want your web site to be a success and your web design efforts to be high yielding you will need to focus on the best ways that you should follow to present new ideas to the clients regarding web designs . This ideally has become a bit easier in 2019 especially with the introduction of the Mockup Page and other tools .

A Mockup Page is essentially a SaaS platform that will enable you just like any other New York City web design firm to explore quickly the new ideas and present them to your clients. Previously, when you met with any client discussing different ideas you needed the website to be open in the browser and scroll up and down the page while exploring the ideas. Later on, you had to document these ideas on a separate sheet to discuss with your team in the future.

Now you can change that process with the fact that:

• When you open the webpage of your client you simultaneously open a new tab
• At the same time login to the Mockup Page and
• Enter the webpage URL in there.

This process will load the page in the browser window and will at the same time allow you to make the changes on the editable page right there. This means that you can modify the current page on the fly and side by side also make the changes on the editable copy.

This will not only make your job a lot easier but at the same time will ensure that your clients have a new level of engagement.

Be professional and confident

It goes without saying that when you present your clients with the new or redesigned website, you will need to be confident and professional at the same time. The main idea is to sell the website to your client along with your ideas . It is for this reason you will need to be composed when you present your ideas and the feedback.

Though there is no special formula to pitch yourself successfully, there are a few specific behavioral guidelines to follow apart from dressing like a pro:

• Act like a moderator during the discussion phase ensuring that you lead the show. Also make sure that, you represent each part of your web design along with its direction most objectively. You must make it look like you are or were not the designer.
• Emphasize on having an open discussion allowing your professional opinions supersede that of the others present in the discussion and talk more about your works and each direction of it corroborating each with a strong logic and reason as to why you think it to be the perfect approach.
• Also, time and again ask your clients to know their opinions and be genuine and open to their suggestions, opinions and especially their concerns. You should not be persuasive about a particular design even though it is your favorite one you are most comfortable with it. Do not be married to your work but be a champion for your clients so that you can help them select their chosen design that they think will work for them the best.

Last but not least, be humble and do not ever berate your own work and do not anticipate rejection by undermining your own work. Yes, it is good to show but it is better to stand by.

The design phases

You will also need to focus on the different phases of your website design while creating a relatively standard site. This is where most of the web designers come up with the mock up pages to:

• Present the ideas to their clients
• For slicing or coding the design
• To deal with the issues that may arise while designing and
• Ask the community about how they actually present their web site design ideas to their clients.

You will need to go through these responses, filter and summarize them as well before presenting these to your clients.

There are lots of ways in which you can do this and every method has its own individual advantages and disadvantages. These are:

• Discussing the problems: As most of your clients will be web-savvy individuals, it may be quite easy and simple to convey your message to your clients. Ideally, the mock-ups will be simply static images to show what a site will look like and therefore it may be really difficult for the web designers to convey the message more comprehensively to their clients.
• Consider send a JPEG or PNG through email: This will significantly help you to explain things in a much better way. However, remember that most of the users will have small screen resolutions and therefore you must make sure that the pictures in the site do not shrink.

The best way to present your web design ideas to your clients is to use some sort of web-based application that suits your web design and purpose.

Meeting the challenge

There is one significant challenge that every web designer knows that will come up and they will have to handle it. This is the case with every great and hard-working web designer.

• This is the knowledge about the design process as well as its different phases without which a designer cannot produce a complete, comprehensive or sustainable site design.
• Secondly, if you want to deliver amazing results as a web designer you will need to know how exactly you should work with colors. You will need to know the psychology of your clients and put it behind it to show how it works best in the design.
• Knowledge about the history of graphic is something that you should know as well so that you can relate to your design theory.

However, unfortunately, all the web designers do not possess such skills and therefore they cannot perform well in reality. It is this area that you should work on to acquire such skills and knowledge in order to present your web design to your client in the most convincing manner.

Author Bio:

This article was written by Barrack Diego.

Other related articles

• How to get more Retweets
• Best Social Media Tools for Nonprofits
• Effective Social Media Marketing for Nonprofits

You have a story to tell. We want to help.

Let’s create memorable content and reach tens of thousands of people.

No fixed costs. You decide how much you donate.

Designer News

Designer News is where the design community meets.

How do you present your proposed web design to clients?

over 8 years ago from Erick De La Rosa , Designer

I have some mockups ready to present to a client soon. I am working on redesigning their current site. How do you generally go about presenting your work? Do you meet in person, make a presentation, send jpegs, or make a pdf?

My client seemed a bit attached to his vision for the redesign, so i am leaning toward meeting in person to justify my design choices.

Curious to know how everyone does it and why they think it works for them.

Login to Comment

You'll need to log in before you can leave a comment.

Register Today

New accounts can leave comments immediately, and gain full permissions after one week.

14 comments

I would definitely meet in person with just jpgs or a small preso depending on the type of client. Super important to have clear 1:1 communication, physically walkthrough and show your thinking and decision making so your client isn't jumping around everywhere, and I think most importantly your body language will help you sell YOUR VISION. Also being there and taking notes will help ease any client concerns if they think "you missed the mark".

Hope this helps.

I agree with presenting JPG images of designs. Sometimes I will review from the PSD and use layer comps or open the AI file, but when you do that you allow the possibility of opening a can of worms. The client may start asking you to tweak or change things during the meeting (Make the logo bigger!). You really need to read the client and get to know them before allowing that option when it comes to meetings as things can quickly spiral out of control.

Totally agree with this.

I never make changes in the room with the client. It's just asking for them to either go down the rabbit hole of tweaks, often based purely on aesthetics.

I always present in person and don't send anything over beforehand - I don't want them to have the time to dig dip into design decisions without being able to explain them.

Also, incredibly helpful read: http://muledesign.com/2014/09/13-ways-designers-screw-up-client-presentations/

Thanks for this. Design is a job was one of my favorite reads and has definitely been a book I go back to when running into situations when you involve clients.

I always present my work in person. Luckily we have a lot of clients that are willing to come to our studio for the presentation, which means I have total control of the hardware. Otherwise I take my own high quality beamer with me.

I used to only present my designs as images in the browser (I wrote a small presentation script that I use for this), it gives a more realistic view of how the design will eventually look. But we struggled with more interactive/dynamic designs which we now present in a keynote presentation. It enables us to show transitions/fixed elements/etc.. It works for us.

That's great. I haven't used many prototyping apps like Invision yet, but this at least gives me the idea to set up a nice keynote to be able to show some interaction.

Although Keynote might not be very powerful, it's really easy to get to know and gives you (us) enough possibilities to get the idea across. A little tip: Magic Move is your friend ;)

Present in person when possible. If not, then be on a phone call walking the client through designs. You can call out specific areas of the design to justify your decisions in real time.

When presenting mockups, I generally put them into InVision and make them clickable. I also provide comments on key areas where I think I need to defend or further explain the design.

Walk through these mockups first with the client. If you can't meet in person and are on the phone, send over the link about 10 min before the call.

And, above all else: be prepared to defend your work.

I feel so dumb. I didn't even thing about inVision. Thanks for the tips!

Marvel works too.

This is the process I use too. In the event I can't meet the client in person, a conference call + InVision helps illustrate the concept to the client and you can get real-time feedback.

Nothing beats walking through the work in person.

I'm definitely seeing how it can be the only way. If possible of course.

Now playing

Where the design community meets.

Designer News is a large, global community of people working or interested in design and technology.

• Top Stories
• Recent Stories
• Post a Story
• Remote Jobs
• Design / Dev
• Top Companies
• Terms / Privacy

© 2023 Designer News Ltd.

Have feedback?

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

• Adobe Deals
• Tools & Gear

JUST Creative is supported by its audience. When you purchase through links on our site we may earn an affiliate commission. As an Amazon Associate we earn from qualifying purchases. Read our trusted review process & how it works here.

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

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

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

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.

• Photoshop Mockups vs Client Expectations
• Improve Your Creative Process, Better Design, Quicker Approvals
• Why Give Clients More Than Just One Mock Up?
• Live By The Mockup, Die By The Mock Up
• Client Web Site Mockups & Comps: Do you Bother?
• Design Mock Ups Don’t Work

Those already linked to in this article:

• Managing Mock Ups
• Design Isn’t About Tools
• Why We Don’t Skip Photoshop
• Design, Mock Ups & Tools

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?

Related Articles

103 thoughts on “9 of the best ways to present a website to a client”.

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!

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!

Thanks for your post – the infos are very good!

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.

Styletime, 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.

Markus, 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.

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

Selene, 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.

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

Werbeagentur, You’re welcome.

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.

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.

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

Also a very informative post.

Keep up the good work!!

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 !

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

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

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

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.

Really good stuff! I always struggle with how I should show proofs to the client, glad to see I’m not the only one.

Andrew Houles last blog post.. 2 Incredibly Entertaining Animations

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

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.

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

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!

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

Excellent Post, you just made it easy for the rest of us =)

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”

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.

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!

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.

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

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.

Adelle, Thank you for the digg and praise 🙂

JamieO, 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?

Matt, 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.

Nick, How detailed are your sketches?

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

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

Max, 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.

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!

Good info – In a former life, I did some of these presentions and always fell back on the pdf. It gave clients something to carry around the office and get feedback on. Thanks for the thoughts.

Ava Semerau And God Was Please: Principles for Creating Christian Success

@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…

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

Great suggestions!

At our office we prefer to send 1 pdf with multiple pages to clients. We save 72dpi jpgs from AI or PSD.

Does anyone know how to get Acrobat to display them at 100%? It seems to blow them up and the quality looks crappy.

Carolins last blog post.. “Green Space” named finalist for magazine award

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?

Very informative and useful post. Thanks for sharing it.

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?

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.

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.

Selene, 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 😉

Carolin, 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.

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

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

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

Carolin, 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.

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

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.

BJ Scheid, Thanks for the info on Adobe Thermo, I wasn’t even aware of it!

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.

I love this post. Thanks!

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! 🙂

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!

Thanks Mike for your input! Your dummy page could be improved possibly by using the ‘design studio’ method.

are we really having a discussion about how to present a website to a client?

Thanks you very much. Great list for me Keep up the good work !

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!

Thank you Vishu! A great service.

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.

thanks, very useful stuff there, thanks for sharing it

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.

Great post. Keep sharing.

Thanks for advice.

theclientspace.com is an option

I created a Design Slideshow – it keeps the images all together in a series of clickable thumbnails, and makes the image scrollable as if you’re viewing an actual website. Here’s a sample: http://yourcompany.theclientspace.com/ds/dental and here’s more info about the service: http://www.theclientspace.com/design-slideshow

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

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.

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

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.

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

This is post is old, But old is just like gold for me. Keep posting…..

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

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

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

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

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

New India Solutions is the best Web Design & SEO Service provider in New Delhi, India providing top rankings for different projects.

seo services delhi

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 .

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.

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!

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

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.

InstantShift - Web Designers and Developers Daily Resource.

• Free Themes
• Freelancing
• Graphic Design
• Illustrator
• Inspiration
• Photography
• Even More...
• Infographics
• Even More…

How to Present a Web Design to the Client

The success of your design relies not only on your ability to create something visually appealing but also on your ability to sell it.

As a professional designer, you should know how to communicate with your client and present your product in the best possible way. The better your presentation, the better chance your project will be approved.

In this article, we’ll share some secrets of an effective presentation and some tricks to make your clients fall in love with your work. We’ll start with the number of options you should present your customer with.

How Many Design Options Should I Present?

Sheena Iyengar, a world-renowned expert on choices and decision-making, says that a variety of choices may draw consumers’ attention but at the same time overwhelm and confuse them. That is, given too many consumers will just pick something even if it might not be the best option.

Why present multiple options including ones you’re not so sure about? If you offer too many options, your client may very well ignore your favorite design. This is why we recommend presenting only the final prototype.

This doesn’t mean you should show just one picture, though. Tell the whole story from the very start, providing snapshots of your project at various stages. Explain the decisions you’ve made and how they meet your client’s business goals. Guide your client through all the iterations you’ve gone through to come up with a solution to their problem. This will speak to your expertise and prove that you’ve not simply redrawn an existing design but rather performed a large amount of work.

The main character in your design story is you. Clients will watch and judge you by your words and actions. Therefore, you’d better think about what you’ll say in advance.

(adsbygoogle = window.adsbygoogle || []).push({}); How to Charm Clients with Your Presentation

Sometimes, when presenting your design, you can set off a flurry of speculation, disclose too much information or make your client bored. Obviously, that’s not what you really want to do. If you want to deliver a smooth presentation, try to arrange it using these five steps:

#1. Formulate the Problem

What should you do first? Set expectations for your audience: announce what your clients are about to see and what they’ll get out of it. Formulate the problem posed at your first meeting, the assignment you’ve been working on (e.g. to create a fast and great design for a web fitness app), and the approaches you’ve used to handle this problem.

Alternatively, you can start with a quick recap of what your clients have already seen: the last design, an existing product or a re-designed item. You may also touch on the last feedback your clients gave. By doing this,e you’ll lay the groundwork for your main presentation and avoid needless questions.

#2. Address Your Client’s Business

Try to make your presentation more personal. Discuss your client’s brand and their target audience. Your aim is to show that you understand your client’s business. Suppose you’re designing a website for the Soft Blankets company. This website needs to reflect the company’s range of products and prices as well as convey a feeling of warmth and coziness to customers.

You can enrich both your mockups and the final design with your client’s company photos instead of stock photography. For instance, if you’re building a charity website, real photos of a charity auction the company held will have a much bigger impact on your clients and their prospective patrons.

#3. Describe the Design Process

Give a short description of each individual phase of your design process and talk about the information you’ve gained. You should underline as well the ways you leveraged this information to improve the overall design. Here it’s quite important to present the design components as benefits for your client’s business. For example, you might explain that you used more red for a fast food website as it increases a customer’s appetite and may encourage customers to order more food. Now the secret of McDonald’s and KFC is revealed.

#4. Hold a Conversation

A design presentation is a conversation. If you want to get informed feedback, answer questions when they arise and explain anything your client has missed. Make sure that your presentation is clear to your client and that you’re on the same page. Besides, constructive dialog may bring new ideas and solutions.

#5. Gather Feedback

The last and probably most important step is to obtain feedback. Give your clients some time to appraise your work. The time you need to wait depends on your client, their workload and the size of your project. Obviously, large projects take more time to review than small ones. Don’t panic if your client doesn’t respond in the first three days. The website you’ve designed is a big part of your client’s business and they need to be sure it will win their audience.

How to Collect Feedback the Right Way

Sometimes, however, you may work hard and still receive feedback that’s useless or that you can’t manage properly, or the response may take months. How can you avoid such a situation and set the right direction for your clients? Just follow these tips.

1. Plan Ahead

We advise that you clarify all issues prior to collecting feedback. Set a specific date on which your client will provide feedback on your work. Take this date seriously. It would be nice from your side to remind your client about the feedback date a few days in advance. You should also agree on the form of feedback – whether via call, email, or in person.

2. Ask Focused Questions

Quite often, design presentations turn entirely into discussions on content. Clearly, some content discussions are expected, but your client shouldn’t devote all of their feedback to this theme. If you want to get useful feedback, ask specific questions and direct conversation to what you’d really like to hear feedback about.

Don’t ask your clients “What do you think?” Instead, ask them whether this concept meets their business goals or in what ways it fails to do so, or ask them whether the color palette fits the brand positioning.

3. Grasp the True Meaning

While commenting on your project, clients frequently propose solutions rather than point out the problem: “Can you make this button bigger? Can you add more green?” Your task is to identify the core problem or challenge hiding in that feedback.

Always ask them why: “Why do you want this button to be bigger? Why do you think that more green will be better for your website?” Dustin Curtis, founder of Svbtle, asks at least three questions to his clients about their opinions.

4. Apply Logic and Cite Famous Brands

If you don’t share the same opinion as your client, don’t start to criticize and discredit them. Back up your arguments with facts, studies and research instead. Let these facts speak for themselves. Additionally, you can cite famous companies as examples.

Imagine that your client asked you to reduce the font size from 22pt to 12pt. In this case, you could respond with something like “That’s an interesting point. But you know, I recently read a study showing that larger font sizes can arouse stronger emotional connections with a brand. By the way, Medium also uses 22pt font.”

And don’t use phrases that fall into the “I told you so” style. Try to show empathy: “Yes, I was shocked when I heard this too.”

5. Respect Your Client’s Opinion

Even though you likely have much more experience in web design, your client still knows their business better than you. It’s they who will be using the design on a daily basis. So they need to feel comfortable with the website you’ve designed.

If your client remains unsatisfied with your design, revise your work together. Try to find a compromise and adapt the design based on your client’s feedback. Remember that symbiosis of your client’s knowledge and your experience may bear a genuinely successful product.

Now you already know the theoretical part: how to act and what to say while presenting your design work. Yet it’s not clear in what form you should frame your design. What should your prototype look like?

What Type of Prototype Should I Choose?

We can’t give you a universal answer and say “just draw it like this.” But we can ease your job by offering you some handy tips about prototyping flow. We advise you to choose the type of prototype and the tools you use to create it based on the design stage you’re currently in – either the early stage or the final stage. Let’s take a closer look at both of these stages.

Early Stage

The early stage is when you think through the logic and functionality of the website: layout, features, connections and transitions. With your target audience in mind, you form elements that will make the website intuitive for users. Your main goal is to check the product’s operability.

Therefore, at this stage, you can present a low-fidelity prototype in the form of simple schematic screens usually in basic colors and without visual effects or details.

To design a low-fidelity prototype, you can try out the following tools:

• Wireframe.cc – One of the most basic tools that designers can use to create wireframes. Its main advantages are its simple interface and the possibility to start designing wireframes immediately without any signup.
• Moqups.com – A web app that helps you create wireframes, mockups and prototypes. Moqups offers a built-in library with thousands of icon sets, cloud-based storage, and comments and feedback features.
• Pencil Project (pencil.evolus.vn) – A free and open-source prototyping tool for both desktop and mobile platforms. Pencil Project provides built-in collections (shapes, flowchart elements, etc.), diagram drawing support and inter-page linking.

With a low-fidelity prototype you need to be careful, as you can face misunderstandings and negative remarks from your client’s side: “Why are the screens so simple? Why did you use such a poor color scheme?” If this happens, take the time to explain to your client what the UX is and how it’s important for their product – that UX is the heart and soul of their future website – and that this prototype is far from the final version.

Final Stage

At the final stage, you need to deliver a high-fidelity prototype to your customer: add interactive elements such as micro interactions, navigation from screen to screen and other animations.

A high-fidelity prototype is a computer-based interactive representation made as close to the final design as possible (in terms of details and functionality) to allow your client to examine the product’s usability and make conclusions about user behavior.

High-fidelity prototypes let you feel transitions and functions of the website more realistically than low-fidelity ones and reveal potential bugs or difficulties at this stage before creating the UI.

If you’re not sure what tools to use to animate your prototype, try these:

• InVision (invisionapp.com) – A digital product design platform that allows you create interactive prototypes in a matter of minutes. Using InVision, you can create stylesheets and generate real code for any design element. Moreover, InVision lets your clients, team members and stakeholders comment directly on your designs.
• Adobe XD (adobe.com/products/xd.html) – The all-in-one UI/UX solution that helps you turn your static layout into an interactive prototype in one click. Using Adobe XD, your prototype updates automatically with every change you make: no syncing required.
• Principle (principleformac.com) – A prototyping tool that lets you design animated and interactive user interfaces no matter if you’re designing the flow of a multi-screen app or new animations and interactions.

Are You Ready to Present Your Web Design?

The form in which you present your design depends on the kind of product, what design components you’re presenting (e.g. layout or functionality) and the stage of the design process you’re in. At the early stage, you can stick with low-fidelity prototypes, whereas the late stage requires you to approach the final product as soon as possible and deliver a high-fidelity interactive prototype.

Of course, the success of your presentation lies in your confidence and the data you possess: keep facts and logic-based arguments at hand to support your opinions. And don’t be afraid to ask your client “why?”.

Have you tried any of these tips? Do you know any other secrets for a winning presentation? Share your thoughts in the comments below.

(adsbygoogle = window.adsbygoogle || []).push({}); Like the article? Share it.

Daryna pukha.

Thanks to author For providing such great information with us

Nice sharing. I really appreciate your article.

I really need this information. Thank you sharing tools like Wireframe.cc . Now I am clear what I have to do.

Leave a Comment Yourself Cancel reply

Your email address will not be published. Required fields are marked *

Name * (please do not use a spammy keyword or a domain as your name, or it will be deleted.)

Save my name, email, and website in this browser for the next time I comment.

• Useful Links
• Become an Author
• Follow us on Twitter
• Advertise with us
• Popular Articles
• 88 Brilliant Examples of Forced Perspective Photography
• 21 Most Used Fonts By Professional Designers
• 30 Most Wanted WordPress Comments Page Hacks
• 21 Free Music Players For Your Website and Blogs
• 20 Corporate Brand Logo Evolution
• 99 Amazing Widescreen Wallpapers To Spice Up Your Desktop
• 46 Creative & Free Drop Down Menus in HTML5 and CSS3
• 80+ Strange and Fantastic Buildings Architecture
• How to Create an Article Directory Powered by WordPress to Get Leads Sales, Commissions and AdSense Revenue
• 104 Free Fonts for Web Designers and Logo Artists

About InstantShift

Useful links:, connect with us:.

• Become a Facebook Fan