Black Friday Deal
Take 50% off with coupon BLACKFRIDAY21

14 video mockup ideas

Video mockups come with as many options as videography itself. Here are 14 ideas we love.

You've seen the expensive-looking design showcases using mockup devices that float, turn, and move like a perfectly orchestrated dance. And now you're wondering if you could make these with Rotato. The answer is most likely yes. Don't be fooled by Rotato's simplicity, it is a powerful 3D creation tool. Here's a tour of some of the things you can do.

What is a video mockup?

A video mockup is a design showcase that moves. It may involve mockup devices for context, and those devices may be animated. But a video mockup can also be simply a pre-recorded UI demo. In the examples below we show both types.

How to make a video mockup

Depending on which type you're planning on making, there are different options. Most designers reach for Adobe After Effects, which comes with Cinema 4D. Blender is also a popular choice, especially after its recent UI refresh. However, these tools have a steep learning curve, so if you're in a hurry, you may want to check out a specialized video mockup app like Rotato.

Take a look at Rotato's mockup animation tutorials to see how to recreate these videos, or grab our video mockup templates.

Let's get started looking at some examples. Here's 14 ways to give your UX design context and bring it to life.

1. Intros and end screens

A fast and simple animation is a good way to ease the viewer into your promotional video or presentation. A common tip for presenters is 'start with what they know'

2. Pull back and reveal

Face the camera straight on the screen, then slowly zoom out. This way, you'll reveal the familiar context, and really show how well your design interacts with the beautiful hardware. This method gives you the best of both worlds: full emphasis on the content - and then, by pulling back the camera, the powerful identification in seeing the app on a computer that might as well be your viewer's own computer.

3. Explode your artboards

Rotato can pick apart your Sketch or Adobe XD artboards and explode them in a beautiful and dramatic effect. You can use this to impress your clients and bosses, but also to call attention to how you've structured the UI down to the very detail.

4. Render for the web

Rotato is not just for videos. You can render Rotato animations as web animations, and fully control them with Javascript. How to create 3D device mockup renders for the web. 2 x full web page templates here.

5. Show the hardware

In some situations you want to call attention to the hardware your app runs on. It could be the touch bar on a Macbook Pro, or the volume buttons on an iPhone. In the video below, we chose a dark, contrasty lighting environment, and a smooth easing curve while panning across the keyboard.

6. Presenting in person

We've all been on both sides of this. You're presenting your hard work, and people yawn. The design goes nowhere. It's like there are two parts of the brain, one wants to be impressed and admire beautiful things, and the other is the rational decision-maker. You have to engage with both.

7. Call out the details

When you can't be there in person to point at things, you can use Rotato's 3D labels. They can follow the 3D device mockup, or always face the camera, and you can place them exactly where they need to be to be closer to the feature you're describing.

8. Call out the details without words

Quite often, great designs are self-explanatory. In those cases, you can let the details do the talking, by simply moving the camera real close, directing your viewer's attention from detail to detail - and then zoom out.

9. Combined shots

In this example, we dragged several rendered movies straight from Rotato and into iMovie where we added cross fades between them. 

10. Go generic

If you're trying not to call too much attention to the mobile platform, but still want a phone mockup, you can go for the generic device, designed exclusively for Rotato.

11. Fix it in post

If you're familiar with a digital SLR camera, you'll recognize the options in the Lens sidebar. Contrast, HDR, saturation can make your videos look even more cinematic, as if they were exported straight out of Hollywood.

12. Put it all together

Here's a video we made for an earlier release. You can see various backgrounds, the universal fits-all device, easing curves, and a lot more.

13. Play with the reflections

Most of the animations in this video are aligned with the reflections, playfully stroking the phone's round shapes.

14. Make videos with transparent backgrounds

For the pros, we've enabled the option to export your video as a HEVC With Alpha or even PNG sequence with transparent background. With that you can create spectacular effects with elements both in front and behind the 3D device.