[Project Complete] $250 - Kid's Launch Page, Deadline May 26th

[blistick]

(Admin code added by Palmer - 4E2850848)

Hi Everyone,

Having always had a great experience here at Design Outpost, I’m back again!

I need a single Web page (and PSD) that will serve as the "launch page" for a product called Kid’s College. This is an online educational service that teaches math and language arts skills. Kids answer educational questions and if they get them correct they get to take a turn at a sport (baseball, football, soccer, basketball, and volleyball).

The current live version of this page can be viewed here: http://www.kclogin.com

The product is being entirely rewritten for the upcoming school year to be much more cool, 3D looking, and contemporary.

Here are some screen captures of the new version:

http://www.trylonix.com/kc2005/shot1.jpg
http://www.trylonix.com/kc2005/shot2.jpg


The WEB PAGE should have the same elements as the current page, namely:

1) The logo for "Learning through Sports", the publisher of the product. (The one shown on the live page is an old version. The new logo can be downloaded here: http://www.trylonix.com/kc2005/LTS_Logo.eps)

2) Perhaps (but only perhaps) some photos of kids looking like they’re learning in front of a computer, or just generally looking like they’re happy, motivated, and getting smarter by the second.

3) A big button/graphic, occupying most of the page, that serves as the link to start the program. This should consist of the new Kid’s College logo (which can be downloaded here (http://www.trylonix.com/kc2005/KC2005Logo.zip)), along with a phrase like "Launch it!", "Launch:", or "Go!".

4) A button ("See a Demo") that links to a demo of the product

5) A button ("Minimum Specs") that opens a popup window showing the minimum computer needed to run the program

6) A button ("Learning Through Sports Website") that links to the corporate Web site (http://www.learningthroughsports.com)


The deadline for this contest is May 26th.

I’m looking forward to some great submissions. Good luck everyone!

Best,

Barton Listick

[Aliska]

Hello
Here's my first idea. Waiting for your comments.

[blistick]

Dear Aliska,

Thanks very much for a fine first post in this contest.

Here's some specific feedback:

1) I like the approach you took with the header, but I don't want pictures of kids playing sports. If possible, use more pics of kids at the computer. If you can't find more of those, just use close-up pics of kids' bright faces. Also, I want to represent ethnic and male/female diversity in those photos.

2) Regarding the Kid's College logo, the starburst with "GO!" doesn't work for me. Maybe if we put the whole logo on a button-type background, and add the text (above) that says "Click to Launch"

3) The bottom three buttons are a bit too large. They need to be secondary to the logo/launch button.

4) Let's remove "Minimum Specs" from the button line-up, and have it as a smaller text link at the bottom/right of the page (in the white area, just above the footer bar).

5) We need to add the following copyright notice, perhaps in the yellow footer bar:

(C) Copyright 2003-2005, Learning Through Sports, Inc. - All Rights Reserved

Thanks again!

Best,

Barton

[Aliska]

Hello.
Changes at my version. what do you think?

[blistick]

Hi Aliska,

Good progress in the last version. Here's some specific feedback:

1) I prefer the smaller size of the top header that you used in the first version.

2) I like the picture of the kid holding the keyboard and smiling from the first version. The program is fun, motivational, and educational, so that picture really captures it. Maybe you can post a bunch of kid pictures and I'll tell you which ones I like best.

3) The "CLICK TO LAUNCH" and logo works fine now.

4) Please change "Minimum Specs" to "See Minimum Specs"

Thanks,

Barton

[Anne]

Here's my entry

Anne

[blistick]

Hi Anne,

Thanks for jumping in!

Here's some specific feedback on your entry:

1) Overall I'd like the design to generate a bit more excitement. This feels too corporate. Try to pickup on the energy of the logo.

2) The header should be shorter - perhaps 75% of the current height.

3) I'd like the pictures in the header to be separated from one another, rather then blurred together.

4) Regarding the logo:

