How to add videos in design mockups

When it’s time to present your design work—be it an app, a website, or social media posts—what matters most is how your audience can visualize the end result. How real it feels. And one way to do so is to include animated videos in your design mockups.

We’ll explain and show you how to do so in this article.

First, let's quickly look at two animated mockup videos below. There's a slight difference between them that I’m sure you’ll notice.

The former simply shows a video of a static screen, whereas with the latter—you have an animated video of an animated mockup (of an application).

Whether you’re presenting your work as part of a portfolio, to a client, or to your internal team, the second option is probably more palpable. The viewer not only sees a display of your design but also a sneak peek of its functionality.

But that’s not to say there isn’t a use for static mockups. Let’s dive into the different use cases.

First, what is a video mockup?

A video mockup is a framed design showcase that moves. It can move in two ways: the device frame itself can move, and the content on the screen can move.

A video mockup is a framed design showcase that moves. It can move in two ways: the device frame itself can move, and the content on the screen can move.

What we want to cover in this article is using videos inside the device’s mockup screen—to replicate how something functions inside a device. (If you’re looking for instructions on how to animate the mocked-up device itself, e.g., an iPhone or laptop, check our guide on animated mockups.)

Why use videos in mockups

Videos are great when you want to paint the larger picture. It's a great opportunity to provide context for your audience.

1. Show a UI animation detail

If there's one thing professionals know, it's that attention to detail is key to a great design. So, if there's a small detail you're particularly proud of, flaunt it! Your audience will not just share the satisfaction, but you also send a clear message: your design was cared for deeply. Try to keep the mockup animation for this kind of video to a minimum.

2. Video tutorials

When it comes to showing someone how to do something with a computer, hardly anything beats walking to their desk for a quick demo. Monkey see, monkey do.

The next best thing is a great video, and let's face it—you can help more people this way. You’ll not only save time, but also effort (of going back and forth).

3. The hero's journey

Every successful app has this moment where it clicks. Often called the “Aha moment”—it’s the part, the part where your audience is happy that you solved the problem that they came to the app for. Thus, going, “Aha, this just did exactly what I wanted it to do.”

And videos are a great way to get them to hit that first “Aha.” They help to simplify your product and guide them through the journey, to satisfaction. Simplify as much as you can, and only animate the mockup when there's a natural pause, or when you need to zoom in on a detail.

The best ways to make videos for mockups

The best way to record an app video depends on how far you've gotten in actually making the app.

1. Prototype animation

The first option is through your design tool, rather than your actual mobile device. Nowadays, even Sketch can animate your UI, but some tools let you tune your animations even more. Here are a few: Principle, Framer, Facebook's Origami Studio, InVision Studio, and a personal favorite, Flinto.

Of course, you can create a Figma export of your mockup video. Check out Figma Prototyping to do so. Here's a Figma plugin that records Figma prototypes.

A lot of these tools are created to challenge the old king, Adobe After Effects, and they vary greatly from no code at all to only code and everything in between.

Let's look at tools that can record your screen if you already have an app (or prototype) or a website running on a phone.

2. Quicktime

The second option is to record a recording of your phone. That's right. You already have a phone recorder right on your Mac, and chances are that it's open right now. Here's how to do it:

1. Open Quicktime on your computer.
2. Plug in your iPhone or iPad.
3. Go to File > New Movie Recording.
4. Click the little down arrow next to the recording button and choose your device.
5. Once finished, simply add the video to your mockup.

3. Rotato Device Recorder

Our very own Rotato App has a built-in screen recorder to help you with all your animated mockup needs.

1. Plug in your iPhone or iPad.
2. Click the Import button in the toolbar (the down arrow).
3. Choose “Record Device.”
4. Rotato will guide you through the import.
5. Trim your video if needed, and then add it to your mockup—in just a click.

5 tips for using videos in mockups effectively

Start from what they know

I once took a training on giving presentations at Google. The first lesson was precisely this: start from what they know. In Google's case, the instructor showed the simple search bar on google.com before moving on to the demo of the new search feature. You can apply this learning to any design.

Let's imagine that we're demoing a new lyrics feature in a music streaming app.

All your work is lost if you lose your audience in the first second. So, a great thing to remember is to start with what you’re absolutely sure your audience knows. What does that mean? If they don’t know your app, it might make sense to show the grid of apps on the home screen, then launch the app and navigate to the feature you’re showing. If your video is for the more engaged super users, starting from a recognizable place in the UI would still work. In filmmaking, this is called an establishing shot.

Show one thing at a time

Another trap that is easy to fall into is the lack of focus.

We're still demoing our hypothetical lyrics feature here and following the advice on starting from what the user knows: the main app screen. But on the way into the lyrics feature, we fall for the temptation of showing off the story feature and more. Here, we run the risk of confusing the user.

When you’ve worked hard on a product, it’s tempting to want to display all the cool details. But every time you do that, you increase the chance of disengaging the user—causing them to drop off.

So define for yourself the one thing you want your users to see. Better yet, split up your video into clearly defined sections and use titles to give context to the viewer, on what they are about to see.

Slow down

I know. You designed a fluid UI that lets the user easily fly through. It's tempting to showcase that speed and ease, but if you lose the viewer for that reason, you lose them. One trick I use when I make screen videos is to pretend that I'm showing the UI to a friend who has never seen the app. I even speak out loud, "and then, I tap this button" while recording or creating the demo animation.

That way, you naturally slow down to a speed that is easier to understand. It also gives you more seconds. More seconds mean more frames, more frames mean more information, and more information means more freedom when editing, zooming, and panning.

Speaking of which...

Use zooming and panning

The magic of video is that you can show more than what can fit on the screen in any one frame. Use zoom and scroll to make it painstakingly obvious what you want to show your user—and to make the UI legible on those small social media video players on people’s phones.

But not always.

When to not use zooming and panning

If a lot of things are going on in your screen video, consider keeping the mockup animations to a minimum and keep the focus on the screen rather than the animated mockup.

How to get a video into a mockup

This might seem tricky if you're used to creating mockups in Figma or Photoshop, as these apps usually work with non-moving images. But once you get a hang of it, it's pretty easy. Here are my three favorite ways, depending on your needs and time availability:

1. Using Canva: First, find a good iPhone template that supports video. Open the template, drag your video into Canva's Uploads section, and then drag your video onto the mockup. You may have to select the screen first. Remember to remove any overlays from the template.
2. Using Adobe Premiere: Import your screen video into Premiere Pro. Find or create an image of a phone. If you want to loop it, import it several times. Find or create a mockup image of a phone and layer it on top of your video. Make sure the screen is transparent.
   Next, go to the Effects window and search for “Crop.” Drag it onto the timeline. Use the Pen tool to create anchor points along the phone's edge to crop the video. Finalize the selection by clicking on the first anchor point. Then select “Mask in Effect Controls” and finetune your anchor points. Check this tutorial if you need help.
3. Using Rotato: Our own Rotato will help you create quick video mockups within seconds. Open the app, choose a mockup and drag in your video file. Adjust your project's duration to match the video, then hit “Export Movie.” That’s it!

Remember to test

Once you’ve created your first video-embedded mockup, test it on people who are near you right now. Your colleagues, your friends, and family.

Do they get it? Do they prefer a still? Don't be afraid to roll back to a static image. After all, you're here to convey a message, and if a device mockup photo does a better job than flashy animations, so be it. I feel pretty confident that your video mockup will get the job done in a great way!