Capitalizing On The Power Of Visual Hierarchy In Creating Stellar Emailers

When they say “love” at first sight or to take a scunner to someone at first sight, other than the extremities of the emotions on display, there is another commonality, one that is responsible for the way we process information and register first impressions. 

Yes, the visuals matter a lot more than you think, particularly in the field of marketing.

Here are some numbers to emphasize the importance of getting the visuals right;

• As per the findings of a Social Media Examiner Report, marketers gave the highest preference and importance to visual images in their content marketing strategy.
• Not surprisingly, visuals enhanced comprehension in 98% of the meta-analysis of 55 studies on the deployment of relevant illustrations in imparting education effectively.

Ever since the earliest cave dwellers took to etching out imagery on stones, we are neurologically wired to absorb information visually. 

Now that we are clear on the importance of getting the visuals right in your marketing efforts, we will delve into the details of nailing visual hierarchy for email marketers. 

Visual hierarchy in email design decoded

In the era of HTML and interactive emails, the idea is to make an amalgamation of copy and design that “shows” rather than “speaks.” When you incorporate the different elements of the email in tandem with the order of their importance and the basic elements of design such as font size, placement of hero image, color palette, contrast, density, content block layout patterns, repetition, incorporation of white space and proximity of the different content elements, you get an email that’s aesthetic, easy to scan and delivers the intended message seamlessly. 

Let’s delve into each of these elements one by one;

• Smart use of font sizes: Ever noticed how the print media such as newspapers and journals use similar fonts for paragraph text and headers uniformly? This helps the user easily pick up the headers and differentiate them from the body copy. The bigger font conveys the major and more important part of the copy. Incorporating HTML tags like <p>, <H1>, <H2>, and <H3>, along with the use of formatting elements such as italics, bold, and underlining, help convey the desired message to the viewer effectively. 
• Placement of the hero image: As the name suggests, much like in the film world, there can be only one hero image featured in the upper fold of the email so that the viewer can gauge the intent of the email in a single glance. In the following example, you literally want to be “whisk”ed away by the jolly good spirits waiting in our carts!
• Selection of the color palette: The color palette selection should be in tandem with your branding strategy and the purpose of the email in order to not just grab the attention of the prospective customer but also ensure that they associate the color palette with your brand. 
• Right color contrast: The implementation of the right kind of color contrast can help differentiate the different elements of your email and draw attention to the segments that you’d like to highlight. For instance, the use of bright colors in the CTA buttons can distinguish it from the rest of the light-colored text blocks. 
• White space: We cannot stress the importance of using well-thought-out white spaces in your emailer design. This not only allows the viewer some breathing space but also helps introduce the right perspective to your mailer content. 
• Content block layout: Logically, one should begin with placing blocks of greater importance at the top and then proceed to placing the less critical ones towards the bottom. Placing blocks of equal relevance horizontally is generally avoided. 
• Proximity: When you keep relevant content such as headers and subheaders together, the eyes of the viewer naturally gravitate in a logical manner as they tend to perceive closely placed elements as related. 
• Repetition: Similarly, repeating content placing patterns, and color schemes help readers focus on the message in the offing subconsciously. 

Now that we are clear with the different elements of visual hierarchy let’s check out the kinds of patterns that email marketers deploy in their email designs.

An insight into the kinds of visual hierarchy patterns in email designs

There are a plethora of email and newsletter templates that you can peruse in the following patterns. Whether you swear by Hubspot templates or those of any other ESP, there is something for every need!

1. Inverted Pyramid/Inverted Triangle Pattern

True to its name, the email is designed in such a way that the arrangement of the email elements resembles that of an imaginary inverted pyramid. The structure of the email usually involves a hero image, a single image, and a call to action. 

This pattern works equally well for emails and newsletters and is perfect for crafting welcome emails, marketing emails, lifecycle, and behavioral emails. 

For instance, check out the stellar inverted pyramid email by Apple below. Its super neat design renders equally well on mobile devices and desktop computers. 

The user’s vision floats seamlessly through the hero image, the message, and finally, the CTA. A winner, we say!

2. Z Pattern

This is among the most deployed patterns in email marketing as it facilitates easy scanning of the content on display. 

Perfect for those emailers where you need to pack in a lot of details without overcrowding, this one guides the viewer’s vision in a hypothetical Z pattern. 

Source

In the above example, the eyes glide almost effortlessly from the upper message to the center CTA and then towards the bottom horizontally. Delivers multiple pieces of information without seeming congested. Quite effective!

3. F Pattern

According to the eye-tracking studies carried out by the Nielsen Norman Group, people tend to consume text–dense content in an F-pattern. Their eyes scan the top line, then the second line, and finally the bottom of the left column. 

Here, one has to prioritize the most important chunks of the email and place them on the hot spots so that the reader gets the message without missing out on the important stuff.

Summary

In conclusion, it is safe to say that ensuring the optimal visual hierarchy in your email design is basically more than just a design endeavor. The focus is to cleverly gauge the viewer’s scanning patterns and then craft a design that arranges the elements in a viewer-friendly way. If you’d rather let the experts handle all your email marketing requirements, Email Uplers  promises to be your one-stop solution!

Author: Kevin George is the head of marketing at Email Uplers, that specializes in crafting Professional Email Templates, PSD to Email conversion, and Mailchimp Templates. Kevin loves gadgets, bikes & jazz, and he breathes email marketing. He enjoys sharing his insights and thoughts on email marketing best practices on email marketing blog.