Web design from Scratch, free online course in design for the webHome - introduction to Web Design from ScratchBasics - effective web design processTutorials - hands-on, practical lessons in designing clear web pagesCase Studies - useful examples that apply the web design principles

Further reading

"Users will be attracted to great looking software, applications or websites with great excitement...but if the functionality does not act according to their expectations, feelings of abandonment or disatisfaction set in."

"Usability professionals need to wake up to the fact that aesthetics are not a trivial afterthought, but an integral part of the user experience."

"We designers have to remember that the most important thing is to comunicate with the user/consumer."

Frank Spillers experiencedynamics.blogs.com


/German/
Webdesign bedeutet nicht, Browserfenster zu dekorieren, sondern Inhalte leicht verständlich zu kommunizieren. Kein Besucher hat Zeit oder Lust, eine Webseite erst zu erlernen. Sie sollte daher intuitiv nutzbar sein.

/My translation/
Web design isn't about decorating the browser window, but about communicating information clearly. No visitor has the time or inclination to learn your web page. It should therefore be instantly usable.

Dirk Hesse
Meine Philosophie (www.dirkhesse.com)

Don't decorate, communicate!
Phil Brisk

By Phil Brisk
Phil Brisk is an advertising writer and creative director with over 20 years experience in broadcast, print and online media.

When you're designing a web page, it's easy to get sucked into the detail.

With your 'design' head on, concentrating on crafting and perfecting style elements, it's easy to forget to step back and see things through the eyes of your users.

Your users aren't interested in giving your design work marks out of 10. They just care about getting all the relevant information, in as little time as possible, and then moving on.

So how do you give your readers the stuff they need in the way that they want?

For a start, you can draw on the experience of traditional print designers.

After all, they've been tackling the same challenge for decades - in press ads, in brochures, in leaflets, in mailings. And over that time, they've established some pretty sound guiding principles.

1. Remember how brains work

There's nothing our brains like so much as order and meaning. It's what they search for from the moment they encounter anything new - and that includes your web page. If brains can't find the sense and order they need, they soon grow exasperated and give up.

The best print designers know this. They've also learned that, the more elaborate the design, the greater the risk of confusion. That's why they usually steer clear of fussy and showy designs.

Instead, their layouts have a 'quieter' feel, with all the individual elements directed at letting the page information unfold as easily as possible. Headlines, subheads, body copy point size, pictures, colours - all are used to 'signpost' the route the good designer wants the reader to take through the material placed before him. A route that's guaranteed to leave him feeling better informed, and better served, at journey's end.

Does this approach make a difference? You bet it does!

In over 20 years, I've lost count of the times I've seen a more restrained, reader-focused design for an ad or brochure outperform a flashier, supposedly more eye-catching alternative. In most cases, the content has remained the same. It's just the way the content is laid out that's different.

2. Remember how eyes move

In our culture, we're trained from the moment we start reading to scan from left to right, starting from the top left of the page and working down to bottom right. We develop a natural rhythm as we do it, with our eyes moving swiftly to the end of each line, then skipping back to the start of the next.

Oh, and by the way, our eyes don't like to have to constantly readjust their focus. It just leads to strain.

So far, so obvious. But it's the obvious that's often overlooked, particularly by designers who want to 'create an impression' by doing something radical, such as running the main headline around the page margin, or by making interesting shapes with the body copy.

I could go on, of course. I could talk about startling use of contrasting colours. Or reversing out large chunks of text. Or running it over a picture. Or experimenting with lots of different typefaces and point sizes. Or dotting illustrations all over the page.

All these stylistic touches may look really cool. And result in something you'd love to hang on your wall. But that's not the goal, is it? Your aim is to make life easier for your reader. Yet, too often, the kind of visual tricks listed here do exactly the reverse. They disrupt natural eye movement. They strain the eyes by asking them to jump around the page, from element to element, with the need for lots of re-focusing along the way. They frustrate the brain in its instinctive quest for logical order and meaning.

I've seen many over-excitable, over-designed print layouts fail miserably when they leave the rarefied atmosphere of the design studio and enter the real world where the readers live. And, equally, I've seen genuine commercial wonders worked when those same layouts are placed in wiser hands.

In one case, for instance, a loss-making full-page press ad featuring a large slab of reversed-out body copy was transformed by the simple act of running the text in conventional black on white. The freshened-up ad - with nothing else changed - then brought in over a quarter million pounds-worth of orders on its very first outing.

On another occasion, I saw a product brochure achieve a 543% - yes, 543% - increase in response after a design 're-vamp'. The main changes were to switch from a sans serif to serif typeface (easier to read) and to remove a number of small pictures from the right margins of the pages (on the grounds that, in this position, they might be distracting the reader's attention at the wrong moment and preventing his eye from returning back left to start reading the next line).

"Fine," you may think. "But that's print. What's it got to do with designing for the web?"

Actually, everything. Because what's been happening design-wise in print - the successes and the failures - is being repeated right now on-line. Just take a look at a dozen or so web pages, selected at random, and I think you'll see what I mean.

3. Above all - remember you're here to communicate, not decorate

If you only want one guideline, make this it. Because, frankly, for all the reasons already given, there really is nothing more irritating to readers than design for design's sake.

This isn't to say your web page shouldn't use all the design elements and special touches that create style, pace, flair, excitement, intrigue, emotion. Of course it should! But these elements must always be relevant and appropriate, and not distract from a clear, coherent whole effect.

Remember this, and you'll vastly increase your chances of creating effective online design - a design that draws attention to the message, not to itself - a design that will serve your web site visitors rather than dazzle them.

In my experience, this is good business sense. Especially if you want to turn those visitors into customers. Because they can't give you money while they're rubbing their eyes or scratching their heads.

Phil Brisk

Phil Brisk is an advertising writer and creative director with over 20 years experience in broadcast, print and online media.


Top ^ Next topic »
Comments
excellent article. Absolutely obvious, and yet not so obvious...Great article
bleek gilliam - 11:25 on 18 Aug 2004
yes, that's right. In few words, common sense and simplicity is the key for almost everything in this life
netbarrett - 01:22 on 28 Sep 2004
'...these elements must always be relevant and appropriate, and distract from a clear, coherent whole effect.'  'And NEVER distract' perhaps?
martin - 12:13 on 17 Mar 2005
Yes, thanks Martin
Ben Hunt - 12:21 on 17 Mar 2005
Thank you so much for this article!
Emily - 03:34 on 26 Mar 2005
So, true....it's very important to recognize and respect the (past) processes that make design and usability most effective! Thank you for sharing this valuable knowledge!
Matt Hughes - 07:09 on 13 Apr 2005
Ironically this article was republished on a website template site that is well-known for simply 'decorating' and providing monsterously heavy designs. They should take your advice. Well written, I've seen something similar somewhere else years ago with the same catchy title - BUT TRUE.
Dee - 08:37 on 10 Jun 2005
Something i have realized over time is that a good website tells the message more than once.  For instance when Adobe launched Photoshop CS2 they had a full content driven site plus flash running at the top telling and showing the different features of the program plus a movie they could open that had different Photoshop users of all skill levels and proffessions telling about the program
- 07:55 on 16 Jul 2005