Graphic design confronts a new medium
What are we trying to do anyway?
- To make people read what you write.
- Grab the viewer’s eye
- Keep the viewer’s eye
- Send the viewer’s eye where you want it to go.
- Convey your meaning/message. Some examples:
What do these three pages suggest to you?
Your design is a subtext to your text, and its impact on your words are as real as intonation, gesticulation and eye contact are to verbal communication.
This is pretty much the standard schtick for print design. But if you’re a web designer and this describes the goals of your site, then you have no ambition.
If you’re thinking up goals of a web site these days, be prepared to add the following:
- allow visitors to interact with the organization/company/person. That means:
- Ask questions and get answers
- Visitors can converse with each other
- visitors can order/buy goods and services from the site
- visitors can retrieve information that meets their needs, which may be close to unique
- visitors can send donations/gamble/otherwise give away money to the site
This is a fair way from print design wherein if you wanted to interact with the producer of the material, you had to fill out the courtesy card or get on the phone. With the web, the messaging medium is also the action medium. Obviously, you can’t do everything over the web, but the fact that there are more functions attatched to the web than simply communication means that we have to revisit an old debate.
Form vs function: here we go again
There is this ancient and unresolvable conflict between wanting to have beautiful form and wanting to be practical and useful.
Well… can’t you have both?
Not without selling your soul. Actually that’s not entirely true, but more often than not web design is about finding a compromise position between eye candy and eye oatmeal. And you often have to privilege one over the other.
Take, for example, Jacob Nielsen’s Top Ten Mistakes in Web Design, or the Top Ten New Mistakes of Web Design.
Taken together, following Nielsen’s rules will restrict the colours you can use, where you place (or if you place) your identifying logo, limit if not eliminate the use of graphics on your page etc etc. Flash, movies and animations are pretty much verbotten.
You get a useable web site, but it’s boring. By contrast, David Siegel’s site for his book Designing Killer Web Sites talks about some different rules. Like how to make web pages sing.
In fact he talks a lot about how to anti-alias graphics and how to infest your pages with code, placing invisible gifs all over the place to put things in the right place. Here is a really old page of his offering some design tips.
More recently he’s retreated from his “web pages will sing” notions. His current web site says there won’t be any more David Siegel books for developers.
In fact, he did a bit of an about face. Here’s an article from an Australian web design site, shorewalker.com, that describes his thinking.
So is there a concensus building about web design? Is it dead? Are all sites eventually going to look like www.useit.com? Maybe, but for two things:
- People like looking at pretty things.www.urbantakeover.co.uk breaks pretty much every one of Nielsen’s user interface rules, but we were all captivated by it for about half an hour. And the user interface fetish people will never tell you how to make anything look pretty. I mean would you want to live in a house Jacob Nielsen built? I should note that since this class first discovered this site it’s calmed down a lot. There are now menus with text labels, for example.
- There’s more to life than shoppingIn fact both the user interface and the singing page people seem pretty much obsessed about selling people stuff via the web. It’s like a new sort of gold mining expedition. Maybe the web is just going to be something people do to connect with other people and find out about things and stuff. Web sites won’t be profit centres, but rather their cost will be lumped in with promotion, running a store and “the cost of doing business.” In this case, maybe designing pretty just for fun isn’t such an anathema.
- There’s nothing saying pretty sites have to be unusable or vice versa.In fact one could argue that truly boring sites will never get used just because they’re boring.
Happy mediums
I’m not saying you can resolve this. But you may be able to live with the ambiguity of wanting an attractive, useful web site. That’s certainly the conclusion drawn by this A List Apart Article.
Here’s an approach that might work:
- Design a pretty site.
- Figure out how many of the usability rules it violates.
- Figure out which of these you can live with.Nielsen rates the following rule violationsas having “very severe” impact on usability:
- bleeding edge technology
- scrolling text and looping animations
- outdated information
- slow download times
- Any pages that violate these rules you should really consider changing
- See if you can’t achieve the same design within the rules
- Change your design or
- Try and assess the damage:
- View the site in as many other, older browsers as possible
- Ask your friends to look at the site; find out what conditions they’re viewing under (browser, connection speed)
- Use browsercam.com to see how your site looks in every browser that ever walked the earth. It’s free for a single use.
- Be happy or make changes based on your damage assessment
Six principles of graphic design and how many of them are still useful to web designers?
Balance:
Also known as symmetry. What goes on one side of the page must weigh as much as what goes on the right. Or top vs bottom. Graphic elements have visual weight. Big items weigh more than little ones. Dark weighs more than light. Colour weighs more than black and white. But a small dark element will weigh less than a concentration of white space because it’s unusual. Note, though, that balance doesn’t necessarily mean equilibrium.
This notion is often at odds with the following notion, because if a page has no balance, then it almost necessarily posesses some form of…
Dynamism
In many languages, including the one I’m using now, people read from left to right, top to bottom pretty much all the time. So much so, in fact, that it’s become a habit.
The top left chunk of a page is known as the “primary optical area” because that’s where a literate person’s eye is trained to go. Mind you, eyes are more like cats than dogs. They’re not easy to train. They’re easily distracted by shiny, noisy or (to bring back some jargon from a couple of prinicples ago) visually heavy objects. So in print we tend to build designs that use the eye’s trained tendency to move top to bottom, left to right. But theoretically, if you use the notion that eyes also move from dark to light, big to little shapes, you can start a page anywhere and get the reader to move through it.
This motion, in design circles, is referred to as dynamism. I admit it’s a tad pretentious.
A good dynamic leads you through the page. A bad one leads you off the page or leaves you standing there with nowhere to go, as overly symetrical pages tend to do.
Proportion
“The lesser dimension in a plane figure is to the greater as the greater is to the sum of both.” Huh? About 1:1.4. This is some ancient law of aesthetics. You’re not supposed to break it. It applies to the shape of a page, elements within a page, where elements are placed etc. Of course, most people’s monitors aren’t in this proportion. But more on that later.
Contrast
Also known as “Emphasis.” Something on the page stands out to give the page a focus or entry point.
When two or more elements are given emphasis, they compete for the reader’s attention, cancelling each other out and encouraging people to move on. Elements cannot, however, be so large and contrasting that they squash out everything on the page.
The amount of emphasis an element gets should also correspond the importance the designer assigns to it, rather than the amount of space that needs filling.
Simplicity
Fewer elements, rather than more. One or two type faces. One or two graphics rather than a dozen. (There are web-specific reasons for this too). Enough said.
Unity
Mentionned earlier is the notion that this is not art. Good design has a unified look from page to page. Choose a headline style and stick to it. Page headers and footers (called folios in print jargon) should be consistent from page to page. Font changes should be minimal, have a purpose and be consistent.
(The web helps a lot here but in other ways causes many many problems).
Unity also means holding the page together. Nothing sends the elements of a page off in all directions quite like white space forced into the middle of a page. Watch this, especially when you’re sizing different squared off shapes like tables, frames etc.