Can't find the perfect font for your logo?
Get hundreds of logo designs in under 5 minutes by completing 5 easy steps
  • 1 Choose some designs that you like
  • 2 Choose your colors
  • 3 Add your company name
  • 4 Pick some icons
  • 5 Download your logo

Give it a try:

Visual Hierarchy In Emails : The Simple Guide To A Complex Concept

by Kevin George Tweet - in Email Design - [wtr-time]

Visual Hierarchy In Emails

Last updated on November 15th, 2021

The main objective of any email campaign is to make the subscribers read your message and take the next action. For your subscribers to scroll through the entire email, you must organize the email layout such that it grabs the subscriber’s attention. The visual hierarchy comes into play here.

Visual hierarchy refers to the placement of various graphic elements and text in perfect alignment with each other. It will, in turn, influence the user experience and how the audience will perceive your message. Proper prioritization of the content and images will connect with the subscribers and guide their eye scan pattern.

To put it simply, take a look at the image below. See how different elements are arranged in the increasing order of their importance.

Importance of Visual HierarchyChecking For Visual Hierarchy

Squint test is the most extensively used method to check your emails for visual hierarchy.

Through this technique, you must keep your device at an appropriate distance that would allow you to view the imagery clearly.

After adjusting the vision, squint at the design. This will make the entire email hazy and you will be able to visualize the elements that stand out.

If this is how you want your subscribers to see the email, it is good to go. If not, you will have to customize the email design and change the placement of the important elements.

Continue the squint test by testing the alignment and modifying the color, contrast, and texture of the visuals.

Here’s A Welcome Email Template by Trello

Email Template by Trello

[Source: Really Good Emails]

Carry out the squint test on the visual. The user will instantly see the CTA followed by the explanatory copy along with it.

Factors Influencing Visual Hierarchy

There are several parameters that influence visual hierarchy:

01. Size Of The Font

While bigger font size helps to capture the user’s attention, smaller font size conveys the information in further detail. You can also use formatting elements like bold, italics, and underline.

The same principle applies to HTML tags like <p>, <H1>, <H2>, and <H3>. They help to organize the email better.

Take a look at this email.

They have chosen the font size to perfectly abide by the rules of visual hierarchy.

Email Example

[Source: Really Good Emails]

02. Hero Image

The featured image placed at the top of the email, that reflects the purpose and theme of the email is known as hero image.

Sandland does a great job at selecting a hero image that grabs the subscriber’s attention right away.

Sandland

[Source: Really Good Emails]

03. Color Palette

Choose the color palette in such a way that it matches the purpose of the email and conforms to your branding guidelines.

Saturation, hue, and lightness or darkness are three distinct components of colors.

Let’s Understand How You Can Create Hierarchy By Using Them.

a. Saturation

Suppose you have a black and white image. In such images, a colored element will capture the reader’s attention. Alternatively, you can use neutral colors and make one element more saturated than the rest.

b. Hue

Bright colors like red are most likely to get noticed. Therefore, many marketers use such vibrant colors to promote a discount offer or sale.

c. Lightness or Darkness

If a design uses a darker color palette, bright colors will catch more attention. On the other hand, darker colors will be more prominent in a light design.

Take a look at this email by Apple and see how they have used different colors to make the email more impactful for the readers.

Email Campaign

[Source: Really Good Emails]

Looking For an E-mail Design?

We have helped thousands of business owners from all around the world with their graphic design needs such as a logo design, website design, social media posts, banner design and much more.
Get Your E-mail DesignGet a free quote

04. Color Contrast

Color contrast helps to differentiate between the various elements you have used in your email. Pick the font colors and CTA buttons in accordance with the same.

Here’s an email example to explain the importance of contrasting colors in visual hierarchy.

Gift Card

[Source: Really Good Emails]

05. Content Block Layout

Place the elements in the decreasing order of their priority, from top to bottom. This is also important from the point of view of accessibility as it will help screen readers understand your message better.

