### E-newsletter design has evolved by 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 maneuver 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*](https://rikumo.com/) 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](https://rikumo.com/)*
---
### **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*](https://www.behance.net/gallery/58088319/Email-Newsletter-Design-for-Prima-Handcraft). 
*Design by [Lúcia Poland](https://www.behance.net/gallery/58088319/Email-Newsletter-Design-for-Prima-Handcraft)*
Once you have this basic structure in place you can start to think more creatively about the design. This design from shoe brand [*Office*](https://i.pinimg.com/originals/6a/28/0b/6a280b1c14d479e0729291a0ebe469f6.gif) shows how a simple modular style can be eye-catching by mixing up block sizes and colored backgrounds.
*Design: [Office](https://i.pinimg.com/originals/6a/28/0b/6a280b1c14d479e0729291a0ebe469f6.gif)*
---
### **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*](https://www.birchbox.com/) really amps up the scale and visual impact of the header image, with clear typography, rich colors and a contrasting button.
*Design by [Birchbox](https://www.birchbox.com/)*
This newsletter from department store [*Harrod’s*](http://links.e.harrods.com/servlet/MailView?ms=MTcxMDk1MzgS1&r=MzU5MTg5OTkzNTQ2S0&j=MTAwMjMyMDUyNwS2&mt=1&rt=0) begins the design with a fun and youthful full-width header image that can’t be ignored.
*Design: [Harrod’s](http://links.e.harrods.com/servlet/MailView?ms=MTcxMDk1MzgS1&r=MzU5MTg5OTkzNTQ2S0&j=MTAwMjMyMDUyNwS2&mt=1&rt=0)*
---
### **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](https://www.zara.com/)*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](https://www.zara.com/)*
This quirky newsletter from [*Anthropologie*](https://www.anthropologie.com/) takes a similar themed approach, creating a layout that feels playful and unique.
*Design by [Anthropologie](https://www.anthropologie.com/)*
---
### **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](http://email.made.com/public/viewmessage/html/36846/5bfgz0r4t9obxl36r2qjuwui2m5ui/0bc903eb0000000000000000000000180fa3)* 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](http://email.made.com/public/viewmessage/html/36846/5bfgz0r4t9obxl36r2qjuwui2m5ui/0bc903eb0000000000000000000000180fa3)*
---
### **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](https://www.notonthehighstreet.com/home/new-season-lighting)* 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](https://www.notonthehighstreet.com/home/new-season-lighting)*
This festive newsletter from tea brand *[Teavana](https://e.teavana.com/pub/sf/FormLink?_ri_=X0Gzc2X%3DYQpglLjHJlYQGNwwPWNzbbizgXzgwiozgzbbzgTqR9nzfM880zf6M2koUzdCtzb5LLv7fzgVXMtX%3DYQpglLjHJlYQGhYpNFXHiMR41Uzefg3u3wzaKK9zgWwanTTmzfpAzd386zdzfDRTzeTM&_ei_=Ep0e16vSBKEscHnsTNRZT2jCxeVRDGLyz8Wzwi8UGe68lRsg3gbpc0sy.)* 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](https://e.teavana.com/pub/sf/FormLink?_ri_=X0Gzc2X%3DYQpglLjHJlYQGNwwPWNzbbizgXzgwiozgzbbzgTqR9nzfM880zf6M2koUzdCtzb5LLv7fzgVXMtX%3DYQpglLjHJlYQGhYpNFXHiMR41Uzefg3u3wzaKK9zgWwanTTmzfpAzd386zdzfDRTzeTM&_ei_=Ep0e16vSBKEscHnsTNRZT2jCxeVRDGLyz8Wzwi8UGe68lRsg3gbpc0sy.)*
---
### **7.** Keep your Newsletter it Simple
---
Even though attention spans for looking at emails are [reportedly increasing](https://litmus.com/email-analytics), 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*](https://www.jcrew.com/) demonstrates. *[](https://www.jcrew.com/)*
*Design:[ J.CREW](https://www.jcrew.com/)*
This pared-back design from [*Monki*](https://www.monki.com/) also shows how a simple idea can be anything but basic.
*Design: [Monki](https://www.monki.com/)*
---
### **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*](https://www.massimodutti.com/) includes elegantly drawn frames, which lift the images from run-of-the-mill to utterly luxurious.
*Design:* [*Massimo Dutti*](https://www.massimodutti.com/)
Beauty brand *[Sephora](https://www.sephora.com/profile/beautyInsider/)* 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.