- Please add the phrase "Click to Launch" above the logo
- You've got the wrong logo. See the links that I posted in this contest.
- The logo (with "Click to Launch") needs to be the dominant element on the page. Maybe it's just a matter of making it bigger.

Thanks again,

Barton

[Anne]

How is this?

[blistick]

Hi Anne,

That definitly perks things up!

A bit more feedback:

1) I think the header should still be a little slimmer.

2) The curved "Click to Launch" text doesn't work for me. Maybe it shouldn't be curved, maybe it should be all caps and a different font. I'm not sure.

3) I like the raised text on the "See a Demo" and "Learning Through Sports" buttons, but the effect is a bit blurry.

4) Can you "recut" the curves out of the buttons to fit the curve in the background.

5) To make the grammer on the two buttons consistent, I think the second button needs to say "Visit Learning Through Sports Website". I know it's long, but hopefully you can make it work.

Looking good.

Thanks,

Barton

[Anne]

Revision

[Aliska]

Hello
Changes at my version. What do you think?

[blistick]

Hi Anne,

Good progress. Here's more feedback:

1) Kid's College is sold to schools, so the right two photos in the header won't work. The shots should also be more "close up".

2) The center of the two blue button bars is the part that looks fuzzy to me.

3) You didn't change the circular cutouts on the blue buttons, did you? I meant that they should reflect that same shape as the big curve to their left.

4) Can you move the "See Minimum Specs" link down closer to the footer, and a little to the right.

Thanks for the effort!

Best,

Barton

[blistick]

Aliska,

Your entry is looking good. Here's more specific feedback:

1) I like all the header photos in your 17_2. Can you move these over to the right, and then add in the leftmost picture from 17_1 (the kid holding the keyboard). Then the header should be perfect.

2) I think that the "CLICK TO LAUNCH" and logo could be a bit bigger, maybe by 20%

3) Can you change the second button to read "VISIT LEARNING THROUGH SPORTS WEBSITE"

4) The design of the middle section of the page (between the header and the footer) is a little too subdued. Is there any way to jazz it up? Maybe a gradient instead of the solid blue field? (I'm open to ideas.)

Thanks for the hard work.

Best,

Barton

[Lilja]

Here is my design :)

Lilja

[Anne]

Here's the revision.

I can't see any blur but I chnaged the text. Do it look beter now?

Anne

[blistick]

Lilja,

Welcome to the contest. I like your design. Here's some specific feedback:

1) The header should be less tall.

2) The leftmost photo in the header, with the kids on play equipment, doesn't work for the product. We need a kid at a computer, or in class, or just a close shot of a kid looking happy and smart.

3) For "See a Demo", I think all the characters should be the same size (and the same as "Visit Learning Through Sports Website")

Best,

Barton

[blistick]

Anne,

The photos in the header are great now - thanks.

It may be a visual artifact, or my old eyes, but I still see something that looks like blur to me in the middle of those buttons. For example, look at the descender on the letter "g" in "Learning". Anyhow, can you try a different highlight effect?

Thanks,

Barton

[Anne]

Does this looks better?

[blistick]

Anne,

Much, much better. Thanks!

-Barton

[Aliska]

Hello
Changes at my version. What do you think?

[blistick]

Aliska,

Regarding the header, I actually wanted the kid with the keyboard to be on the left side.

The size of the logo and launch text is perfect now. Thanks. In the next iteration, though, can you give me a higher quality version of the logo?

I'm still not sold on the middle section. Can you try something else?

Thanks again,

Barton

[Lilja]

Here is my revision :)

Lilja

[blistick]

Lilja,

The header is fine now. Thanks.

Since the main purpose of the page is to launch the program, the "CLICK TO LAUNCH" and logo need to be bigger and/or more dominant on the page.

Maybe making the two buttons ("Visit the...", "See a Demo") smaller would give enough room to make the logo bigger and still keep the standing kids.

Best,

Barton

[Lilja]

