Visual Hierarchy in Emails & The Importance of a Hero Image

By Kevin George

Visual hierarchy

As stats and studies indicate, visual cues help us better retrieve and remember information. Since our brain processes visual images more easily as compared to words, visuals have an edge over text.

We are naturally drawn to colors, contrasting patterns, typography, textures and shapes used in emails and otherwise. But there is one more thing that matters a lot in emails- the position, orientation and size of the visuals.


Understanding how the visual pattern works, designers and marketers have been working around the term -‘Visual Hierarchy’. This is the process of organization and prioritization of content or images in a way that it draws a step-by-step attention to the most important factor or feature in the email – enabling your information to be scanned and understood easily.

Here, prioritizing the information is extremely crucial. As shown in the image below, visual hierarchy is like a pyramid – with the most important elements placed at the top (in larger and bolder fonts) the information is gradually aligned as per its importance, as you go down.

As an email marketer, it becomes a challenge to grasp leads not only because of the increasing competitions (with brand marketers trying every trick in the book), but grabbing the attention of your subscriber is nonetheless a task too.

Visual hierarchy can be of great help here. Patterns observed in the typography, colors, font size, placement, etc. of the email decide the attraction quotient of your email.

To know if you’re actually doing things right, the best method marketers swear by is the “squint test”.

Yes, it’s exactly what the name suggests. All you have to do is just sit back from your computer screen so that the visual is completely and clearly visible, then squint at your design so that all the details blur and you just see what STANDS OUT (It’s actually pretty awesome!).

If you’re pleased with what you see and want your subscribers to see exactly that, then you’re good to go ahead with it – if not, give your email template a new design.

Play around with colors, contrasts, textures, shapes, positions, orientation, and sizes. Getting all these elements in order can give your subscribers an idea of what is the highlight of your email.

Here’s a great email by InVision in which they have used visual hierarchy aptly. Have a look!

Designing for email-Invision

  • The email highlights the important information in a bright pink color.
  • Overall, it’s a simple and minimal email with the necessary information in place.
  • You can see the flow of the information in terms of an inverted triangle- with general information at the top the message is narrowing down towards a CTA.

Let’s check out another example of great visual hierarchy. The footwear brand TOMS has some amazing emails that are aesthetically perfect and pleasing to the eyes.

Designing for email-Toms