The Expert’s Guide for Email Design

THE EXPERT’S GUIDE FOR EMAIL DESIGN

Chapter 1: Introduction

In this guide, we hand the mic to 4 of our customers who are excelling in their email design. You’ll find examples of their emails and templates, tips, and recommendations for what they’ve learned along the way. The companies range from an art technology company to a travel app, showing the variety of email design solutions across industries. Here’s a preview:

Artlogic talks about the first glance and going mobile.

Bonusly shares their GIF and call-to-action (CTA) strategy.

Hive Music designs clean templates with bold colors.

StaffTraveler stays in the lines of General Data Protection Regulation (GDPR) while driving brand recognition.

Twilio SendGrid’s template plays with color stories and fun fonts.

Use this guide to see what brands like yours are up to in their email design while also gathering helpful tips and design knowledge that you can take with you in your email design adventures.

Chapter 2: Artlogic achieves the simple and sophisticated

Artlogic strips their email down to the basics with clean lines and crisp images. As you read through Artlogic’s take on email design consider how you can keep the heart of your brand in your emails while maintaining a simple and easy to view design across platforms.

Email Walkthrough

Takeaway

When considering your email design, don’t get too wrapped up in the design of a beautiful, but complicated, email. Learn from Artlogic by recognizing that simple, readable designs are much better than an email that doesn’t render well across providers. For more tips on how to optimize your emails for mobile, read our article on optimizing your emails for smarter sending.

Chapter 3: Bonusly’s GIF game is top-notch

Bonusly’s email design stood out to us for their bright, cheerful colors that matched their brand, their fun GIFs that catch your eye, and their use of multiple calls to action (CTAs). While this fun style will not work for all brands, Bonusly can certainly speak to trying and testing new ideas in their email campaigns.

Email Walkthrough

This email is sent to users at the start of every month to encourage them to give bonuses to their teammates. One clear CTA is positioned at the top of the email with additional bonuses and CTAs in the remainder of the email.

Takeaway

Mark’s experience with CTAs is a great reminder that there isn’t just one way to create emails. In fact, we should all be testing different elements of our email design to see if something like multiple CTAs, quirky GIFs, or CTAs above the fold will make a difference in our engagement rates. Use these additional design tips to boost your engagement rates.

Chapter 4: Hive Music plays with bold colors and clean designs

Hive Music’s template speaks to how simple an email can be while still being beautiful! The clean layout, quick copy, and bold CTA quickly inform you of the purpose of the email (which, if you don’t read Italian, is to sign up for classes).

Email Walkthrough

The goal of Hive Music’s email design was to create a simple-to-read but attractive template. It needed to be beautiful and colorful enough to catch the reader’s attention while also informing students that registration for classes is open.

Bold colors 

Giovanbattista used a grey background and a white main container to help focus the reader’s attention on the lighter center area. Because the logo featured here is black and white, he added vibrant colors in the form of a colored header and CTA to help the email pop.

Testing 

Giovanbattista conducted tests for various email providers and email clients. He tested the use of SVG, a vector image that improves the quality of logos and other elements while also reducing the size of media files (a great benefit for mobile devices and users). Unfortunately, he had to revert to PNG and JPG, as SVG is not currently supported by the majority of email clients. Another element he tested was the use of CSS inside <style> elements. In this case, the style elements were accepted, specifically if the element was placed in the <head>.

Consistency across sub-brands

The email template was designed for the entire Hive ecosystem and can be easily adapted to any of the sub-brands. Each sub-brand has its own color scheme, which can then be displayed in the email by changing the header, logo, and CTA colors. This cohesiveness among sub-brands helps drive connection and increase engagement for the Hive ecosystem.

Takeaway

Having a neutral base, like a light gray or light tan, is a great way to begin your email design. This neutral background color (unlike a dark background color) allows you to include pops of color throughout the email without overwhelming your recipients. You’ll want your CTA to be the boldest color, but pay special attention to the contrast of the text to the CTA background color. The contrast should be high enough that the text is easily legible.

To ensure that the color, text, and general formatting is consistent across platforms, follow Giovanbattista’s lead by testing your email before you send it. Use platforms like Email on Acid, and these 10 Tips for Designing and Developing Emails to help your emails look great across all email providers.

Chapter 5: StaffTraveler flies high with easy unsubscribe options

Two elements of StaffTraveler’s email stand out in particular: the branded illustrations and the “Do not email me again” link underneath the first call-to-action. This startup is making bold moves in the airline industry and their email design!

Email Walkthrough

This email announces the upcoming launch of the new StaffTraveler app with improvements for iOS and Android, breaking out the updates in easy-to-read sections with fun illustrations that pull your attention all the way to the bottom of the email.

Branded illustrations

Laurens wanted their emails to be more than a message, but also a reminder of their brand. They incorporated branded images into the emails to create brand recognition and give their brand more of a personality.

One of their most popular illustrations is a smiling suitcase (featured to the right). This illustration has become the mascot of their brand with enough demand for this illustration that StaffTraveler now sells it as a sticker!

