Header for Light Bulbs Fast.com *Project Over*

[DenRomano]

Hi All, (Admin code added by Palmer - 121153R)

I need the top header portion for my site Light Bulbs Fast.com. I already have the logo which was a contest here last week (winner Ejlain, thanks Ed.). I have attached the logo. If we need to resize it or whatever let me know and I will see what Ed can do. The colors are as follows

Dark Yellow = FDEE1F
Light Yellow = E8F567
Light Green = 6EB74C
Dark Green = 024D38
Black = 010005

The size will be 775 wide by about 125 high. I do not like it when you have to scroll down the page just to see the content because the header took up half the window. Also, I like pages the load fast.

I plan to have the left nav-bar background color be the light green (6EB74C) and have created a simple start to the page at http://www.LightBulbsFast.com so you can see that you will need to create the header so the color flows into that green on the left

I want to state a couple of things on the header. I would like to make these points:

1. Call 800-529-2834 Mon-Fri 9-4 PST
2. Most orders ship same day
3. Shipping only $8.95 for any size order (to lower 48 states)

You do not have to word it just like above but it needs to get the point across.

I will also need 3 places to click on ( I hate to use the word buttons as I do not like the look of buttons like front page) for

1. Information Page
2. View Cart
3. Email Us

I can do the coding but I will need the images for the places to click on separate so I can enclose them an html href tag

The prize is $50.00 and the contest will end on Friday the 13th.

Thanks,

Dennis

[Victoria]

Friday the 13th :o :help:
Something simple to get this thing started! :D
By the way, are you sure those are the right dimensions? It seems a little big.. :help:

<img src='http://inertia.dilloway.net/DO/lbfheader.gif[/img]

[DenRomano]

Nice job Victoria - This is what I am looking for. Can you tell me about what the file size (for download speed) it is? Also with the green behind the logo it changed the colors of the logo I would rather not do that.

Victoria when you said to big are you talking height?. If so I agree it is. Try 150 pix or whatever you think will be better. If you are talk width then I think 750 is right. I normally set margins to 0 top and left and it gives me 750 wide on a 800x600 setting. As always I am open to suggestions.

Only 1 more week to go anyone else with other ideas out there?

[Victoria]

Hello,

It is gif format, at the moment it's 32.66k, which is around 13 seconds on a 28.8k modem. Bear in mind most users are 56k (with Broadband/Cable etc on the rise) so this would be half the loading time for the average 56ker. There are other optimizing options that output quicker speeds, however they lose some of the original detail. It all depends on how high you would like the quality to be. When it is split however the image sizes will be smaller, and so load quicker. :)

I will post a variation which is smaller in height, this will also reduce loading time no doubt. Watch this space.. :) :tup:

[Victoria]

Ok this one is 125pixels in height, which I think is an appropriate size :) This is also gif format, zooming in at 9 sec for a 28.8k user. (Again, half for average 56ker, so 4.5secs). Another optimized version comes in at 7 seconds at 28.8k.

<img src='http://inertia.dilloway.net/DO/lbfheader2.gif[/img]

[DenRomano]

Yes Victoria I agree with 125 High as a good height. The file size is fine also. I do not know if you just re-sized it to show me what the new size would look like but it looks squished.

Keep the logo about the same size as before and just have less blank space under it will bring the wording up.

[Victoria]

Updated logo in previous post. It did look rather squashed I have to admit, that was purely because I just resized the image. It also didn't help having Italic type.. :P

[Julie]

Here's my try with this header. I can provide you with the information, cart and email images as separate files, but might I suggest that if you like this header I could imagemap it and send the code with the final file. That might be easier for you to work with. Obviously, I'll defer to your judgement since you're the one who has to work with it after that point :)

Julie

<img src='http://www.bohtieque.com/design/lbfast.gif[/img]

[Victoria]

I forgot it was for web only. So i went to town. B)
<img src='http://inertia.dilloway.net/DO/lbfheader3.gif[/img]
24k

[DenRomano]

Julie thanks for entering my contest. You are correct it would be much better to use an area map for linking and that would be great. I do not really like the first one on the left side with the quarter circle. Others the look is nice but about the layout please read below for info.

Victoria - I like the first one better and the reasons are below.


TO ALL PLEASE READ<<<-----------

After looking at the first few entries I can see things that I like and can go into more detail then I did when I posted the contest.

I like it when the logo is in the top left position. Also other then a real light gradient or color I think the logo sits better on white. This becomes a problem because as I said in the first post I need the header to "flow" into the left side NAV bar which is green. Maybe the only way to do this is to start the green color under the logo to have it flow into the NAV bar.

Would it be possible to curve in the green into the NAV bar so it does not end up looking like a 90 degree angle on the top right of the NAV bar?. I got this idea from Victory's third entry where she as the curves on the top and straight green on the bottom but it would be reversed where it would curve into the left side. The left side nav bar is 150 pix wide.

When listing the 3 points I think the toll free number should be more outstanding as 90% of the people want to see a toll free number, makes it seem like your more a "real" business for some reason.

If this does not make since please post questions.

Thanks

[FTIGraphix]

Professional, but kept simple

I made this before I read your recent comments, so hopefully this will fit in ok.

Just an initial idea. 19KB

http://www.ftigraphix.com/images/lightfastheader.gif

[Victoria]

Do you mean a gradient above where the nav would be? :help:

[Julie]

OK--here are a few possibilities--

http://www.bohtieque.com/design/lbfast2.gif

