Solved

Ideas for new header design

Posted on 2004-08-23
5
596 Views
Last Modified: 2013-12-03
Greetings,

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:
http://www.appleton.org/

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?

Thanks,
Daniel
0
Comment
Question by:hendridm
5 Comments
 
LVL 16

Expert Comment

by:Sohel Rana
Comment Utility
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:

http://www.templatesmonster.com/

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 :

http://www.xara.com/products/webstyle/

Sample navigation :

http://www.xara.com/products/webstyle/examples/navbars.asp

I hope it helps!

rsdn
0
 
LVL 16

Expert Comment

by:Sohel Rana
Comment Utility
Some Good tutorials -

Create a graphical web page header in Adobe Photoshop:

http://www.pegaweb.com/tutorials/web-page-header/web-page-header-1.htm

Modern Style Web Design:

http://www.pegaweb.com/tutorials/modern-web-design/modern-web-design.htm

A good resource for various web design tutorial:

http://www.thewebmachine.com

rsdn
0
 
LVL 8

Assisted Solution

by:shamstar
shamstar earned 50 total points
Comment Utility
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
0
 
LVL 9

Accepted Solution

by:
prifre earned 450 total points
Comment Utility
Hi,

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
/prifre
0
 
LVL 8

Author Comment

by:hendridm
Comment Utility
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!
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

I've been using this technique since Adobe CS2, and it should work with any version of Illustrator that includes the appearance panel. In this tutorial we'll create a button using the appearance panel in Adobe Illustrator, and then save it as a r…
Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
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.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

762 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now