A Guide to Email Design Marketing

by
Monica Galvan
A Guide to Email Design Marketing
Email marketing is crucial for online businesses but how can you maximize your efforts for the best results? What types of emails should you be sending? How does design influence email? Learn all this and more in this guide on email design marketing.

What is email design marketing?

No matter what type of industry your business is in, it can benefit from a good email design marketing strategy. Email marketing means having the tools to capture the email addresses of new and potential customers (with consent) so you can keep in touch and send them valuable content in the future. 

There’s a variety of ways to use email marketing successfully. You can use an email list to send promotional emails when you’re having a sale or by offering exclusive coupon codes. But more importantly, you can also nurture cold leads in hopes of converting them into future customers. 

By creating a customer journey with email marketing, you can increase the lifetime revenue of a business. The best part is once you’ve created a strategy and implemented it in an email funnel, these emails can be sent 24/7 to people all over the world at any time of the day, it’s one of the best ways to scale a business.

3 types of emails you should be sending

Now that we’re beginning to understand how important email design marketing is and how it can increase a business's profits exponentially, let’s discuss the different types of emails you should be sending. Each of these types of emails is important in its own way and you should experiment with all of them to nurture a relationship with your customer. Most emails can be categorized into one of three different types.

The 3 mails types of emails
The 3 mails types of emails

1. Transactional emails

The most common and obvious type of email a business should create and start sending immediately are transactional emails. For all online businesses, it’s important to have an automated email set up so that when someone purchases something on your website, they receive a confirmation of their purchase. 

These types of emails are instant, they are sent immediately after a successful transaction online. They help build trust with your newfound customer. If you don’t send a confirmation email, the customer might think the order didn’t process correctly, or worse, they might worry your whole business is a scam. 

Usually, these emails aren’t anything special, it simply repeats the action the customer just took. It might display the product or service name, quantity, price, date of purchase, there could be a link to track shipping if it’s a physical product. The key is to share the next steps with the customer. How and when can they receive what they just purchased? But you don’t have to just stop there.

When designing transactional emails, think about ways you can add the personality of your business's brand. This is where design and branding come in and can help uplevel these types of emails. 

Here’s an example of an automated transactional email sent from Postmates for a food delivery order. Notice the logo displayed in the lefthand corner so we know it’s from Postmates. It clearly says “Thank you for your order” so we know our order is processed and our food will soon be on its way. There’s a relevant photo since we ordered ice cream, it makes sense to include a photo from the ice cream shop. We also have a summary of the order total, last four digits of the credit card that was charged, as well as confirmation of the address the food will be delivered to. 

An example of a transactional email design
An example of a transactional email design

2. Lifecycle email series

Equally important though not always as prioritized as transactional emails are welcome series or lifecycle emails. Lifecycle marketing helps guide potential customers through specific milestones in a sales funnel. These are a series of emails triggered by a single action. Usually, the purpose of these series is to nurture a cold lead and convert them into a customer but this isn’t the only strategy for using them.

An example could be when a user signs up to receive a coupon code for 15% off their first order. Immediately, they’ll receive an email with the code but they might also be added to a lifecycle series where over the course of anywhere from a week or 30–120 days you continue to reach out via email. If they didn’t use the coupon code, you might resend it in a few days or weeks. Or maybe they do make a purchase and after a couple of weeks, you send reminder emails to entice them to make a second order.

Large companies have CRM (customer relationship management) teams with members dedicated to coming up with a strategy for lifecycle series. This is then shared with a creative team including copywriters and designers who design and write the emails to create a seamless experience from the first to the last email in the series. These emails series have a high ROI for once they’re in place, they can continue to convert customers and bring in revenue at any time of the day until you modify or remove the series. 

Here’s an example of a welcome email from Allbirds, a shoe company. The top header image includes their logo, playful photography featuring their product, and a bit of personality in the copywriting. As you scroll down, we’re met with a “Welcome to the flock” message where we learn more about how Allbirds make their shoes and reminding us of their free shipping and free return policy.

An example of a welcome series email
An example of a welcome series email

3. Newsletter emails

