14 video mockup ideas and examples
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 yourself.
The answer is yes—using the Rotato App.
We've built a simple but powerful 3D creation tool—and here is a tour of the many different 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 (an iPhone, a laptop, etc.), and those devices may be animated.
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 (and a hefty price tag). So if you're in a hurry, it's time 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. It's very simple. All you really have to do is:
- Download the Rotato App.
- Install and open Rotato.
- Pick a device and template that you'd like. There are many to pick from.
- Edit the preset animation, preview, export, and you're good to go.
Now, onto 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. Check out the mockup example of Rotato below.
2. Pull back and reveal
Face the camera straight on the screen, then slowly zoom out—to reveal the device. You'll reveal the familiar context and show how well your design interacts with its hardware.
This method combines the best of both worlds. The first is to focus on the content—your design. And then, by pulling back the camera, you help the viewer to imagine how your work would look on their own device.
3. Explode your artboards
Rotato can break down your Sketch or Adobe XD artboards and reconstruct them—while adding a dramatic flair. Use this template to impress your clients and bosses and call attention to how you've structured the UI down to the exact details.
4. Create website mockups
Rotato is not just for videos. You can render Rotato animations as web animations and fully control them with Javascript.
Check out this guide for more info: Create 3D device mockup renders for the web. And here are 2 x full web page templates for you to use.
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.
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, and one way to do so is to create a POV-style video, like the one below.
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.
8. Call out the details—but 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 closer, directing your viewer's attention from detail to detail—before then zooming out.
9. Combined shots
In this design mockup example, we dragged several rendered movies straight from Rotato into iMovie, where we added crossfades between them. Great to demo different use cases, from design to device.
10. Go generic
There are so many different types of devices out there, across different demographics. Say, you want to be device agnostic and not call too much attention to the specific mobile device, but still need to display your work on a phone mockup—check out this generic device template—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, and saturation can make your design mockup videos look even more cinematic, as if someone exported them straight out of Hollywood.
12. Put it all together
Here's a video we made for an earlier product release. You can see various backgrounds, the universal fits-all device, easing curves, and more.
13. Play with the reflections
Most of the animations in this video mockup example 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 an HEVC with Alpha or even a PNG sequence with transparent background.
You can now create spectacular effects with elements both in front and behind the 3D device.
And that barely scratches the surface of the templates we offer. Download Rotato, give it a try, and create video mockups—as easy as 1, 2, 3.