Let's quickly look at two animated mockup videos. There's a small 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.
Videos are great when you want to show a larger picture. It's a great opportunity to provide context for you audience
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.
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. Here's an example from Apple Support's YouTube channel.
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.
The best way to record an app video depends on how far you've gotten in actually making the app.
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.
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
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.
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.
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.
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.
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.