17 min readMay 25, 2021

template design

Top highlight

16 Best Email Design Examples

uxplanet.org

Sep 21, 2017 · 16 min read

The email marketing isn’t dead. The number of practices to follow for better email design are growing in an exponential rate.

Email marketing is exactly that source which instantly provides the income and generate leads. The expenses that were spent for email marketing will be paid off greatly. Statistics reveal that by 2020 the number of users who use emails as a communication source will pass the benchmark of 3 billion people worldwide.

A lot of email marketers even believe that emails are better to outreach people than social medias. There is no more simple way to bring your brand recognizable as to send the series of welcome emails. If you own a startup it’s the best decision for you to start the email marketing campaign immediately.

What actually designers do before they start their own email design? Of course, they search for the inspirational samples that may bring many fresh ideas how to make the design in the best way. Competitive analysis and industry analysis take not the last part in the design process.

That’s why it’s crucial to check another email template designs and unsure oneself that you have chosen the right direction.

Experiment with colours but the rainbow style is not your choice

While you are choosing the palette for your future email template, make sure that you have chosen the colours that could be easily combined with your logo and will improve the company identity and not break the design.

A lot of companies are afraid to use the black colour as the main in their template design. If you are an ecommerce business and you have a proposal for the Black Friday this awesome template is for your inspiration:

The simplicity! That was the principle that made this email design uniquely awesome. Here is an experimentally made proof that you may use even only two colors and create the perfect email and no matter what it will be: the newsletter, the promo or the abundant cart.

Don’t try to make your email looks like zebra. The good combination of colours may improve the user experience, especially when we talk about the font colour. Don’t use grey colours because with the different contrast and brightness screen settings that actually your users have the font may become unreadable and you will never guess what settings the majority of your email audience has.

So there is even no need to experiment. Classical black font is the choice for the bright background and the classical white font is a right choise for the dark backgrounds.

Use colours to grab attention

On the other hand, it’s the easiest way to underline some statement or thought when you use different colour for it. At the same time, there are chances that you will mark the element that doesn’t have call to action and it is only informative one so you will take away the user’s attention to those parts of your message that don’t bring any sense for you and can’t give you a conversion.

One more fact is when you are choosing the colors only basing on your personal taste where are lots of chances to make your mailout weird for the majority. If you choose too many colours it’s hard to concentrate on the content and if you use the same font colour for the whole email some blocks will be definitely hard to read.

Sometimes it seems that to choose colors for an email design is more than easy but actually it is the hardest stage of the design process. Often the awkward color scheme may ruin the user experience and harm the brand consistency, so its more beneficial to have a professional email designer in your team than make email templates by yourself.

Here is the bright example with extremely good colour scheme choice:

The only case when the contrastly different colour looks great is when you use it for call to action buttons. Here is the email banner example where this trick was used:

Be creative with animations

Of course, you have already heard and read that animation grabs more attention than static images. The next statement should be about the great sizes of these files and an advice to use only one animation per an email that goes next.

There is no need to repeat those statements (as I actually did) and to explain them. I will go deeper and tell you that, of course, the animation grabs more attention but that doesn’t mean that you will improve an open rate or increase conversions.

Remember, that animation doesn’t show that you care about your users (especially about the email loading speed), doesn’t help you to cover the email topic and doesn’t improve user experience. It’s better to consider that the animation is the element of fun and creativity.

There is no need to explain that email animation is 100% usage of Gif files. All the technologies like Flash or Unity where you may create the animation will not work in email clients, so the GIF is the only choice. That’s why don’t forget about GIF compressors that allow you to optimize email message size.

Here is the cute example of animated email banner:

Keep It Simple

Of course, you’ve heard this rule almost everywhere and not only in terms of email design. The simplicity is like an oxygen for any design technique. The harder to understand what was the purpose and what’s the sense of the message, the less results you will get.

You are limited with space in email design. The more conveniently you use it, the better designer you are. By the way, minimalism is always a trending tendence.

Simplicity could be devoted not only to the amount of email elements or colours and fonts you choose. Simplicity is the term used to the whole message in general. That’s not possible to call email simple if the colour palette falls for simplicity but the amount of text is huge and the amount of images makes the message really long.

When you finished the email design ask yourself if there are any elements that don’t make sense in this letter and, of course, ask if the message topic is clear enough for understanding. That’s all you need to create simple and clear email design.

Here is the minimalistic email template from Loft:

Here is one more cute sample:

Be creative with your content

When we are talking about the content we always mean text but actually the images are also the part of content. Of course, you should avoid using the most common cliches and general phrases that don’t make sense. The text should be clear as visually as for understanding.

The less text you write the more chances that it would be read until the end you have. Try to be creative with your test but don’t forget that your message should be clear and the person who read it will exactly understand the message as you expected.

If you are choosing the images, don’t forget about the rule that you should prefer two times bigger resolution in order to be displayed properly on Retina screens. That’s not enough just to use a responsive email template. Make your images fluid and be sure that they will be displayed in the best way on every screen and in any email client.

