Use These 8 Web Design Principles to Boost Your Email Conversion

AB TastyBlogEmailingUse These 8 Web Design Principles to Boost Your Email Conversion

This is a guest post by Sharanya Manola. Sharanya is a freelance writer who specializes in creating in-depth and persuasive, long-form blog posts that bring B2B brands out of the deep, dark alleys of obscurity. She has over eight years of experience producing and managing digital content. Connect with her on  LinkedIn and Twitter

How about we talk numbers before we discuss why design is important for higher email conversion?

It’s estimated that 320 emails will be sent and received daily in 2021. What does that mean to marketers? It means you have to work extremely hard to gain your subscriber’s attention.

Statistics graph - Number of sent and received e-mails per day worldwide from 2017 to 2022
Source: Statista

Now let’s assume you nail the subject line of your email. The recipient excitedly opens it but never quite gets around to taking any action. What do you think could have possibly gone wrong?

You see, people read emails on-the-go and expect them to be worth their time and attention. Simply put, an email must be pleasing to the eye as well as the mind. So unless you design for them your email will have very little value. And you can’t really blame them from opting out of receiving any correspondence from you.

To ensure you design conversion-boosting emails, we’ll look at some web design principles.

Ready, are we?

A balanced and clean design

According to the Hick’s law, the more choices you present the viewer with, the longer it will take them to reach a decision. Going by this principle, your emails too should be simple and functional because frankly speaking, pretty emails alone don’t convert. Besides no one has the time in this age of dwindling attention span!

So how do you design a functional email?

  • Get rid of everything that is cramming the page, especially superfluous design elements.
  • See to it that your email looks consistent with your website or it will lose its conversion scent.
  • Free the header and footer of any clutter.
  • Make sure each section has a heading, body text and a prominent call-to-action or CTA button.

If you consider the above points in mind, Buzz Sumo’s email is on-point. White space (discussed later in this post) is used perfectly and makes comprehension easier.

BuzzSumo clean email design layout

Clear visual hierarchy

Have a look at the following snippet of an AB Tasty blog post.

Ab Tasty - block of content with no visual hierarchy

Have another go.

AB Tasty - formatted blog shows visual hierarchy

Do you notice that a simple change in formatting uproots visual frenzy from the first snippet? It becomes more readable.

Apply the same straightforward logic to your emails. Organize information in the order of its importance so that the top-ranking element draws your user’s attention the most and so on.

Let’s consider the following email from Search Engine Journal. In one glance the reader knows what the email’s about and what they should focus on first.

Search Engine Journal email design with clear visual hierarchy

In case you were wondering, you can create a hierarchy using colors, too.

Email design - Use color to create visual hierarchy - color


To perfect creating a visual hierarchy, it’s a good exercise to go through a couple of email campaigns and practice ranking information. This will help you develop a critical eye and pack a punch in your next email!

You could also take the Squint Test that is popular in the design circuit. Important elements should stand out in your blurry vision. It should look something like the screenshot below.

If squinting your eyes is too much then you can add this cool Chrome extension.

Example of Squint test of an email

Directional cues

A directional cue is a visual aid that is used to draw a person’s attention to the call-to-action button on a web page. As a matter of fact, a human brain can identify these signals subconsciously and look in the direction you mean them to focus on.

There are two kinds of directional cues. The first and the most popular ones are explicit cues such as arrows (also used to prompt visitors to navigate the fold), lines and pointy fingers.

Using directional cue on codify web page

Then there are suggestive or implicit cues with a person gazing (deictic gaze) or looking in the direction of the CTA or the conversion goal. Sample the home page of the Teachable website. Where is it that you are looking?

Teachable website - a woman looking at the CTA (1)

Uncanny? Nope. It’s how our mind works! Let’s take an example. Imagine you are at a party and notice someone staring at your shoes. Your immediate reflex action will be to follow their gaze and look at your shoes! It’s also how our mind works.

Now, look at the email by Michael Kors. Both examples show how effective a gaze can be in drawing attention to the CTA.

Michael Kors email - using suggestive directional cue to highlight CTA (1)
Source: Email Designs

Be careful not to go crazy using these cues. If you use too many arrows people might feel you’re jostling them. Besides, when it comes to suggestive cures make sure they fit the context and reinforce the message, not distract or dilute your efforts.

Source high-quality images

A picture’s not worth 1,000 but 60,000 words! According to a Nielson study, our brain prefers visuals and processes them 60,000 times faster than text. But we also tend to scan content and scrutinize images. Precisely for this reason, it’s wise to use message-laden, high-quality photos that are in sync with the written word on your email. With a little help coming from you, the recipient will take the required action promptly even if they don’t read everything.

