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.
It's the last part we're talking about today: 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 you 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 and 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, there's hardly anything that 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. Hero 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 begin to 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
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 there are tools that let you tune your animations even more. Here's a few Principle, Framer, Facebook's Origami Studio, InVision Studio, and a personal favorite, Flinto. There's 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 take a look at some tools that can record your screen if you already have an app (or prototype) or a website running on a phone.
2. Quicktime
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 recoding button and choose your device
3. Rotato Device Recorder
Rotato has a built-in screen recorder. Plug in you iPhone or iPad, and 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.
4 tips for using videos in mockups effectively
Start from what they know
If you lose your audience in the first second, all of your work is lost. So a great thing to keep in mind is to start with what you’re absolutely sure your audience knows. So what does that mean? If they don’t know your app at all, it might make sense to show the grid of apps, launching the app, and then navigating to the feature you’re showing. If your video is for your super users, it still makes sense to start from a highly recognizable place in the UI.
Obey the Rule of One
It’s soo 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 your self what the one thing you want people to see is. Alternatively, split up your video in clearly defined sections and use titles to tell the viewer what they are about to see.
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.