Design Web Header
Web Page Header Design - Time to show your creative side
Contact us
Custom Search
|
Share this Page
Cool Clicks
Design your Web Page Header
What to put in your Web Page Header Design
The header or heading banner of a website is like the frontispiece of a book or the facade of a building. It creates the initial impression and sets the tone for the site. It's usually the dominant design element in your page.
Your web banner design may show off the name of your site, perhaps in fancy text, or it can contain a graphic image, photograph, a few horizontal or vertical lines, or any other design. If you use a picture, make sure it is relevant to your site.
Often the web banner design includes a logo for the site (best placed on left), the site name, an attractive image or background image, sometimes the URL of your site, or perhaps other contact information.
Website Banner Design - Size and Position
A page banner can stretch all the way across the top of your web page, or a smaller banner can be centered (like ours is) allowing room for other objects on either side, or just empty space. Empty space is good. Don't feel you must cram every square inch with goodies.
A full banner across the top of the page is normally about 780 pixels wide by 120 high. A centered one might be 480 wide by 120 high. (Some web banner designs are up to 140 pixels high).
The background of your web banner design can blend in with the rest of the site, like ours does, or may be a contrasting or complimentary colour.
The resources you need to make a banner
This is one part of building a website that I would not hesitate to outsource. Professional graphic designers can be a whole lot more creative than I am and will be able to come up with something that looks really cool.
Or if you feel creative, you can do it yourself, with help from the software. Start by deciding about the size, colours and general format of your banner.
Some high-end web editors include graphic design features which may be adequate to do the job. If yours does, it saves you finding (and learning) another one.
The end result of the design process with any graphics editing software will be a .jpg or .gif or .png file which contains your banner as a digital image.
Graphics editing software
There are many downloadable graphic editor software products, ranging from free to professional. Unless you want to use the product for other purposes, I suggest you go with a free one. Fortunately there are some first-class, free graphic editors.
I'm not qualified to advise you which product is best for you. See the graphic editor reviews in the Links/Resources for competent advice.
Another approach, easier but more restricted, is to use the services of an online banner generator. (PureSilva is only free if you include their advertising in your banner, otherwise there is a small charge.)
This site's banner now inserted into the layout
I designed the page banner for this site (so I can't blame anyone else). I used the Web Canvas product which is bundled with my WebEditor software. I then incorporated it into the table framework which we looked at in the last tutorial.
I decided on the blue document background colour (for the area outside the document) and changed it in the editor. You can see how it looked in Page Layout Design Step 3.
Designing a web page banner is one of the many fun jobs in creating a website. I hope you enjoy it too.
In the next tutorial we will be looking at website navigation, including menus...
Links / Resources
Free Graphics Editor reviews:
Free Graphics: Software List
Iron Spider review: Best Free Graphics Editors
Free Online Banner generator:
Cool Text: Online graphics generator
PureSilva: Free Banner Maker
Page Layout Design Step 1
Page Layout Design Step 2
Page Layout Design Step 3
Build Site: Design Web Page Header Top Prev Next: Build Web Menu/Navigation
Copyright © 2009 / 2010 EasyWebsitePrimer.com Last updated: September 2010
Web Page Header Design - Brings out the artist in you