LowCarb Edge Site/App Templates - $400

[sloban]

(Admin code added by Palmer - P597461D)

Abstract: This contest is for a set of three HTML templates (two significant and one fairly trivial) for an online application and web site. Deliverables include the templates, CSS style sheets and any additional graphics required for buttons/tabs/etc. Logo, photographs, detailed guidelines and constructive feedback will be provided to the designers. Prize is $400. See the following posts in this topic for examples.

Scope of Deliverables: Three HTML templates, as per Design Guidelines, below.</li> Associated CSS style sheets for headers/signpost text, for textual navigation elements, for body text, footer, etc.</li> Buttons and/or Tabs as required by design (also see general design guidelines). Deliverables must include button/tab images representing all the alphanumeric characters (see example in ZIP file) so that buttons/tabs with any text can be built later via cut-and-paste in a graphics program like PaintShop Pro.</li>Contest Rules: Designers should submit only designs for Template #1 (Landing/Home Page—see Design Guidelines section, below) for initial consideration. Finalists will be declared based on the designs submitted for Template #1 by 12/15/03.

Then, after 12/15/03, the finalists only should submit designs for Template #3 (Application Page). The winner will be declared by 12/23/03 based on the best designs for both Templates #1 and #3.

Delivery of final production materials is desired by 1/2/04. Please advise in advance if an extension is required due to the holidays.

Site/Application Name: LowCarb Edge

URL: www.lowcarbedge.com

Description of Site/Application: LowCarb Edge (note: "Edge" means "advantage" in this context) is an online software application (and an accompanying informational site) for the support of dieters who are following a low-carbohydrate way of eating, such as the Atkins Diet. The application is subscription-based and is primarily about A. providing tools to track one's progress on diet and exercise programs, B. providing a support community for participants through online forums and C. providing tools to support other aspects of the user's life (e.g. calendar, reminders, to-do lists, shopping lists, etc.). The application offers features such as online foods/nutrition and exercise databases, tools for tracking diet and exercise goals and programs, nutrition, exercise and body metrics calculators, online community support forums and information resources related to health, diet, nutrition and exercise.

Market/Audience: Predominately women, age 18-55 (core market 35-50), English-speaking, primarily in the U.S., Canada, U.K. and Australia.

Key Ideas/Psychology: Charisma/Attractiveness</li> Energy/Upbeat</li> Community/Peer Support</li>Color Psychology: I’m thinking generally high-key, but this is a soft requirement. To work with the logo and preferred photo for the landing (home) page, the color scheme should be built around colors in the triad: #006699 (blue), #990066 (burgundy) and #FFCC00 (gold).

Design Guidelines: General Guidelines I’m looking for an organic, flowing design with a fresh, non-linear look but with a nod towards the rules of classical composition (see sample templates). </li> Video Assumptions: 800x600, 16-bit color, scrolling allowed vertical only, “first impression” space: 760x415 pixels.</li> Polish – for example, graphical buttons, tabs, etc. must have all images required for multi-state behavior. Specifically, when a button is clicked, there must be a visual image available for the “depressed” state of the button. For tabs, the “active” tab must be visually distinctive from the “inactive” tabs.</li> Coherency – for example, font styles used in graphical elements (e.g. buttons and tabs) must look good when combined with standard web fonts in the content areas.</li> Use tables for layout, CSS for styling and behaviors. HTML Browser Support IE 5.5+ (PC), IE 5.0+ (Mac), NN 6.0+ (PC), Opera 6.0+ (PC). In general, this means HTML 4.0 and CSS Level 1.</li></li> Template 1: Landing Page (Site Home Page) Design priorities for this page are #1 to evoke a feeling and #2 to communicate information.</li> Requires strong graphical design/branding, including the provided logo and stylizing and incorporating photographic elements in an organic, flowing design.</li> As functional elements, the Landing Page will feature two content areas, one larger and one smaller. The content areas will contain only titles and lead-ins, not entire content articles. One area (the smaller of the two) will be to pull the reader into “About Us”. The other area (the larger of the two will be to introduce a “Success Story” article (with photos). Also on the landing page, there will be a login “form” with input fields for Username and Password, a “Login” button and a link: “Forgot your password? Click here!” The footer on the landing page has the text “Copyright © 2003, HealthEdge Software” and links: “Privacy Policy”, “Terms of Use” and “Contact Us”. This footer will also be used on 2nd-level pages of the site. See provided sketch and functional description.</li></li> Template 2: Content Page Simpler design, consisting of a header element/branding that stylistically ties these 2nd-level pages together with the Landing Page and the rest of the site/application.</li> Most of the page space is reserved for implementation of content.</li> Buttons or other input elements for form processing.</li> Includes the common footer element described for Template #1.</li></li> Template 3: Application Page Design priority for this page is a stronger navigational focus, e.g. a tab strip across the top. Targets are: Today, Diet, Exercise, Progress, Goals, Journal, Community, Library, Options and Help.</li> A header or other element that pulls a stylistic element and/or logo from the Landing Page to maintain design coherency.</li> Most of the page reserved for active content (forms).</li> Buttons or other input elements for form processing.</li> Excludes the common footer element</li></li>Resources Provided: logo, stock photo for Landing Page, annotated example templates, functional element drawings. (attached)
Resources Available: additional stock photography from LifeStockPhotos.com may be used on prior approval.

Reference Sites (Competitors): www.fitday.com</li> www.ediets.com</li> www.lowcarb.ca</li> www.startyourdiet.com</li> www.onlinefitnesslog.com</li>

[sloban]

Logo for paste-up is attached. Send me your email address and I'll send you a ZIP file with the AI logo file.

[sloban]

Photo for paste-up/reference attached. The ZIP file has the full image.

[sloban]

Functional Description of Template #1 (Landing/Home Page)

Note: the attached conceptual sketch is not meant to limit your design ideas.

