Email design 101: A guide to designing professional emails
Kristina Lauren
August 1, 2021
We’ve now talked about how to code emails from scratch and guided you through the difference between email coding and web coding, but now we’d like to guide you through how to actually design emails. From building the framework to testing out the final product, designing an email is an intricate process, so let’s break down some of the best practices.
Getting started
So, you want to design an email…but where do you begin? You may be wondering: should I sketch a layout, should I copy the format of emails from brands I really admire, or should I just start experimenting with a couple of ideas until something sticks? Of course, part of the email design process is discovering what works and what doesn’t, but it definitely helps to make sure you have the basics of your brand’s marketing standards down. That’s why you’ll want to start with an email audit. This first step will help you assess your brand’s long-term needs and properly define your project goals. To do this, you’ll need to gather some current emails, brand guidelines, and other marketing assets, such as logos and fonts, so that you can get a clearer picture of what essentially represents your visual brand.
From that point, you’ll be able to create a custom design system, which is basically a catalog containing all the graphic elements that you’ll use to build the design of your emails. This system will serve as a base and it can contain many elements from your email audit, from font styles to colors to icons.
As you come to learn more about your audience and your brand continues to grow, it will inevitably evolve and that means your visual standards will change as well. But you can save yourself a lot of frustration and keep your design process smooth by making your system as dynamic as possible. We recommend using a tool like Figma, which allows you to easily modify your catalog when it’s time for any makeovers or small adjustments.
Take a look at an example design system using Figma:
Wireframes
Next come wireframes, which are skeletal outlines that serve to give an overview of your email structure. To have more flexibility when it comes to mixing and matching sections, we suggest employing a modular system, which enables you to use dynamic building blocks to create a variety of templates, allowing you to scale quickly by offering fresh emails using existing structure.
Once you create some mockups of your email from the wireframe and placeholder copy/graphics, you should have ready-to-use templates customized for your needs.
Your wireframe should look similar to this:
Unfortunately, you can’t completely control how dark mode will display across every email client, which is why you’ll want to deal with any dark mode issues during the design phase. Here are a few good practices:
Ensure good readability of the text with simple, email-friendly fonts.
Colors should have a balanced contrast—stay away from saturated colors.
Avoid shadows and/or overlayed components.
Give all graphic elements a proper treatment (images with transparent backgrounds, icons and logos with thin, white strokes, etc.).
Make sure preferences for gifs adjust properly when exporting so that visualization is correct.
Rendering your email
At last, we arrive at every email developers’ “favorite” stage of the email building process—testing and rendering. Of course, you know how important it is to test any aspect of your brand before sending it out to your audience, but rendering emails is especially complex—a single design can have about 15,000 different potential renderings! The way your email displays all depends on the device, the email client, and the screen size, as well as the many combinations between these three factors.
Check out a few examples below to see the differences across mobile, web, and desktop.
What are some things to look for when rendering emails?
Incorrect or untracked links
Spelling, grammar, and punctuation errors
Broken images or images without alt-text
Font issues
Dark mode compatibility
Responsiveness across all screen sizes
Formatting issues between sections
Seemingly small mistakes in emails can compromise the trust audiences have in a brand, especially if those issues are consistent. The last thing you want your audience thinking is, “if they can’t get a simple email right, should I really have faith in their product or service?
The handoff
When the time comes to send your email off to your developers or to code emails yourself, Figma also makes the handoff process incredibly painless. This is because Figma makes it so that your design always comes across consistently and, as a result, you’re able to code components that are entirely reusable, saving you loads of time.
Figma also has an auto-layout feature that controls elements like padding and spacing and creates a more responsive design, especially because it can translate these elements into code and export exact assets in whichever format you need.
When designing, there is a lot to take into account throughout the entire creative process. Between gathering information to start a project, creating layouts, inputting content, and making sure that content is rendering properly, it’s easy to get tripped up, but now you should have a good understanding of the do’s and don’ts of email design.
However, because designing and creating emails is essentially what we do every day at Scalero, our designers and developers are quite skilled at the process. If you’re looking for more guidance or if you would like help with creating your own dynamic email templates, send us a message or signup for the Tiramisu app to get started!