The best part about using high-quality images is that they make your brand more authoritative and message more persuasive. It sounds far-fetched but it’s true. Your subscribers can sense the hard work you put in crafting the masterpiece email.

There’s a catch, though.

Don’t go overboard and plaster your email with images. It can result in visual bloating. Strive to create a fine balance and you have a winning email ready.

Meanwhile, here are some tips on shortlisting photos:

  • Use images that reflect your brand personality.
  • Bundle photos that give a consistent look and feel to your email.
  • Avoid overused, lifeless and decorative stock photos. They are notorious and known to give readers a migraine!
  • Look for positive emotions in photographs. However, as a research published in Harvard Business Review suggests, you can flout the norms as viral success is still possible “when negative emotions also evoked anticipation and surprise.”
Robert Plutchick’s Wheel of Emotions
Robert Plutchick’s Wheel of Emotions referred to by Harvard researches to categorize emotional drivers in their research.

Use of colors on CTA

Color is a powerful visual communication tool on a website. It can evoke emotions and influence attitudes of people. It can also affect the way people perceive a brand. Clearly, you can’t overlook colors in your email design, especially the CTA(s) as therein lies your email conversion success.

But is there one color that brings maximum conversions? The simple answer is: No. Although you will come across studies that suggest using red or other colors (based on your goal), you shouldn’t blindly follow them.

In fact, since visual elements can be tricky it’s best to test what’s working for you. Start by using a color on the CTA button that contrasts with the background. It creates an Isolation Effect or the Von Restorff effect. According to this color theory, the object that stands out the most gets maximum attention.

Here’s how Udemy uses color contrast in their email.

Udemy email, an example of using contrasting CTA button color against the background (1)

If you remember, I mentioned the Squint Test earlier. Test your email once again. If the CTA blends or clashes with the rest of the page it’s time to start over.

One, prominent call-to-action

The more, the merrier doesn’t work in the marketing world. On the contrary, as psychologists Sheena Iyengar and Mark R. Lepper found out in their famous  jam study back in 2000, having too many choices can be psychologically exhausting.

You would agree, won’t you? Nothing in the world is more off-putting and agony-inducing than not being able to make a decision!

If you look at it from a conversion stance, having too many CTAs on your email can become a cause of decision fatigue. In comparison, if you stick to one CTA you don’t pressurize the subscriber instead present them with a default choice, resulting in higher conversions. Whirlpool got a 42% of CTR by reducing the number of CTAs from 4 to 1.

With respect to the size of the CTA button, bigger doesn’t always mean better. It should stand out not scream for attention if you know what I mean! Overall, the color, the size and the CTA copy should be powerful enough that it compels a click.

Negative or white space

Negative space or white space is the “empty space” that surrounds various design elements on a page.

In emails, as on websites, it directs the flow of the page by creating breaks at right intervals. This is true for longer emails such as one sent by Canva (see below). White space between each block of content makes the content scannable and improves the comprehension of the message, too.

Use of negative space on Canva email design (1)

Actually, with the right amount of negative space, an email can look more elegant and organized. It can guide the user and shine the spotlight on specific visual elements such as the call-to-action button. Take for example the following email from National Geographic.

Use of negative space on a National Geographic email (1)

Responsive design

Responsive email designs have steadily gained popularity. And as per the statistics published on Email Monday, 47% of emails are now opened on a mobile device. In fact, Google claims that about 75% of all Gmail users access their email on mobile devices.

Statistics graph chart on email mobile open rates 2018

This makes one thing clear: you cannot ignore mobile phone users. If you do, you will upset your email conversion goals.

So what exactly is a responsive email?

It’s an email that adapts to fit any screen width and contributes to an excellent user experience on mobile, improving the click-through-rates. Basically, it uses CSS media queries that act as conditions or dynamic rules. Once they detect a screen size they activate the corresponding set of rules and the email displays correctly.

What is possible with a responsive email - Litmus
Source: Litmus

Once you have your responsive email design ready, test it across various email clients as well as mobile devices. If they don’t display correctly they will be deleted within three seconds! Can’t risk that, can you?

Wrap up

In the end, it all boils down to designing emails that please and surprise your subscribers.

Trash those complex layouts and blocks of content that make your page look ugly busy. Guide the user in the right direction, allow key elements to hog the limelight and don’t forget to get straight to the point with simple messaging.

Above all, never stop testing as even a small design tweak can boost email conversions.

Signing off and really excited to see how you use these design principles to your advantage!

Share on Linkedin
Share on Facebook
Share on Twitter

You might also like...

Enable your product team to put users in the center of product strategy, while enabling engineering to deploy code faster.
Trusted by
Request a demo
Don't throw away hard-earned traffic.
Make your website work overtime - so you don't have to.
click-through rate
conversion rate
average order value
Trusted by
Request a demo