How to create website mockups (2024 Guide)

How to create a website of a live website fast. Step-by-step guide on how to create a mockup of a live website for free using a simple URL importer – without Photoshop, Canva or any design skills required.

How to create website mockups (2024 Guide)

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…

Cat Box by Giphy

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:

Create mockup from existing website

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.

How to make an attention-grabbing UX portfolio to land your next client

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:

Mockup created from existing website

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:

The Verge website placed into iMac mockup MacBook Mockup created from existing website

iPad Mockup with a website screenshot

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.

What's Mockuuups Studio?

Super-easy mockup generator with more than 4000 high-quality scenes. Available on macOS, Windows and Linux.

Sign-up to our newsletter

Get the latest articles on all things data delivered straight to your inbox.

START HERE

Create your mockup in a second.

It takes only a one click to create a stunning mockup for your website, presentations or social media.

Place Screenshot