
How to Create a Website Mockup Design with Canva & MockUPhone
Whether you’re launching a brand new website for yourself (or a client!), want to show off a new opt in, or even to just talk about your website pages in general – creating a website mockup is such a great shareable graphic. This tutorial will walk you through how to create a website mockup design with the free tools Canva & MockUPhone!
We know everyone learns differently – if you prefer video, please watch the video tutorial below! If you’re more of a step-by-step person, we’ve written out the steps under the video.
Watch the Tutorial:
How to Create a Website Mockup Design with Canva & MockUPhone – Step by Step:
- Go to mockuphone.com → Select device from device list
- For this tutorial we will use iPhone 7 plus gold Note: whichever mockup you select, it will tell you the dimensions you need
- Upload 1242 x 2208px image
- Go to Canva.com
- Create design → Custom dimensions 1242 x 2208px
- Shrink web browser of website you want to mockup to mobile size
- Take a screen shot
- Drop screen shot into canva.com
- Resize image as needed
- Download file
- Drop downloaded file into mockuphone.com
- Download my mockups
- Check email and download from email
- Create new image in canva.com (I do 2000 x 2000px)
- Now get creative!!!

Get Nerdy about Business, Websites & Tech with Us!
The Making Website Magic Community (hosted on Mighty Networks!) is a place where women web designersand developers can meet, mingle and make meaningful connections with industry collaborators. See you inside!

Article by
Sam Munoz
Sam is the CEO and lead web developer of Sam Munoz Consulting, LLC. Through years of coding, development & design experience - she is all about simplicity, minimalism & making websites that align with her client's business models & goals.
Keep Learning & Reading
How to Add a Top Call to Action Bar in WordPress
A top call to action bar can be a great way to easily direct visitors to convert. Learn how to add a Top Bar Call to Action in Wordpress
How to Position a Background Image in Divi
Ensure the background image you use on your site shows up the way you want it to! Learn how to position a background image in Divi.
How to Add reCAPTCHA to the Divi Contact Form Module
Stop spam in its tracks! Learn how to add reCAPTCHA to the Divi Contact Form module.