How do I create app mockups for my website?

In this article, we explain how to create pixel-perfect mockups of your app to use on your website, even if you don’t have any design skills or fancy software.

Step 1: Take screenshots

First, you need to screenshot the images you want to use. This is simple enough but make sure the image ratio and quality are right, so it'll look good later. A foolproof way is to use your smartphone.

Open your app on your smartphone and screenshot the required screens.

Step 2: Add a frame

Next, you need to add the frame(s) you want to use.

We use MockUPhone to create mockups like this:

And Placeit to create action mockups like this:

Select the frames you want, paying attention to the size. For example, if you used an iPhone 13 to capture your screenshots, then you'll select an iPhone 13-sized frame.

Upload your images, download your app mock ups, and voila!