[Mini Guide] Visual Hierarchy In Emails Simplified

When it comes to the principles for displaying various elements within an email, it’s important to “show” not “speak.” Meaning, you should make use of the visual hierarchy more than you should use copy in order to tell your story. Visuals have always been our favorite medium of expression, no matter if it was painting cave walls, retro product ads, or even today’s immersive reality. Emails are no exception to this form of visual expression. Email marketing has transcended from a text-only communication medium into a near standalone website experience with the inclusion of various multimedia. And one of the best ways to take advantage of the visual elements of email is with an HTML email template. 

An HTML email template consists of text, multimedia, CSS elements, and even interactive elements in the form of multiple blocks to build a beautiful design. Each has their own individual function and they need to be curated in a visually appealing manner.

In this mini-guide, we’re going to discuss how you can use the principles of visual hierarchy in HTML emails to render the best reader experience and improve your conversion rates. 

How Visual Hierarchy Impacts Your Emails

If you haven’t thought much about the visual hierarchy of your emails before, now’s the time to start. Here’s few reasons why you should look into how you can design your emails better. 

(Image Credit)

Above is a heat map of the Google search engine results page, a blog page, and a product page. Each example showcases the importance of positioning when it comes to engaging your traffic. In the same way, placing your content blocks smartly within your email will help you harness the reader’s attention to get the best results. 

The visual hierarchy of emails establishes the relationships between various elements and guides the reader’s attention subconsciously.  This is because our brains are wired to focus on a few details and ignore the rest to make sense of what we feel is the most important information we’re receiving. Knowing where your readers are most likely to focus helps you position the content in the right place on an email. This helps you instill the desired action (your CTA!) without sounding too persuasive. 

Let’s take a deeper look into how this pertains to email marketing. 

Various Factors To Consider For Flawless Visual Hierarchy 

In this section, the factors affecting the visual hierarchy are explained. 

  • Font Size – Bigger font size attracts more attention while smaller sizes help convey information in detail. Using bold, underline, and italics attributes also help in highlighting any important information in the text body. 
  • Use Of Hero Image – Hero images are the featured images displayed in the upper fold that explain the purpose of sending the email. Only one hero image is used, and it’s positioned at the top where readers can see it as soon as they open the message. 
  • Color Palette – The color scheme used in email template design should capture the attention of your readers as well as comply with your branding strategy. 
  • Color Contrast – The elements in your email body should clearly differentiate from each other. Generally, this is done using color contrast. It’s also advisable to consider color contrast while picking up the font colors for your email body as well as the CTA buttons. 
  • Content Block Layout – The priority should be allocated to important elements when placing from top to bottom. You should avoid placing content blocks of equal relevance in horizontal, but there may be a few exceptions to it. 
  • Repetition – Repeating color schemes and content placing patterns signals your readers to take a focus on certain information subconsciously. 
  • Proximity of Content Elements – Keep the closely related elements in proximity to each other. For instance, keeping the heading and subheadings in close proximity directs your user’s attention naturally. 
  • White Space – The white space allows your readers to focus on various content elements as well as the CTA button. White space also allows you to add a perspective to your message. When used properly, white space enables you to emphasize certain content blocks. Remember, you don’t have to fill every square inch of your email with color or content. 

You can experiment with different layouts and multimedia, but keeping the elements mentioned above a standard helps to give a visually consistent user experience despite design variations.

Examples Of Visual Hierarchy In Emails 

In this section, we’ll share a few examples of using visual hierarchy principles in email marketing that expert email developers use in their designs. These are time-tested methods with many big brands already use them. 

Inverted Triangle

This example from Apple Arcade beautifully uses a hero image and places a call to action button at the tip of an imaginary inverted triangle. It’s an effective way to drive reader’s attention in a natural way, while also making click-through effortless. The phone size displays text in bigger fonts in the headline section, and it’s reduced in the email body to showcase a visual hierarchy of importance. Overall, it’s a neat design which goes equally well with computer and mobile phone screens. 

(Image Credit)

Z Pattern 

Z pattern is one of the widely used visual hierarchy principles in email marketing. As you can see, the reader will easily skim through the message following this zigzag eye movement pattern. The color palette used is consistent throughout the message, and they have made excellent use of multiple typefaces as well as bolded call to action buttons. This layout works wonders for packing a considerable amount of content into an email that doesn’t look overly crowded. 

(Image Source)

F Pattern

In this example, you can see how the F pattern is used in relation to the hero image and call to action button—showcasing how a users eyes would move across and down an email. This is also one of the most popular hierarchy methods because it makes reading simple and convincing. The contrast is compelling, and the overall theme feels very simple and easy to consume. The F Pattern is widely used in single-column HTML email templates, and it is considered one of the best options for mobile-optimized messages. 

(Image Credit)

A Few Points To Remember:

A few things that you should keep in mind while designing your next template:

  • Set the visual hierarchy with respect to the number of content blocks. For instance, the inverted triangle pattern packs only one subject with one hero image and a CTA. F Pattern can include more blocks on the lower end, while Zig Zag Pattern works best with multiple equally important blocks.
  • Always put action-oriented elements where two or more edges meet each other. In the case of the inverted triangle, the CTA button was put at the union of the two sides.
  • Don’t overdo any of the design strategies, like combining two design patterns. Try to focus on a single hierarchy frame and keep it simple. 

Bonus Tip:

You can even add gradients to guide eye movement and get your subscribers to scroll through your email. It reinforces the visual hierarchy of your email. 

Take a look at this email by Simple.

In order to announce the launch of the Dark Mode theme in their mobile and desktop app, Simple has used a white-to-black gradient. The headline “Embrace Your…” will pique the reader’s curiosity and encourage them to check out the entire email. 

(Image Credit)

Wrap Up

Emails shouldn’t just be about the readability. Visuals are important for aesthetic appeal as well as to convey your brand language. All of the principles as mentioned above don’t necessarily fit with each other in all cases, so you need to analyze what works the best for the given email template design. Make sure you use them as required, and you will get beautiful email designs that work like a charm for your subscribers. If you’d like to learn more about how you can leverage highly-personalized, high revenue-generating emails for your marketing campaigns, get in touch with us today

Author

Author Profile Image

Kevin George is Head of Marketing at Email Uplers, one of the fastest growing custom email design and coding companies that specializes in professional email template creation and PSD to HTML email conversion. Kevin loves gadgets, bikes, jazz and eats and breathes email marketing. He enjoys sharing his insights and thoughts on email marketing best practices on his blog.