Landing Page
Functional Elements
Refers to attached image: "Landing Page Conceptual Sketch.jpg"

A. Login form
1. Username field
a. Label: "Username: "
b. Field: <input type="text" size="18" maxlength="18">
2. Password field
a. Label: "Password: "
b. Field: <input type="password" size="18" maxlength="18">
3. Submit button
a. Label: "Log In"

B. Text w/ Link
1. Text: "Forget your password? Click here!"
2. Link
a. Link text: "Click here!" in above text.
b. Link target: "lostpwd.aspx"

C. Logo

D. Photo Image

E. Smaller Content Area

F. Larger Content Area

G. Copyright
1. Text: "Copyright © 2003, HealthEdge Software"

H. Privacy Policy Link
1. Text: "Privacy Policy"
2. Link
a. Text: "Privacy Policy"
b. Target: "privacypolicy.aspx"

I. Terms of Use Link
1. Text: "Terms of Use"
2. Link
a. Text: "Terms of Use"
b. Target: "termsofuse.aspx"

J. Contact Us Link
1. Text: "Contact Us"
2. Link
a. Text: "Contact Us"
b. Target: "contact.aspx"

K. Content Link 1
1. Text: "[more]"
2. Link
a. Text: "more"
b. Target: "about.aspx"

L. Content Link 2
1. Text: "[more]"
2. Link
a. Text: "more"
b. Target: "success01.aspx"

[sloban]

Example templates that demonstrate an interesting use of curves and photographic elements.

[sloban]

Additional example templates. I particularly like the stylization treatment of the photo in the banner in second template (not the rectangular use, but the gradation).

[JeremeDavid]

I'll be on this in the next few days. I have a couple of questions.

I am assuming that you already have the backend for the application page programmed. Will we be required to lay that out as well, or will you just be placing it into the template yourself?

You're providing a zip file of elements to use. Do you specifically not want us to use photos (except those approved by you from lifestockphotos.com) other than those that you're providing?

My e-mail address is jeremed[at]charter.net. Please send the resources zip there.

[Palmer]

<!--QuoteBegin-JeremeDavid+Dec 3 2003, 06:31 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE (JeremeDavid @ Dec 3 2003, 06:31 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> My e-mail address is jeremed[at]charter.net. Please send the resources zip there. [/b][/quote]
Better yet Scott, I would rather you send me the zip file and I'll attach it to your first post.

Thanks

[sloban]

I will provide more guidance on the application page when we get to that point. In general, however, the application page template will be primarily branding elements, a navigation framework and resources like tabs and/or buttons. The designer will not be responsible for development or for forms, etc. This is 1 template that will be used for 10 different application screens.

The one photographic image I have uploaded is one I want to use on the Landing/Home page. It perfectly expresses the feeling that I am hoping to express to the users. Designers are free to use additional photos if desired.

That being said, I must approve the use of photos - or any graphical elements that are not the original work of the designer - from a business perspective: cost, licensing terms and liability potential. I will need a copy of the license terms on file for any free/public domain imagery that is used. I mention LifeStockPhotos because of the reasonable cost and appropriate license terms.

I hope this all makes sense! Let me know if I can help in any way. -- Scott

[Palmer]

Zip file attached now to the first post.

[hheine]

I´ll try to post something tomorrow... ;)

[Trifolic]

I don't see a Navigation Menu except for what you have on the bottom, Am I correct in assuming that this will be the only one used?

Here's a mockup, Please let me know what you think. I haven't added any picture in the header yet, as I would like to see if you like what I have so far,

Thanks

Jason

[sloban]

Thanks Jason!

This is a great implementation of my back-of-envelope conceptual sketch. Adding depth and weight in the header through blended images will help balance it out.

Yes, the navigation is correct. The five content links and the login form are the only navigation from this Landing Page. The Application template is more navigation-focused.

Let me provide a couple of clarifications that will guide a refinement. The photo you have in the success story content area is to be used in the header. The photo that actually appears in the success story will be added with the content. I have attached an image to this post that you can use for paste-up in the success story (resize as desired).

The width of the posted mockup is 780 pixels. Template should be 760 pixels wide.

We need to even out the size of the fonts in the footer. This will require a larger cell size for the copyright notice than for the links. If the footer is an HTML <tr> element, then I suggest setting the <td> width sufficiently for the copyright notice cell and letting the other three divvy up the remaining space. Finally, see what the text color in the footer looks like brightened up a little.

I like the effort to reflect in the headers the font used in the logo. I will try to find out what fonts were used in the logo. The headers will be better all one color - probably the blue. Make one header "About LowCarb Edge" and the other "Success Story". Use the same font for the "[more]" elements and make them just one color, as well.

Finally, overall the colors are a little off. The ones in the provided logo are just right and we need to stick with these. The blue should be #006699 in RGB terms and the burgundy (not pink) should be #990066 (I know there will be some antialiasing). And please eliminate the gradient to pink in the burgundy element in the background of the Login area.

Thanks again! -- Scott

[elements]

Hi Scott,
here's an entry put together based on your sketch.
I tried to give it that sweet, clean & trusting look as best as I could.

I hope you like :)

<img src='http://www.dilicious.ca/outpost/lce_layout_v1.jpg' border='0' alt='user posted image' />

I realized I totally forgot the "lost your password" link in the login area.
If you like the layout, I'll include that in the next revision with any other changes you may want me to make.

Thanks.

[sloban]

Jon used LHF Romana Classico for "LowCarb" and LHF Sarah Script for "Edge" in the logo I can provide one or both of these if you make a case for it. :-) Thanks, Scott

[Trifolic]

Yea can you zip those files up and email them to admin[at]webmasterfactory.com for me? Thanks

[Club69Clothing]

