Newsletter Design Tips To Take The Design World By Storm

BONUS : Get our infographic on newsletter design tips!

newsletter sections

We always look for newsletter design tips at the last minute: when we are actually designing our newsletter.

Because we always know our design tips, right?

We can take to the Editor and start designing right away. And this is how it pretty much goes:

“Okay, this doesn’t go here, hmm… not perfect just yet, but hey, Rome was not built in a day.

This should go here, maybe it’s too close, hmm, maybe it’s supposed to, it belongs to the same section.

Let me see, how was it that NIKE did that in their newsletter? Shoot, can’t find that..

Oh, must not forget to add social media buttons. They look nice here. Or here. They look nice everywhere, what can I say.”

Does this sound like you? I know.

And your Editor used to be so cool. So much potential. Right.

All of a sudden, it’s not so cool any more.

What EVER happened to it? Maybe you were tricked.

You probably weren’t.

You see, it’s not the Editor that’s giving you a hard time: it’s that you need to train your eyes to see more actively.

What are you looking for? – Quick overview

 

Training your eyes and brain

A lot of our insights come from observation. But whatever it is that we observe, it must meet two criteria: i) appear at the right time ii) be relevant to us.

This is how active observation occurs. Here’s an example:

We get newsletters every day. We read a good bunch of them.

As consumers, we probably know that we like one newsletter design better than the other. We probably don’t actually articulate it per se, but we reckon that there’s something about design A that makes it cooler than design B.

This is us not being actively observant.

Now, as marketers, when we check our inboxes and see a smart gif or a cool newsletter design, we break it down. We try to decipher the thinking that went into this creation. And then we share it with our team and see how we can replicate it.

But here’s an important bit about design:

There is no one style-fits-all kind of design that is universally accepted.

You can’t come up with a kind of design which resonates with everyone – just one that “clicks” with your target audience and their aesthetics.

Now, according to Gestalt Psychology, we perceive from whole to part, and not the other way around.

That is, for some reason, we don’t need to see our mother’s eyes, brows, nose, mouth to combine the components (parts) in order to get the identification (whole). We perceive the face or body as a whole.

So, why is this useful for your newsletter design?

The design implication for your design is that however much work you put into the header or footer or body of your newsletter design, if it’s not consistent throughout the design, it’s not enough.

So don’t spend too much time working on a single aspect of your newsletter design; make sure that the entire design reflects just that. See how the whole can win you some extra attention for the parts.

What could make the whole enrich its parts? How could that gestalt (:whole) be charged with meaning?

A great deal depends on the context within which a design is deciphered.

Question 1: Who and what are you designing for?

Consider the target audience, the medium, and the communication goals you are trying to achieve.

Question 2: Suppose that each of the aforementioned components (target audience, etc) are represented with a circle. What design characteristics does each circle translate into?

For instance, if your target audience is women 35-45, who have received higher education, […], what design elements are you going to go for? How are you taking design to speak to these women’s eyes, minds, and hearts?

Repeat this with the rest of the circles. You’ll get a number of design elements. Create different sub-groups of combos with these design elements and start applying them to your newsletter design. See what performs best.

Defining Design

The etymology of the word “design” does help in realizing a lot more about it.

It derives from the word “sign” and the prefix “de-” (:meaning outward). This means that the derivative word, “design”, is the expression of signs. So to speak, in order to design we need to make meaning out of signs, to charge a selection of signs with meaning.

This outbound symbolism is what permeates good design.

Quick theoretical background of signs

Sign underlies all forms of communication. Signs can be natural or cultural.

A natural sign is when your favorite plant’s leaves turn yellow. This is a sign of dehydration, for example.

It takes a cultural sign though, to understand that a maple leaf symbolizes autumn. Or Canada, for that matter!

To distinguish between the two types of signs, you should always think of a sign and its potential of being deciphered as such by a non-Western culture. Think like one of the tribes in the Amazon rainforests. Would your “sign” mean anything to them? If not, its interpretation is culturally bound.

And why does it matter if a sign is cultural?

