Jump to what you came for:
- The 2 traps that make web design projects drag on forever
- How to deliver web design projects like a pro
- The 4 smart and easy formats to deliver web design mockups
- How to tighten up your web design service agreements to save you time
First, I want you to make a mindset shift.
If you’re calling yourself a freelancer – you should stop.
Instead, start thinking of yourself as a business owner or a one-person agency delivering a specific service.
And your goal as a business owner is to:
- Deliver work that creates the bridge to your client's goals.
- Keep things moving so you can move on to the next project.
- Control the relationship and run your client through your process.
You can be a world-class designer — but it’s those with a solid client process who win.
The 2 traps that make web design projects drag on forever
Trap #1: Sharing your design, and saying – “what do you think?”
The biggest mistake designers make is not controlling the client relationship and presenting designs without context – and asking clients:
“Let me know what you think.”
Not only will this leave your designs out in the open like fish food in a shark tank…
You're not explaining what lead you to the design, why things are in certain places, and the results your design looks to achieve.
This isn’t the client's fault – it’s yours.
(Don't panic – in a moment we’ll dive into how to fix this.)
Trap #2: The client doesn't understand the deliverable.
If you’re sharing your designs with non-technical clients and using preview sites, JPEGs, or static images.
They might struggle to understand this phase between design and development, asking you:
- “Why is there so much white space?”
- “Why do the images look funny?”
- “Why does nothing seem to work?”
We know these details aren’t important, but you might want to mix and match your methods of delivery or brief your clients before sending.
(We’ll cover delivery methods in a minute too.)
“So how do you deliver projects like a pro?”
You should present web design mockups live when possible
You can use something like Google slides and Zoom to do this. And if the idea of presenting live web design mockups makes you squirm in your chair…
I used to feel the same. But once you’ve done it a few times, you’ll get the hang of it.
Plus it boasts two BIG benefits:
1. Presenting live lets you sell the “why” behind your design.
In sales, there’s a technique called “diagnose and prescribe.” When presenting your designs to clients, you get the chance to remind them of their initial goals (the diagnosis.)
Then dive into your design choices to meet your client's needs (the prescription.)
This is huge.
Instead of sharing designs without context, you can explain why it’ll benefit them to achieve business goals.
2. Presenting live helps avoid dumb, unactionable feedback.
Sharing a design without context puts your client in the mindset of–
“I’m going to find something to say about this”
It’s human nature.
And over email or asynchronous methods, you can’t ask instant follow-up questions which can lead to weeks of silly tweaks.
With live presentation, you can ask follow-up questions, find the why behind your thinking and be the expert (you are) to help and find a solution.
What if a live presentation isn’t possible?
1. Using asynchronous video to present web design mockups to clients
Presenting web design mockups with asynchronous tools like Loom lets you present ideas like would in a meeting, but in sharable video screencast format.
The benefits are:
- You can walk your clients through the whole design.
- Explain the why behind it and how it’ll help them reach their goals.
- Walk them through inspiration you took from other places.
All in less than 10 minutes!
The downside of asynchronous communication is that asking follow-up questions is harder and feedback isn’t instant.
But you can pair this method with tools like Notion, Invision, Figma, and Markup where clients can view the design files and leave feedback.
This is great for sharing progress with clients and getting approval without having to hop on a meeting.
(If these tools are new to you, stick around as we dig into them in a minute.)
2. Annotate web design mockups for clients
If for some reason, recording a screencast isn’t an option – your last ditch is annotated web design mockups.
You can do this with PDFs or inside tools like Figma, Balsamiq, Markup, and Invision, but this is super slow – and communicating the why behind your design is challenging.
You're FAR better off opting for a live presentation first, followed by asynchronous video tools – or a hybrid of both.
4 formats you can use to deliver web design mockups
Alright, so now you know how to present your mockups. But what formats can you use to present them? Do you opt for JPEGS, design files, PDFs, or live web previews?
Truth is — you can use a mix of formats to support your live presentation or asynchronous communication.
Let’s explore your options to help you put together your delivery process.
1. Responsive web design mockups
JPEGs are a great no-fluff way to deliver, you can hit export in your design tool and get a mockup ready for sharing.
But JPEG web design mockups can distort images and create extra white space.
While this is fine, non-technical clients may worry about how this translates to the final design.
To stop this, I recommend pairing JPEGS with 1 - 3 web design mockups on different devices to show how it’ll look in real life (like in the image above.)
You can do this with Mockuuups Studio. Download the app or Figma plugin – paste in your JPEG – and your design formats to the entire collection for export.
Or you can try out our web tool to get a selection of mockups totally free - mockup.new (bookmark this.)
2. PDF web design mockups
PDF web design mockups make a great delivery addition to help avoid confusion from non-technical clients. While the mockups look the same as JPEGS, most people know what a PDF is and won’t expect it to function or look super accurate.
Plus it’s easy to add context with PDF annotations in tools like the Adobe suite or native Preview app on the macOS.
3. Figma and design tool preview sites
If you design in Figma like us, you can share design previews – the benefit is it looks super realistic and gets its own web link.
Plus there’s support for clients to leave comments and for you to annotate.
And if you’re designing in Figma you can get device mockups with the Mockuuups Figma plugin.
For those who don’t use Figma: Tools like Balsamiq and Sketch let you do the same.
4. Host images on your domain or use asynchronous client communication tools
Rather than sharing tons of JPEGS, device mockups, and PDFs. You could create a subpage on your website or use a tool like Notion or Invision.
This way – you can add multiple web design mockups, add comments, and leave a place for feedback. Instead of having links scattered all over the place.
Tools like Notion are perfect for this, you can embed JPEGs, PDFs, videos, and Figma previews to dazzle your clients. Alternatively, you could use a dedicated web design delivery tool like Invision which was made for this. Or opt for agency project management software like Basecamp to host everything all in one place.
If you’re small - Basecamp lets you run up to 3 projects free.
Bonus tip: Try tightening up your web design service agreements to limit revisions.
I’m not a lawyer and this is not legal advice. But I love the quote, "a business is as good as it’s worst contract" because it’s true.
And if you’re wondering how you can limit client revisions and create a better experience for you and your clients.
In my agreements, I like to assign a lead contact for feedback and limit the number of revisions (usually 1 or 2).
This does two things:
- The whole team won’t start shooting feedback at you. Instead, they’ll an internal conversation and share what matters.
- They’ll make the most of their limited revisions.
Depending on how brave you are, I’ve started doing 1 round of minor revisions limited to an hourly amount. This helps close the loop on projects, but it may be harder to sign clients.
Wrapping up
You can be the best designer in the world - but it’s those who have a solid process who win.
However, don’t let this trip you up.
Your process is something that is always evolving and I’m a big believer in “just in time” learning over “just in case” learning.
Get out there and try things!
Hopefully, this post has given you some tips and tools to help you refine your web design mockup presentations.
If you’re wondering how you can land more gigs, you should check this out: How to make an attention-grabbing UX portfolio to land your next client
What you should do now
If you’re a freelancer or agency owner delivering web design or social content – you should try Mockuuups Studio. Like you, we were tired of generic mockup templates and found ourselves creating our own in Photoshop for clients.
The good news is you can access over 1800+ free device mockups ready to drag and drop your screenshots – available via desktop app or the Figma plugin.
With the mockup “editor” you can create your own templates from over 788 million combinations of hands, devices, effects, and backgrounds.
Go here to get started completely free
And if you’re a web person, you should bookmark our free mockup tool mockup.new.
