14 video mockup ideas (includes 3D)

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.

💡

This post is part of our series on video mockups.

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 are 14 ways to give your UX design context and bring it to life.

1. Intros and end screens

A fast and straightforward animation is an excellent way to ease the viewer into your promotional video or presentation. A standard tip for presenters is 'to start with what they know.

Loading...

Download video

2. Pull back and reveal

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

Loading...

Download video

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 and call attention to how you've structured the UI down to the exact detail.

Loading...

Download video

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. Create 3D device mockup renders for the web. 2 x full web page templates here.

Loading...

Download video

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. We chose a dark, contrasty lighting environment in the video below and a smooth easing curve while panning across the keyboard.

Loading...

Download video

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

Loading...

Download video

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, closer to the feature you're describing.

Loading...

Download video

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 close, directing your viewer's attention from detail to detail - and then zoom out.

Loading...

Download video

9. Combined shots

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

Loading...

Download video

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.

Loading...

Download video

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, and saturation can make your videos look even more cinematic, as if someone exported them straight out of Hollywood.

Loading...

Download video

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 more.

Loading...

Download video

13. Play with the reflections

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

Loading...

Download video

14. Make videos with transparent backgrounds

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

Loading...

Download video