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