* Home
* RSS
* Contact
* About
* Articles
* Site map
* Basics
* Design process
* Opinion
* Business
* Goal-oriented design
* Graphic design
* Site architecture
* Accessibility
* Usability
* Copy writing
* Production
* HTML
* CSS
* JavaScript / DHTML
* Recommended
Article published 2006-02-03
Gate.com Hosting Banner
Everyone.net Email
We recommend FastNext hosting
* Recommended links
* Free Fonts
* PPC Management
* Glossary of Computer Terms
* Ask web design questions here
* Let Copywriters Finish the Job
* Free MySpace Layouts
* FlashDen - Stock Flash
* VPS Hosting - Linux/Windows
* Compare ADSL Modems prices
* Professional Web Hosting $4.95
* Compare web hosts - speed, uptime, support response...
* Lower your eCommerce cost! FREE eCommerce Software quotes from multiple vendors.
* Custom logo design services
Search this site
Host Unlimited Domains on 1 Account
Current style in graphic design for the web
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 2006 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.
Hotties
I'm not saying these are the very best sites out there, just that they're typical of today's best design.
Ash Web Studio» Ash Web Studio Macaroon Design» Macaroon Design Startup Business School» The Startup Business School Alternative Energy Store» The Alternative Energy Store Forecast Advisor» Forecast Advisor Icon Buffet» iconbuffet.com Really Wild Flowerw» Really Wild Flowers Save Longstone Edge» Save Longstone Edge Iomega» iomega.com LinkedIn» linkedin.com Mozilla» mozilla.org Plaxo» plaxo.com Tony Yoo's Prolotize» Prolotize
Common features
The great sites above share the following design features:
* Simple layout
* Centered orientation
* Design the content, not the page
* 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 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.
Diagram showing left-aligned, liquid and center-aligned page orientations
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.
Reflection from Iomega.com Reflection from wishingline.com Fade from 31Three.com Reflection from sirruf.com Drop shadow on squarespace.com Drop shadow on Iconbuffet.com
Trademark round flashes are everywhere.
Flash from emaginacion Flash from 31three Flash from
www.folieto.at Flash from
www.bmf.jugem.cc Flash from sirruf.com Flash from stylegala
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.
Strong colour from Iomega.com Strong colour from 31Three.com Strong colour from LinkedIn.com Strong colour from Patrickhaney.com Strong colour from Stonewall.co.za Strong colour from Iconbuffet.com
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.
Cute icon from Patrickhaney.com Cute icon from Patrickhaney.com Cute icon from Iconbuffet.com Cute icon from Plaxo.com Cute icon from 31Three.com Cute icon from Avalonstar.com
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!
White space on LinkedIn White space on Mozilla White space on Plaxo
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.
* Jonathan Nicol picks up the theme... Read this next
* Design Melt Down - wonderful insight into all kinds of aspects of web design, with a focus on "2.0" style.
* CSS Beauty gallery - A lovely and easy-to-use collection of quality links
* CSS Thesis - Great collection of thumbnails
* Stylegala - Community for discussing web style, well-filtered and intelligent comment
* Andy Budd's list of "Well designed CSS sites" - Over 400 of them! Fill the kettle..
* CSS Blast (Russian)
* CSS Drive - Categorised links
* chobi.net (Japanese) - Good fresh inspiration
* Piepmatzel.de - Lots & lots of thumbnails to pick from
* Web Creme
* Web Designers - List of links to web designers' homepages round the world
Further reading
* Stephen Coles' analysis of Web 2.0 style logos on FontShop
* Home
* Articles
* About
* Contact
* Supporters
* RSS
Creative Commons License
This work is licensed under a Creative Commons License.