Email Graphics and UX: Crafting Professional Emails

Email design refers to the process of creating engaging and visually appealing email. Such email contains email graphics. Email graphics include anything represented visually - for example, static or animated images, GIFs, videos, and interactive or dynamic content. Email UX means optimizing the email graphics elements to ensure the best possible experience for the reader (in terms of clarity and understanding).

Inboxes are full of messages. All of them look the same at first glance. To stand out, you must be different. And you can do it via email design. Use email graphics to express your message, and follow UX rules to make your email easily understandable.

According to IFVP, the human brain processes visual information much faster than any other data type. Specifically, it processes images 60,000 times faster than text. Humans also remember more effectively what they see rather than what they can hear or read.

You can of course still use text in your emails, but graphic design will communicate your information quickly, support the clarity of your message, and make your email memorable.

However, choosing random images and using some colors won't be enough. You need to think carefully about what pictures to include, what kind of font to choose…and how to be consistent. Consistency is key, especially when it comes to company branding. As people remember images and graphics easily, they can also easily associate logos and specific colors with a certain brand (known as brand UX). And a person associating your company colors and logo with your brand is one of your email marketing goals.

Use images. That's simple, right? Well, not always. You need to know what format to choose, what size and resolution is optimal, and a bit more. Let's have a look at a few tips.

When choosing an image for your email, work with high-resolution graphics - sharp and not pixelated. Make sure the pictures are from a high-quality camera, or compresssed when downloaded from the internet. With the right compress settings, you can achieve good-quality images and small sizes.

What is the best size for email graphics? Email size should not exceed 100 KB. Graphics should not be larger than 1 MB to maintain a fast page loading speed. With the right compress settings, you can achieve good-quality images and small sizes. For retina devices, use images that are 2x the width while keeping their file sizes small and ensuring the image looks sharp.

JPEG, PNG, GIF. Those are the best formats for email marketing graphics. If you ask: “Can I use them interchangeably?” The answer is “ No”. Each of them has its pros and cons and is more suitable for different use cases.

Advantages

• Smallest file size

• Best for high-quality photos

• Compatible with the web and any device

Disadvantages

• Lower quality if compressed too much

• Compatible on the web and any device

Use case

• Static images without text

• Avoid using jpeg on colored backgrounds

Advantages

• Suitable for transparent background - layering images on colored backgrounds

• Can be compressed without losing quality (compared to jpeg)

Disadvantages

• Larger files than jpeg

• Doesn't support animation

Use Cases

• Graphics with sharp edges, text graphics, logos, icons, etc. 

• Graphics on a colored background

Advantages

• Ability to create animated images

• Supports transparent background

Disadvantages

• Image quality and size based on the number of colors: more colors mean a sharper image, but a larger file - and the contrary

• Color limit: 256

Use Cases

• If you want to display multiple images in the same graphic

Choosing the right color mode is an important factor. Make sure you choose RGB for your email. RGB has more colors and a lower file size. If you choose CMYK you may have troubles when embedding and it might not render in a web browser or email client.

Make sure you use the RGB color mode for your email graphics because CMYK graphics may not render properly in a web browser or email client. In some cases, CMYK can cause embedded graphics to malfunction.

Add Alt text to your email marketing images. As we stated, visuals are easier to consume than text, so why add another text? To make sure visual impairment knows what the picture is about. Also, some people block images by default and some might have trouble loading the image. By adding an alt text you improve the deliverability of your messages. 

Wondering how to build an email structure to incorporate all the info, but remain easily understandable? Below you'll find a few email UX/UI best practices how to make a creative email ensuring the best friendly email ui design.

• The subject line is a foundation for a good email. Take time when drafting it. 

• The headline should be the largest - and it's ok if you go bold. Subheadlines should be slightly smaller. 

• The ideal body length is around 50-80 characters. 

• Break your copy into a few sections. Don't be afraid to use white space. It's your friend, not your enemy. 

• Create a visual hierarchy. Make the section flow logically. Most important information is at the top followed by less important information, all naturally leading to the CTA at the bottom. 

• Use bullet points if possible, nobody wants to read a novel. 

• Create contrast - the contrast will make your email easy to read. 

• CTA needs to stand out. Don't be afraid to use contrasting colors (from your brand color palette).

Information is usually easily consumed if it is written in bullet points. But you can't of course have 20 lines - around three to five bullet points is appropriate. Paragraphs should be around five lines or fewer. Remember that paragraphs longer than three lines should be left-aligned.

Use bold, italic, and varying fonts to show a contrast and hierarchy. Overall use safe fonts that are easy to read, such as Georgia, Arial, Times New Roman, and Verdana.

Colors play an important role in marketing psychology. They have the power to influence our perception and trigger emotions influencing our actions. Therefore, you should pay attention to what colors you use in your email. Choose the best colors for your email marketing according to your goal.

Here's a little sneak peek at what colors represent in email marketing:

• RED - strong emotions, commands attention, corresponds with CTAs and special promotions

• YELLOW - represents sun, happiness, and joy, bringing enthusiasm and optimism into your email

• BLUE - provides a calming effect, represents seniority and security

Branding your marketing email is not only about using company colors. It is about being consistent when it comes to visual templates, text fonts, logos, CTAs, and tone of voice. Align your emails on your company's brand and create an identity, that is communicating with prospects and customers.

Static emails might not be enough. Ensure your message will stand out by enabling interactive graphic content and dynamic content. It can be GIFs, animated videos, videos, links,… simply everything that encourages people to interact with the content.

Support the credibility of your email by creating a meaningful company email footer. Include your legal information and prevent your email from ending up in spam. Add social media links to boost interaction and add an option to unsubscribe.

Simplicity is a key. A simple email layout will allow the reader to scan through the text. Simple and consistent graphics will ensure you don't overwhelm your reader. Of course, you need to stand out. But keep in mind that sometimes less is more.

Nearly half of the customers consume the content on their mobile phones. Therefore, it is important to keep in mind email optimization for mobile devices and desktops. Ensure responsive email design, choose a simple layout, keep the text short, and optimize your graphics and images.

Easily. You can either choose a pre-built email template with graphic design and match it to your needs, or you can build your email design from scratch, using pre-built content blocks. It is a simple and effective way to prepare an email graphic design, starting with email header graphics, layout of the email, and signature graphics, all the way to the CTA UX.

What do you need to do?

1. First, you need to sign in to the platform or create an account.

2. When ready, click “New Template” and either choose from already pre-built templates or click “Start new template from scratch”.

3. If you are building a new template, or tweaking the pre-built version to your needs, simply drag the content (structure) block and drop it to the desired place. Add any desired feature from the menu, upload your images, and edit them in the image editor.  Set the size, color, and other details in the settings. 

4. Once your template is ready, go to preview. You can check how the email will be displayed on mobile devices and desktops. To make sure every feature works as you whish, you can send a testing email.

5. Everything working as desired? That's how you can design emails with Topol!

6.  Notice how the UX rules are applied in praxis. The layout is simple, following the content logical hierarchy. The headline is larger and bold, and subheadings follow in a smaller font size. Paragraphs are short, and there is quite a lot of “white space”. The colors are contrasting but still fit into the branding style. The overall design is in the blue color, calming the reader down. 

Email design is a complex task, having a significant impact on your email marketing performance. Are you struggling to find time and resources for that? Balance the creativity and efficiency with the Topol platform. A fully flexible and customizable email editor will provide beautiful and responsive emails. You can embed it directly into your app. If you want to learn more about how to use templates in the Topol App, check out our video “Get To Know Topol App” or try a free trial and see for yourself!