Web Design Winning

18 Golden Rules to Winning Web Design

by Nicholas Tart on July 13, 2011 · 7 comments

The purpose of web design is two-fold.

One, to put an image in your visitor’s head so they’ll remember visiting your site. Two, and more importantly, to get your traffic to take a particular action.

Every page needs to have a goal and every design element needs to make that goal obvious. Use these golden rules to make sure your web design is responsive and ahead of the game.

1. The Perfect Colors

The first step in designing anything is to pick the perfect colors. Just because you’ve found a color scheme that you think looks nice doesn’t mean that it’s perfect, scientifically.

Harmonious colors are based on hue and lightness. If your colors are even a little bit off, your visitors will subconsciously notice that something doesn’t look right.

Even if your color scheme is in perfect harmony, that doesn’t mean it’s right for the web. Typically you want your colors to be slightly brighter than the ones you would use in print and off-screen advertising.

For more help with this: 3 Simple Steps to Pick the Perfect Colors for Your Business

2. The Golden Ratio

Once you have the perfect color scheme, it’s time to make sure your design is consistent with the golden ratio.

Originally founded by the ancient Greeks, the golden ratio is the width of rectangles that’s most pleasing to the eye. It’s calculated by ensuring the sum of two quantities divided it by the larger quantity is the same as the larger quantity divided by the smaller quantity.

The golden ratio is approximately equal to 1.618.

What does this mean for web design? Your content area should be 1.618 times larger than your sidebar and the content area above the fold should be 1.618 times larger than the header area of your website.

For example, if your web page is 900 pixels (a standard width for a web page), the content area should be 556 pixels wide (900/1.618) and your sidebar should be 344 pixels wide.

According to W3Schools, 98.9% of computers have a screen resolution of at least 768 pixels high. At that resolution, there are about 650 pixels above the fold. So, with 650 pixels above the fold, your header should be 248 pixels high (650-(650/1.618)).

Golden Ratio Web Design Example

When I designed 14 Clicks, I broke it up into thirds (pink lines). To follow the golden ratio (blue lines), I should've increased the height of the header and the width of the sidebar. But breaking designs into thirds is a standard guideline for good design because it's close to the golden ratio.

3. Consistent Shadows and Gradients

If you’re a fan of The Office, you’ll recall an episode where Pam does a watercolor painting of the office building and Dwight criticizes it by saying:

“Have you seen her painting, Jim? The building? There are shadows coming from two directions. What!? Are there two suns? Uhh, last I checked that’s not an office building in the Andromeda galaxy.”

Looking past his utter lack of empathy, Dwight makes a good point that you should apply to web design.

When you’re using shadows and gradients, always use the global light angle so the light always appears to come from the same source.

On 14 Clicks, every background image has a subtle shadow that almost always comes from 120 degrees. The only exception is the buttons, but that’s intentional. More on that in a second.

4. Effective White Space

White space, otherwise known as negative space, is the portion of your webpage that is left unmarked. It’s tempting to cram as many design elements as you can into every webpage. Pixels are literally worth money to advertisers.

But when you start to add too much stuff, your website becomes cluttered and visitors leave without reading anything. White space should be used more judiciously when you want to create a classic, elegant, and stylish look to your website.

On 14 Clicks, every block of content has at least 10 pixels of padding around it to separate it from other content. And most blocks have 20 pixels.

5. Ugly Call-to-Actions

Have you ever noticed that Amazon’s “Add to Cart” button is really ugly?  Ever think that maybe it’s intentionally ugly?

It is. The reason Amazon has one of the ugliest “Add to Cart” buttons on the net is because that’s the most important element on their site. It’s ugly so it sticks out.

Amazon Add to Cart

Amazon's Add to Cart Button


Make sure every call-to-action on your site is uglier than the rest of your site (i.e. off-color gradients). Unless your whole site is hideous, in which case, the call-to-action should look good.

Also, always put a call-to-action at the end of every piece of content on your site. You’ll notice that the last two words in almost every block of content on 14clicks.com is a hyperlinked, “click here.”

13 More General Web Design Guidelines

  1. Use a white background with black text.
  2. Put your logo in the upper-left corner.
  3. Always include a post image.
  4. Use size 14px font for your primary font-size.
  5. Arial is the most readable website font.
  6. Put your most important content at the top of the web page, preferably above the fold.
  7. Start your main content with a drop-cap to lure in their eye.
  8. Use a larger font for your intro paragraph so it’s less daunting to start reading the article.
  9. Underline hyperlinks within the main content.
  10. Use red sparingly to attract the eye to important content. Unless it’s one of your primary colors.
  11. Use CSS sprites, not flash, to create “moving” images when you hover.
  12. Always use cursor:pointer; when someone hovers on a link.
  13. Put your main navigation menu in the header and add a more subtle one in the footer.

Conclusion

A general rule for making web design decisions is to look at Amazon, Ebay, Google, and CNN. Then, do what they do.

Those sites have big marketing budgets and they split-test most of their important design elements. If there’s something on their site, there’s a good chance it’s been split-tested and what you see is the highest performing design element.

If you liked this article, click “Like.” If you liked it but don’t think your friends would be interested in it, hit the new Google +1 button. It tells Google that this page is nice!

Post image by: Stuck in Customs

{ 5 comments… read them below or add one }

Roland August 2, 2011 at 2:53 pm

Hi!
Nice post, just one question, what do you refer to with “the fold”. Do you mean the taskbar and the various browser toolbars that take room on the screen?
Thx in advance!

Reply

Nicholas Tart August 2, 2011 at 4:14 pm

“Above the fold” refers to the area of the website that you see without scrolling down. In the 14clicks.com screenshot above, everything in the image is above the fold.

Good question. I should’ve made that more clear.

Reply

Warren Kuan April 7, 2012 at 2:24 am

Thanks Nick, great guidelines to follow!
We are so lucky to learn from this :)

Reply

Nicholas Tart April 9, 2012 at 12:14 pm

I’m just glad I can help, Warren. What was new to you?

Reply

Warren Kuan April 12, 2012 at 4:36 am

Dear Nick , web design & earning money $$$ online is very new to me..
I’m not skipping any steps 1.2.3 to learn from you and I’m eager to try thing’s out now :)
( in a more economical way :p)

Reply

Leave a Comment

Notify me of followup comments via e-mail. You can also subscribe without commenting.

{ 2 trackbacks }

Previous Post

Next Post