A designer is a versatile profession. And rendering banners for email newsletters can become your daily task. This is an interesting task, in which there is room for creativity. But there are rules too. That's what we'll discuss today.
Graphics in emails are already more of a rule than a bonus. An email with a banner converts better than just text. It's visual, clear, bright and hooks you for sure.
The main thing to keep in mind when designing a mailing list in general is that we are aiming to increase email open rates and user retention. Therefore, banners should be made in such a way as to interest and at the same time not to scare the reader, provoking unsubscribe.
The quality of the banner determines whether a person will read the email. So you need to give a cool image right away. It's like the first screen of a landing page - it gives the most juice, the main offer, a squeeze of benefits and advantages for the user.
Ideally, the development of the newsletter is handled by a team of a marketer, copywriter and designer.
Functions of an email banner:
- informing - the newsletter has a purpose, so the banner should have key information about the offer/news right away;
- the right mood - graphics sets the tone, creates the right impression and plays on emotions with the help of color and visuals, which can not do just text.
- accent - not everyone reads the message in full and therefore in the banner placed the most important, and the details are already described in the letter.
- brand advertising - if the banner is made in the corporate style and with the right Tone of voice, it will work as a reminder of the company and ideally will help build increased loyalty to the brand.
Call to Action
Email banner is the main element of an email, which can be an independent unit and without text. Therefore, it already contains all the basic information, albeit briefly.
And for the same reason, it is important to place the CTA button on the banner. Be sure to give the user a chance to use it after the offer! Go to the site, apply, buy, order, get a discount, etc.
But remember that the banner may not load if the user has trouble with the Internet connection. Therefore, the CTA should be duplicated in the text as well.
A frequent story: a promo code for subscribers. If this is provided, don't make the mistake of drawing the promo code directly on the banner without the ability to copy. Make it easy, give a way to copy the cherished code manually, or better yet, with one click. Or immediately embed it when you click on the link, it will be perfect.
Banner text
Unambiguously, the whole design should be based on text. And already from it you will be repelled in the search for visuals and effects. It is already clear that you need to put the main sentence in the banner itself. It is good if a professional copywriter does this. But we are preparing versatile specialists, so you do not hurt to know the basics:
- Brevity and conciseness - it is advisable to make a headline and a brief explanation if necessary. It is considered that 5-7 words in the banner is enough. After all, there will still be a button, perhaps the dates of the promotion, the name of the brand. All this should not merge into a pile of words - the banner conquers from one second, for a longer reading we will have the text of the letter.
- Use numbers - they attract attention and are subconsciously perceived as fact, although they are not always.
- Use short words, because long ones have to be read, not "grabbed".
- Use a large bold font for the headline, but not caps-lock - it already looks like the reader is being yelled at.
- If it's about the terms of the campaign - specify them at once, it should not be in small print at the end of the letter, such information is important.
Size matters
Width. Letter banners have a standard width of 600 pixels because that's the width of the letter. Making it smaller means losing precious space and disrupting the composition. And if you make it bigger, there is a risk that the picture will be cropped when viewed from a phone.
Height. As for the height, in general, you can make different options. But here you need to take into account the specifics of the target audience. If emails are mainly viewed from a smartphone, then up to 1000 pixels of height is quite acceptable. But for viewing from a PC it will be too much, you will have to scroll. Optimal and universal - 450-500 pixels in height. In this case, and the picture is fully visible, and part of the text of the letter itself.
Weight. All pictures in a letter should not exceed 200 Kb in total, otherwise it slows down the loading. Why this note "all pictures"? Because there can be more than one banner. But we recommend to use one banner for one email with one offer if possible - they work better that way.
Color palette and font
You already know how colors and typography work, how they create a mood. There's nothing new here - based on the topic and presentation of the text, you need to apply appropriate palettes and fonts.
Color and font should give you an idea of what the text is about at a glance. A dry business summary or a powerful discount, a secret promo code for a select few or a festive offer for a birthday boy.
Remember that brightness and contrast are very important, we need to grab attention. But too overdoing it is contraindicated, so as not to scare away the reader with a screaming visual.
If the brand has a brand book with the basic fonts and corporate colors, then it is worth applying them in the email newsletter. If not - offer the company to develop a corporate identity, it can be a good addition to your work.
Pictures
Same story as the previous point. Everything is selected depending on the mood and presentation. If a brand has its own illustrations, we take them. If it is an advertisement for a product, we place directly its image.
Logo - an important part. It is worth placing the company logo on the banner for recognizability. If it's an advertisement for branded products, manufacturers' logos will also be very much in theme. There's a difference in seeing the words "Apple" or seeing the coveted overbitten apple. The logo adds to the understanding that the buyer is being offered the original.
Animation
Animated banners are tops. It was once a way to show something original, but today it's almost the standard. And if you're not doing animation, you're considered behind the trends.
You can apply animations in GIF or APNG format. Again, watch the weight - do not overload the banner, otherwise it will not load quickly or will not appear in the letter at all.
You don't need to make a full-fledged cartoon, it's enough to give mobility only to some elements, so as not to increase the cognitive load. Add glow and glare to the objects, make a slide show, if there are several products, make explanations in the form of a ticker.
General recommendations
The recipient of the email immediately sees the banner, and then everything else. Therefore, not only the information on the banner is important, but also a pleasant impression.
Email banners are often designed according to the standard marketing model AIDA (Attention - attention, Interest - interest, Desire - desire, Action - action). The elements are placed according to this principle. That is, first an attractive headline, then a promising offer, then the essence of this offer, inducing the desire to use it, and then the CTA button. Read also the article about motivation to buy and how to use this in web design.
Often a single banner is made for a promotional or advertising offer, which is used both on the website, social media ads, and newsletter. This certainly saves the designer time - he only has to adapt the dimensions. But it is much better to make several different visuals or at least change them a little. If there is no such possibility, then the link from the letter with a banner should not go to the section of the site with the same banner, it is silly. In this case, it is worth at least immediately give a link to the product. One and the same read no one wants to read.
If the mailing is constant (and most often it is), then make templates for different types of letters. For news, promotions, service letters, special offers, reminders. Let them have a common look, so it will be both convenient for you, and beautiful, in one common style. Later you will just have to insert the necessary texts and pictures.
Check your work
Based on the above, we can make a quick checklist to help you make cool banners:
1. There is a call to action button on the banner and it is duplicated in the body of the email. The promo code can be easily copied.
2- The text is clear, short and contains all the basic information. There is a clear benefit to the reader. The promotion deadline, if there is one, is stated.
3. width 600 pixels, height 450-1000, weight no more than 200 Kb.
4. Color and font used from the brandbook or chosen to match the theme.
5. The image is related to the offer, there are company logos and advertised brands.
6. There is minimal use of animation.
7. The banner in the newsletter is different from the banner with the same offer on the website.
Plus don't forget to test different variants: A/B-tests are our everything, without them you won't know what works better and how users react to your banners.
As for aesthetics, it is important. But a good banner is not so much about the beauty of the performance, but more about the working picture that encourages action. First of all, the benefit to the reader is read, and then your design skill is noted. And without a competent design and a good offer will not convert even a masterpiece of artistic art. At the same time, even the most profitable promotion wants to close and forget, if the visual is inappropriate and frankly shoddy.
Make a banner so that they want to click on it. This is a whole science at the intersection of marketing, psychology and design. We teach this and much more in the online course "Graphic Designer: Brand Vector". Sign up, it will be informative and interesting!