Smack Happy Design

I recently got an email from ThinkGeek.com about getting their anniversary tee for free with a $10 purchase. When I clicked on the link to look at the offer I scrolled through the page and noticed the gradient in the background moving. Upon further inspection I discovered that the gradient revealed two different graphics at the bottom of the page. On the light part of the gradient you could see robots and aliens; on the dark part screaming zombies. The affect is subtle, clever and utterly delightful. You can bet money that I’ll be using this technique as soon as the opportunity arises for such a fun and playful design.

To see the affect make sure your browser is displaying at its maximum width (needs to be 1280px wide or more). Then move the scrollbar up and down to see it. I’ve included two screen captures below in case you can’t make the browser wide enough.

Well done ThinkGeek designer, I like your clever ways!

If you’re offering a service online there is a particular formula most sites use these days. The top half of the page (above the fold) has a colored rectangle area, often with rounded corners. One half of this rectangle spouts the companies tagline followed by a bullet list of features and/or benefits. Below this list is a big shiny button enticing you to click and sign up – an important call-to-action. On the other half you’ll find an image, or more often a screen shot of the product.

Below the colored rectangle is usually a three-column area. In each column you’ll find more information about the product; product highlights, how it works, testimonials, or something of the like explaining the product even more.

One example of a site that uses this formula is Credit Karma. They do a great job of explaining exactly what they do in the 2-3 seconds they have when a user visits their home page. The shiny yellow button is large with a very clear call-to-action, giving the user focus and direction. They also do a great job in the three columns telling the user how their product will be helpful.

Credit Karma has a great home page for an online service that I would gladly use as inspiration. It has several of the important components that Jakob Nielsen claims a great home page needs:

• Logo
• Navigation
• Tagline
• Short paragraph stating what you do (the bullets in this case)
• Focus and direction (the sign up button)