When designing a newsletter you are targeting specific segments. To rock your performance for those segments, you must design with what them in mind.

Colors and color combinations bear meaning for different peoples.

Different nations have their own symbols to signify good and evil.

Every culture’s collective is made up of a homogenized mix of colors, signs, symbols, words, sounds, tastes, and a different range of emotions, even!

Does your design consider all that?

Deriving meaning is not as straightforward as we may think

Even in design there are certain cultural preconceptions which may hinder a smooth flow of information from the designer over to the user/recipient.

It’s true that certain aspects of design communication are acquired, learned. We pick these up along the way through various structures, namely textbooks, websites, etc. Even the way you are skimming through this text is highly culturally-bound.

For example, growing up and reading from textbooks we learned that paragraphs start with increased indent, titles are bold, subheadings are in italics, the size of the heading is proportionate to the significance of what is described.

We are conditioned to establish and adhere to a conventional form of design and communication to facilitate interaction and diminish communication gaps.

Even when communication patterns seem to fall out of the designated area of conventional patterns, they are still being interpreted in relation to the convention. So, even if you denounce the circle and step out of it, you are considered to be “outside the circle”, not “vaguely misplaced somewhere in the abyss”.

What we are to explore in this article is the conventional wisdom of newsletter designs; all these things we don’t see…but always notice when they are not there or are misplaced.

small infographic

<p><strong>Please include attribution to https://moosend.com/blog/ with this graphic.</strong><br /><br /><a href='https://moosend.com/blog/newsletter-design/'><img src='https://moosend.com/wp-content/uploads/2018/08/Perfect-Design.png' alt='perfect design infographic' 540px border='0' /></a></p>

 

HEADER

Logo size

Coming up with the right logo is difficult enough as is. Choosing the right size of logo is unexpectedly difficult. In fact, many marketers are not aware of the size specifications for their logo, design-wise, therefore these are left at the discretion (and skills) of their designer. Lucky you, our Design team spec’ed out what to go for.

Go for a medium-sized logo
It might seem counterproductive but going for a medium-sized logo is better. You see, a logo always comes with certain distances from one side to another. So, it always gets its designated space wherever it is placed. Add it carefully to your content, like a jewel to top it all off.

Don’t go over the top
Avoid oversized logos which dominate the medium. Your logo should catch users’ eyes thanks to its design, not its size.

Logo alignment

One would think that there are three ways to go about alignment; left, right, center. Right? Wrong.

Find the heart of your design
One of the most essential design rules is that alignment occurs around an axis. In other words, you can’t have variety of alignment in your design. Drawing on some fundamental design theories, centering your design around a specific axis helps put all of the design elements into the right place.

Don’t get creative with alignment
It almost never is a conscious visual hindrance for the average viewer. But they know that something just doesn’t “click”. This unconscious but rather tangible feeling of something being “off” is very characteristic of poorly designed newsletters (or even products and services).

For what it’s worth, misalignment could mean that a section does not belong to the rest of the design, or that it is semantically differentiated.

Swap your logo for its icon

Choose the minimal version of your logo; drop the brand name and just use the icon instead! Your doing so will gradually reinforce correlation between your brand name and the logo (:brand recall).

Background

header with alter logo

The background of your newsletter can be what you want it to be, but this is a decision that will influence other design decisions.

A good contrast goes a long way
Choose a contrasting background-logo combination to help bring your logo forward. For your logo, use the primary branding colors and for the background go for your secondary branding colors. This way, the background complements the components of the logo and gives a rounder, complete branding image.

Similar tones are not a good look
While it might seem counter-intuitive, a very common mistake for many digital marketers or designers is to use similar colors for both the background and the logo because they feel that is shows a better match of colors. Instead, they get a logo that almost dissolves into the background.

Highlight your logo
We recommend using the brightest colors on your logo; pick these colors up for the next section so as to drive your users’ eyes towards the next section, thus creating an implicit, transparent almost, red thread.

View In Browser

view in browser link

The design implications of whether you want to draw attention to this button or not are explained below:

