← Customize 200+ templates for your next newsletter

Design Inspiration

5 Simple, Yet Highly Effective Tips For Your Email Header Design

5 Simple, Yet Highly Effective Tips For Your Email Header Design

Eye-catching email headers set the tone for your email. Whether it’s bold or subtle, the header is where you announce yourself to the reader and where you introduce a visual identity.

If you haven’t given your email header design much thought in a while, now’s the time to reconsider. Let’s review our 5 design tips for email header design and draw inspiration from these excellent brand examples.

What makes a great header?

Well-designed email headers have a few key qualities in common. A good email header is:

  • Brand-identifying. The header reinforces the “from” field; the reader won’t doubt who sent the email.
  • Elegant and Simple. There’s no clutter in the header, like crammed information or hard-to-read print.
  • Versatile. A good header works with all email campaigns types, playing nice with each email template.

Tip #1: Just use your logo (with a simplified navigation menu).

We’ll just go ahead and state the obvious: plenty of brands use a version of their logo in the email header. There’s nothing wrong with that! Using your logo easily checks all three items on our list: it’s branded, simple, and versatile.

While we often promote cutting navigation menus from emails altogether—after all, you’re creating an email and not building a website—some brands find they’re important or even necessary. This is often the case for e-commerce companies. If you prefer to include a navigation menu in your email, a smart way to reduce clutter and streamline your header is simply to use your brand name or logo at the top. Brands from Target to Crate and Barrel to West Elm all do this. Here’s the approach Rent the Runway uses in their emails:

Rent the Runway email headers

When your logo is well-recognized, it gets easier and easier to use on its own. Here’s another example from Backcountry, the outdoor gear store.

Backcountry email headers

HomeAway, the vacation rental platform, keeps its header simple to make way for a special type of navigation menu: one that appears interactive to invite user engagement; in fact, the entry fields are actually part of an image.

HomeAway email headers

When you use the logo image as your header, you successfully brand and introduce your message while also letting readers’ eyes get to the heart of the email. It’s a fail-safe approach!

Tip #2: Get colorful with your brand.

Another simple, versatile way to create a great email header is to use a band of color across the top of your message. The header doesn’t have to be fancy. Just choose your primary brand color and brand font, and voilà! Here’s an example from New Atlas, the news site.

New Atlas email headers

By using its bold blue header in each email, New Atlas reinforces its visual identity. The look passes the “squint test” and is easily recognizable. Plus, it looks clean and sharp (reminiscent of Litmus’s flat design approach).

Mashable takes a similar approach.

Mashable email headers

And here are three different header examples from The Tie Bar; you can see how the design is versatile.
The Tie Bar email headers

The Tie Bar email headers

The Tie Bar email headers

A bold color header like this can easily be accomplished with an HTML background color—either alongside an image (like a logo) or beneath live text.

Tip #3: Grab the eye with photography.

Including an image at the beginning of your email is always a great way to grab readers’ eyes. A photographic header is no exception. My Subscription Addition‘s Sizzle newsletter, for example, always begins with this fun, playful header that’s emblematic of its brand.

My Subscription Addiction email headers

The Munchery food service also uses a beautiful, crisp photo header:

Munchery email headers

When you choose a photo for your header, it’s important to think about the photo’s versatility. If your email typically includes a lot of imagery, consider if your photo header will always work well alongside that content. The Sizzle always employs a “DEALS” section header as a buffer between the main header and the rest of the email, which is a smart way to ensure email flow and organization.

Tip #4: Make sure to customize.

If a header is consistent, it doesn’t always have to be the same. In different emails, make changes to the header to keep visual interest and add customization. But here’s a good rule of thumb is: if you’re going to make adjustments, keep other things the same, like the placement/position of text or your logo.

Take this header designed by Shillington, the graphic design school. The circle logo and dog-eared corner effect are always present, even though the brand often changes colors. Because the header is so simple, it’s also versatile. Here are some examples:

Shillington email headers
Shillington email headers

Unstyled by Refinery29  takes a similar approach. The logo itself never changes size, colors, or placement, but it’s always transposed over a different image that corresponds to the newsletter topic. Here are three great examples:

Unstyled email headers Unstyled email headers Unstyled email headers

Tip #5: Have a few versions on hand.

If you choose to customize your header, it doesn’t hurt to have a few templatized versions to cycle through emails. While the Unstyled newsletter always has a custom header for each email, Chubbies, the clothing company, rotates between at least three different headers:

Version #1 — pineapples

Chubbies email headers

Version #2 — full-width logo

Chubbies email headers

Version #3 — special “weekender” edition

Chubbies email headers

Having a few different styles keep emails dynamic and interesting. But notice that Chubbies never strays from using its logo and brand color in every header; it’s this consistency that makes the emails easily recognizable and well-branded.

Design your email header and go Pro!

Need to brush up your email header design? Your readers will appreciate it. Sign-up for a BEE Pro free trial to access our drag-n-drop email editor called BEE, along with a huge library of free stock images, code-free HTML background colors, and 100% responsive templates. And remember to have fun!

Our Reader Score:

Total: 0 - Average: 0

Kelly Shetron