<!--QuoteBegin-sloban+Dec 11 2003, 03:32 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE (sloban @ Dec 11 2003, 03:32 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> Jon used LHF Romana Classico for "LowCarb" and LHF Sarah Script for "Edge" in the logo I can provide one or both of these if you make a case for it. :-) Thanks, Scott [/b][/quote]
Hi Scott,

Can you please send me the fonts as well (cary[at]domainspring.com)? I should be entering the contest shortly.

Thanks,
Cary

[Trifolic]

Here's the requested changes, without the fonts yet. Let me know if you have anymore or anything else you would like to see

Thanks

Jason

[Trifolic]

Might be eaiser to PM Palmer with the zip and he can just add it to the boards. Thats if they are freeware fonts..

Also, I was pondering on using bullets for the titles "About LowCarb Edge" and "Success Story". Let me know if this is something you would like to see.

Thanks

Jason

[Palmer]

Yes it would be better if you sent me the zip file, there really isn't supposed to be any emails or PM's when the contest is going on.

Thanks

[sloban]

Elements: I love how you've done the images (especially the header), the title headings and the footer. Please refer to the attached marked up screen for the following feedback:

A: this is a visually troubling intersection of elements. It seems to break up the flow of all the graphical edges there in the circle and defeats the convergence of the lines of the blue element.

B: I love the depth that this background element gives to the page. However, I wonder how it's going to make the transition to HTML? I don't want the whole Success Story part to be graphical, because this content will change every few weeks.

C: Won't need the Home link on the landing page. Content pages (Template #2) will need a Home or Return link. I'll provide more details when we get to that point.

D: Principle of thirds. To resurrect a classical composition maxim, the design looks better if space is allocated 1/3 to 2/3. I don't mean to play one off of the other, but take a look at the balance of Jason's (Trifolic's) template. See how the space is partitioned visually?

E: Colors. Way pink. I really do want to stick pretty closely with the colors mentioned in my initial post, plus white, grays and black.

Thanks so much! -- Scott

[sloban]

<!--QuoteBegin-Palmer+Dec 11 2003, 03:10 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE (Palmer @ Dec 11 2003, 03:10 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin-->Yes it would be better if you sent me the zip file, there really isn't supposed to be any emails or PM's when the contest is going on.

Thanks[/b][/quote]
:help: We can't really post the fonts, Palmer. They are not freely distributable. Suggestions?

[Palmer]

Ok, send them to me and I'll post them in the designers private forum. That way they are only distributed to people who have your permission to use them.

Thanks :)

[ant1832]

I had to give this one a shot since I'm a low carb dieter myself.

Here's what I came up with. Feedback is definately appreciated.

<img src='https://www.quickbase.com/up/9bugw8f4/g/rbe/en/va/carbv1.jpg' border='0' alt='user posted image' />

[sloban]

Hi Jason, thanks for the second draft. I have sent the fonts to Palmer, who will make them available to you. Please see the marked up image attached below for my comments.

A: As you mentioned you would, please make these headlines the same font as the "Edge" in the logo and the labels should be "About LowCarb Edge" and "Success Story." I like the blue for these.

B: Please see the example banner head attached after the marked up screen shot. I borrowed this as an example from a stock template. See if you can't blend in an interesting background image and go for more gradual shading like this sample does. Also, the foreground part of the banner image (the couple) should cover about 1/3 of the width of the banner heading. It's currently a little too wide. Might need to come down a bit on the logo size to get everything in balance.

C: Crop a hair more and/or smudge to get rid of the fingertip.

D: The blue in the logo is still coming out too light for some reason. I wonder if its the conversion from CMYK? Are you working from the AI file?

E: What about livening up the links in the footer, say by using the #006699 blue and a peppier (but relatively standard) font like Verdana?

Getting closer - hang in there! Thanks, Scott

[Club69Clothing]

Clean, crisp, corporate, and curvalicious ;)

[Image removed to save bandwidth]

Thanks,
Cary

[sloban]

Hi Anthony!

This is a nice, crisp design with good impact. The colors are clean and the layout is pretty well balanced. And a tip of my hat to you for taking the plunge and modifying the colors of the logo to fit your design. Maybe it will work out. Please refer to the attached marked-up screen shot for the following comments:

A: The vertical graphical element evokes the feeling of pages in a printed work. It's a very nice effect, but it doesn't really make sense for this particular site.

B: The margins are too tight.

C: The overwhelming burgundy cast to the photo in the banner heading looks a little strange. Also, please crop and/or smudge out the man's finger on the side of the woman's head. Finally, with the logo this large in the banner heading, you probably need to play with the locations of the elements to get a better balance. Also, please see my comments about the banner heading in my feedback to the other designers.

D: Please review the specs for the login form area functional elements.

E: A little too blocky/rectangular in the content areas. Starting these rectangular content areas on the same row like this is diluting the nice, organic flow established by the banner heading.

I hope this feedback helps. Thanks! -- Scott

[JeremeDavid]

Here is my first entry. I tried something a little different with the header shapes.

[geofharries]

I am diggin' the transperant headers in these templates. Great work team!

Now drop down and give me 20 :)

geof

[ant1832]