Here is the revision :) I've made the buttons smaller and the logo a bit bigger.

Lilja

[blistick]

Lilja,

The relative sizes look fine now. Thanks.

One last request. Could you use something other than the white/red text color for the buttons on the right? (I think it's a bit too much because the same colors are used for the "Click to Launch" text.)

Best,

Barton

[Luc]

And here's my entry.

[blistick]

Luc,

I really like the way you've incorporated the logo colors, and the way the kid's computer screen shows the launch window. Nice touch!

Here's some specific feedback:

1) The main function of this page is to launch the program. So the "Click to Launch" and Kid's College logo should be the most prominent element on the page, i.e. it should grab the viewers attention. The other buttons and the Learning Through Sports logo should be smaller than they are now, and not have equal weight.

2) I'd like the "See a Demo" button to be above the "Visit Learning Through Sports..." button. (Some of the other designs have them the other way because it happens to fit the space better, but the demo button is a little more important.)

Again, thanks for jumping in!

Best,

Barton

[blistick]

Lilja,

I hadn't noticed until now how you put the actual game screens on the computer monitors in the header.

Very nice detail. Thanks!

Best,

Barton

[Lilja]

i have changed the colors of the text in the buttons as you asked for. Is this better? :)

Lilja

[blistick]

Lilja,

Perfect. That's just what it needed.

Thanks,

Barton

[Aliska]

Hello
And changes at my version. waiting for the feedback :yes:

[blistick]

Aliska,

Just one word - wow! That's an exciting design. I can't think of anything to tweak.

Thanks,

Barton

[Luc]

revision:

[blistick]

Luc,

That really rocks. Great way to make the launch function standout.

Here's some specific feedback:

1) Something a little weird happened to the top of the boy's computer screen.

2) I love the metallic "orbs" that hold "Click to Launch" and the Kid's College logo. My only thought is that they seem to tilt down a bit too much, in terms of the perspective.

3) I understand why you added the white outline to the "Learning Through Sports" logo, but it makes the text hard to read. Do you think the logo will work better at the top/right corner of the screen?

4) Now that the launch function is so bold, I think the "See Demo" and "Visit Learning Through Sports Sebsite" could pop a little bit more.

5) Since we have the space, can we insert the word "the" in the second button text, i.e. "Visit the Learning Through Sports Website"

6) The "See Minimum Specs" link is necessary, but not as important as the other elements, so it should be made smaller.

Thanks for coming up with this exciting design.

Best,

Barton

[Luc]

Revision: :)

[blistick]

Thanks Luc, it looks great.

-Barton

[blistick]

All,

With so many great entries this has been one of my hardest decisions ever at the outpost.

I have, however, chosen Luc as the winner. Luc's design best reflects the attributes of the Kid's College product.

Thanks again to all fine artists who participated.

Best,

Barton

[Luc]

Thank you very much! :) Are there any more revisions?

[blistick]

Luc,

There are a few tweaks that I need on the design before I can take delivery:

1) I'd like to eliminate the arrows on the "See Demo", "Visit the Learning Through Sports Website", and "See Minimum Specs" objects. See this mockup (http://www.trylonix.com/kc2005/noarrows.jpg)

2) All of the kids (in the photos) are a little too young looking

3) I'd like to have a black boy and a girl (Asian, Hispanic, or white) in the header. Either one can be at the computer.

4) For the screenshot that you insert into the computer screen in the header, I'd like to use the file "shot1.jpg" (which is in my first post on the forum). If you can find a photo where the computer monitor is facing the viewer a bit more, so the screenshot will be more visible, that would be great.

5) When you deliver the html version I'd like to have the interior of the main "buttons" light up upon rollover. This includes the Click to Launch and Logo (which should always light up together, if possible) and the "See Demo" and "Visit the Learning Through Sports Website" buttons. Use Javascript, not Flash, for this.

Thanks for designing such a great page!

Best,

Barton Listick

[Palmer]

