Your first 200 pixels can have a big effect on both the “vibe” of your site, as well as your total conversion rate. Designing a great header involves first understanding a few key principles, then doing a fair bit of experimentation.
Here’s how to make the most out of your first 200 pixels.
Decide on How Attention-Grabbing Your Header Should Be
Some headers are purposefully designed to fade into the background. These headers lend the site a subtle sense of beauty, credibility and professionalism, then disappear from the reader’s minds.
Other headers are designed to grab attention. They tell the user what the site is about, who you are or any number of other things. In other words, the header plays an active role rather than a passive role in the website.
Before you do anything else, first decide how attention-grabbing you want your header to have. This decision will inform all your other choices.
Generally, for content websites, a strong header is a good idea. For sales letter websites, the header should more or less fade to the background and give the first impression to the headline instead.
Tips on Color in the Header
It’s best if your header has the same color scheme as the rest of your website. In fact, your header often sets the tone for the whole color scheme.
Use just one or two main colors in your header. These colors should complement the rest of your site.
Avoid using harsh colors like red or yellow in your header. Remember that users are going to have to look at your header constantly as they browse your site. Make it easy on their eyes.
Be Very Selective with Text
Never, ever use hard to read typography in your header. Avoid “creative” fonts like Comic Sans that look different, but people are unaccustomed to reading.
Only put one or two lines in your header. Too much text can kill an otherwise brilliant header.
It’s a good idea to put your logo and/or tagline in your header. This helps build your brand on every page.
Just Experiment!
More often than not, the best headers won’t come out of careful planning. Instead, just boot up Photoshop and experiment.
Come up with a few different possible designs and play with how they’ll look. Set apart a whole day to just brainstorm ideas, apply different filters and play with the look of your header.
At the end of the day, your header may look nothing like you planned it to look. But it’ll look spectacular.
Designing a header is an important step to creating a professional, well-designed website. Take the design principles we talked about into account, then just play and experiment until you create a great header you like.