Doug Kaye needed a new web page design and created a contest on 99designs.
A winner was selected from 18 designs submitted by 5 freelance designers.
Our website design is done and launches in 2-3 weeks. But we just need a new color palette and an update to existing icons.
SpokenWord.org
We ran a successful contest for a new logo (http://99designs.com/contests/15730) and we are temporarily using some of those colors for our alpha-test site. Now that we're getting ready to launch the site to the public, we need an expert to select our final color palette.
Please submit a mockup of our homepage re-done in your proposed color scheme. After we award the prize, we'll ask you to submit (a) the color palette (just a list of the colors in RGB #ABCDEF format) and (b) a re-colored sprite. The sprite is probably the most work and there's no need to do that until you're the winner.Here's the web site: http://spokenword.org/. You only need to worry about the home page, since it's the most complex. Replace everything using the colors you propose. Use "Lorem ipsum" (gibberish) type text. No need to copy ours. It's the color scheme we want to see. Don't reposition anything, though. We're committed to everything except the colors, at least for the first release.
NOTE: I suggest you start with this screenshot: http://assets.conversationsnetwork.…enshot.png It has a few advantages:
- It shows a highlighted and expanded 3-level menu.
- It shows the Yahoo Media Player
- It shows a hovered link in the footerThe sprite is a single .png that contains multiple icons for the Yahoo Media Player. To see the player, click on any of the audio 'play' buttons and it will appear at the bottom of the page. Here's the master sprite you will need to modify and an article that explains how it works: http://gonze.com/blog/2009/01/16/bi…ose-hacks/ Note that it consists mostly of the usual play/pause/stop buttons in three states. And here's another useful article about sprites: http://www.alistapart.com/articles/sprites/
Take our logo into consideration (http://assets.conversationsnetwork.…25x125.jpg). We occasionally use a version with a white background, too. Don't use these colors! We did that temporarily. But do keep in mind that the logo and your color palette will appear together.
Note: We haven't fixed all the CSS bugs yet, so I suggest using Firefox or IE7 to see the site. Other browsers don't show you everything.
- Look at other media sites. We want to be approachable and friendly but not silly or trivial. SpokenWord.org will be the site for finding and sharing spoken-word content, most of which is fairly serious: news, interviews, lectures, meetings, presentations, etc. We don't want to turn off professionals, but we don't want to be too stuffy either. The site should feel like a place to get things done but to have fun doing it. We expect our visitors to return frequently, so don't put them off. Although our parent (The Conversations Network) has other web sites, you should not consider those sites' colors in your design.
For now, just submit your page mockup. When the winner is selected, we'll ask for the color palette (RGB values) and a sprite for the Yahoo! Media Player that matches your scheme. The sprite should be delivered as an original .psd as well as a .png.
Here's a list of the palette colors we need defined. It's probably not complete. You may find more as you execute your design.
menu border
menu text (normal)
menu text (hover)
menu background (normal)
menu background (hover)
tag line text ("find and share...")
tag line background
body text (normal)
body text (hover) when it's a link
bold text (normal)
bold text (hover)
dim text (normal) not on site yet; for less-important text
dim text (hover)
separator line color (now gray horizontal rules)
tag cloud text #1 (normal)
tag cloud text #1 (hover)
tag cloud text #2 (normal)
tag cloud text #2 (hover)
headline text (normal) such as "New Programs by Category"
headline text (hover)
headline background
subhead text (normal) such as "Technology"
subhead text (hover)
subhead background
text button text (normal) such as "Collect"
text button text (hover)
text button background (normal)
text button background (hover)
text button shadow (normal)
text button shadow (hover)
footer text (normal)
footer text (hover)
footer background
optional...
background color for the right-hand column
background colors for left and center columns
- In your mockup, just use the top 600 pixels (or so) plus the footer. Don't go to the trouble to mockup more than that.
Again, although we want your color scheme to work with our logo, we don't expect you to use those colors or the temporary colors on the site.