We encourage our lovely EDWreaders often to "keep it simple" with their email design. Don't make your email look like a website. Make it easy to scan.Don't get clipped. We're not the only ones extolling this simple email design advice. Simplicitywas a hottopic earlier this year at the Email Evolution Conference and again at#LitmusLive.
"A designer’s job: cut through the crap." -Matt Caldwell. Love it! #LitmusLive
— Analisa Capote (@AnalisaCapote) August 17, 2016
Simple email design is important because it improves readers' experience. It means your messages don't waste anyone's time. They're easy to understand, thekey messageis obvious, and it's a no-brainer for readers to seewhere to click and why.So if you're among the many brands that can affordto de-clutter youremails, we've rounded up an inspiring collection of emails that achieve simple email design, plus the tips we learned for the best kind of simple design.
Pare down your color scheme
This invitation email from AIGA NY, the design association, is a beauty to behold. It's big, bold, blocky—and yes, a simple email design. Take a look and see how quickly your eyes scan the information provided.
I bet you didn't miss that big red RSVP button, either. With everything else black and white, it's hard to miss. AIGA knows it's not always easyto get people to RSVP to an event. By employing design simplicity with a basic color scheme, theymake the informationeasy to read and the call to action easy to engage with.
Use headers and labels
This prettyroundup email from Typeform is so easy to scanthat you might miss all the subtle design elements that make it work.
With a large font size, our eyes can't help but land on themain header ("Don't you just love manual data entry?"). And because it's a funny, sarcastic question, it's immediately engaging. The first module is also the full width of the email, so there aren't any sidebars competing for our attention.Then, the email splits into two columns (using a hybrid layout).To maintain organization and hierarchy of content, Typeform continues to use headers in a large, bold font, along with a numbered list and color coding. None of this clutters the design; it enhances it.
Establish a visual hierarchy
The main content in this email from the beauty company Glossier is an "order of operations" product flowchart.
The numbered items and connecting lines make the content seamless to follow. And it leads right to that easy-to-spot call-to-action button, too. While Glossier should be cautious about their text-to-image ratio, the hierarchy of this simple email design makes it fun to read and easy to follow. An email hierarchy can also be established using amobile-friendly single-column modular approach.
Include only the text you need
With text in email, sometimes less is more. Particularly if you're a visually-driven brand, like Maple Kitchen food delivery.
With Maple, users order food through amobile app—or by simply tapping on the meal images in these daily emails. Maple focuses on what's most important to readers: the food. As a result, the message is comprised of hi-res photos with the name and ingredients of each item.Maple could just as easily describe each item in a more long-winded manner: This mouth watering lamb kofta is a crowd favorite! Our yogurt sauce and cucumber salad keep it light and fresh while delicious lentils pack in the protein... you get the idea. But guess what? That would overcomplicate things and make the email more time-consuming to sift through. By using a list format and cutting down on text, this email is super reader friendly. (Also note there's nowastedon an elaborateheader, navigation menu, or even social media buttons).
Remove extraneous design elements
White space! When done well, it's a thing of beauty. Just take this email from the curated shop Canopy.
Canopy uses uniform image sizes to neatly arrange products in a grid. With text along the bottom and bright color labels in the upper right corner, each item is contained in its own space. As a result, Canopy skips lines, borders, or background colors to separate each one. The approach—with all that lovely white space—makes the simple email design feel clean and light. Canopy shows us you don't need a bunch of lines or design elements to create order and organization.
Limit calls to action
Holstee's emails are meant to inspire reflection. In this case, simplicity evokes a realcalming effect.
Holstee's call-to-action buttons are great: they're bulletproof, compelling, and descriptive, and they pop (perfect size and color). Importantly, though, there are only two! By limiting what readers are asked to do in email, the chances of engagement are improved. Too many options placethe onus on the reader to decide what's most important or urgent. When there are only one or two choices, on the other hand, the decision-making process is simplified for the reader.Holstee also uses a traditional inverted pyramid scheme to create contentorganization. Like the other emails in this post, the text is short and sweet, and color is a tool that directs readers' attention. Plus, there's plenty of white space!
Wrap-Up: Tips for Simple Email Design
- Simplify your color scheme. Color is a huge design tool: when you stick to a black-and-white scheme, for instance, adding a pop of color will immediately grab readers' attention.
- Use headers. Use a font size that's roughly 2x your body text to make your key message prominent.
- Create hierarchy. Make it obvious for readers what they should see first, then next, then next. Your content should lead directly to a CTA.
- Pare down text. Say what you mean simply, clearly. Revise until you have only what you need.
- Embrace white space. When your content is organized well with buffer space, you don't need extra dividers, lines, and shapes.
- Use only one or two calls to action. It should be obvious to readers what you're inviting them to take action on.
What are your tricks for keeping emails simple? Let us know in the comments! And remember that our BEE editor has built-in templates for elegant, simple email design (and it's free).SaveSaveSaveSave
.jpeg)
.webp)
