website design presentation to client

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.

When presenting a web design to a client, there are 3 main goals:

To go from design to approval as quickly as possible
Not receive useless feedback that doesn't improve the quality of the project
Look professional

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.

Luckily, we can help make this process faster by how we choose to present our web design mockups to clients and communicate with them during this process. When we don't communicate what to expect or present the web design in a way the client can understand, we hear questions like:

"Why is there so much white space around the website?"
"Why is the website so small?"
"Why doesn't anything work?"

With that said, there are a few tactics to keep in mind that will help you achieve just that.

#1 Never send the design and wait to hear back

One of the worst things you can do is simply email over your design and wait to hear back. not only our clients busy and this can dramatically delay feedback, this also does not help give you specific feedback that would actually be helpful to your project.

#2 Present live

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.

#3 Remind clients of their initial goals

At the beginning of your web design project you should have discussed your client's goals for the project. Were they looking for more email subscribers, more product sales, more leaves filling out a form, Etc.? as the designer you are creating a website around their specific goals.

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.

#4 Never ask if they like it

Your presentation should be intentional. he never want to ask the client simple questions like "do you like it?" this gives them an open opportunity to give you a million and one changes they would like to see that may not improve the effectiveness of the website.

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?"

Alright, let's look at the different ways to present a web design to clients.

1. In person

If you're fortunate enough to have local clients, presenting your design in person is a great way to receive immediate feedback, see the clients reaction and finalize a design before leaving.

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

The best case scenario is all ways to present Your design live. This gives you the opportunity to explain your design and keep the client focused on what is most important. How's the web designer you have created the website to help them generate more leads and clients needs to be reminded of this while looking at a design as they are more likely to be concerned with small elements including colors, insignificant layout choices and more.

Use Skype or Zoom for these meetings.

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.

If you just want to record a video, you can also use Loom to easily do so.

4. Visual website feedback tools

If you aren't using WordPress or would prefer not to use a plugin, there are some excellent visual website feedback tools available such as BugHerd. BugHerd is an app that lives on top of the website and feedback can be given using a "sticky" to help you find the issue or receive the feedback. You can use it via the BugHerd browser extension or by installing a Javascript snippet. This can also be a lifesaver when working as a web designer – web developer team to coordinate feedback.

BugHerd's Feedback Tool for Websites

Usersnap and Pastel are other good options.

5. Use client dashboard

As a web designer you are probably using at least a handful of tools. This can make it difficult to stay organized yourself let alone be able to keep track of what the client is sending you and help them keep track of what you have sent them.

Enter Client Portal.

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.

From within the dashboard you can link to the web design prototype and use this on your live call or by notifying the client.

See a Live Demo of Client Portal

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.

And this scenario, page Builders like Elementor, Divi and Thrive Themes are used.

Especially if you are redesigning their website or making changes to a live website, using a staging site is common practice. Tools like Flywheel's Staging Sites, which has been created specifically for web designers, can help get this job done easily.

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.

Once you're ready you can share what you have created with clients and collaborate on them within Invision. You can even present and share the design with clients in real time.

UXPin and Webflow are other great options to consider.

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:

Review and comment
Callouts
Linking to an alternative version
Comment actions
Full screen presentation mode
Sharing via an interactive PDF document
Sharing PNG images

Moqups is another good wireframing option.

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.

See a live demo of Project Huddle here

10. Use a Jpeg

What is probably the fastest and easiest option to present your website mock-up is to Simply Save the design as a jpeg and then either email it to the client or wait to pull it up and share your screen when speaking to a client.

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.

To get around this you can also export the image as a PDF which is a very common file that most people can better understand it will appear.

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.