Why Email Design Matters
It’s estimated that 281 billion emails were sent a day across the planet in 2017. By 2025, that number is predicted to over 360 billion emails each day .
Yet most of these emails are never opened or read. Some are never even delivered. Many are sent to spam filters, and even more are deleted or ignored.
Why are some emails discarded while others are engaged with eagerly? What’s the difference? While subject lines and your email copy will play an outsized role, your email design greatly influences overall engagement.
Tips for Designing Great Emails
Now that you’ve seen a couple of samples of emails that demonstrate great design, it’s time to find out how you’ll create beautiful emails. If you follow best practices and style tips, you’ll be on your thanks to making interesting emails that your subscribers love.
Tip 1: Plan it out
Design your email before you begin building. If you’ve got design software and feel comfortable using it, that’s an excellent place to start out , but paper and pencil work just fine too.
Plan out where the pictures , body copy, and CTAs will go before you begin building the e-mail . Then, it becomes even easier to place it all at once in your email service provider’s editor.
Tip 2: Have all of your brand materials ready
The design process is far faster process once you have access to your company logo, brand colors, approved images, and fonts. Create a folder that has all of those items to form the method as seamless as possible.
BEST PRACTICE TIP:
Display your company logo against transparent backgrounds (such as a .png or .gif file).
Tip 3: Choose appropriate colors!
A lime green or bright yellow may look great in your logo, but how will it look because the background of an email? Probably not great.
Instead, think about using bold colors in smaller sections of the e-mail like in buttons, links, icons, or other small elements. for instance , one among IDEO’s brand colors is yellow, but they use it sparingly as a top border, footer, and as a button background color.
It’s also important to think about colors from an accessibility standpoint. those that are color blind might not be ready to see holiday emails that combine red and green. For more accessibility design tips, inspect our article, Email Accessibility Design Best Practices.
Color Usage Example
Tip 4: Use an easy-to-read font
Use a font that’s easy to read and appears great when it’s reduced to a smaller size, like when used as body copy. Fonts like Helvetica, Arial, Proxima Nova, Lato, and Open Sans read well regardless of what size they’re viewed in.
It’s okay if the e-mail body font differs from your logo font. In most cases, it’s advisable. for instance , The ny Times has an iconic, well-known font in their logo, but imagine reading a whole email therein logo font. The content would be harder to read, especially on small devices.
Tip 5: Use hierarchy when deciding the order of content
In emails, your logo should be one among the very first things someone sees. This tells the recipient directly who the e-mail came from and it establishes a way of brand name awareness.
Then, you’ll add a headline or an H1 to act as a title followed by a subtitle or blurb to expand on the H1 or title of the e-mail . Together, these should tell the user everything they have to understand at the start of the e-mail and provides them a reason to read the remainder of the content.
Tip 6: Select high-quality images
Images capture attention. they supply engaging visuals for your emails, but you ought to only use high-quality images in your content.
How are you able to tell if a picture is high quality? it’ll have sharpness, proper color balance and contrast, no pixelation or blurriness, and no distortion. That being said, there are caveats. If your brand supports grainy, film-style images, then choose content that matches your visual identity.
BEST PRACTICE TIP:
Include a written description of the image within the alt text of your template HTML.
EXPAND TO READ MORE ↓
To find images for your email campaigns, see if your company has approved photography or product shots. If not, inspect our favourite non-stock photo options.
Tip 7: Experiment with layering
As we saw within the Herschel email example above, layering can assist you save space and shorten the length of your email. Take a glance at some additional examples in our Email Template Gallery to ascertain how this looks in action.
Another way to approach layering is adding text on top of a picture or layering several images to make one image. If you are doing this, make certain the background is transparent (save it out as a .png image) or use an equivalent background color you propose to use for the e-mail . (Not sure the way to layer text? These design tools will assist you easily create visual content.)
Layered Image Example
Tip 8: Make it a GIF!
GIFs are a fun thanks to convey emotion which will be hard to completely express in static images. they’re also shorter long and file size compared to videos. That’s an excellent combo for load times and keeping your readers’ attention.
To make a GIF, use video footage of your email content or rotate several images. Just confirm the speed and timing of the GIF isn’t too fast and therefore the file size isn’t overlarge to make sure the image loads even when opened on devices with slower data speeds. Need a gif-making tutorial? We’ve got you covered.
GIF-Example
Tip 9: Create bold CTAs
Use bold colors and obvious buttons or text links in your designs for higher engagement rates. Buttons are usually more obvious across smaller devices but text links work when multiple CTAs got to be added during a certain section. Try A/B testing different button colors or buttons vs. links to ascertain what receives the foremost engagement.
Don’t forget to edit the colour of the links you include! Links often default to blue when delivered to inboxes and this will be hard to read if you employ a dark background color (such as black or dark blue). you’ll avoid this by changing them to a color which will show up in your design.
Tip 10: Include some negative space
In visual design, negative space is that the open space between the various content elements in your email (images, paragraphs, buttons, etc.) that gives breathing space between sections. It’s important for the readability of your email, especially within smaller screens.