• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 610
  • Last Modified:

Ideas for new header design


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?

2 Solutions
Sohel RanaCommented:
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!

Sohel RanaCommented:
Some Good tutorials -

Create a graphical web page header in Adobe Photoshop:


Modern Style Web Design:


A good resource for various web design tutorial:


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:
 - http://www.sitepoint.com/article/web-design-effects-tutorials/4

Any of the effects on the following link can be used as backgrounds to your header:
 - http://www.extremetutorials.com/?id=pageheader

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:
 - http://www.moonfantasy.com/v7/photoshop/tutorial06/index.php
 - http://www.zone-hosting.com/hosted/egh/nuke.s/ftopict-2.html&sid=febf011b7a90550a703c3ab776743692
 - http://www.photoshopdesign.net/tutorials/psdnet10b.htm (advanced)
 - http://www.phong.com/tutorials/screen/
 - http://invano.com/?photoshop:MaskingImage
 - http://user.fundy.net/morris/redirect.html?photoshop15.shtml

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 http://www.stockholm.nu) 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 "...click 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... (http://www.us.map24.com/)

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

with a smile
hendridmAuthor Commented:
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 (stockholm.nl)!  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!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now