Your Own Designer: The Ultimate Email Design Guide

We advise you how to choose a font for your newsletter. We will tell you where and how to design a banner for your letter.

We give detailed instructions on design without a designer – with links, examples and recommendations.

Form letter composition rules

Composition is the starting point for letter design. First, you decide on the structure, figure out how the template will look, and only then choose the font, colors, icons and illustrations. The mailing list structure is linear and is built from top to bottom – this rule applies to both marketing and content emails.

1. Hat

Here is the logo, slogan, contacts and buttons to go to the site. Decorate the hat in corporate colors so that the subscriber recognizes the brand and understands who the letter is from. Make sure that the logo does not blend in with the background, and that the menu buttons look exactly like buttons, and not like abstract text – otherwise the subscriber will never guess that you can click here.

2. Main unit

There will be a banner, body text, product cards and illustrations. A classic letter is built according to the principle: banner or illustration → text → button. This template is suitable for news, promotions, discount offers. In a content-oriented mailing list, the structure is the same, except that you do not need or even want to place buttons in front of each block of meaning.

If you are presenting a product or product categories, the layout will have to be complicated, for example, by building a two-column structure. For example, like this:

Don t get carried away with the number of columns and don t complicate the layout at all. The more elements there are in the letter, the more difficult it is to keep the subscriber s attention. He should not rush about the layout chaotically, looking at one color spot, then at another. Direct his attention sequentially: here is a picture, here is a description, here is a button.

The user s gaze slides from top to bottom and from left to right. Therefore, place the title illustrations at the beginning of the letter, secondary illustrations to the left of the text, and, as an option, in a checkerboard pattern. This is not a “golden ratio”, but a classic, proven version. You are free to experiment. The main thing is to measure the results of experiments to understand which structure converts more and which less.

3. Basement

We leave here the buttons for sharing and going to the site, adding links to applications and social networks. Required – a link with the ability to unsubscribe. It will be great if the basement matches the color of the header. If it turns out to be too “monochromatic”, choose a gray background, icons of social networks stand out well on it. The footer itself should not be highlighted, it should not distract from the main text. Moreover, the brighter and more noticeable the basement – the more chances to find and press the “Unsubscribe” button. So don t overdo it.

Build a linear composition of one or two speakers. Special attention to the header, it should be in the corporate style, and to the main block, in which the pictures are on the left or above, the text is on the right or under the pictures.

Banner or illustration design

Decide where you will collect your banner or illustration:

– In a graphic editor

“Being able to Photoshop” is optional. You don t need any special knowledge to add text to a picture, adjust the color and tinker with a filter, you only need a taste. In theory, this will take you 10-15 minutes, and the teacher will be a five-minute instructional video on YouTube. Of the advantages of a graphic editor – an infinite number of fonts and generally room for “creativity”, of the minuses – a paid license and the time spent on training. If the “tutorials” do not help or there is no money for the licensed version, go to the next options.

– In the online service

You can assemble an illustration in the service right away – the interface is intuitive and built on the drag and drop principle. The functionality of such services is limited and it happens that they slow down on weak computers. For a simple banner in the “picture + text” format, there will be enough power and capabilities, for something “unusual and creative” there is none.

– In the built-in editor of the mailing service

In this case, you work “without leaving the checkout”: assemble a banner, add text and icons of social networks – all in one window and also using the drag and drop principle. The template assembled in the built-in editor is adapted by default, so there is no need to bother with the size of the illustrations. There is only one drawback – you are limited by the possibilities that the editor offers, and he has fewer of them than Photoshop or a promoted online service. Insert a picture, add a title and a logo – no problem.

We will not be able to teach you how to make a “wow-illustration”, this is a matter of practice – watch other people s mailings, notice interesting solutions, bring up a sense of taste. And be careful with shadows, gradients and expressive colors. Without design experience and taste, such decorations look ridiculous. Remember that the letter should be informative and neat, and only then, if possible, beautiful and impressive.

If your task is to overlay text on a picture, keep it simple and design banners and illustrations in the built-in editor. If you feel ready for more – master Photoshop or go to popular and proven online services.

Typography

The selection of fonts, their sizes, spacing and style is also a design component. Do not get fooled by populist statements like “they don’t read the text anyway, so you can forget about it”. They read in e-mails, and how. Litmus analysts said that 43% of users turn off the view of pictures in the mail client. The only tool to “influence” such subscribers is text. If you want the subscriber not to skim through his eyes, but to read and grasp the essence, follow our advice.

– How to choose a font

Don t play with fonts, especially if you re not a designer. Experiments are possible with the slogan on the banner, for the main text choose the “classic” options – Arial, Helvetica, Georgia and Verdana. These fonts are supported by all email clients, so situations where the “text flew” or “is displayed incorrectly” are excluded.