The main point of content delivery throughout the email messages is not even choosing the right resolution for images and writing the catchy text. You should properly combine the images with a text. Here is the very moment when creativity reveals. Don’t make your message too cut and dried, don’t be boring and don’t mess with your subscriber.

Here is the perfect and not less than creative solution:

Use additional options

The progress doesn’t stand still. There are many new features developed to interact with user even in their email inbox and you shouldn’t miss them out!

The trending tendency is to use timers especially in the mailouts that are devoted to time limited sales and special offers. When you use a timer it’s the same as you say “Hurry Up” or “Be faster than the others”. The only disadvantage of this feature is that if you don’t know the HTML it will be hard for you to set up it correctly with the real time, especially in case you would like to make the timer start only after opening.

Here is the bright example made by stripo.email:

The next wow-feature is a scratch field which you may add just into your email. This special field allows user to scratch their discount or reveal any other hidden information. This feature could be used in emails devoted to sales, especially for those who has personal discounts.

You need to have HTML skills in order to add scratchy field into your message but the results worth the efforts. Here is an excellent email banner example on this topic made by Forever 21:

One more feature that could be added is a a flipping effect. This effect could be used with any email element but usually it is used for products or CTA elements. It catches the attention in the same way as animation.

It’s better to combine the flip effect with graphical elements if you add it to the text it will be really difficult to read the phrase because it flips. Here is how it looks like:

You may make the flip effect to appear automatically. One more option is to show flip effect only after clicking or dragging the element. Don’t overuse the automated flipping effects because it will be really hard to concentrate while reading the email.

One more trending tendency is to use hover effects, especially for products presentation. It’s really convenient because the user may zoom the product he/she is interested in without using the browser zoomer. Just hover the product you like and you’ll see all the details. There are many ways to implement the hover effects in email design but watch out that it’s quite code-heavy thing. If you have only two pictures to show for the one product it’s better to add rollover effect. Here is how it looks like:

Here is the way how to make it! First of all you should declare the appropriate style in a <head> tag:

<style>

.rollover:hover .rollover-main {

max-height: 0px !important; }

.rollover:hover div img {

max-height: none !important; }

</style>

The next step is to use this style in a <body> tag:

</a>

And here it is! Don’t forget to make alts for both pictures and that’s it, you’ve already made the rollover picture effect.

One more feature that will help you to grow the followers list and to increase the social media popularity is a usage of special snippets. Just use appropriate service to generate the code for social sharing. I prefer Donordigital for this case. You may add this code to button just in your email template or create the separate block.

Here is how the result looks like:

Use icons instead of pictures or in addition to them

If you already have head the issue how to structurize the text content of to give some info in the most constrain form this solution may be common for you. Use icons in order to add more graphics to your email without increasing the whole message size greatly.

If you would like to list the benefits or advantages of your online store or any business you have you can’t write just a list because no one will read it. For this reason as many others you should use icons. They grab more attention than just text.

The double winning solution is to use animated icons but watch out if they are situated on the distance from each other. If you put together two different animated icons that looks weird and it’s impossible to concentrate on reading. Nethertheless, the animated small icons will weight much lighter than GiF banners or pictures and that’s the reason to choose them.

Here is the perfect email template which adopts icons in its design:

Make It Recognizable

It’s better to choose one style for the mailout series to make your messages more recognizable. Your logo will never change so it’s better to choose it as a starting point of the whole design concept.

The email design should be wise supplement of your marketing activities. While making the email template design move from the goals you have. So you have two main targets such as to increase conversions and to improve user retention. Well designed CTAs will help you to reach the first goal and if you make the convenient solutions in terms of email design, you will reach the second target easily.

Honestly, that’s not enough to follow only your own goals, more important is to meet your subscribers expectations. Provide only interesting, up to date and relevant content. Make personalised email campaigns and don’t forget that personalisation is not only using the name of your customer. It’s much bigger thing which allows you to advise the products that your users are really interested in.

Be the one whose subscribers can’t wait to receive the next email. The inquiries and surveys will help you to know better what kind of information your subscribers really need. If you have a blog, ask your customers what article they expect and your content plan will be made.

Here is the email template example which is hard to forget:

Develop your brand style

To develop the brand style and to make your email recognisable are the synonyms in terms of email design. At the same time, you may develop the brand style which is not recognisable at all.

The thing that you definitely need is to stand out in the crowd creating the unique brand style. Be the one who is not alike your competitors. Be clever and different. Implement your creativity not only in the content that you provide but also in the forms and styles.

Your email template design should not break the brand consistency. A lot of companies create the welcome emails in the same design style as their landing page was made. It’s a good practice, I doubt.

It’s definitely worths the efforts to define the message that your brand design concept will reveal. Ask yourself what striking points you would like to bring to user awareness. Rely on colour psychology and run few A/B tests with ready solutions in order to define the best brand design for your company.

