How to create iPhone Mockups

How to create iPhone Mockups

At this stage, you probably have an app or mobile UI interaction that you wish to present to your audience and you figured that creating mockups is the best way to proceed.

And you are correct! In this short guide, we will cover the common use-cases and teach you how you can create beautiful iPhone mockups in minutes.

Before we deep-dive, feel free to watch the guide in the video format:

Why You Need Mockups

There are 3 key reasons why brands use mockups in their app presentations. iPhone mockups help to:

1. Make it obvious that it's a mobile app

Believe it or not, you need to make it as clear as possible to your audience that they are looking at a mobile application. Presenting your UI shots & interactions without framing them into a device is a sure way to cause some confusion.

2. Provide a complete & sleek feel

Mockups make your presentation look more professional. They increase performance of promotional campaigns and result in better engagement.

3. Provide design separation

A mockup doesn't just consist of the iPhone device. Probably, you'd like to include a text copy, maybe some custom images and icons. Using device frames allows you to create additional space for text and other design elements.

Use Cases

iPhone mockups attract a wide range users - designers, digital marketers & developers. Just like you, they have a specific requirement in mind, but most common use-cases are:

  • App presentations
  • Product launches
  • Portfolios
  • Social media
  • Ads
  • Landing pages
  • App stores

How to Make an iPhone Mockup

I will be using an iPhone mockup generator - the simplest way to create high resolution mockups. No need to download any software, plugins, PSD & Sketch files. All Drag 'n Drop, in your web browser & online.

At last, let's go over the process.

1. Browse Templates

Scroll through a collection of iPhone mockups that you can use to get started. Find the mockup template that fits your requirement and mouse-click it to start customizing. You also have the option of starting with a blank template.

iPhone mockup templates

Some of the templates are animated, but you can export any frame of the video as a still image mockup. To do so, pause the animation and render the mockup.

Update: Try iPhone 13 Mockups for the upcoming iPhone release.

2. Customize

Most of the time, you simply need to replace the screen placeholder with your own media. That's it.

But it can be more advanced - tweak colours of the device, use custom backgrounds & images (e.g. holding hand), add text, control lighting and shadows, change coordinates & positioning of any element, rotate your iPhone in 3D space to find the perfect angle.

iPhone mockup generator

Whatever design you have envisioned in your head, it's possible to achieve.

3. Add Advanced Effects - Optional

Sometimes, you might want to animate your mockup. Videos are better than images at catching user attention. Use the timeline, at the bottom of the 3D editor to create keyframes and add motion effects to your iPhone mockups.

Timeline for mockup animation

If you are interested in creating an app promo featuring device animations, you should try the app promo video maker.

4. Export Your Mockup

Once you are happy with your mockup, you can download it in png, jpg, webm and mp4 formats. This depends on whether you need transparency (the alpha channel) and video support.

Before exporting, you can upscale the resolution of your mockup to 4K (The default is 1080p).

Final Thoughts

If you made it to the end without skipping, you should be comfortable with creating your own iPhone mockups.

This tutorial can be extrapolated to any device mockup - you can replace the iPhone with any other phone or tablet device and follow the same steps.

Lastly, I would suggest to check out our blog and Youtube channel for more how-to guides.