How to Use Visual Hierarchy and Mind Motion to Optimize Your Banner Ads

The grapevine around marketing circles is always quick to mark age-old marketing techniques and methods as ‘dead’. Banner ads met a similar fate at some point. But are they actually as dead as some claim them to be?

The answer is a resounding NO. Don’t just look at CTRs (Click Through Rates). Banner ads provide a lot of valuable impressions and PEAR or Potential Eyeball and Retention (remember marketing class?) Plus, Google has made banner ads the new go-to with GDN’s contextual ads.

Now that we have established banner ads are very much here to stay, let us delve into what we do best- the design aspect of it. Today, we will explore a key design concept central to digital banners – visual hierarchy and mind motion.

What is Visual Hierarchy and Mind Motion?

Ad designers always strive to arrange visual hierarchy across designs in such a way as to guide the viewer’s eye to consume information in a particular order. The purpose here is to achieve a clear perception of the ad and deliver the message to its maximum effect. Based on the Gestalt psychological theory, visual hierarchy and mind motion is a key concept in banner design.

Visual hierarchy is essentially the order followed by the human eye for recognizing the elements observed by it. Mind motion is the movement your mind makes along the visual hierarchy in consuming the elements recognized by the eye.

How do you achieve your desired visual hierarchy? You can do it by creating differentiation between all the elements. There are quite a few ways to do that, which we will look at after going over the importance of visual hierarchy in digital banner designs.

Importance of Visual Hierarchy and Mind Motion for Banner Designs

Banner ads compete against a lot of other page elements on a website. The goal is to grab a visitor’s attention. If you do that for long enough with rich visuals, they might even click on your banner ad.

When it comes to a banner ad, you must keep the allocated attention span of website visitors in mind. There is already a lot going on on the page. Your ad is not what they opened the page for. It just happened to be there. If you arrange the elements as per the principles of visual hierarchy, you are more likely to catch their eye. It also helps them go through the ad quickly and decide if they want to take further action.

Key Elements in the Visual Hierarchy of a Banner Ad

These are the key components that determine the visual hierarchy of any banner ad. 

1. Brand logo: On a digital banner ad, a logo stands for ingenuity and creates brand awareness. It should ideally be the first thing that visitors notice when they come across your banner ad. Usually placed at the top left or bottom right corner, you must ensure that your logo has a dominant presence on the banner.
2. Product: The product you are advertising, along with the offers/discounts, should take up the maximum space on your banner. This is the reason you are creating the banner ad in the first place. Attractive offers are commonly placed in the center of a banner ad for this purpose. However, there are many other ways to showcase them prominently as per the principles of visual hierarchy.
3. CTA: The Call To Action button has a crucial role in your banner ad. After checking out the product and offers, this is what visitors will lean towards. This button is often placed at the right corner but it varies from ad to ad. However, you need to ensure that the CTA button has a distinguished presence on your banner.

Principles of Visual Hierarchy and How to Practise Them 

Here are the key principles of visual hierarchy that you can use to enrich your banner ad.

• Size and scale: Size and scale are quite basic but essential elements in a banner ad. While increasing an object in size can improve emphasis upon it, you must be careful to not take attention away from other crucial elements. 

Take this McAfee ad for example. The visual here is enlarged to an extent that it is extending the frame. Yet, the text is also reasonably sized so as to create a hierarchy from the visual to the text and further to the logo. 

• Color and contrast: It is a basic design rule that bright and contrasting colors gain more attention than dull, unsaturated ones. Saturated and contrasting colors appear closer to the eye than the rest of the visual. Thus, you can use one bright color as the focal point of your banner. Its placement won’t decide the visual hierarchy, all other elements will follow it.

The ad shown below uses red and white well for contrast and drawing attention to the text. At the same time, it also fulfils the purpose of branding by sticking to brand colors.

• Perspective: You need not always resort to a video banner ad for your ad to not appear flat. There are plenty of ways in which you can change perspective in a two-dimensional design as well. Increasing the size of an element with respect to those around it can give the illusion of the larger element being closer to you, for example.

In the excellent example given below, the hand has been made to appear like a 3D element by contrasting it with the monochrome picture and the dull background. It is a very smart way of bringing the product in focus.

• Viewing patterns: Everyone uses a subconscious pattern to view content. By deliberately creating designs in a Z-pattern or F-pattern, you can guide the viewer to a desired visual hierarchy. These patterns basically form the shapes of the alphabets Z and F along the mind motion.

For example, this Headspace ad uses the F-pattern very effectively. 

• Spacing: Negative space is one of a designer’s best friends. It is often used to create emphasis upon elements, give them breathing space, and segregate them to create a flow or hierarchy.

Take this brilliant Tigo ad for example. It uses a lot of space above, below, and even on the sides of the central and sole element on the banner. This practice really helps you focus on the design, which also effectively contains the CTA.

• Typefaces: The right usage of typefaces can give your ad a lot of personality and character. Most banner ads use title cases and body text cases to differentiate text as per the hierarchy of importance. But if you really want your text elements to stand out, you need to take it a notch higher.

This ad is an excellent example. It uses a regular serif font but has added a generous dash of color to make the word ‘sale’ the hero of the banner. Because of the descending sizes of the text beneath, mind motion flows from the leading word to the offer text and then to the coupon and code and conditions.

• Balance and symmetry: Symmetry helps to create a pleasing effect for the viewer. So does balancing of elements. At the same time, these techniques also guide the website visitor to follow a visual hierarchy. They keep things organized, simple, and easy to follow.

Similarly, a lack of balance can help you create a fluid picture for your banner. A balanced yet unsymmetrical page is the ideal application of this technique.

The following example shows a very good scattered balance of elements, which create a free-flowing visual pattern. It also smartly places all the text along with the CTA at the center where it can be easily recognized.

In a Nutshell

One of the biggest hurdles in creating a visual hierarchy is that you often tend to struggle with prioritizing elements from most important to least important. You must always designate only one element as most important and start creating your pattern from there. Having too many ‘central elements’ will create chaos on your digital banner.

As you create more and more banner ads, you will get used to visual hierarchy techniques and master them. Always remember to experiment and not stick to one comfortable technique. You need to enhance your craft as well as create disruptions in marketing plans.
Need help with creating static, HTML5, or awesome GIF display banners? We can help!