14 video mockup ideas
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.
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
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.