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 & MockUpPhone!
Watch & Learn
How to Create a Website Mockup Design with Canva & Mockupphone
We know everyone learns differently – if you prefer video, please watch the video tutorial above! If you’re more of a step-by-step person, we’ve written out the steps below.
- 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 mockupphone.com
- Download my mockups
- Check email and download from email
- Create new image in canva.com (I do 2000 x 2000px)
- Now get creative!!!