Current web style
This is where I try to sum up the
current state-of-the-art in graphic design for web pages, and identify
the distinctive features that make a web page look fresh, appealing and
easy to use.
I'm glad to say that web design in
2009 is better than ever. And it's not just because there are more web
sites out there, so more good stuff to look at. There's still an awful
lot of crud too. I just think that more web designers know more about
how to design than ever before.
The examples below (which I'll roll
over time) show excellent modern graphic design technique. They all
look good, and are clear and easy to use.
Shortcut to Web2.0 Style
If you don't have the resources to
create your own “2.0”-style site design, TemplateMonster
have launched a new Web
2.0 Templates section.
Of course, a purchased template won't
always hit your goals perfectly, but a custom design doesn't always
guarantee that either!
Many sites will benefit loads from
applying a fresh, current design, and purchasing a template for under
$100 can be a great way to achieve that! And TemplateMonster have been
doing this for years, so I'd certainly recommend taking a look.
Hotties
I'm not saying these are the very
best sites out there, just that they're typical of today's
best design.
Common features
The great sites above share the
following design features:
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
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 hot picks above 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.
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
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. (Also echoes Phil
Brisk's article "Dont'
decorate, communicate!")
We see the effects in:
- Freer, less boxed-in page layouts
- Softer, simpler, receding page
"furniture"
- Strong colour 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. As I've written
elsewhere, 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 centre
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, 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 visible on the screen.
3D effects, used
sparingly
Every single one of the hotties 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 hotties 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.
Links
Below are links to other collections
of sites that may be beautiful, highly compliant, effective, or all
three together! Make up your own mind.
Further reading
