How to make killer email designs

Peter Vukovic

1.5 billion dollars — that was the size of the email marketing industry in 2010, and it’s expected to grow to 6.5 billion by 2018.

Obviously, having attractive and engaging emails is a number one priority in this industry, and a must-have skill for any serious designer.

Luckily, you don’t really have to learn anything new. You just have to be aware of few principles driving the email design format.

It’s a clicks game

Email design is not a brochure, leaflet or any other static piece coming from the print world. It’s actually a micro website, adhering to all the same rules of good web design — simplicity, visual appeal and focus on user interaction.

01

Understanding this is step one to creating better emails. Too often, designers create emails as if they will be sent out as an image attachment, which is a completely wrong way of looking at things — more than half of users have images turned off in their email clients, meaning they will see precisely nothing (and do nothing as a result).

Proper emails are HTML coded, just as websites are, with only one goal — make people interested enough to click on a link. The higher the click count (CTR, or click-through-rate) the better job you did.

Knowing that, let’s see how to make it happen.

Stick to 600 pixels width

02

While screen sizes and resolutions improved significantly since 1990’s, the email somehow got stuck.

The problem is most email clients display messages in a rather narrow pane which is, for large majority of users, still between 550 and 650 pixels wide.

To make sure your design stays visible, it is best-practice to restrict layout width to 600 pixels. While this isn’t falttering for that HD monitor you have, it will force you to keep things simple — and that’s always good.

Use proper fonts

03

Ah, that feeling when you pick the right font and your design just “clicks”.

Unfortunately, you’re not going to have a lot of these moments designing emails. As mentioned before, emails are HTML coded content that has to work with different browsers, email clients, desktop and mobile devices.

This means all of your text will be rendered using fonts from client’s computer — if the system cannot find the font you specified, it’s going to replace it with the closest match (which is, more often than not, something very ugly).

The challenge is to stick with web-safe fonts like Arial, Times New Roman, Courier New, Tahoma and Verdana. Almost all Mac and Windows machines have them installed, and you can find a more comprehensive list on this website.

Grab attention with headlines and images

04

Nobody has time these days — we literally decide in microseconds whether we like something or not, whether we want more of it or we want to forget it.

Work with this: use a combination of great headlines and captivating images to grab attention and tell your story. Keep body copy (i.e. the “text”) to a minimum and point people to the website where they can find out more.

Think of the whole email design as the website home page… feature the stories, but does not share them. Designer’s Bookshelf is a nice example of image and headline driven design.

Create visible call-to-actions (CTAs)

05

“Read more”, “Buy now”, “Get started” — in email marketing world, these are called call-to-actions, or more conveniently CTAs. They are responsible for taking user from their inbox to an external web page.

CTA’s are the heart and soul of email design and should be as prominent as possible, usually in the form of a larger button. The button approach kills two birds with one stone: CTA links are easy to notice, and if you’re on a touch device, very easy to click on.

To increase user engagement, make the most important and primary CTA slightly larger and differently colored from all the rest. For example, Inc.com leads their emails with a featured story and a very effective CTA.

Design a perfect footer

06

Email marketing is a huge industry and has some specific rules — for example, if you send out mass mailings, you have to give users a way to unsubscribe from further emails. A footer is not a place to be creative, but place for mandatories.

To make sure your email design is legal and professional, you should include the following information in the footer:

  • Client’s physical address
  • Unsubscribe link
  • A short reminder on how users got on the list (i.e. “You are receiving this because you subscribed at our site”)

It is not mandatory but is common to also include:

  • Phone
  • Social links
  • Forward to friend link

Email design inspiration

07

Well-designed emails grab attention and generate clicks — that’s about all there is to it.

Using proper fonts and keeping the design focused on images, headlines and CTA’s is the foundation of well-crafted emails that will keep users engaged and clients happy.

For inspiration, check out emaildesigngallery.com which has a great collection of beautiful email designs.

Want to create email designs? Check out some active contests on 99.

The author

Peter Vukovic
Peter Vukovic

Peter Vukovic is a seasoned designer & creative director with 10 years of experience in worldwide advertising agency. He is a proud member of the 99designs community. You can view his 99designs profile here.

Related articles

The fundamentals of responsive website design

The fundamentals of responsive website design

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter:…

The new Google Fonts is a win for designers

The new Google Fonts is a win for designers

Google launched Google Fonts in 2010 to provide web fonts free of charge. Over the next six years it grew considerably, becoming very popular with web designers—for the obvious reason of affordability. The original website was definitely what the startup world would call an MVP: minimal viable product. It got the job done, but it…

Current Design Contests

Designers, check out these contests so you can start building your career.
0%