Website Static Header & Matching Buttons *Project Over*

[evaluseek]

(Admin code added by Palmer - Y1640211K)

Hello everyone,

This is my first contest. I am new to your service, but think the idea behind it is fantastic! I am looking forward to working with such a talented group of artists/designers to get my job done. I have plans for many more websites so you will see more business from me in the future.

Prize for this contest is $100.

Header Requirements

I need a replacement header for a new website (http://www.body-jewelry-useek.com) that will refer all visitor traffic to various online body jewelry stores. This site will not be selling any actual jewelry from the site, only referring to other sites. The current header comes in two parts and consists of two jpg files.

Left Header (http://www.body-jewelry-useek.com/images/header1.jpg)(136x93)
Right Header (http://www.body-jewelry-useek.com/images/header2.jpg) (495x66)

The width of the left header cannot change because it will screw up the template, but you are free to make it taller if necessary. The width/height of the right header can be whatever is necessary to create a good design. The background of the right header expands/contracts based on the browser window width, so keep that in mind when you are doing the design.

A logo design is not required, only graphics for "BODY-JEWELRY-USEEK.COM". See three sample sites below. This graphic should remain the same redish color, unless you believe you can make the header look better using another color. Please feel free to offer alternatives that coordinate better with the website template. I choose the red color because of the logo symbol and the hyperlink mouseover color in the template stylesheet. The logo symbol is being eliminated and the mouseover color can be changed easily enough.

In general, please design against the existing template. I would like to see a combination of "tasteful and rated PG" body piercing photos along with some images of body piercing jewelry. The jewelry images need not be actual full images, but could be used as part of the header background (see examples below). I would prefer that pictures of people wearing the jewelry be more prominent then the actual jewelry pieces themselves.

Here are some examples of the types of design layouts I am looking for (but for different themes). The photos would be persons wearing the jewelry, the background graphics could be outlines of the jewelry piece(s). In the case of these examples the background graphics consist of arrows. Do whatever looks right, you folks are the experts.

Example 1 (http://www.digital-video-camcorders.com)
Example 2 (http://www.the-scooters-report.com)
Example 3 (http://www.water-purification-filters.com)

As far as style, I would like to design to be somewhat targeted toward the teenage girl market, but I don't want the design to be too "feminine" for the male traffic or too "teenage" for the older traffic. It should be hip and cool, but professional at the same time.

I also need a spot to place some text in the header. I used layers in Frontpage 2003 to accomplish this. Make sure you show me where this text could be placed in your designs. On the home page this text is "body jewelry" on the bottom right of the right header.

Matching Buttons

When you viewed the example layouts above, you saw that each site had a matching "menu" button and an animated "bookmark" button. I would like similar matching buttons for this site.

The menu and bookmark buttons should use the same font as the URL graphic from the header and be colored to match the template. A dark grey font is preferred along with shadowing for a 3D effect. The animated effect could use a different color or other methods to produce the effect. Be creative.

To create the animated effect I will need mutiple version of the same design. Here are the files used to create the existing bookmark button for this site. I used one of the "built-in" bookmarks from Frontpage 2003.

defaut graphic 1 (http://www.body-jewelry-useek.com/images/buttonF.jpg)
mouseover graphic 2 (http://www.body-jewelry-useek.com/images/button10.jpg)
mousepress graphic 3 (http://www.body-jewelry-useek.com/images/button11.jpg)

Deliverables

To summarize these are the deliverables for this contest.

1. Left Header Graphic (jpg)
2. Right Header Graphic (jpg)
3. Menu Button Graphic (jpg)
4. Animated Bookmark Graphics (3x jpg)

Please also provide original files from programs used to create the graphics so that the design can be modified by myself or another designer if necessary.

Contest Ends: Sunday May 23

Please let me know in advance who will be participating in this contest.

Remember, I am very open to you design suggestions, as long as they look good - please use your artistic abilities please.

I am looking forward to seeing some great work!


Regards,
Will Roberts

[Julie]

I'm planning to enter!

[evaluseek]

JulieT, thanks for entering. :tup:

I am increasing the prize from $70 to $100. I am also changing the deliverables slightly (little less work).

Here are the revised deliverables:

1. Left Header Graphic (jpg) -- same
2. Right Header Graphic (jpg) -- same
3. Menu Button Graphic (jpg) -- same
4. Animated Bookmark Graphics (2x jpg) -- revised
- defaut graphic 1
- mouseover graphic 2
<mousepress graphic 3 no longer required>

Hope to see more participation! :D

[DesignGeneral]

I'll enter. :)

[Anne]

Here is an entry from me

[evaluseek]

Great work Anne!

Sorry I've been away from my email since about the time that you posted, so this is my first chance to provide some comments.

I need some time to see how this integrates into my site and get back to you with comments.

One request for future submissions from all designers. Could you separate the graphics into their individual components (I.e., left header, right header, bookmark button1, bookmark button2).

I need to lay them out with the rest of the template to see how they look with the rest of the site. Saves me from using SnagIt to cut the individual components from the combined graphic.

Also, I want to eliminate the menu graphic as a deliverable. I decided to do this with the style sheet for now. Let's concentrate on the remaining four components I mentioned previously.

I may extend the deadline, but only if it looks like we need more time to finalize entries and pick a winner. So far only one entry. Where are my other entries???

DesignGeneral and JulieT: I would really like to see what you have to offer. Are you still planning on participating? If yes, could you please post your entry as soon as possible? May 23rd deadline is fast approaching!

Will

[DesignGeneral]

I'll have my entry today. :)

[evaluseek]

Designers,

***Just a quick note about my last post. I asked for separate files for each of the four graphics. I just realized that the forum only allows you to upload one file. If it is possible, could a URL link be provided to each file to be downloaded instead? If this is not possible, you can go ahead and post the combined graphic.

Anne,

About your submission. I have attached a graphic showing how it looks with the rest of my site. I also uploaded it to http://www.body-jewelry-useek.com/layout.htm.

Design Feedback

1. The design does not show jewelry pieces on photos of people or bodies (belly) very well. We need to accentuate this more.

2. I like the mixture/layout of people and jewelry, but the girl on the left header combined with the navel ring belly shot makes the design appeal too strongly to female market. ***revised*** Use photo provided for left header. See my last post.

3. I initially liked the color scheme, but upon futher reflection, I believe we need the header backgound color to be a little darker. And maybe a different color to match the light grey website. I could be wrong on this one, so use your artistic eye to give me some feedback. Does the light beige go well with the rest of the site which is colored in greys? Maybe we can keep the beige, but make it a little darker.

4. So we are comparing "apples with apples", lets fix the header dimensions as follows for future submissions.
-->left header =136 x 92 pixels
-->right header = 600 x 66 pixels
Also, I "swashed" and distorted the left header graphic to fit these dimensions. Please scale your future revisions accordingly.

5. I initially thought that I did not like the font for the URL in the right header. I think we will keep it. Just one thing. Could you give it a little more shadow so that the element is more 3D? Just a little, don't overdo it.

6. ***deleted***

7. The horseshoe ring on the right side of the right header seems to need something to help it fit better with the rest of the design? I can't put my finger on it, it seems to need something, but I am not sure what. It may look better with an alternate 2D and/or z-axis position, etc.

8. ***deleted***

9. About the bookmark graphic(s). I really need something that will catch the eye. I would like the bookmark graphic to implement a photo of a piece of body jewelry with the text "Bookmark" or "Bookmark Site". Whichever fits better.

Here is an idea. Use a "shiny steel colored" horsehoe ring (or similar jewelry), with the text placed on the inside of the ring. Upon a mouseover action, the graphic could change the horseshoe ring red (instead of shiny steel) or maybe some type of photo effect could be applied to the whole graphic. Be creative, do something interesting. Here is an example of the quality level I am looking for http://www.the-history-of.net. The bookmark graphic is in the upper right part of the site header.


-Will

[Julie]

Just an FYI--I've had a few clients require large rush jobs this week and did not have the time to begin this contest. I'll not be entering--sorry about that!

Julie

[evaluseek]

Designers,

Contest is to be extended. I am also working on providing a good "male" photo for the left header. I will give more details early on Monday 5/24/04.

I am busy the rest of this evening.

-Will

[evaluseek]

Designers,

OK, now here's the scoop on this contest.

Deadline has been extended to June 4th.

I will also be providing all the photos required to create your entry. Here is the page to download the photos (http://www.body-jewelry-useek.com/photos.htm). The left header will basically be one of the photos I am providing. You will only need to change it to match the right header and rest of website. If you have other photos that you believe will work well with your design, go ahead and use them in the right header.

Anne, are you going to be submitting a revised entry? I edited my post with my comments on your first entry.

I know you all are very busy. Hopefully, this extension of time and included photos for the design will make it easier for you all to provide an entry to this contest.

-Will

[Anne]

I will have something before the deadline

Anne

[Tonya]

I didn't make a bookmark graphic yet, but if you like this I'll work on that.


<img src='http://www.frobo.com/graphic_work/bodyjewelry/header1.jpg' border='0' alt='user posted image' />

[evaluseek]

Tonya,

Great job! Thanks for submitting an entry. I am glad you took the challenge and provided a design with a "textured" background. A little more work, but it definitely provides a better design. I think this is due to the contrast it provides with the rest of the website template which contain various solid shades of grey. You also did a good job of showing jewelry pieces on the body shots.

Here is my feedback/comments on your design.

Design Feedback/Comments

1. After viewing your design in relation to the rest of the website, it seems to me that the header requires some more "height". Therefore, lets add 20 pixels to the height. Here are the new dimensions.

a. Left Photo (136 x 112)
b. Center Transition (17 x 112)
c. Right Header (600 x 86)

I would like the position of the left photo exactly as you see here in proportion with the rest of the header.

<img src='http://www.body-jewelry-useek.com/images2/left_photo_position2.jpg' border='0' alt='user posted image' />

This can be "technically" accomplished by doing the following to original photo (684 x 510):
- mirror photo
- crop (from the top) vertically from 510 to 480 pixels
- crop (from the right) horizontally from 684 to 582 pixels
- fixed ratio scaling to 136 x 112 dimension

2. I would like a more "air-brushed" background texture with smoother blending. I provided a crude example of this above. I like the original colors provided by the photo (red to purpleish transition), but I am open to others if they look good. Could you show me different colors on your next revision?

3. I added a background color to match the right-most portion of the right header. Here's how it looks.

<img src='http://www.body-jewelry-useek.com/images2/dynagirl_header1.jpg' border='0' alt='user posted image' />

Once the background color is added the "belly" photo gets a little lost in the header. I think there is too much blending. Blending on both sides is not working well here. Could you do something to allow the "belly" photo to stand out more? Keep in mind that I need to add some type of background color (or graphic) to the header which will be visible when the web browser is stretched.

4. One last comment. The URL needs to be more centered vertically in your next revision. It's a little too high.

Overall, I like the content and layout of your other photo elements and your design is definitely going in the right direction.

-Will

[evaluseek]

Designers,

Update to header requirements. Here are the new dimensions. More detailed guidelines can be found at the photos page (http://www.body-jewelry-useek.com/photos.htm).

a. Left Photo (136 x 112)
b. Center Transition (17 x 112)
c. Right Header (600 x 86)

-Will

[Tonya]

<img src='http://home.comcast.net/~tonyagoodnow/graphic_work/bodyjewelry/header2.jpg' border='0' alt='user posted image' />


Here's an extended with a fill color on the right hand side:
http://home.comcast.net/~tonyagoodnow/grap...screenshot2.jpg (http://home.comcast.net/~tonyagoodnow/graphic_work/bodyjewelry/screenshot2.jpg)

[Luc]

I'm going to enter. Should be quick. BRB!

[Luc]

here goes.

[evaluseek]

Designers,

I apologize for the delay in response (especially Tonya).

I have decided to redesign my site template so that the header does not expand with the browser window. This will make it much easier to design against. We will no longer need to be concerned about designing the right side of the header to account for this expansion.

Because on these changes to the site template, the width of the header will get a little longer. I will use the standard 800x600 resolution width of 780 pixels for the entire header. Based on how this header will be broken up, these are the new component dimensions.

a. Left Header (136 x 112)
b. Center Transition (17 x 112)
c. Right Header (627 x 86) <----- this is the only one that changed!

Also to streamline the contest submission/revision process (and save you all some time), you only have to submit one full 780 x 112 header. We can chop it up into its components during the winner's revision process. Just make sure you use the following design components in the proper places in the design. You may edit them to match your designs.

d. Left Menu Bar Element (http://www.body-jewelry-useek.com/images2/topleft.png) (png format):
-this is located at the bottom of the 17 x 112 Center Transition

e. Menu Bar Background (http://www.body-jewelry-useek.com/images2/topbg.png) (png format):
-this is used as the menu background in the 627 x 26 cell under the Right Header.

I am putting together responses for you both of you (Tonya & luc). I should have some comments by late tonight, or early on Saturday at the latest.

Thanks all for your patience (with all the changes) and great submissions thus far.

-Will

[evaluseek]

Here is my feedback for your entries.

Design Feedback (Tonya)

I am going to use an example image to show you the direction I want you to take your design. This is very rough and should only be used as a guideline (I do not want to take away from your personal creativity). I am not looking for an exact copy, just something with the same general look and feel.

<img src='http://www.body-jewelry-useek.com/do/tonya1.jpg' border='0' alt='user posted image' />

1. The right belly photo in your entry is too big. As you can see in my example image above, this is what I meant by having the belly photo in the right side stand out more. I feather blended the left side and left the hard edge on the right side.

2. The white lettering and background pattern is too plain and simple. I found something on the internet and blended it with a pattern I made in Fireworks. If you could do something like I show above (with my URL instead in all caps) you will have something closer to what I am looking for.

3. I am not sure you want to keep the body jewelry pieces on the left side. We need to either make them smaller or eliminate them altogether. Too may elements are making the design too busy. I think we need more "space", especially if you are going to try something as I described in #2.

Design Feedback (Luc)

You are also getting an example image. Same groundrules apply.

<img src='http://www.body-jewelry-useek.com/do/luc1a.jpg' border='0' alt='user posted image' />

Thanks Luc for you very solid entry. I did not originally think that the photo could look good in that orientation, but I am glad I was wrong and you were able to made it work out.

1. I really like the balance of elements in your design, so I hesitate to rock the boat on this one. However, I really wanted to show the eyebrow jewelry in the left photo. I can understand why you did not want to do this at first because it will take more space in the design. Let see what we can do with this one. If we need to retract later, we can always go back to your original idea.

Let's move the left photo enough to show the eyebrow jewelry. You may want to rotate it 15 degrees (or more) so that it does not take up so much horizontal space. However, I really don't want to reduce the photo's size, because I like the visibility of the jewelry.

Fill in the bottom left corner background with whatever looks good. I used some elements from your design, but please do what YOU believes looks best here.

2. The URL logo, the background pattern/colors, and the smiling girl photo blended into the background look great. We may need to shift some these elements to accomodate changes in #1 above. Try to keep the URL centered and shift other elements as appropriate.

3. In my last post, I changed the required dimensions of the header. I also provided two of the required elements for the menu bar. Could you incorporate these elements into your design? I like the color you used for your menu element. Go ahead and change the elements I provided to be the same color. You may want to darken the outline also.

4. The part of the design I like the least was the right belly photo. When I first saw it, I thought I was looking at the silouette of a pregnant woman :lol:. I think the photo I showed above could work well with your layout. Could you try to use this photo on the right side instead? It needs some colorization or other touches to match. Put the photo in and see what you can do to make it all work together.

-Will

[evaluseek]

Designers,

I forgot to mention in my previous post. You can view my new site template HERE (http://www.body-jewelry-useek.com/layout4.htm). Here's where you can see how the header fits into the rest of the site design.

-Will

[Luc]

revision:

[evaluseek]

Luc,

We are almost there with this one.

Header needs just a few more "tweeks". I also need a bookmark button.


Design Feedback

1. Please replace the menu element in the header with the one I provided below.
(right click the graphic to download the layered "png" file)

<img src='http://www.body-jewelry-useek.com/do/menubar.png' border='0' alt='user posted image' />

The following diagram shows the position of the element in the header. Please add this element as a layer that could be changed later by me if I wanted to change the look of the menu.

<img src='http://www.body-jewelry-useek.com/do/menubar_luc2.gif' border='0' alt='user posted image' />

2. Header length dimensions need to be expanded to 780 pixels. Your entry is only 753 pixels wide. The height is fine, but could be increased if necessary. If you need more height you could go as high as 126 pixels.

3. I don't like the blending on the right side of the "belly photo". Let's remove it and terminate the photo with the natural boundaries of the header. Let's also move the photo over a little to the right. I showed the desired positioning in my last post. I like the colorization and blending of the rest of the photo, leave this the same.

4. Could you also provide your entry for the two bookmark buttons? Go to this website (http://www.the-history-of.net/) and view the bookmark button(s) in the upper right hand corner. Put your mouse over the element to see the mouseover effect. This is the general look and feel that I want. I would like to see a piece of body jewelry used in this design if think you can make it work.

-Will

[Luc]

Here's my final revision. Everything can be easily modify should there be anything that needs to be edit.

[Anne]

I almost forgot about this.

Here is a new entry from me.

[Anne]

Lighter version

[evaluseek]

Luc,

I did not want the entire right "belly photo" removed. Just the blending on the right side.

Here is an example of what I wanted. Sorry for the miscommunication.

<img src='http://www.body-jewelry-useek.com/do/eraseme3.jpg' border='0' alt='user posted image' />

That's fine for the bookmark button, but it is going to be a separate element that I may place anywhere on my website. I don't need it placed in the header.

Please submit one more revision. I will consider it your final entry. If you win, we can work out final details in the revisions forum.

-Will

[evaluseek]

Anne,

I haven't forgot about you. Thanks for the last minute entry. I am trying to gather my thoughts about your very interesting submisssion. I will get back to you soon.

-Will

[Luc]

<!--QuoteBegin-evaluseek+Jun 3 2004, 08:37 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE (evaluseek @ Jun 3 2004, 08:37 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> Luc,

I did not want the entire right "belly photo" removed. Just the blending on the right side.

Here is an example of what I wanted. Sorry for the miscommunication.

<img src='http://www.body-jewelry-useek.com/do/eraseme3.jpg' border='0' alt='user posted image' />

That's fine for the bookmark button, but it is going to be a separate element that I may place anywhere on my website. I don't need it placed in the header.

Please submit one more revision. I will consider it your final entry. If you win, we can work out final details in the revisions forum.

-Will [/b][/quote]
I'm sorry Will I'm pretty occupied with other projects. Anyway, you can visualize it already. It's already done. We can continue the revision on the revision forum that is if ever I win.

[evaluseek]

Luc is the winner!

Thank you all for participating in my contest.

Anne, your last minute entry had potential, but we just ran out of time. Love to see more from you in future contests.


-Will

[Anne]

Congratulation Luc :tup:

and thank you Will, I will look out for your next contest :)


Anne

[Luc]

Thanks Will and Ann! I'll get your revision then. :)

[evaluseek]

Luc,

Thank you for a great design. :tup:

You really nailed it from the beginning, while the other designers seemed to struggle to put together what I was looking for. I am building many websites and if things work out with this job, I may hire you directly to design the headers for my other sites. I will also need website template redesigned also. Lets talk about this later offline.

Anyway, just to summarize what is left to do.

1. I need to see a final version of the header (780 x 112) that looks very similar to the following, but with these exceptions.

a. Remove text in menu element.
b. Shift menu element to proper position. Should begin after 136 pixels from the left. Look at the diagram I provided in a previous post.
c. Keep left photo at orientation shown and don't change it (I like it this way).
d. Center URL in header.
e. Shift background photo and effects of smiling girl a little to the right, but make sure it still looks good with URL and rest of header.

<img src='http://www.body-jewelry-useek.com/do/lucfinal.jpg' border='0' alt='user posted image' />

2. I need you to show me two graphic files representing the bookmark button. One will be what it looks like on the site and the other will represent what it looks like when the mouse pointer is over it. I need to quickly test it before approving the design. This should be an easy one as I already showed you what I was looking for,and you already came up with something acceptable. I just need to see the two files.

3. Here is what I need for final file deliverables. I should be able to create the JPG files from these on my own using Fireworks MX 2004. I believe Fireworks will import the PSD file, but I have not tried that yet. I will let you know if I need any help.

a. Multi-layer PNG and/or PSD file for website header.
b. Multi-layer PNG and/or PSD file for default bookmark button.
c. Multi-layer PNG and/or PSD file for mouseover bookmark button.


-Will

[Luc]

Thank you very much! :) Here are the changes. Let me know if there's anything else. Please also PM me where I can send the files.

Thanks,Luc

Luc,

Thank you for a great design.&nbsp;

You really nailed it from the beginning, while the other designers seemed to struggle to put together what I was looking for. I am building many websites and if things work out with this job, I may hire you directly to design the headers for my other sites. I will also need website template redesigned also. Lets talk about this later offline.

[Luc]

bookmark

[evaluseek]

Luc,

A couple of things need changing in the header.

1. The left photo lost some type of effect in the "purple" area. Look carefully at the example I provided. Could you please put this back.

2. I only wanted a slight shift to the right for the background effects and photo of girl smiling. I figured when you centered the URL that this element should be shifted along with it. You "moved" it to the other side. I did not want this, sorry. Could you please put this back on the other side and only apply a "slight shift" to the right? It looks much better there.

Also, the bookmark button is fine.

I will PM you where you can send the files.

-Will

[Luc]

revision:

[evaluseek]

Luc,

I am unable to modify the PSD file myself. It does not import properly into my copy of Fireworks MX 2004. I do not know how to use Photoshop, so you will have to complete the following revisions before we can consider this header complete. See attached header markup for locations of items below.

1. & 2. Erase portion of smiling girl and/or effects layer that is overshadowing the left photo.

3. Better blending of the smiling girl and/or effects layer with the background graphics. Right now I see a "hard" edge. I also see that the red line is affected only in a small area because of the lack of "gradual transition".

<img src='http://body-jewelry-useek.com/do/lucfinal3.jpg' border='0' alt='user posted image' />

-Will

[Luc]

No problem Will. :)

[Luc]

How's this?

[evaluseek]

Luc,

Take a closer look at areas #1 and #3 in my markup of the header. You removed the overshadowing from the layer for #2, but the overshadow from #1 still remains. It looks like the guy in the left photo has some type of "birthmark" on the top of his forehead.

I opened the PSD file in a 30 day evaluation copy of Photoshop CS and was able to see these portions of the layer that are causing this. You should be able to just crop these portions out. They are not doing anything helpful that I can see, other than making the photo look funny.

For #3, You have to get rid of the "sharp" ending to the smiling photo, startburst effect layer. This edge is noticible in the design and this edge is also causing the red line going across the header to go from "bright to lite" instantly. Seems to be simply a matter of some type of blending here.

Please don't simply blend what's there. This might cause the removal of a portion of the existing design. I would prefer that you add more of the photo and effect in the layer (in the direction of his pierced ear), then blend that portion.

I hope I did not confuse you with my directions. I am only an amateur graphic designer myself, so I am not sure I am explaining this correctly.

-Will

[evaluseek]

Luc,

Just to clarify.

I just noticed that you did make an improvement to the design for #3. The ear does look much better and I am glad you did that. Thank you. The jewerly is much easier to see now. I would like you to keep this change.

However, this is not what I meant when I originally asked for changes in this area. Please read my last post as to what I meant.

-Will

[Luc]

??

[evaluseek]

Luc,

It looks better now, except that you changed the look of the "startburst" effect layer in the purple colored area to the left of the pierced man. I need you to change this back to the way it was previously.

The "birthmark" shadow on the pierced man's forehead is still there, but don't worry about trying to fix this. I figured out how to crop that from the layer in Photoshop. It's a leftover piece of the smiling girl layer located on the forehead of the pierced man. I will fix this myself using your final psd file.

If you could please return the "starburst" to its original form in the purple area ONLY, then I think we will be finished. :tup:

We are almost done. Thanks for all your hard work. :D

-Will

[Luc]

Actually, it's not a piece of the girl. This is how it looks in normal layer of the girl <img src='http://www.weevox.com/mockups/overlap.jpg' border='0' alt='user posted image' /> It's not overlapping the guy. The guy has really a scar or something <img src='http://www.weevox.com/mockups/birthmark.jpg' border='0' alt='user posted image' />

[Luc]

Anyway,..

[evaluseek]

Luc,

We are finished! Thank you again.

Please send link to download revised files to email address I gave you, then I will inform admin that this job is complete.

-Will

[Luc]

Ok thanks :)