<!--QuoteBegin-sloban+Dec 12 2003, 02:39 AM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE (sloban @ Dec 12 2003, 02:39 AM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin-->Hi Anthony!

This is a nice, crisp design with good impact. The colors are clean and the layout is pretty well balanced. And a tip of my hat to you for taking the plunge and modifying the colors of the logo to fit your design. Maybe it will work out. Please refer to the attached marked-up screen shot for the following comments:

A: The vertical graphical element evokes the feeling of pages in a printed work. It's a very nice effect, but it doesn't really make sense for this particular site.

B: The margins are too tight.

C: The overwhelming burgundy cast to the photo in the banner heading looks a little strange. Also, please crop and/or smudge out the man's finger on the side of the woman's head. Finally, with the logo this large in the banner heading, you probably need to play with the locations of the elements to get a better balance. Also, please see my comments about the banner heading in my feedback to the other designers.

D: Please review the specs for the login form area functional elements.

E: A little too blocky/rectangular in the content areas. Starting these rectangular content areas on the same row like this is diluting the nice, organic flow established by the banner heading.

I hope this feedback helps. Thanks! -- Scott[/b][/quote]
Thank you for your detailed feedback.

A. Vertical gradients removed from header
B. Fixed Margins. I can increase even more if necessary.
C. I came up with 2 variations on the header. Let me know which one you prefer. I was unsure what feedback that was given to others you were referring to, so if the changes didn't address it let me know.
D. Login is now set to your specs
E. Obvious changes to content area to make it less "blocky"

Please let me know what you think of the changes.
Here are the previews(2 different header variations)

<img src='https://www.quickbase.com/up/9bugw8f4/g/rbf/en/va/Carbv2.jpg' border='0' alt='user posted image' />

<img src='https://www.quickbase.com/up/9bugw8f4/g/rbf/es/va/Carbv2-2.jpg' border='0' alt='user posted image' />

[sloban]

Hi Cary,

I agree, "clean, crisp, corporate and curvalicious!" I like it. Please see the attached marked-up mockup for the following comments:

A: This is a graphical element - part of the banner heading - using the same font (LHF Sarah Script) as the "Edge" in the logo. Palmer has posted the fonts used in the logo in the designer's forum.

B: The blue in the logo is coming out too light for some reason. Possibly the conversion from CMYK? It should be #006699 in RGB terms.

C: I felt the layout of the success story using the yellow notepad graphic made a bit of a discord with the overall feeling of the page. As you can see, I kept most of your ideas and layed out a mockup using the more traditional text flow around the image.

D: I redid the column widths to be more along a 1/3 to 2/3 ratio.

Thanks! -- Scott

[Club69Clothing]

<!--QuoteBegin-sloban+Dec 12 2003, 02:02 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE (sloban @ Dec 12 2003, 02:02 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> Hi Cary,

I agree, "clean, crisp, corporate and curvalicious!" I like it. Please see the attached marked-up mockup for the following comments:

A: This is a graphical element - part of the banner heading - using the same font (LHF Sarah Script) as the "Edge" in the logo. Palmer has posted the fonts used in the logo in the designer's forum.

B: The blue in the logo is coming out too light for some reason. Possibly the conversion from CMYK? It should be #006699 in RGB terms.

C: I felt the layout of the success story using the yellow notepad graphic made a bit of a discord with the overall feeling of the page. As you can see, I kept most of your ideas and layed out a mockup using the more traditional text flow around the image.

D: I redid the column widths to be more along a 1/3 to 2/3 ratio.

Thanks! -- Scott [/b][/quote]
Thanks for the comments Scott. The only thing I don't really understand is point A (maybe I'm reading it too fast) ;) I am using LHF Sarah Script for that title. I will make the changes and post a new version later this evening.

Cheers,
Cary

[sloban]

Cary, point A is just stating my assumption. Since I started mucking about with your design, I thought I should explain. ;)

[Club69Clothing]

<!--QuoteBegin-sloban+Dec 12 2003, 02:29 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE (sloban @ Dec 12 2003, 02:29 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> Cary, point A is just stating my assumption. Since I started mucking about with your design, I thought I should explain. ;) [/b][/quote]
Gotcha :) I should have the revisions up for you to look at in a few hours.

Cary

[JeremeDavid]

Sloban: I just wanted to make sure my design didn't get skipped over. I posted right after Cary. I believe it was the last post on the page, so it might have gotten overlooked. ;-)

[Trifolic]

Sloban, Just got ahold of the fonts, here are the revisions you asked for

Let me know if anything else needs to be done

Thanks

Jason

[Club69Clothing]

Here you go:

[Image removed to save bandwidth]

Thanks,
Cary

[sloban]

Hi Jereme! No I didn't miss your submission, just spent the morning in meetings is all. It's good to see a somewhat different approach to this design. I like it! And the use of just a little of the gold color is a nice flourish. Please refer to the attached marked up image for the following comments:

A: I I think to footer works better in blue, at least with the current colors in the banner.

B: Maybe darken the gray in the shape in the logo a little to add a bit more contrast? And again, the text colors in the logo are not converting correctly for some reason. The blue should be #006699 (RGB) and the burgundy should be #990066 (RGB).

C: The upper-right corner of the design isn't working and I'm having a hard time pinning it down. I think one thing is the gradient to burgundy in the image. It doesn't quite fit. The home page icon image can go, we don't need one on this template. It is only used for the Home page. Content pages will use Template #2 and the application screens will use Template #3.

D: I'm not a big fan of large blocks of colored text. It's too hard to read on a computer screen. I wonder how this would look with black text in both content areas. These changes will leave the design a little light on the burgundy color, so maybe try the two title headings in burgundy instead?

Thanks! -- Scott

[JeremeDavid]

Thanks for your feedback Scott. I'll get on the changes tonight or in the morning.

[JeremeDavid]

Do you have an unstroked version of the logo? The white stroke prevents me from putting the logo on any background that really contrasts with it. That's why I made that top left area in my design so light.

[sloban]

Hi Jason,

Thanks - I like your latest revision really well. The only thing that needs work is the image of the couple. The man's face is lost in the gradient. I don't know if it would work better to shift the gradient or just to shrink the picture of the couple. Also, the content headings: "About LowCarb Edge" and "A Success Story".

Thanks! Looking good! -- Scott

[sloban]

Jereme,

I pulled this into Illustrator and removed the white stroke from both the symbol and the "Edge". I've attached it as an AI (v9) file. Let me know if this isn't what you needed.

Thanks! -- Scott

[JeremeDavid]

Here are my revisions.