Do not email me again button

Generally, you’ll see an unsubscribe button at the very bottom of an email in fine print. Due to the recent implementation of GDPR, Laurens wanted to give the button more visibility and make it as easy as possible for recipients to unsubscribe. They added the button below the first CTA of the email to make sure their recipients knew they could opt-out of StaffTraveler emails.

Takeaway

An unsubscribe button may not feel like a design choice, but really any element of your email is influenced by design. From unsubscribe button placement to font size, it’s important to be intentional in your email creation. While it might seem counterintuitive to place your unsubscribe button so far up in the email, in Laurens’ experience it helps keep the list clean. This helps ensure that you have engaged recipients who won’t be flagging your email as spam. For additional unsubscribe recommendations, check out our article Unsubscribe Email Best Practices and Email List Management.

Chapter 6: Twilio SendGrid’s email marketing template seeks adventure

In addition to our customers’ beautiful emails, we want to highlight an email that our Sr. Web Designer, Corinne Nagel, created for an email template in our Marketing Campaigns platform. This template is one of many that Twilio SendGrid’s customers can use and adapt for their email marketing campaigns. Corinne based the template off a hypothetical travel company, Off Grid Adventures, incorporating bright colors, active images, and a fun font into this email design. Here are a few of her email design tips and tricks.

Weaving colors

If you have multiple images in your email, Corinne recommends weaving colors throughout the images and email. For this template, she chose an image of a person running on the rope bridge in the mountains because it sparked feelings of excitement for adventure.

She then picked out the boldest color in the image, the yellow-orange jacket, as the color to highlight throughout the other images. She looked for images that either included the yellow-orange color or a complementary color (blue-green). Pulling photos that work together in a color story creates a cohesiveness to the email, and helps you narrow down the thousands of stock photo options you can choose from.

Fun fonts

In this template, Corinne uses a serif font (a font that has a stroke or line at the edges of each letter). Serif fonts tend to be funkier and less corporate, making it the perfect fit for an adventure/travel company. Whatever font you choose, Corinne recommends going for legibility and leaving the cursive, curly-q fonts behind. Lastly, have a backup font in place for those ESPs that only accept a few standard fonts.

Back to the brand

If you’re unsure what color scheme or font type to use, Corinne recommends circling it back to your brand and the purpose of your message. In this template, Corinne pulled the color of the logo into the main content blocks of the email. This coral color is probably too bright for a lot of brands, but it’s fun for a travel company and a great way to represent its brand throughout the email. Also, consider what information you’re trying to get across and how you want your recipients to feel when choosing colors. Colors can have a big effect on emotions and help create excitement (yellow) or calm (light blue).

Takeaway

When designing your emails, take a step back and remind yourself of your brand, message, and target persona. Think about how you want your recipients to feel and how you want your brand to come across (e.g. professional expert, fun and light-hearted, or informational). Keeping the purpose of your communications in mind will help you stay consistent in your email design. For more design tips related to your company’s brand, check out our article, How to Maintain Brand Standards in Your Email Designs.

Chapter 7: Wrapping up with big picture themes

We hope these tips and tricks from email experts in different fields will help you develop and design beautiful emails that you can be proud of. To wrap up this guide, let’s review the most common themes from our interviews with our customers and our Twilio SendGrid team, and look ahead at a few email design elements on the horizon.

• Vivid visuals
  Incorporate visuals that stand out in your emails and connect with your persona. From GIFs of website demos to bright purple CTAs and illustrations unique to your company, find the visuals that fit with your brand. Be sure to spice it up now and again by testing colors, fonts, and images.

• Testing 1-2-3
  The best email designs evolve from a lot of trial and error—and trying to avoid as much of that error as possible in your recipients’ inboxes, it’s important to test your emails before you send them. Use tools like Email on Acid or Litmus to make sure your email renders correctly across platforms. This is important to your delivery and spam rate, as poorly designed emails are more likely to be marked as spam
• K-I-S-S
  Keep it simple, stupid! We’ve all found that it’s better to excel in simplicity than to overcomplicate emails and sacrifice how the emails displays across different providers. Learn from our mistakes, and don’t attempt to recreate your website in email form. Rather, pull elements from your brand, such as your brand colors and font, to help your email feel like an extension of your website.

• Looking forward
  As ESPs continue to develop their systems, Twilio SendGrid’s email expert, Jill Guest, says to keep an eye out for more emoji support among mailbox providers, as well as interactive elements like carousel images or hover buttons. There’s a lot to look forward to in the email design world as ESPs and mailbox providers adapt and are able to do more personalization and interactivity in emails. Watch for ESP updates and the trends that follow, and subscribe to our blog for information on everything email.

Are you feeling inspired by these email marketers? Get started designing your email in our Marketing Campaigns platform. In Marketing Campaigns, you have the option to use our pre-built template with a visual drag-and-drop editor or you can code your emails from scratch. Sign up for a free account today!