Section 4.1. What Makes a Good Design?

4.1. What Makes a Good Design?

Does web design matter? The answer to this one is a resounding yes. The way that you present your content is as important as the content itself. Imagine that you've written the greatest novel of all time, but your publisher puts it out on plastic sandwich wrap instead of paper, or uses pages three feet wide with miniscule type, or prints the text in reverse so that you need a mirror to read it. After your first few royalty statements, you may come to realize that appearances count.

At the same time, the content has to be the star of the show. People visit your site for the information that it provides, not for the artistic innovation of your graphic design. Web design is more like architecture than painting, in that the end result has to be functional. Doorways have to be tall enough so that humans can walk through them. Floors have to support a certain minimum load, or furniture will fall through them. You, the architect, have to account for certain physical realities in your design. If this limits your creativity, then so be it. Web design, like architecture, isn't hardcore outside-the-box thinking. The box can only change so much before it loses its function. Therefore, the creative aspect of web design isn't about exploding the box, inverting it, or rendering all its perspectives simultaneously. Rather, given a box, how cleverly do you arrange its contents?

Going back to your problems with your publisher, you might be inclined to put the art department on a leash. Nobody is clambering for a new book format. The one that we've had for the last couple centuries works just fine. Your publisher's creativity would be better spent looking for ways to heighten the effect of your proseto complement and support itwhile maintaining the reader's ease of use.

TECHTALK

Accessibility is the degree to which the content of your site is available to your visitors. Sometimes this term applies specifically to content that is unavailable to people with certain disabilities. For example, those without sight can't perceive a Flash movie, so the movie by itself isn't accessible. But accessibility in the broader sense applies to those without disabilities, too. Dark gray type against a black background isn't particularly accessible for the sighted.

You can boil down good web design to a single word: usability. The degree to which your design makes your web site easy to use is the degree to which your design succeeds. It's a very simple formula:

Navigation

Your visitors have to be able to get to the content that they want.

Accessibility

Once there, they have to be able to pull the content off the page in a form that makes sense to them.

If your site is a breeze to navigate, and if its content is always at the ready, then you've done your job as a designer admirably.

One of the best methods for making a usable web site is to divide the layout into specific areas according to their purpose or function. Believe it or not, this trick works because of human psychology. It's based on the principle of grouping, by which the human brain expects to find similarities in things that happen to be in close proximity. Grouping is the reason that all the number buttons on your TV remote control are collected together, while all the picture buttons are in another group and the DVD buttons that never seem to work are in yet another.

So how does grouping work in a web layout? At the simplest level, you have navigation and content. Grouping suggests that you divide the page into two distinct groups or areas: one for navigation and one for content. As long as you place your navigation in the navigation area and your content in the content area, you're well on your way to having a usable design before you've sketched a single layout. Your visitors, being humans, will notice the physical distinction between the two areas and infer from this two different purposes. If your content looks like it ought to be read while your navigation looks like it ought to be clicked, then all the betterthis simply reinforces the underlying logic of the groups.

TECHTALK

Grouping is the psychological tendency for humans to find similarity in things that happen to be in close proximity.

BEHIND THE SCENES

Grouping isn't just a visual phenomenon. If you hear two things in close temporal proximity, your brain tends to associate them. This is why grouping is an effective design strategy, even for visitors who can't see your web site with their eyes. When a screen reader or text-to-speech converter reads out the content of your site, your visitor, hearing the navigation choices one after the other, associates them as a group with an underlying meaning or function.

The layout you envision is probably more sophisticated than a simple navigation/content split. Maybe you want a banner or header across the top of the page for your logo, the date, breaking news, or other masthead-type content. You might want a footer across the bottom of the page for a copyright notice. Depending on your site, you may need a special sidebar for links or a prominent place for advertisements. If so, simply add additional areas to your layout. Do you need a banner? Add a banner area. Do you need a sidebar for links? Add a sidebar area.

Before you start sketching, then, come up with a short list of the areas that you need to include in your layout. Don't go much beyond six or seven. Screen real estate is at a premium, and having too many divisions crammed into too small a space runs interference with the grouping principle.

BEST BET

Don't try to incorporate more than six or seven distinct areas into your design, and if you can do it in fewer, do it in fewer.