14 video mockup ideas (includes 3D)
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.
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.
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.
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.
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.
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 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.
9. Combined shots
In this example, we dragged several rendered movies straight from Rotato and into iMovie, where we added crossfades 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, and saturation can make your 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 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 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 create spectacular effects with elements both in front and behind the 3D device.