FridayBlowout

The header of a web site is one of the first few things visitors will take notice immediately upon taking a whole look of the site’s appearance. That is why a header is one important factor that needs to be taken care of once you have published your web site. It must be located at the topmost of the page with an introduction of what your web site is about and where every person can see it. Since we are now on using Web 2.0 applications, your header designs must also have that same new look. Web 2.0 header designs may range from simple to colorful and flashy looks depending on how it fits the whole content of your web site.

What you can put in you Web 2.0 header

• Logo. This is mostly a general requirement for all headers on every web site on the Internet. This shows your trademark that makes your web site different and special from the rest.

• Navigation. This is a great choice for putting your links where visitors can immediately take notice so they won’t find a hard time looking to the important branches of your site.

• Search box. Depending on the design of your header, if adding a search box does not destroy the appearance of your header, why not do it? People who mostly use the Net are in search for something, that’s why search boxes are important too.

•Register/Login links. If your site allows the involvement and interaction between users, the header is a great location for putting these register and login links.

Whatever you want to put in your header, it all depends upon you. Make sure you know how to blend the design of your header to your site’s appearance. In addition, since a lot of web sites are now on Web 2.0, you have the freedom to design the way how you want your header to be as long as you know the basic stuff of designing headers.

Making the background of a Web 2.0 header

The popularity of Web 2.0 designs and graphics has allowed headers to have that Web 2ish appearance. The first thing to do in designing a header is to make its background. By simply selecting the right color from the gradient tool, adding borders around the edges of the header and make some blending options, your background is ready. It’s that easy!

Designing the text of a Web 2.0 header

Once your text is ready, providing it with a web 2ish look is simple enough. By rastesizing the layer,  experimenting any kind of font style and color, and editing its opacity, foreground and background color, etc., your header text will absolutely catch the attention of your visitors.

Making the boxes

Since boxes are needed for your header, you are required to create buttons as well. By using the same technique as creating the text and just a few additions such as creating a new layer for the box, blending the colors on the background and the text of the header, your boxes will simply be an addition to the header’s usability and appearance.

As you might have already figured out, it all depends upon you on how to make your header catch the attention of your site’s visitors. Header designs should be good and done carefully to have that Web 2.0 look.

Here is where this lesson ends for today. We really hope you enjoyed this lesson too.

You will receive the next lesson in 7 days. Next week’s lesson will have the following title:

“Strategize with Web 2.0 Templates”

Copyright(C) 2009 by John Delavera & Reimund Lube

Trackback URI | Comments RSS