In this post I’d like to go over some quick and easy ways to improve the effectiveness of headers (site headers and content headers) in website design. Effective headers connect with a user faster, and help users understand the flow of content without much thought. These are not rules to live by, but definitely things to consider in the design process.
1. Make Headers Stick-Out with Contrast
Your headers need to appear separate from your content. Just as you underline or use different colors for links, your headers should appear unique. Use color, font weight, and font families to add contrast to your headers. It’s worth noting that underlines should be reserved for links.
2. Use Warmer Colors
“Warm colors are active, attention-grabbing and aggressive. They stimulate the emotions, motivate and seem to come forward off the screen or page.” —Pantone, Inc
Warmer colors catch the eye better than cooler ones. Warm colors are active, attention grabbing, and appear to come off the page while cooler colors retract into it. When possible, use warmer colors to gain your readers attention faster, and direct them to important content.
3. Prominence: Headers Should Be Big
Make your headers big. Users know that when something is bigger, it’s more important. Consult a newspaper for a prime example of how headers should appear. The title of the newspaper is the most prominent, and as you progress down the page, headers typically become less prominent. In web design, we can visually accomplish this same effect by changing the size of headers while semantically we use the <h1> through <h6> tags.
4. Use Appropriate Titles
If you’re labeling a section of your website, make sure your header is titled appropriately. Don’t use confusing, trendy, or otherwise misleading titles. Your header should convey the who/what/when/where of the content it describes. The Content explains the why.
5. Be Concise!
Make your headers short. It’s OK to drop articles like “the” and “a” in headers as they can be assumed. Make your headers quickly and effectively highlight the most important information contained by them. Again, this is typically the Who, What, When, Where of the content.
What tips would you add to the list? Have you discovered any ways to improve headers or similar elements on your site?