/Graphics/ Design a perfect page header
24/04/2009 | Filed under Develop > Graphics
Make a good first impression on your visitors by designing a homepage header that combines clarity with visual flair. Elliot Jay Stocks shows the way
A website’s header is the first part of a page a visitor sees and, being higher than all other page elements, it has the potential to impress before anything else. Headers have to consider the clarity of navigation, but because they rarely contain any substantial content, they have the freedom to run wild with graphic flourishes and embellishments.
There are no hard and fast rules to creating a good-looking website header, apart from balancing clarity with visual flair. We’re going to create a header with an autumnal theme for a fictitious company website. This will enable us to be playful with colour, texture and the use of manipulated photography. And since many people have asked how I created the header on my personal website, we’ll be using that general layout as a template in this tutorial.
As well as using some subtle but effective Photoshop techniques to achieve some great results, we’ll be paying attention to the groundwork of a solid grid system, and we’ll also be laying out elements with some key principles of balance in mind. Near the end of the tutorial, once we’ve created our layered file in Photoshop, I’ll show you how to turn the design into a functional header with some markup and CSS.
About the author:
Name: Elliot Jay Stocks
Site: elliotjaystocks.com
Areas of expertise: Design, CSS, web standards, Photoshop
Clients: Apple Corps
Favourite reggae song Is This Love? by Bob Marley and the Wailers
Click here to download the support files
Click here to download tutorial PDF
Bookmark with:
Comments
Ali Whiteley / 03/05/2009 / 23:26 / http://www.alistairwhiteley.co.uk
Thanks for the tutorials Netmag, keep up the good work. Headers are definitely the way forward and I will be using them more often than not. I think the web design industry seems to be influenced more and more by the graphic design industry as time goes on. The disciplines are merging and that graphics guys have been around longer than us webbies so it's good to pick up on their creativity and experience.
James Godwin / 31/05/2009 / 09:12 / http://www.creativresponse.com
Good tutorial, it amazing that with the most simplist design the header can bring the site to life and also good use of photomaniplation which I need to learn more of!!
Thanks
the website guy / 10/07/2009 / 19:06 / http://www.dempseygraphics.com
Im really in love with the "modern header" - more open and less restrictive. In the past the header was a chunky looking block at the top of a page. Usually it was just a waste of space.
NJ Website design / 26/11/2009 / 08:22 / http://www.hangtenhosting.com
The modern header is definitely less restrictive agree
