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:

1. Go to mockuphone.com → Select device from device list
2. For this tutorial we will use iPhone 7 plus gold Note: whichever mockup you select, it will tell you the dimensions you need
3. Upload 1242 x 2208px image
4. Go to Canva.com
5. Create design → Custom dimensions 1242 x 2208px
6. Shrink web browser of website you want to mockup to mobile size
7. Take a screen shot
8. Drop screen shot into canva.com
9. Resize image as needed
10. Download file
11. Drop downloaded file into mockuphone.com
12. Download my mockups
13. Check email and download from email
14. Create new image in canva.com (I do 2000 x 2000px)
15. Now get creative!!!