How to Design Beautiful Email Newsletters
E-newsletter design has evolved in leaps and bounds in recent years, with businesses looking to entice customers with advanced layouts and interactive content. Here we’ll look at 8 pro tips for breathing fresh life into your email designs, and get your customers clicking!
InDesign is a great ‘mapping’ tool for experimenting with email newsletter layouts. Giving you the flexibility to easily manoeuvre text, images and change color schemes, you can then create your ideas as HTML using your chosen e-newsletter software.
1. Create Hierarchy In Your Newsletter Design
With so many emails landing in an inbox on any given day, it’s important to make both an immediate and long-term impact on your recipient. One way of maximising both is to structure your email design around a story, which builds from an enticing beginning at the start of the email and ends in a call-to-action or memorable brand message at the bottom of the scroll.
In marketing speak this might be referred to as storytelling, but from a design perspective this is communicated through a visual hierarchy of elements on the layout.
This beautiful email from Japanese lifestyle company Rikumo is a great example of hierarchy in action. The large header begins the email at the top, before the fairy lights lead the eye down to other sub-elements. The email ends with another prominent item—a series of elegantly designed buttons which entice the viewer to click.
Design by Rikumo
2. Start your Newsletter With a Simple Grid
E-newsletters are built with HTML links in mind, which means that the design structure tends to be much simpler than most other layouts. You’ll notice that most emails are built on a simple grid structure, usually with a maximum of two columns. This also ensures that the design can quickly adapt responsively when viewed on smaller devices like phones and tablets.
With this in mind, the basis of your design should be an ultra-simple grid. Start by splitting your layout into two columns, before deciding which sections of your design will span two columns. Most emails begin with a large two-column header, like in this design for knitwear brand Prima Handcraft.
Design by Lúcia Poland
Once you have this basic structure in place you can start to think more creatively about the design. This design from shoe brand Office shows how a simple modular style can be eye-catching by mixing up block sizes and colored backgrounds.
Design: Office
3. Focus Your Energies on Designing an Awesome Header…
With your grid in place it’s time to flex your creative muscles!
It’s really important to concentrate most of your time and energy on crafting the perfect header image, as this is the first element recipients will see when opening your email. It often takes only a few seconds for an individual to decide whether to click or delete the message, so designing your header to include strong color, atmospheric photography and a clear call-to-action is absolutely key.
This festive-themed email from beauty brand Birchbox really amps up the scale and visual impact of the header image, with clear typography, rich colors and a contrasting button.
Design by Birchbox
This newsletter from department store Harrod’s begins the design with a fun and youthful full-width header image that can’t be ignored.
Design: Harrod’s
4. …Or a Series of Themed Images
An alternative approach would be to create a series of images which are equally arresting, encouraging the viewer to keep scrolling.
While the header image approach (see 3, above) is best for encouraging quick clicking, you may find that creating variety and quantity in your email images will work better for some audiences.
This approach tends to look best when the images are themed, creating an overall unity to the layout. This newsletter from Zara Man relies on color and stylistic consistency to create plenty of opportunities for clicking. After all, if you’re not in the market for a coat, you may be for shoes!
Design by Zara
This quirky newsletter from Anthropologie takes a similar themed approach, creating a layout that feels playful and unique.
Design by Anthropologie
5. ‘Break’ the Grid to Create an Immersive Newsletter Design
Modular newsletter layouts look slick and minimal, but sometimes designs can be more absorbing if the rigid squares of the grid are hidden from sight.
This newsletter from furniture retailer MADE is a neat example of this. Notice how the images have been designed to overlap each other, creating a seamless, immersive effect. Ultimately, however, the design is still built on a modular sequence of links, split into two vertical columns.
Design: MADE
6. Use Color in your Newsletter to Bait Clicks
Cleverly chosen color is one of the quickest ways you can attract and keep a viewer’s attention. A concise color palette not only gives your design an instant sense of atmosphere and mood, but also has the capacity to affect the psychology of the viewer, and encourage clicking.
This calm and collected newsletter from Not On The High Street uses a restricted color palette of pastels to showcase the simple typography and images beautifully. It’s a small moment of calm in an otherwise chaotic inbox.
Design: Not On The High Street
This festive newsletter from tea brand Teavana goes for a bolder approach, contrasting urgent cherry red with sophisticated tiffany blue. Note how the header image is set in red with high-contrast white text and button, to encourage instant clicking.
Design: Teavana
7. Keep your Newsletter it Simple
Even though attention spans for looking at emails are reportedly increasing, this still only stands at an average of 11.1 seconds per view. That’s just 11.1 seconds to get your message across and encourage a click.
This is the reason why complicated email designs don’t work—an overly detailed design demands too much of a casual viewer, which leads them to go elsewhere. With this in mind, try to keep your email design as simple as possible. Focus on refining layout, images and color over text content, which won’t be read in detail.
Simplicity doesn’t mean compromising on style, as this minimal and elegant layout from J.CREW demonstrates.
Design: J.CREW
This pared-back design from Monki also shows how a simple idea can be anything but basic.
Design: Monki
8. Rethink Your Frames
A modular grid might seem a bit ‘square’, but you can amp up the aesthetic appeal of your design by rethinking how those squares are styled.
Framing images in a different way can have a transformative effect on an email design, and make your layout stand out from the crowd. This email design from clothing brand Massimo Dutti includes elegantly drawn frames, which lift the images from run-of-the-mill to utterly luxurious.
Design: Massimo Dutti
Beauty brand Sephora has opted to frame products in brightly colored circular frames to create an eye-catching, stylish look which makes each product look even more enticing.
Design: Sephora
Looking for even more inspiration? Find the designs that will spark your next project here.