Moving to revisions...

Congratulations Mary Luc! :flowers:

[Luc]

Please check this photos

http://istockphoto.com/file_closeup.php?id=547257
http://istockphoto.com/file_closeup.php?id=547247
http://istockphoto.com/file_closeup.php?id=591057
http://istockphoto.com/file_closeup.php?id=531293
http://istockphoto.com/file_closeup.php?id=467549

[blistick]

Dear Luc,

Feedback on the kid photos:

547257 - Computer screen is in ok position (although it would be better if it were facing us more), but the kid is too young looking

547247 - Same comment as above

591057 - Girl, who is six years old, is a little too young. Would prefer age 8 and above.

531293 - Boy looks a little older, which is good. Wouldn't work for the top/left photo, since the computer scren is facing the wrong way.

467549 - Good age. Wouldn't work for the top/left photo, since the computer scren is facing the wrong way.

Sorry for being so particular but these images are really important to my client.

Thanks,

Barton

[Luc]

Hi Barton! These are all the images I found. I mainly use istockphoto.com I think it's best if you can provide the images.

[blistick]

Hi,

Ok. Let me see what I can find tomorrow.

Thanks,

Barton

[blistick]

Hi Luc,

I looked everywhere for a photo of a kid with a computer, where the screen faces the viewer, but couldn't find it.

So I'm thinking we should try having a separate photo of a computer screen (with the Kid's College screenshot), and a boy standing next to it.

From left to right, the header should have:
-----------------------------------------

1) A computer monitor (or laptop) that shows the screenshot from Kid's College.

Photos of monitors and computers:
http://istockphoto.com/file_closeup.php?id=349143
http://istockphoto.com/file_closeup.php?id=183587
http://istockphoto.com/file_closeup.php?id=164880

The screenshot I'd like to show on the screen:
http://www.trylonix.com/kc2005/shot1.jpg

2) An African-American kid, standing to the right of (next to) the computer screen:

http://www.trylonix.com/kc2005/boycheer1.jpg
http://www.trylonix.com/kc2005/boycheer2.jpg
http://www.trylonix.com/kc2005/boystanding.jpg

3) A girl using a computer:

http://istockphoto.com/file_closeup.php?id=467549
http://istockphoto.com/file_closeup.php?id=471213
http://istockphoto.com/file_closeup.php?id=475300

Also, I'd like to use one of the following boys for the "See a Demo" button, in place of the boy that's there now:

http://www.istockphoto.com/file_closeup.php?id=395959
http://www.istockphoto.com/file_closeup.php?id=519070


Let me know if this works out.

Best,

Barton

[Luc]

Sorry for not replying. I will do this tomorrow. Thank you for waiting.

[Luc]

Thank you for waiting. Here's the revision. What do you think?

[blistick]

Luc,

Let me pass this by my client and get back to you.

Thanks,

Barton

[blistick]

Luc,

My client and I both love this one. A few minor points:

1) Can you move the top boy slightly to the left so that there's a little more room between him and the girl.

2) Let me know if you need a bigger version of the top boy photo. Looks fine to me.

3) I'd like you to use a different screenshot for the computer screen at the top. It's at this link:

http://www.trylonix.com/kc2005/baseball.jpg

4) Of course we need to get rid of all the watermarks.

Thanks for this great page!

Best,

Barton

[Luc]

Can you purchase these images? I don't have them.

[blistick]

Luc,

Here are the images:

http://www.trylonix.com/kc2005/iStock_000000183587_L1.jpg
http://www.trylonix.com/kc2005/iStock_000000341949_L1.jpg
http://www.trylonix.com/kc2005/iStock_000000395959_L1.jpg
http://www.trylonix.com/kc2005/iStock_000000467549_L1.jpg

When you do the html, remember that I want to have rollovers for the "button" functions.

Thanks,

Barton

[Luc]

Files sent! :)

[blistick]

A couple of tiny tweaks, please. See my private message.