06. Repetition

You must use repeating color schemes and content placing patterns to maintain a consistent flow in the emails.

07. Proximity Of Content Elements

Arrange the closely related elements in proximity to each other. For instance: Your heading and subheadings should be placed so that they guide the user’s reading flow.

08. White Space

Most of the subscribers are scanning your emails rather than reading them. White space or negative space gives your readers breathing space to consume your email and understand what it is all about even while scanning.

Different Types Of Visual Hierarchy Patterns For Emails

01. Inverted Pyramid Pattern

In the inverted pyramid pattern, the entire email is designed in the form of an imaginary inverted triangle. The structure of email leads the reader toward a call to action.

This method is great for welcome emails, lifecycle emails, marketing emails, and behavioral emails.

The inverted pyramid model not only works well for emails with a single message and CTA but also for newsletters that have multiple messages and calls-to-action.

You can use it in combination with the 1-2-3 method as it will help you to create a more profound impact on your readers.

See how Medium has done it in their welcome email.

Medium

Your readers are busy people. They want to get to the gist of the email instantly without having to search for it. An email structured in the inverted pyramid pattern gets straight to the point and lets the reader know about the next action.

Here Are A Few Tips That Will Allow You To Ace The Inverted Pyramid Model For Your Emails

01. You must have an irresistible value proposition.

Inform the subscribers about the benefits of your products or services. Let them know why they should care about it and what sets you apart from the competitors.

02. Include relevant visuals.

Visuals are of utmost importance when it comes to inverted pyramid model. The images you choose must support the purpose of your email and its content. It is advisable to use real life photographs rather than stock images. Doing so will reflect professionalism in your email templates and enhance the subscriber engagement.

03. Avoid writing lengthy copy.

A wall of text is the most unattractive thing in an email. Try to write a short yet engaging copy that keeps the reader hooked to your email and scroll further. You can use the Problem-Agitation-Solution formula to make your email copy interesting for the reader and get results. Alternatively, you can tell a compelling story that would connect with the readers on a deeper level.

04. Bring focus to your call-to-action.

Last but not the least, you must add a prominent call-to-action button for the subscribers to take the next step. Instead of a text link, you must include a large button of 44×44 px to increase the likelihood of click-through and conversion.

Teaonic has sent out a nice email to prompt the users to ‘order a refill’.

Whether it is the header, the hero image, the copy, or the CTA, everything is perfectly in sync with the inverted pyramid pattern. They have presented their USP in the first fold followed by the most popular products.

Email CTA

[Source: Really Good Emails]

02. Z-Pattern

The Z-pattern guides the route of the human eye to facilitate reading or scanning the email.

Here’s How It Works:

Your subscribers start off by reading from the top left and proceed toward the top right. It makes a virtual horizontal line.

Then, they move downward to the left side of the email (or web page) and it creates an imaginary diagonal line.

In the end, they form another horizontal line by moving toward the bottom right.

All these eye movements, combined, will give us a hypothetical “Z” pattern. (as shown in the image below).

Z - Pattern

Remember that these Z-patterns do not have to follow the theoretical Z-shape. There can be ‘n’ number of Z-angles in the pattern.

If your email has multiple messages to convey in small bits, a Z-shaped pattern will work the best for you. It is a great option when you want to control the eye movement of the readers.

However, you must keep in mind that every user will not read or scan through your emails in the same way. The aim should be to direct the viewers on their reading path and then tempt them to click on the CTA.

How to design for the Z-layout?

Include the main components in the top horizontal line. This section will bring the maximum reader attention.

The diagonal line should lead the users to the CTA button with an informative copy.

The bottom horizontal line will feature the CTA and drive the subscribers to take action.

Alternatively, you can also add the CTA at the turns of the Z-pattern. That’s where the eye movement of your reader takes a pause. Many marketers choose to add a CTA in a repetitive pattern at several turns. As a result, the subscribers will be convinced to click-through and take action.

