Ideas for new header design

Posted on 2004-08-23
Last Modified: 2013-12-03

I'd like to "modernize" our City's design a bit.  Overall, we like the color scheme and left nav. (I hate the hit counter "Press control-d to bookmark" link, but that's another story).  I'd also like to eventually template-ize the whole thing and reimplement it in CSS/XHTML, but for now, I'm concerned with the header:

I'm pretty good with server-side programming, but lousy with design.  I was wondering if you could give me some ideas on how I might make the masthead look a little more modern.  To me, it looks soooo 1990's.

Perhaps some design ideas or some links to ideas I might steal (with permission, of course) or links that might give me some ideas I can reimplement for our own design?

Question by:hendridm
LVL 16

Expert Comment

by:Sohel Rana
ID: 11874315
Hi Daniel:

There are many nice sites on the net by seeing those you can get some idea about header design. Besides, you can see this site where you will find thousands of templates, hope you will get some design ideas:

On the otherhand, if you don't mind to invest some money then you can use Xara webstyle software, by this software you can instantly make many graphics including header :

Sample navigation :

I hope it helps!

LVL 16

Expert Comment

by:Sohel Rana
ID: 11874368
Some Good tutorials -

Create a graphical web page header in Adobe Photoshop:

Modern Style Web Design:

A good resource for various web design tutorial:


Assisted Solution

shamstar earned 50 total points
ID: 11874691
Have you got access to Photoshop? Here are a few good tutorials that show you how to make headers, the end results should also give you some good ideas of how to make your own header:

Any of the effects on the following link can be used as backgrounds to your header:

Some very useful techniques when working with multiple images and combining them into a single image is the use of blending modes, opacity, feathering and masking.  The following tutorials will aid you with some of the more seemingly complex of these:
 - (advanced)

Accepted Solution

prifre earned 450 total points
ID: 11875164

So many ideas... I actually quite like your website.
So instead of suggestions for designs, I thought I give you (constructive? & subjective!) opinions:

The top part consists of 4+ fonts. Even if all of them are cute, together it seems too muck. And they all say the same too.

Colors seem balanced. The dark-red & dark-blue look and dark-red look stylish. But the gray background in the top part seems to overdue it. The gray to the left is ok, but at the top is a little too much. Also the Blues doesnt seem to be of the same color on the page. The headings differ from the top. The red dots to the left of text seems again to be too much design.

The text "Local Date and Time:" I am not sure if it is actually correct - I am in Sweden and it shows the same time as I have. So Local Date&Time - for who? I would skip the "Local Date & Time:"-text completely. Anyone can see what "Monday... " means. But I would have thought "Local" would have meant Appleton-Local.

A cityline (like in is pretty as a header and is related to the city. Currently the Appleton top-part resembles more of a font-shop.

The left menu is good and reminds of a city-sign-poster (or whatever its called, you know what I mean...) that stands on streets. Perhaps you should think out-of that idea for more of the site. Have the top-part resemble of the "top of the city"... Streets, neon signs, etc.

I cannot understand why there is "Employee Email website" at all. Either I would put that into the left-menu, or I would put it as a submenu onto some of the left menus. The important thing is that when they get to the webpage, it THERE says "Ctrl-D to bookmark...". You get the point.

The font for the texts is very wide, so I feel it is both more difficult to read and takes too much space.
There is too much space between the Acrobat-logo and the text about Acrobat. Also the text " to download from.." is NOT a link. I would have thought it should be. I would have made the text less wide but so it does NOT adjust to windows-size. Now when I view (1024x768) It looks a little misplaced.

The red dots to the left of texts I would remove, but I would change the color of "NEW" to red.

The map could be much more interesting... (

(...but... I am not really a designer ;-)

with a smile

Author Comment

ID: 11883468
prifre - I agree with you almost completely.  I like the overall design/color scheme - the header is what I don't like.  And you're right, I do want to get rid of the "four cute font" things (I didn't create the original design) - looks too unprofessional to me.

Yeah, the "Local Date & Time thing" is odd and confusing.  Others have mentioned that too.  I've been meaning to fix it as soon as I come up with a new header.

Yes, I agree the dots are odd.  For now, I was sticking to their design until I can template-ize the whole thing.  I'd reather just use HTML bullets, with perhaps an alternate image over them.  Cleaner code, more ADA compliant, better balance, etc.

I love the cityscape idea (!  That's the sort of thing I was looking for suggestions.  The map and the "Employee E-mail" link were decided by committee and are likely there to stay, although you're right, the sizing is a bit off (another thing on my list).  I just inherited the site and many of these things are back-burner items.  I wanted to start with the header before I template-ized it, since the content items are easier to change later.

Thank you for your time!

Featured Post

Enterprise Mobility and BYOD For Dummies

Like “For Dummies” books, you can read this in whatever order you choose and learn about mobility and BYOD; and how to put a competitive mobile infrastructure in place. Developed for SMBs and large enterprises alike, you will find helpful use cases, planning, and implementation.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
I want to find a font for a Boxing logo 6 1,158
Import Wizard Excel Font Size 7 68
Need public domain images 7 117
Simple 3D CAD 18 110
Many programs have tried to outwit PowerPoint in terms of technology and skill. These programs, however, still lack several characteristics that PowerPoint has possessed from the start. Here's why PowerPoint replacements won't entirely work for desi…
Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
In this Micro Tutorial viewers will learn the basic shortcuts and functions of Illustrator. The viewer will learn about the paintbrush tool, anchor points, font sizing, and more.
Learn how to create interesting presentations by including videos to keep your audience engaged using Prezi. Select "Insert" from the top menu in your Prezi editor: Select "YouTube Video": Paste the video URL into the prompt: "Select "Insert":…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question