Becoming an unstoppable screencast jedi starts here.

When it comes to making screencast videos there’s a few techniques that are used more often than others. And for good reason.

In this article you’ll learn

• How to take a boring UI/UX and turn it into an exciting presentation
• 7 screencast techniques that NEED to be focused on in your pre-production plan to maximize visual interest.
• How to use each one with examples and details on execution.
• About 10 years of mistakes condensed into 1 article.

With that being said - enjoy. Remember to take notes and most importantly: implement the feedback in your videos.

The only way to get better is to do. So don’t just read. 

Make sure to actually add these techniques to your next video.

#1: The Big 3 for UI/UX screencasts 

The most common problem we see is people using an ENTIRE screenshot of their product. This gives very little context to the viewer seeing it for the first time.

First time viewers don’t have context or an idea of what they’re looking at. Your product needs to be VERY simple and intuitive for people to just “figure it out”.

In most cases, we need to help people figure it out. And this means building a visual narrative out of our UI/UX shots.

• What needs to be shown first?
• What needs to be contextualized?

This is why we focus on 3 types of shots for our videos

• the close up; focusing on one element 
• mid range; contextualizing a group of elements 
• full screen; self-explanatory

‍

More elaboration… 

The closeup is the ultra-zoom. You want to get CLOSE. Real close.

Get close and intimate with the subject. Like typing something into a Google search bar. 

This small piece of visual can be dramatic, personal and provide time to read. In fact you may have even seen videos start with that some emotional music and a search query appearing.

And in more extreme versions: showing character by character appearing - with focus on the timing between letters to create a sense of tension, or dynamic movement.

More people should focus their attention on close-ups. The advantages are clear

1. It’s easy to focus on exactly what is important
2. You can use voiceover to draw out details not seen 
3. The person should “get it” just from seeing it 

If you create a series of 10-20 “scenes” based on close-ups you can really start to get to the heart of what matters in your UI/UX.

The midshot - for context.

Of course being zoomed in won’t always work. Sometimes it’s too limiting. Sometimes features are bundled in groups.

Zooming out to a mid-shot of your UX or UI can tie a feature/field into the bigger picture.

Start by showing the system from small to big. If you do a zoom in, than zoom out, it’s easy to understand where to focus attention for the viewer.

It can also be a way of linking a close up to a bigger story. In these cases the best thing you can do is think through the “use cases” or in other words how people are using the software to solve their problems.

Then with the smallest amount of scenes distilled it into the “key images”. This is essentially a barebones of “what matters” and also often parallels the features which sales reps gravitate towards on demo calls.

NOTE: sales reps can be one of the best sources of ‘insight’ because they are incentivized to learn what the prospect responds to (often, fortunately or unfortunately irrespective of what marketing thinks).

‍Full view - for the lazy.

This is the view of screenshots that gets used too much. It’s basically like throwing a UI/UX at someone and saying “DIY - figure it out”. 

You’re putting a lot of confidence into a love of puzzles that may not exist within the general population.

It’s rare you want to show the full UI/UX. Why?

1. It is hard to focus in - making it kind of useless 
2. On a screen it will look absurd (too many unreadable details)
3. It won’t support the visual narrative as much as specifics 

For those reasons you want to avoid the full screen unless it’s essential.

‍

‍

But really - what’s the priority?

The shots are approximations to help you distinguish between focal points - or where to show the priority. 

What you are really mapping out if the 

1. Hieararchy of knowledge: which features are most important?
2. Flow of movement: in what order will you show them?
3. How to direct attention & in what sequence.

The benefit of video is that it’s chronological. So we know the viewer is likely to see it bit by bit - the question is how will we build it up for them?

Let’s examine that in more detail.

1. Considering camera tracking & movement 

In this sequence you can see 3 actions happening:

1. Identify the problem visually with red alerts 
2. Move camera for dramatic effect to show the pop up 
3. Zoom out to show full dashboard for context 

‍

‍

Constantly drawing the focal point.

The mistake too many people make is “just show something”.

There was no conscious decision about how components should interact and reveal themselves to the viewer. 

So the viewer “SEES” the video but they don’t “UNDERSTAND” it’s point. This is a fail. This means the focal point - or the center or interest didn’t come through.

And in most UI/UX videos it’s all about getting the point across to the viewer in the shortest amount of time possible. 

Good camera movement does that. It clearly shows the viewer what’s important.

2. Using text to highlight functions 

Not all functions are self-evident. In these moments typography can be AMAZING.

It can help connect the dots and fill in the gaps. All while:

• Relatively low effort but high impact. 
• Text + sound improves message retention.
• Helps direct attention towards abstract outcomes.

Use ‘title scenes’ like this.

Some quick tips

• 2-3 words work best for fast-rhythms.
• 5-10 word sentences will slow down the scenes.
• Style your font. Experiment.
• Legibility is KEY.
• Adding text next to screenshots = pro level.

And always think about crowding. Viewers have limited attention.

