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!!!

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

Skip to content