Designers like to argue which typefaces read better – serif or sans-serif. It is generally accepted that a serif font is suitable for long texts, and a sans font for short ones. Do not fill your head with such subtleties and focus on the general feeling and sense of taste. If you doubt it, test the font on colleagues, ask which one reads better. And you don t need to type each paragraph in a new font, use two – for the heading and body text. Or alone, this is not bad taste, but normal and adequate practice.

– How to choose the size and spacing

Again, be guided by the standard – 10 or 12 points for body copy and 18-20 for headings. If your target audience is dominated by older people, increase the font size to 14. Choose one and a half or double spacing so that the lines do not merge and do not run over each other.

– How to choose the color and style of the text

Choose the color of the text based on the background, there should be a contrast between it and the text. Just do not overdo it: black on white or white on black is normal, but red on white or white on blue is too much, it is difficult to read such letters, your eyes get tired. Brand colors can be used for headings, as long as they contrast with the background and do not distract from reading. If the text volume exceeds 2-3 thousand characters, try replacing the classic black with gray (for example, # 333333) – it will become easier to read and the subscriber will “master” the text to the end.

For typefaces, use Bold for headings and Regular for body content. Only direct speech or quotations are italicized, in other cases it is useless. Be careful with underscores – they can be confused with links, if you want to highlight a word or phrase – use “bold” style or increase the letter spacing. We do not recommend highlighting headings and individual words in capital letters, it is rather annoying than accentuating the subscriber s attention. In general, check out this article on How to Write Strong Text for an Email Newsletter – it will help you understand the meanings and forms of content.

Stick to classic fonts and sizes. Keep the text “clean” – without unnecessary underlines, italics and caps. The text should be readable, not “creative”.

A set of tools and services for letter design

We have selected tools and online services that will help you design a banner, poster or icon for writing on your own, without the help of a designer.

Free options:

1) Eye Dropper

Extension for Chrome that determines the color of the image. It will come in handy when you need “the same color from the very site.” It works like an eyedropper in Photoshop: click on the desired place and the extension shows what kind of color it is – in RGB and HEX format. If these formats do not suit you, convert them to CMYK, XYZ or LAB.

2) Gifovina

Online service for creating animated pictures. Remember that email clients do not like “heavy” letters and can hide their contents under the “Show completely” button – as, for example, does Gmail. To prevent this from happening, check the weight of the finished gif, if it is more than 500 Kb – we will redo it, this is a clear overkill.

3) rounder

In case you need to round off a photo. Here you can also set up a trendy filter, add a frame or popular emojis.

4) Photoshop Online

An emulator of the official service from Adobe. Works in a browser, functions and capabilities are the same as those of the original graphics editor. The only drawback is that it slows down with a low-speed Internet and a weak processor. If you don t like it, try Pixlr, it should run faster.

5) Illustrio

Library of 20 thousand images, including illustrations, icons and patterns. What is nice – there are no restrictions on specific colors, the images are “adjusted” to the color scheme you need.

6) Tinkercard

Simplified and free version of AutoCad. We do not know if you will need a 3D image, but if you need it, please, this is the best editor for dummies.

Paid options:

1) Stencil

Nice tool for creating banners. Allows you to add text and a logo to the picture, select a filter and corporate colors. Uploading your image is optional – you have 3 million images from the database in stock. Prices do not bite: 50 banners per month will cost $ 9, absolute unlimited – $ 18.

2) Canva

A similar service with email templates, tutorials, community access, and a free 30-day version. After the trial, these joys will cost $ 13 a month.

3) Infogram

Online service for creating graphs and interactive charts. By the way, they look much better than the “Word” ones. It will come in handy if you run an intracorporate mailing list and constantly display reports. A pro account costs $ 19 per month, a business account costs $ 67.

After the picture or banner is ready, compress it using TinyPNG, the quality will not suffer. For what? So that letters weigh less and open faster.

Search sites for designers

If nothing worked out or did not work out the way you wanted, use Plan B. Find a designer, among friends or on proven freelance exchanges:

1) Illustrators.ru

The largest Russian community of illustrators. Conveniently, you can find an artist based on style – for example, a comic book specialist or a pop art artist.

2) Behance

The site contains portfolios of designers and illustrators from all over the world. Choose the work you like and write to the author, it may not be so expensive. A similar project – Dribble, differs in that there are even more designers, and the interface is in English.

3) Freelance

Russian exchange of freelancers, among which there are illustrators. The degree of adequacy is lower here, but prices do not bite either. If your budget is running low, look for performers on Fl.ru.

When cooperating with specialists from a freelance exchange, use the “Safe Deal”. So you pay for the work after the fact and avoid situations when the designer disappears with an advance payment.

Where to get inspired?

Leaf through and look at these letters, everything is as it should be here:

1) Collection of email templates

2) A selection of interesting adaptive letters # 1

3) A selection of interesting adaptive letters # 2

4) A selection of interesting adaptive letters # 3

From Russian brands, pay attention to the mailings of the online store Madrobots, Aviasales or LinguaLeo – they are good.

Source: cossa.ru