Using videos in mockups
When you're presenting your design to an internal stakeholder or a client, the only thing that matters is that they can imagine what the final app will look like.
Let's quickly look at two animated mockup videos. There's a slight difference between them that I'm sure you'll notice.
The last one uses a video on the screen. It not only looks nicer, it also adds an extra pound on the scale that measures how real your mockup looks. An app is never just a frozen screenshot, so in many cases it makes sense to add a video to the mockup, too. But not always. Let's dive in.
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.
The last part we're talking about today is using videos on the device mockup screen. For more on how to animate the mocked-up device itself, check our guide on animated mockups.
3 Ideas for using videos in mockups
Videos are great when you want to show a 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 to a minimum for this kind of video.
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.
3. The hero's journey
Every successful app has this. The one moment where it clicks. Often called the Aha moment, having users go through this is key to understanding what your app is about. It starts your audience's imagination as they see how the app fits into their lives. Simplify as much as you can, and only animate the mockup when there's a natural pause, or you need to zoom to show a detail.
3 ways to record your videos from an iPhone
The best way to record an app video depends on how far you've gotten in actually making the app.
1. Prototype animation
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, and of course, Figma Prototyping. Here's a Figma plugin that records Figma prototypes.
There are a lot of these tools, hoping 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.
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
- Open Quicktime.
- Plug in your iPhone or iPad.
- Go to File > New Movie Recording.
- Click the little down arrow next to the recording button and choose your device.
3. Rotato Device Recorder
Rotato has a built-in screen recorder. Plug in your iPhone or iPad, click the Import button in the toolbar (the down arrow), and choose Record Device. Rotato will guide you through importing and even trimming your video, and using it in your mockup is just one 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 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. So 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 your super users, starting from a highly recognizable place in the UI still makes sense. In filmmaking, this is called an establishing shot.
Show one thing at a time
Let's look at another trap that is easy to fall into. 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. We risk confusing the viewer.
It’s so tempting to make detours and show all the cool details. But every time you do that, chances are someone navigates away from your video. Define for yourself what the one thing you want people to see is. Alternatively, split up your video into clearly defined sections and use titles to tell the viewer what they are about to see.
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’re showing people — and to make the UI legible on those small social media video players on people’s phones.
But not always.
Don’t 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 using 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 available time:
- Find a good Canva iPhone template that supports video. Then, drag your video into Canva's Uploads section. Open the template. From the Uploads section, drag your video onto the mockup. You may have to select the screen first. Then, remove any overlays from the template.
- 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. 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. Tutorial.
- Rotato. Choose a mockup and drag in your video file. Adjust your project's duration to match the video, then hit Export Movie.
Test on people
Now that you have your first video mockup, test it on people who are near you right now. 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 in this case, so be it. I feel pretty confident that your video mockup will get the job done in a great way!