Try alignment… the right way
This button is most often encountered as a center button, on top of where your logo normally goes. If this is a button you intend your users to click either way, it should be placed at the center. On the other hand, if you are going for a more subtle button, align it on the top right of your newsletter design.

Don’t go big here
A major no-no is to use an attention-seeking font for the View In Browser button. Trust us, if users cannot view the newsletter properly, they will look for the button themselves.

On the other hand, using an impressive button where there shouldn’t be one, your users’ attention is diverted from where it should be (i.e. reading below your logo) to wondering whether they should click that View In Browser button for some reason.

As mentioned above, assigning a larger size font to something also implies increased significance.

Try this tip
The smartest way to go about View In Browser buttons is smaller font size that is discreetly placed at the top of your newsletter design. Choosing smaller font also prohibits you from using any bold formatting, whatsoever.

Layout

Images

image icon

Your newsletter design should be complemented by the right images to make an impression on your subscribers. It’s easy to go wrong if you don’t consider the following:

Design with the right things in mind
You should pick or design the images to be included in your newsletter by size. Choose the right dimensions for the medium you are designing, namely your newsletter; too big a size might distort your image or not display perfectly, while too small will take away from your message.

This is awesome, do this #not
Stretched images are never a good look, not for startups, not for anyone. Sending a newsletter with specially crafted images does reflect back to your brand in the most positive way.

Be colorwise
Finding the right image for the newsletter is a great feeling, but if it doesn’t match the look and feel of your brand…sorry, it’s useless.

When setting out to design or pick an image for your newsletter, consider the “ensemble effect”: think of your newsletter design as a whole and choose the colors that must go at every image placeholder.

Maybe you start off with, say, red colors and scrolling down to the bottom of the newsletter there is a degradation to orange, pink, and yellow shades, for example!

Margins, spaces, and distance

When we think of design we usually think of things we put in; but design is also about things we leave out.

Leave some white space
No one can overstate the importance of white space in design. It’s what “cleans” a design, what allows pieces of content to “float” and stand out, it’s what tells good design apart from bad design. Explore the use of white space in your newsletter designs and you will see the difference it makes.

No cramming
Sometimes you just need to cram so much information into a single newsletter; eventually you manage, but not without consequences. When sending out a newsletter you must have a specific objective. Trim excess information out of the content and send a newsletter with its proper white space included.

Keeping a saMe distance
The insane thing about symmetry is that we don’t consciously realize it is there, but when it’s not, we always know. Keeping distances equal from all directions will place your content to the center of your subscribers’ attention. That’s what sets your newsletter apart from everyone else’s; details.

Buttons

Not all of us are equally experienced with the design of buttons; we use them in different frequency in our newsletter designs. But let’s see what it takes to stand out for all the right reasons:

Catch users’ eyes
Make your CTAs pop! Your buttons are there for a reason, they are meant to be clicked! So add color and be generous!

No shades of grey
Your grey buttons will not increase your CTR, no matter how many shades you have used. A grey button, for one thing, could connote an expired link or an already pressed button. So, use bright, vivid colors for your buttons, instead.

Try ghost buttons
This is one of the times that less is more! Get more abstract with your use of color and design buttons which elegantly complement your offering. Our suggestion is to use this tip with offers which don’t have a deadline.

Colors

color pallets

Colors are, to my mind, the second most important design element after structure. And, unfortunately, it is so very easy for things to go wrong here:

Use charming colors
There are many ways you can put together a color palette for your brand, using attractive colors that match. These will create a pleasing effect on the user and you can leverage them by color coding certain sections of your newsletter design to improve navigation.

No-match colors is SO 80’s!
Picking out random colors seems to have been a thing of the past, when designers were competing for attention. Back then, being conspicuous was the main goal. But now, aesthetics have come into play.

Try a color palette
The fastest tip to pick out a color palette for your brand and stick to it is to pick various shades of your primary brand color. You can then proceed accordingly, by using the more vivid tones for the more important bits, and so on.

Content

paragraph

You have certainly put a fair amount of effort and creativity into your content, but I sure hope you kept some for the presentation of your content.

