Guide to video mockups

Video mockups are framed device showcases that move. Here's how to make them, and how to get the most out of them.

What is design showcasing really about? It's about showing your designs in the best possible light. That's easy. But how? I'd say it's all about making your designs as real as possible. Bring them to life. Because the best experience of a design is in the real world. The one outside the conference room, where things are in 3D and constantly moving.

So that's what it is. Closer to life. All three dimensions and in motion. Let's take a look at how to do that and how to get inspiration.

Introduction to animated mockups

We'll start gently with a quick overview of how to create animated mockup videos. What are your options for making showcases that move? From hiring an agency, freelancer, to getting your hands dirty and doing it yourself.

Read the introduction

Video mockup examples

There's a lot of ways to showcase your app and web designs with videos. We've collected 14 ideas to get your imagination started.

View ideas

Using videos in video mockups

We must go deeper. In the real world, no app is just one static screen. It moves. It animates. It transitions. We gathered the most important things to think about when you add a video to your mockup device.

Read about videos in mockups

How to make video mockups in Adobe software

We've made a few tutorials on how to animate a simple screenshot in two popular Adobe apps.

How to do it in Premiere

How to do it in After Effects

How to do it in Rotato

Rotato is a specialized app that does one thing well: video mockups.

Quickstart: Animated mockup