You want to create a mockup from an existing website. Either to create marketing materials, promote your digital product, or show off live projects in your portfolio.
Yet, capturing screenshots to fit mockup templates and resizing your browser to capture the perfect-sized screenshot can make you feel like this guy…
In this post, I’ll walk you through how to create a mockup of a website using our simple mockup URL importer.
By the end, you can expect a website mockup like the one you see below to be proud of.
Stick around as I run you through website mockup examples and how to use them in your next project.
How to create a mockup of a website.
Before we go any further, you need to download Mockuuups Studio. It’s free, but I’d recommend you to try free trial. You’ll get access to the entire mockup collection (2900+ device mockups).
Once you’ve got Mockuuups Studio installed. It’s time to jump in.
STEP 1: Navigating to the URL importer
Once you’ve booted up Mockuuups Studio, you’ll see a gallery of over 2900 mockups. If you look at the bottom right of the app, you’ll see a blue gallery button – click it.
A screenshot window will appear down the right of the screen, this is where you can import your screenshots.
To capture a screenshot of a live website click Import from URL.
STEP 2: Capturing a live website screenshot
Inside the import from URL menu, enter the URL you’d like to take a screenshot of. Then, choose a device to set your screenshot resolution, and click - capture screenshot.
STEP 3: Filter website mockups by device type and export
Once you’ve captured your screenshot. You’ll notice it appears in the gallery and it's added to the entire mockup collection.
To filter mockups by the device size you selected, head to the top of the URL grid and filter by the device type you selected.
Now you’ve got your screenshot sorted and found the perfect mockup. It’s time to export.
Double-click on a mockup to open it and click export mockup. Choose a resolution for exporting. Yay! You’ve successfully captured a mockup of a live web page.
Why create a mockup of a website?
Mockups are just part of the design process. Usually used after wireframing to see what a design will look like on a native device.
We won’t go into the difference between wireframes, mockups, and prototypes here. But if you’re up for it, we walk you through this and more in this post: What is a mock-up? (Full breakdown)
Let’s explore three reasons why you should convert a website into a mockup:
1. Website mockups for client projects
Mockups are essential to any client relationship, they let you share progress with the client and get feedback.
But let’s say you run a marketing agency, and you want to advertise your client's app. Now you can grab a screenshot of their live website and spin up thousands of custom mockup creatives in minutes – and your clients will love it.
Here’s a glimpse of how Fabrizio Rinaldi at Mailbrew uses our mockups to create live previews of his web app:
2. Website mockups for your portfolio
Let’s say you worked on a big design project either in-house, freelance, or part of a team. You won’t have access to the prototype files, but you want to showcase the site you helped build.
Now you can capture professional mockup screenshots on multiple devices to impress future clients and recruiters. If you want to craft a killer UX portfolio check this post here: How to make an attention-grabbing UX portfolio to land your next client.
3. SaaS and digital product mockups
If you run a SaaS, coaching group, or online course – you’ll know creating mockups to connect with your audience is hard. Thankfully, with live website mockups, you can finally capture real people loving your product.
You can these to power your ad creatives, landing pages, and brand authority building content to increase conversion across all channels.
To give you an idea of what online course mockups look like... here’s a glimpse of the most recent online course mockups:
Website mockup examples
I could sit here and tell you about the amazing results you can get with Mockuuups Studio. But a picture paints a thousand words, so let’s show you some stunning website mockup examples:
What you should do now
Now you know how to create a mockup from a live web page the easy way. Head up to the top right of this page, download Mockuuups Studio and get started.
