WDW: Headers, Headers, Headers

Web Design Wednesdays: Website Header

Headers are one of the most important components on a web page. Every visitor will see the header. The header usually contains navigation. It’s (usually) the first impression the website makes on the viewer.

It’s important.

I’ve rounded up three examples of different styles of headers.

Haik Avanian Website

Haik Avanian website’s header.

Haik Avanian‘s website certainly has its own flavor. I think the layout and techniques used are engaging and work well. However, it’s a good example of a design that has to be done just right or the viewer won’t appreciate the visual elements and, therefore, the website. The font is so small that it borders on being unable to work.

One thing is clear though – you land on the page and it’s very clear what options you have. That’s the first and foremost necessity of a header.

Jeroen Homen website's header

Jeroen Homen header

Jeroen Homan‘s header distinguishes itself from the page. It’s clear where the website starts, the options it has and flows seamlessly into the theme of the website with the font below picking up the header’s color.

That’s the second goal besides easy, clear navigation – it should work with the website theme and style. A header should subtly distinguish itself as important yet blend well with the web page.

Creative Spark website's header.

Creative Spark website’s header.

The last example, Creative Spark‘s page, works very well. The header is clear, easy to read and has personality. It’s not that the first two headers didn’t have personality – they definitely did. The header on this page, however, integrates itself without a hitch. The website layout and elements on the page have room to breathe and come to life. There is nothing flashy, just a well-balanced, interesting web page.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s