Another important factor that you must consider is the font size. The headline must have the largest font followed by the email copy. Decide the font size of your CTA in such a way that it encourages the user to click-through.

Lavva sends out a nice email that perfectly follows the Z-shaped visual hierarchy.

See how they have placed the CTA buttons at different turns to encourage the user to take action.

Z-shaped visual hierarchy

[Source: Really Good Emails]

03. F-Pattern

The F-layout is suitable to design emails where you have a lot to convey to the readers. While the Z-pattern is used for simple emails with primary focus on the CTA, F-pattern comes into the picture for content-centric emails and newsletters.

Back in 2006, the Nielsen Norman Group (NNG) pointed out the F-shaped reading pattern while carrying out an eye-tracking study. They assessed the behavior of 200+ users reading thousands of web pages.

Based on this research, they deduced that:

  1. Generally, the user starts reading in a horizontal pattern from the top of the content area. It makes an imaginary top part of the letter F.
  2. Subsequently, they move downward and read in another horizontal movement, which is shorter as compared to the first one.
  3. To end with, the reader’s eyes move in a vertical manner to create the remaining part of the letter F.

F-Pattern

Just like the Z-shaped pattern, remember that it will not form a perfect ‘F’ shape as we studied at school. It will look like a rough outline resembling the letter F.

How to make an F-shaped layout work for your emails?

  1. Prioritize the most important and least important part of your emails and arrange them accordingly.
  2. Place the most important information in the ‘hot-spots’ of the layout to encourage better subscriber engagement and interaction.
  3. Set the right expectation by including the most necessary information in the first horizontal section.
  4. Use power words while starting new paragraphs.
  5. Take the help of bold formatting to highlight essential information and CTA buttons.
  6. Make the content easily consumable by using bullet points and separators.
  7. Do not overwhelm the readers by including too many ideas in a single content block.

DocuSign has sent out a detailed email that adheres to the ‘F-shaped’ layout without any information overload for the readers.

‘F-shaped’ layout

Are You Looking for a New Graphic Designer?If Yes, Call Us on +1-855-699-2851 [times for calling 9am to 6pm EST (US)] or Register for a Free Design Consultation

Wrapping Up

Visual hierarchy is not just about making your emails more readable for your subscribers. It is about creating an aesthetic appeal and extending your brand personality. I would like to sign off by saying that test the principles discussed here and figure out what works the best for your subscribers. No matter which principles or layout you choose, visual hierarchy lies at the core of high-converting email designs.

Get Your E-mail Design

Kevin George is Head of Marketing at Email Uplers, one of the fastest growing custom email design and coding companies, and specializes in crafting professional email templates, PSD to HTML email conversion and free responsive HTML email templates in addition to providing email automation, campaign management, and data integration & migration services. He 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.

Contact

Posts

4
Share-this
Need a Logo?
A powerful logo can give a company easy recognition. Create your unique business logo using our AI powered logo maker tool. Or, hire a designer to get your logo.
Best for when you want a logo in minutes. Our Artificial Intelligence powered logo maker creates dozens of unique designs in minutes. You can also edit colors, texts, icons and elements.
  • Uses power of AI & Machine Learning
  • Uses library of more than 10,000 fonts and 1M+ icons
  • No design experience required
  • Pricing starts at $20 but you pay only when you find a design you love.
Best for when you want to crowdsource ideas. Multiple designers submit entries for you to rate and review before you award a winner.
  • Fixed price packages starting from $199
  • Hand crafted designs from World-class designers
  • Dozens of concepts to pick from
  • Get 50+ designs in 7 days
  • 100% money back guarantee
Best for when you want to work with a single designer only. Explore the range of creative services offered by our highly talented designers.
  • Work with a single designer
  • Hand crafted designs from World-class designers
  • Options within all price ranges
  • Flexible turnaround time
  • Multiple revisions