The header is the part of your website that teaches your visitors how to swim, gives them a direction to go in, while gently coaching and coaxing them all the way. This role is incredibly important because your visitor has no intrinsic reason for wanting to swim around your site to begin with, so the experience should be pleasant and smooth.
Imagine someone blindfolds you and drops you in a lake. Oh, and you never learned to swim in the elements. You only have a few minutes to get to shore. You can already feel the slimy eels slithering past your ankles as you sink into the depths. Panic sets in…
Visiting your website shouldn’t elicit the feelings brought up in the scenario I just painted. Your header should be the lifeguard, a stalwart guide that reassures the visitor they can always return to a safe checkpoint and find what they need.
Today, I’d share a few quick tips that will help you create a friendly and inviting header design for your website. I bet you can even implement most of them in the next 15 minutes. I dare you – try it!
Table of Contents
Don’t Get a Big Ego: Keep Your Logo Small
I’ve worked with far too many design clients who wanted their logo to be the most prominent part of their website, on every single page.
Me: “How’s that?”
Me: “…okay. I recommend not going too big, so I’ve increased it just slightly. How about now?”
Me: “It’s really not good for your visitors.”
Client: “My branding is more important than my visitors. BIGGER!”
Your logo is important. However, it should almost never be the focal point of the page. Branding is important as a consistent, background element of your site that oozes through with subtlety, but your visitor is the person who may eventually become a fan or part of your client base. Focus on their needs, not yours. Their need is to access the content you’re offering, not to sit there staring at your logo.
In other words your logo should be prominent , but not overpowering, in the upper left-hand corner of your header. Centered is O.K. too.
My personal limit is to never let the logo be more than 20% width of the header when viewed on a desktop.
Action: Your logo should be comfortably visible, but only as big as it absolutely needs to be for usability. You can use apps on your computer or online tools like PicResize to save your logo at different sizes.
Make Your Logo Clickable
This one is pretty simple. People expect that clicking on the logo will take them back to the homepage. Don’t link to another website, or a random page of your site.
Action: Link your logo to the homepage of your website.
Rethink Your Menu Items
Menu items serve as safe checkpoints visitors can always return to when they get lost. Making sure these serve your goal and your visitor’s goals well is crucial.
A lot of this comes down to solid content organization, which is something we’ve discussed at length here at Dialect Pro:
- Pretend you don’t have a website and imagine how someone would navigate a series of folders, using only the folder names to help them.
- Learn about the ways content can be organized on your site, and choose menu items accordingly.
- Check that the content of your menu items delivers the expectation the menu name set.
Action: Review your menu items. Make sure they all steer the visitor towards your goal, and help the visitor understand what they can achieve on your site.
Check the Color Contrast
Even if your website is all black and white, there is likely more than just one color on your website. Your text and background are not usually the same color, or no one could read it because they would blend into each other. In a similar way, even poor contrast between the color of your header links and header background can create a terrible experience for the person trying to read them.
This is a simple user experience (UX) problem, which you can easily remedy. First, investigate whether your colors have high enough contrast to each other. If they don’t, find colors that fit your branding and contrast better. Update your header design accordingly!
Action: Use tools like WebAIM’s Contrast Checker to check your contrast and make sure people can actually read the links in your header.
Don’t Get Overzealous: Avoid Clutter
If you have a single, clear goal for your website, your header design should reflect that goal. The steps you want your reader to take to reach that goal should be made obvious and easy within your header.
It is easy to get distracted by all the ways you can use your header to promote different things. But, if you try and sell the visitor on twenty actions to take, they will likely get confused or overwhelmed and not do any of it.
As Ron Swanson says, don’t half-ass two things. Whole-ass one thing.
Action: Remove anything in your header that doesn’t help your website achieve its true goal.
Conclusion? Keep It Simple
At the end of the day, your header should be clear, small, and simple. The header shouldn’t be the focus of your site, but more of a steady guide that helps the user when they get stuck. If your header takes up more than half of the page when it first loads, there’s a good chance something is wrong.
To review, here are a few quick tips that will help you build a friendlier header design for your visitors:
- Keep your logo small.
- Make your logo clickable,
- Use clear, self-explanatory menu items.
- Check the color contrast for readability.
- Avoid clutter that doesn’t help your website achieve its primary goal.
What questions do you have about fixing your header design? Ask away in the comments section below.
Success! Now check your email to confirm your subscription.