Cognitive load is not infinite and our eyes can’t pick up everything. Too many visuals or too fast will compete for attention leading to a reduction in retention.

This ties into the comments about focal point & where to put our focus.

Minimizing words is ideal. Visuals - bold, clean, obvious is a good default. 

Don’t make people guess about the substance.

3. Pre-filling for more effect 

An empty field or form in a video? Missed opportunity to improve the visual narrative.

Have it pre-filled with relevant information. You can even set up use cases or scenarios throughout the video creating continuity. 

This takes more time in pre-production than just picking screenshots, but actually thinking about questions like:

• What data can be personalized to further drive the story?
• How can multiple features “work together”? 
• How to avoid generic screens and show more “advanced” functionality even if only shown but not said?

In this video we took the clients UX/UI and created profiles, complete with videos, graphics, to get across the idea of what it looks like in use. 

This is before the platform was even live. However using manipulation of graphics and animation - we were able to market it as a real product.

This is pre-filling to the max.

This is way more powerful than just a regular boring UI shot with no details.

And this is where a lot of “Easter egg” opportunities exist in video. All those little details are places you can develop the visual narrative.

Just remember: that most people won’t capture the details or little things. 

This is why your focal point always needs to be on the PRIORITY on the MOST important part of the video.

These details are to complete the “believability” of the video. 

So if someone did pause it to scrutinize the video - they wouldn’t find much except a very well produced piece of work.

Even boring things like invoices should be customized to look more believable. No blank templates. 

Push your team, writers, designers, to come up with lively visuals. The kind which convince us through their fullness.

4. Pop to highlight 

UI/UX is flat. So tilt it. Pop it out.

And voila. You have a simple embellishment. 

Make it look better than real life - it’s okay, your prospect will forgive you.

Here the text draws purpose to the alert which comes up after. 

Helping frame the sequence.

Pop outs also help to create more rhythm within the video. Instead of just being UI/UX there are elements which help step outside the ordinary.

And this is the point of video: make something better than life (think about movies, animated shows, video games etc).

5. Stock footage within motion graphics.

In 2022 stock footage mixed into explainer videos or with motion graphics is SUPER popular. 

And if done correctly it can

1. Make the stock footage look customized instead of generic
2. Fit the visual narrative and extend it further 
3. Add a “real world” feeling to motion graphics which is abstract 

So yes - do it. Mix styles. 

Diversity is the spice of life after all.

The question is: how to do it tastefully and effectively?

Motion graphics take generic stock footage and make it unique, on-brand and visually appealing. 

Try to 

1. Develop a library of stock footage before the project 
2. Create script lines AROUND specific visuals 
3. Think about how to EDIT visuals BEFORE choosing them

This type of prep can help you maximize the power of this technique.

Here’s another example of using stock footage to create user icons and have the illustration in the middle represent the abstract process. This way you are humanizing using people and also getting across an illustrated point.

This is by far one of the best ways to use stock and motion graphics. It blends the best of both worlds and help you grab viewers attention.

6. Stock Footage: The Overlay

This is stock footage with an overlay we added. It creates a feeling of high-tech work which relates to the story told about the interface and the outcomes it drives.

We’re calling it out because this is probably the “EASIEST” way to make something great out of stock footage it’s adding a tech overlay to it.

This can make a person doing an action, seem connected to your product/features. Which strengthens your visual narrative.

In both of the above situations we’re showing the user flow. How it’s actually used.

Another example of an overlay being used. In this case it’s a pseudo-UI, not even the real one, just something to get the point across.

It also allows us to use graphics in the style of the clients brand instead of relying on just the stock footage - which can lack the colour or feel on it’s own.

Another example. Clients brand. Graphics.

And all of a sudden - a new feeling to the scene.

We’re no longer looking at a stock footage scene but the focal point is really about the actual product WITHIN a real world setting.

Consider this same scene without the stock - it just wouldn’t work.

Screencast Tutorial Finito. Your Turn.

We can go on forever but these are some of the “BIG” ideas you’re going to want to implement into your next screencast video.

However the most important thing is: think about it. 

Be aware of your product.

Be aware of WHY people use it.

Be aware of WHAT to show.

There’s no easy way to know these things. It takes months or years or figuring out your market before you will know - but it’s exactly those things that make the best videos.

Best meaning: relevant, clear and short as possible. 

You won’t be able to measure these words UNTIL you know exactly what you are trying to show. So don’t rush into making a video.

First rush into making a product.

Second rush into selling it.

And third, take what you learned, and turn it into a video that ACCELERATES your progress.

If you start too soon - don’t be upset if you find yourself having wasted weeks or months or time creating a video that never ends up getting used.

Or even worse, is used but should never have been.

That’s not the video you want. 

That’s just practice.

The practice of making a video.

Which is fun - but unlikely to be profitable.

For a profitable video, take it seriously, think it through, and know that every second, every detail adds up to making an impression that matters.

‍

Don't forget to download our free ebook!

‍