Newsletter emails tend to not be regarded as highly as transactional and lifecycle emails. They usually don’t have the highest CTR (click-through rate) compared to transactional emails but they are important for brand building and nurturing a long-term relationship with a customer. 

Newsletters don’t have to be boring, think of ways you can spice them up and make them relevant to your industry. There’s also no specific cadence to these emails, they can be monthly, weekly, bi-weekly, etc. 

These types of emails tend to be longer as they are a collection of curated information. Here is an example of a newsletter email, a snippet from Food52. Notice how this email is not at all focused on sales. Instead, it’s a collection of tasty recipes from the Food52 blog, with one featured large at the top but smaller accompanying ones just in case the first one doesn’t entice the reader.

An example of a newsletter email from Food52
An example of a newsletter email from Food52

Best practices for email design

Start with wireframes

Essentially, wireframes are the skeleton of a design, they show the structure and user flow. There are different levels of wireframes, from quick sketches to low and high-fidelity. But they all share a goal to align on content before finalizing the design. Wireframing is essential for mapping out longer email series like a lifecycle series. This will help you focus on strategy and content first before you focus on design details.

Example of a low-fidelity wireframe
Example of a low-fidelity wireframe

If you want to dive more into wireframing, we’ve created quite a few articles on wireframing in the past including What are the best free tools for wireframing, Beginner’s guide to wireframing for website design, and 20 wireframe examples for web design

Brand your emails

When designing your emails, it’s a good idea to create an email design UI kit. This is a toolkit featuring branded design elements you can use over and over again to keep brand consistency as well as make the design process faster. 

Example of an email design UI kit
Example of an email design UI kit

Use templates

While it is possible to custom code email design and create a truly unique design for any email, it’s more realistic to think of email design in buckets of templates. Depending on the CRM software you’re using to develop emails, you may have a little or a lot of control over how to build the design. 

Take a look at this example from Hubspot for the anatomy of a newsletter. While the content of your newsletter will change, the structure and template don’t need to be reinvented every single time. Underneath the logo header block, include a large feature image, followed by a headline and copy. Then it breaks down into a 2-column grid with spots for more recipes, stories, or blog posts. The underlying skeleton remains the same but the featured content helps keep your newsletter fresh every time.

Anatomy of a newsletter email
Anatomy of a newsletter email

Design for mobile-first

When designing emails, or anything that will be viewed on various screen sizes, it’s important to design for mobile first. What this means simply is, can you read this email comfortably on your phone? While you might use a 3-column grid for an email viewed on desktop, you may need to design a collapsed one-column version for mobile. Think about scale, legibility, and be sure your colors and contrast pass accessibility tests.

Collaborate with a developer

If you’re working on a team or you’re a freelance designer, it’s important to consult with a front-end developer before you build out your email designs. It’s best to consult with a developer early on, they can help pinpoint any possible issues or technical constraints along the way. The last thing you want is to hand off an email for development and you discover you’ve incorrectly designed everything and need to redesign or start from scratch.

More examples of email marketing design

Looking for more email design inspiration? Check out Really Good Emails, it’s a great resource for searching for the emails your favorite brands have sent. Just type in a company like UberEats or Nike in the search box and you’ll get a glimpse into their email marketing design.

Really Good Emails
Really Good Emails

What’s next on your design journey?

Are you craving more design content? Check out other articles from the Flux blog where you can learn more about web design, Webflow, and freelancing. If you’re looking for in-depth video tutorials on design, check out our YouTube channel where we publish new videos weekly.‍‍‍‍‍‍

Flux YouTube design channel
Flux YouTube design channel

‍Want to learn more about how to create a stunning and interactive portfolio with Webflow? Check out our Webflow style guide so you can design faster.

‍If you want to learn more about the web design process from start to finish, consider checking out our program The $10k Website Process. You’ll discover a step-by-step process to design beautiful, high-value websites that achieve strategic goals for your clients. Master the art and strategy of website design, and increase the value of your services, as well as your rates.

Free E-Book

The Ultimate Guide For Color Psychology

Download For Free

Join Our Mailing List!

Get our weekly updates, including high-value tips and free resources that will help you take your design career to the next level.