Home

Blog

TABLE OF CONTENTS

Screencast technique swipe file

The product demo - also known as the screencast video is becoming increasingly popular. In this article we outline our best practices and “must do’s” to create a video with maximum impact. These videos may look simple but don’t be fooled they take a lot of effort to execute correctly. Here’s our breakdown of how.

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.

Cool screencast video examples

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
full screen, mid range and close up shots

More elaboration… 

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

ultra zoom

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.

Once piece and tie into the bigger picture
zoomed in compared to zoomed out view of a webpage

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.

Interactive website design with immersive video

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 

Creating a visual focal point: 3 steps to draw attention to important information

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.

prioritizing movement for maximum impact

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.

Dynamic framing: a demonstration of effective camera movement to enhance the focal point

2. Using text to highlight functions 

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

using the power of typography to highlight key functions

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.

using title scenes like these can enhance the narrative of a video and captivate viewers

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.
quick tips for creating stunning designs with effective font choices and layout

And always think about crowding. Viewers have limited attention.

avoiding overcrowding and maximizing legibility in your designs

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. 

creating clear and impactful designs that demand attention using bold, clean, and obvious typography

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.

pre-filling

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.

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.

use tilt and shadow to have your typography literally pop of the page

And voila. You have a simple embellishment. 

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

create 3 dimensional stunning and dynamic designs that grab attention

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.

The power of stock footage: creating engaging explainer videos and motion graphics with versatile and accessible visuals

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. 

from boring and plain to beautifully branded

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.

Beyond traditional footage: using stock footage and motion graphics to create unique and visually stunning explainer videos and motion graphics

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.

Layering creativity: using stock footage and motion graphics to add depth and dimension to explainer videos and motion graphics

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

Exploring the endless possibilities of stock footage and motion graphics in video production

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.

Creating memorable video content with stock footage and motion graphics

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!

Download our free e-book and discover valuable insights on the secrets of screencast video making