Modern Design Successes

Some common features of today's successful designs

Great modern day site designs share some common features that both demonstrate innovation as well as provide a dramatic increase in conversions.

  • Simple layout
  • Centered orientation
  • Design the content, not the page
  • 3D effects, used sparingly
  • Soft, neutral background colors
  • Strong color, used sparingly
  • Cute icons, used sparingly
  • Plenty of whitespace
  • Nice big text

Simple Layout

A simple layout works better. I can't emphasize this enough. We are seeing a tremendous increase in one and two column websites because they work.

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 and the internet audience appreciates the approach.

Centered Orientation

If you want to appear to be antiquated and out dated, then left align your website and make sure it only extends 575 pixels across. If you would like to bring your website into modern ages however, consider shifting your content into the center of the screen. A couple of years ago, you'd find a lot of liquid layouts and left-aligned fixed-width layouts, today content goes in the center of the screen on main pages and left aligned is reserved for sub pages with wide aspect and meaty content.

Left-oriented layouts are much less common than they used to be. Also, liquid (full-width) layouts are less popular. The wisdom has always been that we should try to get as much information "above the fold" (i.e. visible on the screen without scrolling). Liquid layouts achieves this. However, today we seem to be more comfortable with scrolling, and we're willing to put up with scrolling for the benefits of increased white space and line height.

Design the content, not the page

The big question here seems to be, does my site make the designer look good, or my product look good? The answer should be, the latter, however too often the designer overly concentrates on making the website "pretty" instead of focusing on the actual content. Good modern web designs put less energy into designing the page background - the canvas and permanent page features - and rather focus on designing the content itself. This reflects the principle of drawing the viewer's attention to the content.

We see these effects in:

  • Freer, less boxed-in page layouts
  • Softer, simpler, receding page "furniture"
  • Strong color and 3D effects used to draw attention to the content itself, including the main branding
  • The focus is on making the site's subject look good, rather than making the web designer look good (which is better for the designer in the long-term!)

To take away...
What designers should learn from this trend is that it's not enough to design a blank page, to be stuffed with content later. Content is our problem. As designers, we're communicators (not decorators) and site content carries the majority of our message.

Why center-align?
I like center-aligning, and have been tending to use it on my designs for a while. When the content sits in the center of the screen, it feels up-front and confident. It also gives a sense of simplicity and balance, which reflects the move towards clean, more Zen, 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. Just centering the logo can sometimes bring the friendly, forward-facing feel of the centered site, while getting a lot of content visible on the screen.

3D effects, used sparingly

Every single one of the hottest modern 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 as well. Drop-shadows are still used, but with care.

Soft, neutral background colors

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

Strong color, used sparingly

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

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 color 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 around 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: "They really need to cram that page together!"

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.

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).

Good designs generally make the most important text on the page bigger than normal text. Like the other design techniques, it works when used in moderation.

Beware though, because 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.



Was this answer helpful?

 Print this Article

Also Read

How do I set up my html and htm pages to execute php code?

When a web page is accessed, the server checks the extension to know how to handle the page....

How to redirect a page using php

Redirecting a page with PHPIt a fairly straight forward process to redirect using PHP. Create the...

Coding Email links to avoid spam harvesting

Have you ever noticed how the email addresses that are published on your website seem to attract...

WordPress - Securing a single page with SSL

We recently came across a problem where a customer needed one page of a multipage wordpress...

Understanding $_SERVER['PHP_SELF'], $PHP_SELF, and other bits of PHP

Understanding $_SERVER['PHP_SELF'], $PHP_SELF, $_SERVER['REQUEST_URI'] and...