[FTIGraphix]

Here's another version. 24KB

http://www.ftigraphix.com/images/lightfastheader2.gif

[FTIGraphix]

And another. 22KB

http://www.ftigraphix.com/images/lightfastheader3.gif

[DenRomano]

FTIGraphix - I like you first entry the best. I would like the logo larger if possible and instead of arrows for the icons maybe pictures of a cart, email etc. One problem will be is how the green will flow into the left side nav bar though. The green needs to go all the way to the left of the graphic so it flowed into the left side nav bar. Some thoughts on the other entries so you know why I did not like them as much. The entry posted at 4:31 one I do not like the pictures of the bulbs, the entry posted at 4:30 I do not like the lighter green and outline around the text.

JulieT - your last entries I like the second one. Can you move the "info, cart, email" to the right side. Right justify the text for the 3 points and my the 800-529-2834 in dark yellow (#FDEE1F). also make the font size of the "Monday - Friday 9-4 PST" a little smaller then the phone number so it does not stand out as much.

Victoria - Yes what I tried to say is this. From your first entry I still like it but I did not like where the gradient went under the logo and made the logo colors darker and less stand out.

TO ALL - To help see how the header will look on the website maybe you could add it into your graphic temporarily. It will be 150 pix wide and you only need to show say about 1-2 inches of it so we can see how it will match up.

Good work all of you!!!!!

[Victoria]

Okay I will work on this when I get up in the morning :)

[Julie]

Here's how it would look on your page. I have a few variations here for you, as well.

Julie

http://www.bohtieque.com/design/lbfast3.gif

[FTIGraphix]

Single, and a straight Screen Shot from the site

http://www.ftigraphix.com/images/lightfastheader4.gif


http://www.ftigraphix.com/images/lightss.gif

[FTIGraphix]

Here's another version with a raised emboss on the text/graphics....I also shrunk the logo down some, as I thought it might be too big in the previous post.

http://www.ftigraphix.com/images/lightfastheader5.gif



http://www.ftigraphix.com/images/lightss2.gif

[subtract]

hey! :tup:
here's mine...there are two entries for now....and i'm workin' on the 3rd one.
both are in low quality JPEG Format for display....but actually,on your site,you would have to use the GIF versions sliced up in tables....that would make the header more faster and functionable.
this one's #1 :

[subtract]

here's #2 :

[Julie]

Here's another option--

http://www.bohtieque.com/design/lbfast4.gif

[martincrumlish]

Here's my entry....

Let me know what you think.

Thanks,
Martin

[DenRomano]

subtract - Thanks for entering my contest. I like the second one the best. A couple of thing though. The light bulb in the background is to "playfull" looking. I am going for a more professional look. I do like the straight lines though makes it look hi-tech. The graphic is to high we need to reduce it down to say 130-140 on the right side. When the page would be loaded all the customer would see would be that I like them to see a little of the content so then do not have to scroll down to see the "meat" of the site. I like the curve into the nav bar you are the only to do that and I like it. This is how I might suggest to thin up the header. Use the space in the "curve" to Nav Bar for the points "ships same day" and "Shipping only $8.95". This will allow you to thin up the header. Also, When you do that it will open up space so you can move left the contact (please change to email us), info and cart. This will allow you to move them all up without making them look sqiushed. Do you see what I am going for?

JulieT- That has all the things I am looking for. It is a very good entry.

martincrumlish - Thanks for entering the contest. I like it. It is different then the rest with the colors and looks very professional which is what I am going for. I can not think of anyway to improve it. Can you tell me the file size for download speed?

I can see I can many great entries here so I am going to close the contest early. It was to be Friday the 13th but I plan to close it on Tuesday 6/10 so if there is anyone else that wants to enter do it soon.

You are all great!!!

[martincrumlish]

The image I uploaded here is an unoptimised jpg version. I made it into a gif and tested it for download speed - the size is 18.49kb when I optimise it as a gif which takes 5 seconds on a 28.8k modem and 2.5 seconds on a 56.6k

I am glad you liked the entry, looking forward to the result on Tuesday!

Martin

[martincrumlish]

Here's how it would look in the web page you have setup so far....

[Victoria]

:)

<img src='http://inertia.dilloway.net/DO/lbfheader4.gif[/img]

[FTIGraphix]

19KB

http://www.ftigraphix.com/images/lightfastheader6.gif

[crimsondesigner]

Here are three entries for the header. I'll continue to work on a few more ideas today to capture what you're looking for. Any feedback would be greatly appreciated. Thank you.

Erika

[DenRomano]

FTIGraphix - I like it. there is nothing I would suggest to change.

Victoria - Looking good. There are a few tiny things I would like to change if I pick yours but do not want to waste your time if I don't. I like the layout and in my mind can see what it would look like with the little changes.

Hi Ericka - Thanks for entering. I really do not know why but I really do not think any of them are what I am looking for. I can't even put my finger on it enough to tell you what to change. Sorry

[Victoria]

Glad you like it. Any tweaks I would gladly make. :)

[subtract]

okay here are the changes:

[DenRomano]

Thanks to all for entering the contest. As I have said before you all are very talented but I have to choose only 1.

My choice is Subtract. What put me over the top on this design was the more modern feel. The lines and curves. Nice job.

Dennis

[Palmer]

Congratulations Amrita on your first win. :tup: Please send me a PM with your PayPal email address.

Thanks Dennis, glad they could help again :)