Pin Me

Header Design Tips

written by: Lucinda Watrous•edited by: Michele McDonough•updated: 2/14/2010

When it comes to blog or website headers, a good design is very important. It's the first thing your website viewers see and it will make a great impact on what people think about your site. Follow these header design tips to make sure your header design wows the crowd.

  • slide 1 of 6

    The header may seem like a small part of your website, and while it may not take up much room on the screen, you should probably spend as much time designing the site header than the rest of the website. These header design tips will help you along the way to ensure you are creating a header that is visually interesting and matches the remainder of your site design.

  • slide 2 of 6

    Choose a Good Font

    The font should be different than your site text, and should match the mood and tone of what your site is aiming to accomplish. The font should be visually interesting, but should still be readable. Headers are often images, so you don't need to worry about the font choice unless your header is not an image.

    There are many fonts on your computer to choose from, but if you cannot find one you like, there are several different places to get new fonts, and many of these fonts are free.

  • slide 3 of 6

    Consider Layout

    Choose a layout for your header that will create visual interest and draw the viewer in. Your header layout should include room for any graphics and text, with plenty of white space around them to prevent them from appearing too close together and hurting the eyes. If your header will include links, be sure to leave plenty of room for these too.

  • slide 4 of 6

    Consider Colors

    Make sure to use the same color palette for your site on your header. Create visual interest with designs, varying shades or tints of the color scheme, and a graphic that contains similar colors to your scheme. The graphic in your header can get away with using colors outside the scheme as long as they fit naturally inside it and create interest rather than clashing against the scheme and causing harm to the veiwers eyes.

  • slide 5 of 6

    Avoid Animations

    Unless the animation is simple and fits with your site theme, you'll want to avoid anything flashy. Keep things simple and clean with your overall design and your header will come out great. Not only will animations likely overwhelm the visitor eye, they will increase page load time.

  • slide 6 of 6

    The most important thing to remember when designing a header is: Take a step back from the design and look at it from the eyes of a viewer. This will be hard to do because of your attachment to the design, so you may want to ask people you know what they think about the design before using it.