Tuesday, June 28, 2016

Header Design 101 – Make the Most Out of Your Blog’s First 200 Pixels

Your first 200 pixels can have a big effect on both the “vibe” of your blog and on your total conversion rate. Designing a great header involves first understanding a few key principles, then doing a fair bit of experimentation.

How does your blog design affect your blog? The effect is a bit like an office. Imagine a client coming into your office. Before they even have a chance to gauge your business or your character, they’re already making judgments based on the cleanliness and design of your space.

Your blog colors and graphics work in much the same way. It doesn’t necessarily reflect on the quality what you have to offer, but the reader will still make decisions about your credibility, reliability and professionalism based just on your colors and graphics.

These aren’t conscious decisions. They’re subconscious, subtle feelings of trust or distrust.

Let’s walk through some tips on how to make the most out of your blog’s first 200 pixels.

Want More Blog Design Help? Join our FREE 7-day Blog Design Challenge and learn practical ways to makeover your own blog! Click Here for more info.

Decide on How Attention-Grabbing Your Header Should Be

Copy of How I Went From Wannabe Writer to Full Time Writer, Working From Home

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 like blogs, a strong header is a good idea. For sales letter pages or opt-in pages, the header should more or less fade to the background and give the first impression instead.

Copy of Stephanie's Song Logo

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.

Copy of Copy of Copy of Stephanie's Song Logo

The Basics of Using Color –

First of all, it’s a good idea to have one primary color and one adjacent color. Sometimes a site can do well with just one color or three colors, but it’s usually best to never have more than three colors.
The colors you choose should be similar enough that they’re soothing to the eye. The colors need to fit well together to create one smooth design.
However, two colors shouldn’t be so similar that they clash. Two different shades of green, or a light green and a light yellow, for example, are just too similar. It creates strain on the eye.
Contrast or opposing colors should be used with care. It’s okay to use opposing colors or high contrast to bring attention to one or two elements. But it is less effective as an overall color scheme.
Use neutral colors like black, white and grey liberally. Just like how white space is half the picture in graphic design, your neutral colors are half the picture in color selection.
Use your one to three colors with moderation, to sprinkle feeling throughout your website. The rest of your website should be neutral. Don’t try to color everything.

Those are the basics of using colors and graphics in your site. Remember – your colors and graphics are like your office. They set your first impression before they even evaluate your product or offer.

Logo #3

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.

Logo #8

Just Experiment!

More often than not, the best headers won’t come out of careful planning. Instead, just head to PicMonkey or Canva.com and experiment.

Come up with a few different possible designs and play with how they’ll look. Set aside some time 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 blog. Take the design principles we’ve talked about into account, then just play and experiment until you create a great header you like.

New Start