Here is the example where everything from fonts to colours is made to emphasis the brand style:

Make it responsive & mobile-friendly

Of course, now, in 2017, could not be even a choice what kind of template to choose. You should take care of your mobile audience and that’s why you always choose a responsive email template.

But what happens if you don’t do that? Actually, you may choose the simple structure of the one column email template with quite big elements and a big font and the mobile copy will be readable. In this case, you will never know exactly if this template will work perfectly in different email clients.

The mobile-first approach in design and development is really popular and there are many reasons for thet. First of all, according to 2015 statistics, 75% of Gmail users open their inboxes using mobile devices. That is already a reason to care about the mobile email design because Gmail is one of the most popular email clients.

Due to the global statistics the number of unique mobile users will break the 5 billion benchmark this year. Hope, there is no need to say that almost every person in the world uses emails. One more fact is that emails are more likely used for business conversations so

Responsive email design could be implemented using the media queries for different width. You don’t declare the width as just a numeric value, you should define the maximum width and use the percentage to declare the sizes for different email elements.

Responsive email design is much time consuming that creating any other email sample, but the result worths the efforts and there are many different tools that could optimise your workflow greatly. Read the article by Stripo marketing team about the hottest tendencies and the best tools for responsive email design.

Here is the sample how to check the mobile version while coding the responsive email template in Stripo email editor:

Make the visual step-by-step guide

If you need the user to make the scope of actions or explain how to work with your software solution or a product, it’s better to make a short guide in order to be understood correctly.

When you are making the guide it’s better to illustrate every step with a picture or even an animation that describe everything that you have written before the image. Even when the user won’t read the text the message will be clear because of images.

Email guides like the emails of any other email types need to contain CTAs, links and relevant content.

Here is the example of the perfect email guide:

Don’t forget about newsletters

If you have a blog you need to make newsletters and inform your subscribers about the content updates. This tactics provide you constant traffic is you send the email newsletters regularly.

Email newsletter design have the same rules that any other message type. You should care about the mobile version and avoid too much text, make the CTA buttons visible and clear and provide only relevant and interesting info.

The best email newsletter design is always the one that is simple, short and succinct. It’s better to segmentate your client email base by interests and send personalized newsletters.

Here is the perfect email newsletter design sample by 99 Designs:

Use your own graphics

Of course it’s more time consuming to create your graphics for email mailouts but the result worth the efforts even because the professional design approach will be visible and the design itself will be more seamless.

If you’ll make the animation it will be amazing. Try to show the advantages your product or service has during the animation. If you make animation only for fun, make it short and lightweight.

Here is very stylish solution for newsletter by 99 Designs:

Contrast

The simple contrast could be a powerful instrument to underline some statements and thoughts. The best solution is to use contrasting colours for CTA buttons. Although the contrast may be quite a good solution you shouldn’t use it instantly and make a colorful template which will make the eyes bleeding.

Often the contrast appears when you combine different fonts. It’s better to choose only web safe fonts and use no more than 3 different fonts for email. Actually the contrast is when you place together two or even more completely different elements or unite two completely different styles.

Contrast always makes the impact and grabs attention so use it wisely. Here is the perfect minimalistic and also created using contrasts email example:

Focus on details

You shouldn’t leave any detail without attention. Often the details may reveal your professionalism and improve the email in general.

What info to place in footer?

How many block should I use?

What colour would be the mail for this design sample?

The list of questions could be endless. All of them refer to details separately but if you sum the answers up, you will get the email design concept.

The professional design could be defined in the same way as the details may form or complete the quality of the good clothes. Here is the perfect example where any detail doesn’t cut the eye:

Make the balance

You know the rule that almost every email marketer follows. It says that you should dispense the text and images in 40% to 60% proportion in order not to go to spam. This relation is used to be the only one rule due to balance.

The simplicity is a key to balance. Don’t overload your message with useless images or don’t ever write the terms and conditions or the privacy policy after footer because no one will read it. The more consist you will be with your message the more chances you have that it will work perfectly.

Everything in your message should serve your main goal to cover the topic but don’t forget that your users have their goals too. Make surveys and inquiries to discover how exactly to provide the content and what topics should be covered primarily.

The most important thing while searching for balance is A/B testing. That’s the thing that will help you to define which sample works better than others.

Here is the perfect article made by Stripo.email which will help you to go deeper in email template design and here is the highly balanced email template made by their design team:

Conclusion

Hope that after reading this article you are fueled with inspiration and is up to create something wonderful for your own business. The trends come and go but the style is the thing that always remains. Find your own style in email marketing and you will easily improve your conversions.

There is no need to discover the continents again and spend months for one email template. The simplicity should be the mail rule for you to follow and, of course, don’t forget to keep up with times and make only responsive email design.

Be creative and create uniquely simple and at the same moment succinct emails because your subscribers deserve the best from the best.