A good line height
Give every line the space that it is due. This line spacing must be higher than the “taller” letters (such as l, d, etc), but shorter than the paragraph spacing. In other words, to render your user experience flawless your paragraphs should still show quite easily so that users can skim through faster.

It’s all about distances
Using smaller line height will crumble lines or squeeze them together. The outcome will look sloppy and cluttered. To invite readers to read your content you need to make your newsletter design as eye-friendly as possible. So take a look at our pre-made newsletter templates and start brainstorming some ideas!

Are your fonts web-safe?
If you are using a branding-specific font for your newsletter content, you should first make sure that it is a web-safe font. If it isn’t, your content won’t show properly, and you will need to set up a fall-back font for those email clients who do not support it.

Footer

footer icon

Social media buttons

Here’s how to make the most of your newsletter-social media synergy:

Picking the right colors
The commonly acceptable way to go about social media buttons is to retain their respective iconic colors to represent them visually.

Don’t blend in
By all means you should avoid using social media buttons in colors which match your newsletter background.

The very purpose of having social media buttons in your newsletter is to serve the synergy among your different channels. As a result, turning your social media buttons into chameleons is not recommended.

Breaking the mould
Clean design is always a winner. Consider replacing your current social media buttons with white ones, as long as your background is not a light color.

Company info

What is the design convention regarding company info and its placement in the newsletter design?

The epitome of it all
Showcase something important (such as your company info) by centering it in your newsletter design. Doing so places more importance on the message that you are communicating in that way.

Don’t go full width on this one
We strongly recommend against maxing out on all that space provided for the content of your newsletter. Remember, the shorter and the more concise the information, the better.

Stick to the same alignment
Our favorite design tip for you is to align company info together with social media buttons, the unsubscribe button, and everything that goes into your footer. You’ll love the end result!

Unsubscribe button

How do you go about designing something that you don’t want to be clicked, but it still has to be there and look nice while you play cool?

Keep it visible
By visible, I am not referring to “top of your newsletter”-visible. More like, placing your unsubscribe button at the lower part of your design but in a font size that is still legible and marginally smaller than your email body.

No transparent buttons
No, adding a transparent Unsubscribe button does not fall into “playing with the rules”, it falls into “breaking the rules”. So, if you had been thinking that a way to both have an Unsubscribe button and hide it at the same time is to have a transparent one, think twice. This is not a good practice, and it will take its toll on your sender reputation soon enough!

Be creative, don’t go too far
Sometimes you just want to break through the clutter where most people comply with a boring rule. I get it. But if you choose to spend all your creativity in into coming up with an original Unsubscribe button, make sure that users can still spot it quite quickly. For example, you can write something like this “Unsubscribe here, if you don’t need awesomeness coming your way”, without compromising it being easily identified as such.

Mobile

mobile preview

Mobile Responsiveness

In an article exploring responsiveness to design, mobile responsiveness just had to be in.

NEW: Single-column layout
Yes, there are newsletter design trends and single-column layouts are the latest trend. We have moved away from multi-column designs to a cleaner structure with highlighted hero images/topics. The key here is to be very specific and careful about what you choose to put in your single column layout. Strictly keep it to one topic at a time.

Stretch spacetime, not images
By all means, avoid stretching images to fit the placeholders of your newsletter design. It is NOT a good look and, YES, users DO notice.

Stretching an image outside of its capacity is not a good look for your team or your quality standards. This also reflects back to your product or service, implying a poor design process in all stages.

Discover the suitable margins
A no-brainer newsletter design tip is to “mirror” margins; whichever alignment you may have chosen (right, center, or left) there should be an equal margin distance for both sides.

Conclusion

Our perception towards design improves every day.

The golden tip here is not just to observe design, but to try to recreate it.

Every time you see a newsletter design that appeals to you:

  1. Trace it back to the branding of the business. How does it align with the branding? Does it deviate from it at all? In what way?
  2. Which are your favorite parts?
  3. How was their branding technically interpreted into design?
  4. How can you replicate it for your own branding?
  5. Can you replicate it for your own branding?
  6. Actually replicate it for your own branding.