A. I changed the footer to blue as you suggested.
B. Instead of darkening the area itself, I made more contrast within the surrounding shapes. How does that work for you? I added anoter sliver of the gold color as well. I came up with a workaround for the logo color problem but I still wouldn't mind having the logo unstroked.
C. I think the problem in the top right may have been the two distinct colors right next to one anoter. I made them the same color, but broke them up and continued the "flowing" treatment that I started on the left. I removed the home icon also.
D. I made the text black as you suggested and changed the heading to your burgundy color.

[Trifolic]

<!--QuoteBegin-sloban+Dec 12 2003, 08:32 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE (sloban @ Dec 12 2003, 08:32 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> Hi Jason,

Thanks - I like your latest revision really well. The only thing that needs work is the image of the couple. The man's face is lost in the gradient. I don't know if it would work better to shift the gradient or just to shrink the picture of the couple. Also, the content headings: "About LowCarb Edge" and "A Success Story".

Thanks! Looking good! -- Scott [/b][/quote]
Scott,

You said at the end about the content headings?, I have already changed them to the requested fonts, what more did you want me to do to them?

Thanks

[sloban]

Jason,

If I'm looking at the latest version, right now they say "Low Carb Edge...." and "Success Story Title". Should be "About LowCarb Edge" and "A Success Story".

Thanks, Scott

[sloban]

Jereme,

Lovely work! One nit: the kerning between the "r" and the "n" in "Username:", but there's no need to post a revision for the contest.

Thanks! -- Scott

[sloban]

Cary,

Looks great, thanks! Just two things as illustrated on the attached mockup.

A: I changed this fill color to RGB #990066.

B: I thnk this heading will work better in the blue color (#006699).

Thanks! -- Scott

[Club69Clothing]

Hi Scott,

Here are the changes. The colors might still be a little off because it's a JPG image - but when I go to make the HTML, everything except the 2 pictures will be a GIF and the true color. ;)

Thanks,
Cary

[Image removed to save bandwidth]

[Trifolic]

Hi Scott,
Did the changes, The image that you have of the 2 people is going to be impossible to give it a new background because it cuts off on the guys head. So I would need to make him a new head to make it work, and well I just haven't gotten that far in design yet.. Lol, I tried something a little different, Let me know what you think or if you have any other ideas you would like me to go after with it.

Thanks

Jason

[customb]

Hello, hoping the last will be the first :whistle:

Some retouches are still needed, but I think is pretty obviuos what we tried to do.

[hheine]

Sloban, I´m currently on this project. I´m just finishing another great work ! :D
Is there any possibility to accept my entry sunday evening ?

Best,

Henrique.

[sloban]

Henrique,

Sure, no problem. If your submission is very promising, hopefully you will be available Monday afternoon (your time zone) to do any needed revision? As I described in my original post, I will be declaring 2 or 3 finalists on Monday and we will move on to Template #3. I can hold off until Monday afternoon/evening my time (GMT-8).

Looking forward to seeing your submission! Thanks, Scott

[sloban]

Hi Jason,

Thanks for your latest revision, but I liked the header better in the prior one. Just need to do some mod on the gradient something along the lines of the mockup I've attached here.

Thanks, Scott

[sloban]

Hi Customb,

Thanks! A very interesting submission. Good flow. I like the background to the headings. Please refer to the attached marked-up image for the following comments:

A: I'm not really a fan of this blue-sky look. I prefer something more subtle and abstract. For example, see the attachment to me 12/11 comment to Jason.

B: The shadowing used around the logo is making it look kind of muddy.

C: I think pulling the upper-left corner of the pink login form background on top of the gray element works better. And the left side of this block should line up with the content block below it.

D: Although it's really handled at the content level, extensive passages in italics is really hard to read.

E: Need links ("[more]") to the continuation of this content.

Thanks! -- Scott

[Trifolic]

Scott, here ya go. Should be just about right :) Let me know

Jason

[hheine]

<!--QuoteBegin-sloban+Dec 14 2003, 04:11 AM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE (sloban @ Dec 14 2003, 04:11 AM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> Henrique,

Sure, no problem. If your submission is very promising, hopefully you will be available Monday afternoon (your time zone) to do any needed revision? As I described in my original post, I will be declaring 2 or 3 finalists on Monday and we will move on to Template #3. I can hold off until Monday afternoon/evening my time (GMT-8).

Looking forward to seeing your submission! Thanks, Scott [/b][/quote]
Thanks Scott.

I´ll be available promptly to do any needed revisions. :D

[customb]

Hello, thanks for your feed-back.
I will add 2 other proposals, based on your issues and my ideas...

The burgundy color for the more details on the second one is the hover instance of the links class.
On the second one I also worked a bit over the pic.

:tup:

Thanks,
George.

[customb]

secondo

[ant1832]

Hello Sloban, do you have any feedback on my 2nd version of the template?

[sloban]

<!--QuoteBegin-ant1832+Dec 14 2003, 12:31 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE (ant1832 @ Dec 14 2003, 12:31 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> Hello Sloban, do you have any feedback on my 2nd version of the template? [/b][/quote]
Hi Anthony! You're right, I did not post a follow up to your second round! I am sorry about that! Anyway, this is another interesting template. Clean and crisp. My partner calls it "the wineglass." I have posted a marked-up version to illustrate my comments.

A: there is a lot of empty space right near the visual center of the design.

B: I raised the text to try to partially fill in the empty space. I think it helps balance the overall effect. The white space that remains is still a bit of a problem, but there doesn't seem to be a good solution for my particular layout of content and navigation.

C: As far as making the transition to HTML goes, it looks to me as if everything will have graphics except the area in the rectangle.

IMHO, I think that both this one and the earlier one are good, balanced templates that will find an appropriate application. Unfortunately, I don't think pursuing further evolution of this design for LowCarb Edge is very promising and I don't want to waste your time. I'm sure you'll be able to leverage your good work for some other site.

Thank you very much for participating! Best wishes, Scott

[sloban]

Hi George! You have some good ideas! I like the placement of the slogan, but we can always add that kind of thing to the graphic later ourselves. And you don't need to worry about mouseovers or other programmatic behaviors in the content. We're just looking for good, clean design work.

Three ideas (please see attached screen shot). The area just above the login form is really soft and indistinct. I suggest:

A: preserve the clean edge of the gray element.
B: "MEMBERS LOGIN" was better in it's original placement.
C: Go a notch darker on the gray in both the logo and the gray element - making them the same gray maybe #EFEFEF or #E0E0E0?

Thanks! -- Scott

[Trifolic]

Scott, I am guessing my last revision is good to go?

[sloban]

<!--QuoteBegin-Trifolic+Dec 14 2003, 08:09 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE (Trifolic @ Dec 14 2003, 08:09 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin-->Scott, I am guessing my last revision is good to go?[/b][/quote]
Hi Jason,

The transition from the image of the couple to the rest of the banner is still kind of abrupt. I just don't know what advice to give at this point. Frankly, as far as the banner goes, I like your posting of the 12th better than this last one, although the loss of detail in the guy's face is not acceptable. If there was just a way on that banner to slide the white gradient to the left 50 or so pixels, maybe combined with sliding the image of the couple to the right a few pixels ...

Would keeping the image of the couple whole and laying a gradient to transparent over the top of it rather than trying to feather the image of the couple allow a slower transition?

BTW, I am a little surprised that nobody has tried casting the image of the couple to a monochrome and blending with a light background image like the sample banner I posted on the 11th.

-- Scott

[Trifolic]

Its really a bad image to blend into a backround because the edges of it are people themselves, and not a different background which can be erased. And the fact that it has to go white, for the logo even makes it worse to do an "easy" or "light" transistion, There simply isn't enough space to accomplish this. Here is another feather. I will keep trying until I get it..

Thanks

Jason

[JeremeDavid]

<!--QuoteBegin-sloban+Dec 14 2003, 10:29 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE (sloban @ Dec 14 2003, 10:29 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> BTW, I am a little surprised that nobody has tried casting the image of the couple to a monochrome and blending with a light background image like the sample banner I posted on the 11th.

-- Scott [/b][/quote]
Where is this? I looked through the posts on the 11th in the thread and I didn't see anything like that.

[Trifolic]

<!--QuoteBegin-JeremeDavid+Dec 15 2003, 01:02 AM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE (JeremeDavid @ Dec 15 2003, 01:02 AM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> <!--QuoteBegin-sloban+Dec 14 2003, 10:29 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE (sloban @ Dec 14 2003, 10:29 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> BTW, I am a little surprised that nobody has tried casting the image of the couple to a monochrome and blending with a light background image like the sample banner I posted on the 11th.

-- Scott [/b][/quote]
Where is this? I looked through the posts on the 11th in the thread and I didn't see anything like that. [/b][/quote]
Jereme, I believe its the one he attached to the bottom of my design, Here

http://www.designoutpost.com/forums/upload...-1071206181.jpg (http://www.designoutpost.com/forums/uploads/post-6-1071206181.jpg)

[hheine]

Sloban, thanks for your patiance. :D

I was not feeling so good today, so I can´t even say to myself if my design is good or not... :huh:
Hope you enjoy it and i´m here waiting for your comments for further implementations / alterations. ;)

<img src='http://www.openmarket.com.br/DesignOutpost/lc/landing.gif' border='0' alt='user posted image' />

[customb]

Hello,
me again.

With darker grey looks better I think, on the second one I also put the logo larger... to intersect with the edge :blink:

Thanks!
George.

[customb]

secondo

[sloban]

Jason, that's better, thanks for your patience! -- Scott

[sloban]

George, looks good! Thank you! -- Scott

[sloban]

Thanks Henrique,

I hope you are feeling better soon. Very nice design. I have attached a marked up image illustrating my comments.

A: The transparency at the top of the woman's head ... I wonder if it would look better to border it at the top-right hand corner using the same effect as you did at the bottom of the image (a translucent area, then white). And also to reflect the curve that is used at the top-left corner in both the translucent element and the white element. Let me know if this isn't understandable.

B: I raised this content block so that both content areas didn't start at the same height. I think this better maintains the organic flow started in the banner heading.

C: Because of B, this pink element will need to come out so that the banner is above the horizontal line.

D: Needs to be some kind of beveled button that is clearly a clickable control.

E: I lined up the links here closer to the footer.

Thanks! -- Scott

[hheine]

Thanks Henrique,

I hope you are feeling better soon. Very nice design. I have attached a marked up image illustrating my comments.

Thanks ! :D I´m feeling better now. Just some problem with our water, perhaps...

I appreciate your comments very much and they are just on target. :)

A: The transparency at the top of the woman's head ... I wonder if it would look better to border it at the top-right hand corner using the same effect as you did at the bottom of the image (a translucent area, then white). And also to reflect the curve that is used at the top-left corner in both the translucent element and the white element. Let me know if this isn't understandable.

Understood every single word. I´ll try a different approach now.

B: I raised this content block so that both content areas didn't start at the same height. I think this better maintains the organic flow started in the banner heading.

That I was not expecting. :o Just on target ! :tup: I was killing my last neurons to connect the three elements without success. I inserted the curvilinear headers, but it was still not perfect. That´s why I couldn´t even say if that design satisfied me... Thanks !

C: Because of B, this pink element will need to come out so that the banner is above the horizontal line.

Ok.

D: Needs to be some kind of beveled button that is clearly a clickable control.

E: I lined up the links here closer to the footer.

makes sense. :)



Thanks! -- Scott

[hheine]

Is that what you had in mind ? :D

<img src='http://www.openmarket.com.br/DesignOutpost/lc/landing2.gif' border='0' alt='user posted image' />

[hheine]

Check the symmetries of the header with the blue guides if you want. ;)

<img src='http://www.openmarket.com.br/DesignOutpost/lc/landing3.gif' border='0' alt='user posted image' />

[sloban]

Yes, very cool. Thanks! -- Scott

[sloban]

This has been a very successful contest so far from my perspective. I received seven great entries and after working with each of the designers, there are still five active candidate entries in the running. All the designs are excellent. Win or lose, I hope that all of the designers have benefited from the feedback and experience. I'm sure that those who don't win this contest will be able to leverage their excellent design work on some future assignment.

As I described in my initial posting, I will select three finalists from this group who will move on to the next phase of the contest: the Application page template (template #3 in the design guide I posted). On 12/23, I will select one winner of the contest based on both templates #1 and #3.

Thanks so much to all the designers! The three finalists are:

- Henrique (hheine)
- Cary (Club69Clothing)
- Jereme (JeremeDavid)

I will be posting additional clarification on the design guidelines for Template #3 later today or early tomorrow.

-- Scott

[JeremeDavid]

Thanks Scott. I'll be looking for your details on template 3.

[hheine]

Thanks, Scott. :D

Congrats Jereme and Cary. :tup:

[Club69Clothing]

I should add my congratulations to Jereme and Henrique, and also thanks to Scott for being very active with feedback :) Looking forward to Phase #2!

[customb]

Congrats for the finalists, well done.

Good luck with your venture Scott :tup:

George.

[Michael]

Scott are going to open a new thread or continue with this one?, if yo are opening a new one than I shall declare this one over.

Was this Phase 1?


Michael

[sloban]

Michael,

I had planned on continuing in this thread. Three finalists have been selected who will submit designs for another page in the contest - from which I will select one winner on 12/23.

-- Scott

[sloban]

The three finalists are invited to submit designs for Template #3, as described in the design guidelines in my initial posting for this contest.

Template #3 is the application template, which will be used for 10 different application screens. The design priority is for a strong, clean navigational focus, while maintaining design coherency across the site as a whole (between Templates #1, #2 and #3).

The top-level screens that need to be represented in the navigation structure of this template are: Today, Diet, Exercise, Progress, Goals, Journal, Community, Library, Options and Help. Since there are 10 targets, fitting all of these into a standard horizontal tab strip could be problematic and the designer may need to consider alternative navigational structures.

Use a header or other element that pulls a stylistic element from the Landing Page to maintain design coherency between the site and the application. Preserve as much space for content (forms) as possible to minimize scrolling.

In the design of tabs and buttons, please be aware of the need for future maintenance and enhancement. Buttons and/or tabs should be designed so that any arbitrary button can be readily created by cutting/pasting from a reference graphic consisting of all the alpha-numeric characters. Fonts that are decorative, script, italics and/or closely kerned are often impossible to do this with.

Controls such as tabs and buttons should have visual cues for two states: on and off. For example, the “active” tab in a set should be visually distinctive from the other tabs. A button that is “being clicked” will have a “depressed” form that can be momentarily displayed. The designer is not responsible for coding these behaviors, but must provide the graphical elements to support them.

The designer is not responsible for development or delivery of the application forms, but for the template into which the forms will be placed. For the contest, you may wish to mock up a form to better illustrate your submission. I have attached a screen shot from our desktop prototype version which you can use for an example form.

I’m looking forward to the next phase of our contest! Let me know if you have any questions. – Scott

[Michael]

<!--QuoteBegin-sloban+Dec 16 2003, 04:16 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE (sloban @ Dec 16 2003, 04:16 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> Michael,

I had planned on continuing in this thread. Three finalists have been selected who will submit designs for another page in the contest - from which I will select one winner on 12/23.

-- Scott [/b][/quote]
No problem Scott :)

[JeremeDavid]

Here is my idea. The tabs actually work really well, in my opinion. I realize I forgot the help one, but I can add that in when the design get's cut up. The blue one is an example of the pressed/active state.

I just laid out your sample form with tables since the forms in your application are nonstandard in HTML.

[sloban]

Hi Jereme, thanks for going first! It's a nice, balanced design.

After seeing it, I think I don't want to use the photo on the application screens. Let's try to limit the banner part of the template to about 100 pixels vertically or less. Maybe build off of some piece of Template #1 for the banner. I've attached an element that I pulled out of template #1 and reduced. What if this were set as the left side of a banner and the blue and yellow were brought across to the right in a sweeping curve? Just a wild idea ...

Also, we don't need the footer on the application screens. The site is primarily a wrapper and brochure for the application. Users will not generally return to the site after having logged in to the application. A subtle iconic link to the home page is good, though.

On this design with the horizontal tab strip, adding the Help tab will require a change in fonts to make them all fit; I need to see this. Especially since the current width of this template is also 780 pixels. It (as well as Template #1) should be 760 pixels horizontally.

One other note on the tab strip. The content area of the page should be visually associated with the active tab in some way. One common way is by using an outline to stroke the tab and the top part of the content page ... I'll see if I can find an example and attach it ... yup, MSN.

Thanks! -- Scott

[JeremeDavid]

Thanks for your feedback Scott. I will work on some changes tomorrow.

The main design width is actually 750 pixels. The grey on either side was just to simulate the page background color.

I'll work on the tabs some more. I may end up changing the idea. I'll see as I work with it.

[JeremeDavid]

What do you think about this idea for the tabs? Same basic tab idea but flipped upside down with your outline idea applied.

[sloban]

Jereme,

Sorry for the delay, I'm really busy yesterday and today.

I like it better, but I think remove the black border from the bottom side of the active tab.

That leaves a weird transition from the tab to the gradient. Maybe replace the gradient with a color band? (Please see the attached image).

-- Scott

[Club69Clothing]

Hi Scott,

Here is my initial draft of Phase 2. My ideology on this screen is to keep the graphics very lightweight and allow lots of room for the application. We already sold them with the pretty graphics and text, and now they are primarily interested in a usuable system (I.e. having data readily available to read and compare above the fold, etc.). Let me know what comments and suggestions you have.

Thanks,
Cary

[Image removed to save bandwidth]

[sloban]

Cary, your philosophy about keeping the graphics for this template to a minimum is right on the money. I generally like the way this design plays off of template #1. I thought it was maybe a little light and I tweaked the width of the color mass in the banner to add some weight (A). looking at this later, this change does unbalance the design some. Maybe you can think of a better way to add a little weight to the banner.

This design has the same kind of challenge to associate the screen with the selected tab as does Jereme's. In this case, I think the blue horizontal line across the screen helps. Since the tab strip and the title text ("B") are so close to one another, I would vote to remove the title text and make sure that the active tab serves the same purpose. Note: I'm not sure B is in the banner, maybe it's in the content area, in which case . . . never mind. :)

Finally, I noticed this with Jereme's design as well and I would ask the question of both of you ... to my eye, the burgundy color is more intense than the blue. Both of your designs use burgundy for the inactive tabs and blue for the active ("C"). This seems counter-intuitive to me. At least to my eye, the inactive tabs stand out while the active tab seems dimmer. Is this on purpose or is it just me?

Thanks! -- Scott

[Club69Clothing]

Hi Scott,

Yes, I tried elongated gradients like you show in another mockup I made but I wasn't too happy with it. Let me experiment and tweak a bit more with it, and hopefully I'll have something nice for you to look at ;) I made the title text ("B") in the content area to reinforce the user's location in the program. Perhaps it looks like overkill because the 2 "Diets" are close together, but if it's the Help page the purpose might be more apparent? I'll see if I can make the highlighted tab strong enough to axe the text (and also look into the color issues you mentioned). :)

Thanks,
Cary

[Club69Clothing]

Hi Scott,

I went with a new approach that's starting to grow on me. It's very simple and streamlined, and I eliminated the title text in favor of a more apparent highlighted tab. Let me know if any of these strikes a chord with you, and I can experiment with different gradients, etc after that.

Thanks,
Cary

[Image removed to save bandwidth]

[JeremeDavid]

Looks like we're on each other's heels, Cary. I flipped my tabs as well. ;)

Scott: I went in a different direction with the tabs. Those other ones would've been more difficult to update in the future. Instead of a solid color below the tabs, I used a gradient to transition into the page. I think it brings it together nicely. I used the gold color to make the active tab stand out more.

[sloban]

Cary - of the three, I like the third one best. I don't really have any suggestions except about the logo (see comment below).

Jereme - this new approach is much better. One comment (see the attached image) is that the gold is a little too strong and dominates where it shouldn't. I think reduce it to a band and eliminate the gradient as in A.

Both - the logo as you are working with it is not holding up with this much reduction. The fonts are coming out too light. We need to stroke the fonts with their base colors another couple of pixels or so before reducing. I'll try to post an AI file in a few minutes with a heavier version.

Looking good! Thanks! -- Scott

[sloban]

Here's an AI file and a 167x60 pixel GIF. -- Scott

[JeremeDavid]

Changes made...

I was noticing the problem with the logo as well. I'd tried doubling up on the layers in the ai file before reduction but that didn't really help.

[Club69Clothing]

Updated version:

[Image removed to save bandwidth]

[hheine]

Scott, i´ll be posting today. Just making a last revision. :D

Thanks,

Henrique.

[sloban]

Thanks for the note, I was about to give up! :)

[hheine]

Scott,

what do you think ? :D

<img src='http://www.openmarket.com.br/DesignOutpost/lc/application2.gif' border='0' alt='user posted image' />

[sloban]

Thanks to all the designers who made this contest a success. The submissions were all great and the final decision a difficult one. Cary (Club69Clothing) is the winner of this contest. Cary, I will send you my email address and we can discuss Template #2 and completion of the project after Christmas.

Best wishes for holiday joy to all of you! Thanks again! -- Scott

[Palmer]

Congratulations Cary :tup:

Great competion Jereme, and Henrique, sorry you didn't win. :(

Thanks Scott. Let us know when the site is ready, I'm interested in checking it out. Merry Christmas to you as well :santa:

[hheine]

Congrats Cary ! :tup:

Thanks Scott, it was a pleasure work with you. :D Hope you come in with a new contest for us !

Happy holidays everyone ! :D

[Club69Clothing]

<!--QuoteBegin-sloban+Dec 24 2003, 02:16 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE (sloban @ Dec 24 2003, 02:16 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> Thanks to all the designers who made this contest a success. The submissions were all great and the final decision a difficult one. Cary (Club69Clothing) is the winner of this contest. Cary, I will send you my email address and we can discuss Template #2 and completion of the project after Christmas.

Best wishes for holiday joy to all of you! Thanks again! -- Scott [/b][/quote]
Thanks Scott...I'm glad you liked my entries :) I will e-mail you shortly and we'll finish out Template #2.

Happy Holidays,
Cary

[JeremeDavid]

Congrats Cary! :-)

[Club69Clothing]

<!--QuoteBegin-JeremeDavid+Dec 24 2003, 03:27 PM--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE (JeremeDavid @ Dec 24 2003, 03:27 PM)</td></tr><tr><td id='QUOTE'><!--QuoteEBegin--> Congrats Cary! :-) [/b][/quote]
Thanks Jereme and also Henrique. You both did excellent work :tup:

Happy Holidays,
Cary

[sloban]

I just wanted to thank everyone one last time (you too, Palmer!). Cary (Club69Clothing) delivered the templates as agreed and the site is coming together. Cary's work is great and he was a pleasure to deal with. The contest format worked really well for me and I'll be back! -- Scott

[Palmer]

It's always great to hear from a happy client. Thanks for making the effort to come back and drop us a note about how happy you are with the results you received at our site and in working with our designers. :tup: