As you know from my previous post, I’ve been learning a bit about color and design.  I’ve taken what I’ve learned to help redesign our game site, Great Minds, from this:

Great Minds Homepage, v1.1

…to this:

Great Minds Homepage, v1.9

…and finally this:

Great Minds Homepage, v2.0

Obviously there’s a bunch of important stuff going on between v1.1 and v1.9, but there are very subtle, yet important things happening between v1.9 and v2.0.

v1.1 -> v1.9

Color: Using what i learned about color theory, i continued using blues.  This time, however, I’m using my blues for the right reason.  I chose various shades of blue because it’s a cool, calming color.  Great Minds should be a fun, relaxed experience. If I had used deeper, darker blues, the look would come across as heavy, serious, and gloomy.

I also brought the gradient in from the page background to the inner container background.  This helps generate even more contrast (and therefore dimension), which helps focus the eye.

In addition, I decided to go clean and simple on the style of the game’s name to make it less distracting.

Size: Obviously, the most important thing should be biggest, right?  Well sometimes…like this time…and most times.  Here, the largest text is the game title.  However, the largest element is introduction.  Oh yeah, I added an introduction.  The intro helps set the tone of the site along with the newly redesigned game board.

Also, though the ‘play’ and ‘create’ buttons are very important, they don’t need to be the largest things on the page.  Therefore, i brought the size down the buttons.

Layout: The layout of the instructions and the ‘call to action’ are roughly in their original spots.  For those of you that don’t know what a ‘call to action’ is, here’s a definition:

“A ‘call to action’ in advertising and marketing refers to active copy that compels a user to take action.  Typically the action is to purchase a product or take some step in your sales cycle that will hopefully lead to a sale.”

In the case of our site, our ‘call  to action’ is  getting you to play our game in 1 of 2 ways.  The ‘how to play’ element lines up with the ‘game modes’ element.  Your eye scans from left to right and you take notice of the buttons, which stand out thanks to their drop shadow.

Design: I’m taking a design idea from the Aptana homepage on this one.  Again, since our site isn’t serious or trying to sell a product, we’re going with a fun, cool, shades of blue instead of black and slate with small color accents.  In addition, I have to thank Trazzler’s homepage.  The section titles enclosed in bubbles are an awesome idea that fits in perfectly with the rounded rectangles.

Show vs Tell…Show WINS: There was a ton of text all over the v1.0 site.  Since the game is easy to play, I figured there had to be an easier way to tell visitors how to play.  Enter the emoticons!  These fun little guys helped us to reduce the intimidating text.  This also gave me the opportunity to add some personality to the design.  I like to think of the 3 emoticons as Gabe, Brad, and me.

v1.9 -> v2.0

Color and design tweaks: Gabe pointed out that too many elements have the same glare and jelly treatment.  This prevents our game mode buttons from standing out.  Since those are our real ‘call to action’, the other elements lost their ‘jelly-ness’.  In addition, i used a new radial gradient in the game mode area.  This further differentiates the ‘game modes’ since all of the other gradients on the page are linear, helping make it more unique.  I also moved the group of emoticons to the masthead.  They felt like they were floating below the ‘game modes’ area, without purpose.  Finally, I added a little drop shadow to the titles.  This is really to help the ‘game modes’ area, but to remain consistent i added it to ‘how to play’ as well.

Fixing the ‘Tell’: I did a good  job reducing the text, but it was still too wordy.  Thanks to Brad, we have more succinct text around our emoticons that better explains each step.

In conclusion…

There were many iterations between v1.1 and v1.9 and I’d like to report on the them, but this post is long enough as it is.  Brad and Gabe have been crucial in each and every redesign along with a few key people.  Without them helping to keep me on track and pointing out the short comings in each iteration, who knows what madness I might  have tried to implement.  Be on the look out for the realization of this mock-up in the near future.  If you have thoughts, please comment.  I’d love to hear what implementation ideas you have.

-a

P.S.

There’s a spelling error in ‘how to play’, step 3.2.  My bad.  Also, the speech bubbles are a little distorted because i had to scale them.  When implement them, they’ll be nice and clean

P.P.S.

I fixed the ‘Spinash’ error.

Returning to the point, I feel somewhat responsible for the design…or lack thereof…for our entry.  Instead of tossing a pity party though, I’ve been trying to improve my skills as a designer.  I figure my desire can only be realized in a 2-fold attack:

1. Learn more about color theory
2. Learn more about layout  & user interface  design

The most helpful link I’ve found for color theory has been from PoynterOnline.org (http://poynterextra.org/cp/colorproject/color.html).  Simple disregard the line “in News Design”.  It’s a fantastic tutorial in flash that walks you through standard concepts in color theory in a well organized way.  While reading & working through the examples, i’ve put together this color theme (http://kuler.adobe.com/#themeID/288007).

Here some other links that I’ve found to be really helpful on my mission:

Color:

• http://www.slash7.com/articles/2006/12/30/6-things-you-need-to-know-about-color
• http://www.handprint.com/HP/WCL/wcolor.html ( lots of broken links, but the ones that work are great)

Layout and UI:

• http://psdtuts.com/tutorials/designing-tutorials/9-essential-principles-for-good-web-design/
• http://psdtuts.com/articles/7-steps-to-developing-originality-in-your-design-and-illustration-work/
• http://psdtuts.com/articles/7-principles-of-effective-icon-design/
• http://psdtuts.com/tutorials/text-effects-tutorials/using-light-and-shade-to-bring-text-to-life/
• http://www.smashingmagazine.com/2008/11/05/strategic-design-6-steps-for-building-successful-websites/

(In case you can’t tell, i really like psdtuts.com)

So if you’re in my boat (a dev that want stuff to look better be functional) hopefully these links will help you out too.