Heads up! This content is relevant for Clipchamp for personal accounts. Try this link If you're looking for information about Clipchamp for work accounts.
On this page
Would you like more people to view the sites and videos you design? Well, there are systems that could help you with precisely that goal. Visual hierarchy can help capture the attention of your audience and hold it, too.
By controlling aspects like the size and repetitive nature of your content, you can create graphics that pull consumers in and make them want to know more about what you have to offer.
Learning how to use visual hierarchy to captivate the viewer could lead to higher sales as it helps viewers learn as much information in the least amount of time. Most importantly, it'll make them want to come back for more.
Let's explore what is visual hierarchy and how to use it in your video production.
What is visual hierarchy?
Visual hierarchy, in simple terms, is the method website designers use to make viewing the page easier for a consumer.
Image Source: HubSpot
Using this principle, the consumer sees content in a way that answers their most pressing questions with ease. It simplifies content while allowing the site owner to lay out their intended marketing messaging in a path that will best influence the consumer. Visual hierarchy is an essential part of any graphic design.
Essential elements of visual hierarchy
1. Size
When it comes to catching the consumer’s eye, size is one of the most helpful tools a designer can use. By manipulating the scale of certain page parts, size tends to steer the eye in that direction.
Image Source: Swarm
Doing this could make certain things on a page full of information stand out.
When viewers scroll through or passively watch content, using size can help them gather key points of information quickly and simply without spending too much time. Size should be used thoughtfully and sparingly, though.
You don't want to overwhelm users with information with larger sized graphics.
2. Perspective
Perspective works similarly to size in that it is meant to draw attention to certain parts of a page or video. Bringing illusions of distance and depth can also make a video or page a more enjoyable experience, increasing the chances that a consumer will want to continue learning more about the product or service.
Image Source: NepaliGraphics
Giving certain portions of content depth on an otherwise flat viewing platform naturally draws the eye towards them. With the use of filters and layers, a designer can pique the interest of someone viewing the page.
3. Proximity
Proximity is a basic element of the composition. Playing with the proximity of elements also creates interesting visual effects.
Closing the space between similar elements gives a subconscious signal that they are a part of a whole while separately spaced elements can give the illusion that parts of the content are unrelated or unimportant from each other.
Image Source: 254-Online
4. Space
Use spacing to create a pleasing design that shares as much information as possible without overwhelming the viewer. Spacing to separate or group items together can also make it easy for your audience to understand content.
Image Source: Twitter
A clean design is less intimidating, bringing information to the foreground in a way that is easy to understand. The space in between these groups of information is called "white space" or sometimes "negative space".
Spacing is used in conjunction with the expected scanning patterns of viewers. There are two main types of designs that are useful when setting up content. The first type is the F pattern. In this method, the content is aligned to the left. This method is most helpful because people are taught to read from left to right.
It's a great starting point to designing white space.
Alternatively, the Z pattern uses images and text to allow viewers to scan and collect information from bits of images and text. It follows the path of top left to top right and lower left to lower right, forming a Z shape. It's great for areas of content that aren't extremely dense. Viewers that are just skimming will be able to get the gist of the entire portion just from combing through for a few seconds.
5. Alignment
Alignment also helps group components together for the benefit of the viewer. Disorganized content discourages viewers from reading further out of frustration and confusion. Using alignment, similar forms of text and images are arranged in a column or row.
Image Source: Zeka Design
Elements that are out of alignment stand out so a designer should use that as a surprise to draw attention toward specific areas. Usually, pages are aligned left, which presents the opportunity to align certain aspects of a page to emphasize portions of information in a creative and easily scannable way.
6. Repetition
Image Source: Zeka Design
Repeating the same patterns of sizing will allow content to look reasonably grouped together as well as more professional, giving the illusion that content is from a high authority source.
Blue hyperlinks are an example of effective repetition. People know that when they see an underlined word in blue throughout the web, they can find more information about the specific topic by clicking on it. Creating these repetitive patterns on a page will give the reader or viewer a similar feeling of confidence in what to expect from certain types of patterns.
7. Grids
Grids are a no-fail way to creating aesthetically pleasing designs. I think an Instagram grid would be the perfect example here: color coded videos, specific arrangements, and an aesthetic logic that flows into a compelling story. Composing the illusion of a grid helps keep elements of your design aligned and neat. Like proximity, it allows the viewer to easily group objects and text together as the lines in the grid guide them.
Image Source: Vectornator
The modular grid is compiled of horizontal and vertical lines and is the most common and simple to understand. However, there are other types of grids that work great as well. For instance, the diagonal grid is useful to help the design stand out on paper and web design.
How to use visual hierarchy in video content
Learning how to implement visual hierarchy in videos can help immerse viewers. At the very least, it'll make your video message and information easily accessible to those that prefer to skim through content and pick out the most important parts to understand.
1. Size
An editor can implement size in multiple ways in a video. One way is to provide key information points, even if the viewer is only passively watching/listening. Doing this will also allow the viewer to focus harder if they see something that catches their eye and piques their interest. Here the narrator is explaining types of clouds. Notice how the number "2,000" is the largest. Doing this allows someone only somewhat watching to say "wow only 2,000 meters? That's low."
Although some designers tend to go for more "wordy" graphics, three simple words with one greater size are enough to capture the audience's attention.
2. Perspective
Perspective is a way to make your video more interesting. In this example, the content creator Sabine Hossenfelder uses perspective by contrasting a blurred background with a text foreground.
The sudden movement catches the audience’s eye while letting them know what to expect and preparing them to hear more.
3. Proximity
Stay away from confusing or conflicting visuals close to each other in your video. People watch, listen and read video content so make sure to simplify where you can. In this example, the brief history of the royal family is laid out audibly and visually, with names written below the corresponding pictures.
Here, it's easy to understand who the narrator is talking about and the line of children that came after them. Although it's not clearly marked, it's understood who and which generation group they fall under.
4. Space
Letting the content breathe is so important too. Overwhelming graphics can lead to confusion and shorter video watch time. Often, what's needed is less visual information to consume, which allows the viewer to listen along while seeing key points of information on the screen.
In this video, we find out how deep the ocean is.
Much of the video consists of the narration, and caption across the bottom. The rest of the video is a depth meter with images of the object or animal being discussed scrolled through the screen. It makes for a fun watch and helpful learning experience.
5. Alignment
Our brains are wired to seek out patterns such as rows and columns to understand the world around us. That means that scattered or random things have the chance of being misconstrued or completely overlooked.
This straightforward video does an excellent job of categorizing different types of animals simply. You can understand that what you are looking at is the order of specifications animals fall under, even without listening to the audio. The audio itself goes deeper into detail and fills in the spaces between key points you would have otherwise missed out on.
Ready to use visual hierarchy in your next video?
Take your time to practice and master visual hierarchy. Remember that the effect it has on people can vary so be open to feedback and learning. When you're ready, explore tons of information out there to help guide you to create a better consumer experience. You can check out sites like Vectornator that has a blog specializing in graphic design learning. There's also the Interaction Design Foundation, which is full of information about design along with courses and an online community of designers that help beginners through webinars. Good luck!
