Common features of a Great Website

Great websites share the following design features:

• Simple layout
• Centered orientation
• 3D effects, used sparingly
• Soft, neutral background colours
• Strong colour, used sparingly
• Cute icons, used sparingly
• Plenty of whitespace
• Nice big text

Let's look at these features one by one.

Simple layout

It feels like we're seeing more simple 1- and 2-column designs than in previous years.

The overall feel you get is that web designers generally agree that simple pages work better.

These pages read in a straightforward way from top to bottom, and you don't find your eye skipping around trying to work out what to look at. It's a much calmer and more solid browsing experience than in times gone by.

Centered orientation

The other thing you notice about all the best websites is that they're all laid out around a central axis.

Whereas a couple of years ago, you'd find a lot of liquid layouts and left-aligned fixed-width layouts, today content goes in the centre of the screen.

Why center-align?

I like center-aligning, and have been tending to use it on my  web designs for a while.

When the content sits in the centre of the screen, it feels up-front and confident.

It also gives a sense of simplicity and balance, which reflects the move towards a clean design.

The most common centered designs are either fixed-width (i.e. master width in pixels or percent) or sometimes zoom-width (i.e. master width in ems, e.g. Forecast Advisor). The benefit of restricting the width of the content (particularly with zoom-width, which resizes as the font size changes) is that the line-length is prevented from getting too long on larger screens. (Very long lines of text are less efficient.)

However it's also possible to have a liquid layout with a center-orientation, as the Alternative Energy Store site shows.

On this site, just centering the logo brings the friendly, forward-facing feel of the centered site, while getting a lot of content vislbe on the screen.

3D effects, used sparingly

Every single one of the best websites uses gradients subtly, either to give bars a slight roundedness, to create a soft feeling of space in the background, or to make an icon stand out with embossing and subtle drop-shadows.

Reflections & fades are very prevalent. Drop-shadows are still used, but with care.

   

Trademark round flashes are everywhere.

   

Soft, neutral background colours

All the great websites have a plain background, the most popular being white and greyscale fades. These give a cool, neutral, soft base against which you can flash strong colour to draw the eye.

Strong colour, used sparingly

A soft, stylish background is the perfect base for adding eye-catching features. Strong colours and tonal constrast are great for drawing the eye to the more important elements on the page.

 

Iomega uses more strong colour than the others, with its intense dark red promotion area. However this doesn't drown the rest of the page, because the colour is consistent and simple in shape.

Cute icons, used sparingly

There's a theme here: Don't use too many attractive elements on the same page view (i.e. that appeals to the eye and draws the user's attention).

As with strong colour and 3D effects, appealing icons  and buttons can add that bit of polish to help give a page a high-quality feel. But used too much, they'll have the counter effect, cluttering the page and confusing the user.

                        

                                                             

Plenty of whitespace

Today's web designs are so fresh, they feel like they've taken a deep breath.

Sometimes I imagine taking a page design that's too crowded and sticking it on a balloon, then blowing air in until everything on the page pulls apart to leave healthy gaps.

Your eye needs space (guttering in typo language) round stuff to help you clearly and cleanly identify things.

In general, the more white space the better. It's very rare that I look at a page and think: "Gosh, they really need to cram that page up a bit!"

Of course, "white" space doesn't have to be white. But it does have to be space!

It's great to see so many designs using good-sized margins to space elements apart, and extra line-height to aid on-screen reading.

Look at all this lovely refreshing white space!

 

 

Nice big text

I'm not saying that all the text on your web site should be supersize. In fact, in some scenarios, small text is fine (we tend to take in more when text is a bit smaller).

What these good designs show is:

Make the most important text on the page bigger than normal text

Like the other design techniques we've seen, it works when used in moderation. If all your text is big, then none of your text is big.

Use bigger text to help your visitors see quickly what the page is about, what's most important, and figure out where they want to look next to find what they want.