How To Design A Website Header (And What Should Go In It)

A website header is the area is one of the most valuable areas of your website. It runs across the top of the page and appears on every page of your website, except on sales or landing pages templates that have it removed.

The purpose of your website header is to promote your brand and make your site instantly recognizable to those who are already familiar with you. For many businesses, the header is the perfect place to efficiently and effectively convey exactly what your site is about and what your business does.

Website Header Design Considerations

Branding a Person:

If branding a person as the celebrity or spokesperson for the brand, the header should focus on making a connection between the visitor and the person right away. The fastest way to achieve this feeling of connectedness, to accelerate the relationship building process, and to build recognition is to use a happy, smiling photo of the person in the header. Even if a visitor has never met you, simply seeing your face repeatedly will, over time, make them feel like they already know you.

• When designing a website header that is branding a person, consider including your logo, photo, name, and title.

Examples of Website Header Designs Branding A Person

---

Branding a Business:

If branding a business, understand the the header of your website isn’t going to make or break your online success. In fact, in many cases the best strategy is to minimize the header to bring the content higher up on the page, or to not use a website header at all — because let’s be honest here, your logo isn’t what is going to persuade someone to hire you, buy from you, or learn from you.

• When designing a website header that is branding a business, consider keeping it simple and only including your logo and tagline to keep the header area nice and small.
• If adding imagery to the header design, be careful not to overdo it — consider sticking with one main hero image, and be sure it is relevant and communicates what the site is about.

Examples of Website Header Designs Branding A Business

---

Branding a Thing:

If branding a thing, event, product, program, or service, consider creating a logo for the core offering. If it is offered by a brand, mention that the offer is “brought to you by…” or “presented by…” to add instant credibility. Adding a short statement of benefits can also help visitors figure out if they are in the right place faster.

• When designing a website header that is branding a thing or product, consider including the logo of the item, a short description or tagline explaining what it is, and if needed a photo of the item.
• If designing a website header for a program site or event site, be sure the imagery used communicate the energy of the event or the program.

Examples of Website Header Designs Branding A Thing

---

Not All Websites Have A Header

A website header takes up valuable real estate at the top of the browser window that isn’t always necessary. For some businesses, it is better not to use a traditional website header, and instead just use the logo and bring the content up higher on the page. (Like Our Site!)

• When designing your website, consider whether or not you really need a header — you may be surprised to discover that you don’t!
• Is your logo or your header part of your sales funnel? Is it critical in guiding visitors to take action on your site? If the answer is no, you may not need a header.
• Consider what will happen to your header on mobile devices. Will it disappear anyway or shrink down so small no one can see it anyway? Or will parts of the header start dropping off as the screen gets smaller and smaller until only your logo shows?

Examples of Websites That Don’t Use a Traditional Header

---

Advice If You Are Researching Website Header Design Tips

Getting your website header just right can be stressful and frustrating because there is so much information out there — and I am sure you’re wondering which information is trustworthy, which is accurate, and which is current. I’m sure you’ve read blog posts about why you must put an opt-in box in the header of your website, or why you must have your photo in the header.

But let me issue you a piece of advice: Avoid turning someone else’s generalizations into rules and statements of fact. Most website header design recommendations you’ll find on marketing blogs, are merely that: recommendations — they are someone else’s opinions or the regurgitation of someone else’s opinions. Instead, do your homework, gather information, listen to others’ opinions, and evaluate the strategies for yourself. Assess which website header strategy would be the best fit for your brand and your business.

Here are some website header design tips:

• Keep it simple. Don’t try to cram too much stuff in the header — while it is valuable real estate, the more you stuff into it, the less valuable it becomes.
• Keep text to a minimum. Your header is primarily for branding and brand recognition, and it should be primarily visual. Keep text in your hear to a minimum. You don’t need to include your business name, and your name, and your title, and a tagline, and a mission statement or a marketing message, and, and, and…
• Don’t put an opt-in in your header. Adding an opt-in box to your website header was all the rage when it was new back in 2007/2008. But now that it’s permeated the web and opt-ins are plastered everywhere, the strategy losing it’s effectiveness and it can make you appear desperate and amateur if not done correctly. Plus, a website opt-in box doesn’t belong on every page of your website — like your services, products, programs, and other conversion focused pages.
• Hire a professional designer. Obviously we believe you should hire a professional designer for your entire site, but if you are a do-it-yourselfer or don’t have the budget, at minimum, invest in a professional graphic designer to design your website header or banner image for you. You only have a couple second to make a first impression, so make it count.

What About You?

Are you working on the design of your website header? Did you find this post helpful? Do you have questions about creating a website header? If so, we’d love to hear from you in the comments below!