Writing to the World Wide
Graphics on the Web (continued):
Color and Layout
Color can greatly enhance web pages, but if not used judiciously, it can create a real mess.
Good color use can bring to a web page the following:
- focused attention
- speed searching
- orientation (cueing, etc)
- more efficient acquisition of information
Poor color use can do the opposite: decrease attention, decrease performance, cause disorientation,
and increase difficulty on the part of your audience.
Aside from making your web pages appealing (which we've talked about before), color is good for communicating a document's information structure.
According to Keyes, "Color's effectiveness as an information cue depends on several factors: where
color is used within the information structure, what elements are cued, how color cues are differentiated,
and what color characteristics are used." (646).
(See The Yuckiest Site On the Internet. and
Friends and Partners and
Sony for cueing)
Here are some other things to think about when using color:
- Color can distort size
- Colors can index depth
- Warm colors are brighter, more dynamic, more active than cool colors (see the 'dashboard' symbol)
- Warm colors appear closer to the viewer than cool ones
- Light or pale colors make objects appear larger; dark colors make objects look smaller
- Maximum visibility is with yellow; then comes orange, vermillion, and yellow-green
- Color can index motion
- Color can be used to prioritize information. Audiences will look at brightest area first.
(See Federal Express)
- Color can be used to emphasize information
- Eight percent of men and one percent of women are colorblind, green and red being the
problem colors. Blue is the universally recognizable color
- Color has holiday connotations
- Color has cultural connotations. Black is the color for mourning in the
West; in China, it is White. White in the West
also connotes purity, refinement; Black in the west can mean evil, dementia.
Note: there are racial connections to this distinction. Other color connotations:
- Green can mean sourness. It also connotes "go." It can
also mean envy. Green signifies health services
Black and Ye
llow signify "hazardous waste," which explains why
the government chose them: in surveys this combination proved to be the most legible
- Orange is informal, cheerful, but can also mean caution.
Brown is also similar to orange in this manner, except it is not a
"power color" (See
Seraphim Rose Books )
- Red signifies stop, danger, fire, heat.
Red can also signify embarrasment
- Yellow signifies slow, testing, and sunlight (sunniness).
It is the most visible of all colors, so it can make people jittery as well.
Yellow can also signify jaundice.
- Grey is neutral, symbolic of business success
- Blue is the most popular color for lots of things -- one reason is
that it is politically conservative. It also connotes calm, authority, respect, water, cold, reliability,
and corporate strength to financial people. Blue road signs mean OK
Red overrules blue
To doctors, blue connotes death.
- Purple can signify royalty
Find a partner. Once you have found a partner, I will assign you one of the sites below.
For each site, ask yourselves what you associate with the color scheme of the site.
Does the site work for you or not? for its intended
audience? What kind of pathos do the colors convey? What kind of ethos?
Be prepared to explain what works and does not work (briefly), and why.
- Ellen's Place
- The Peabody Home Page
- Sun Microsystems
Probably the most important result of layout is to ensure that your audience is not lost.
The bottom line is that people want to know where they are in relation to your site (figure-ground),
where to look for things on your site (parallel vs. sequential processes), and where to
focus their attention (contrast). See this law firm.
On the other hand, don't bore your users with plain-looking gifs and layout because you don't
want them to be lost. Sure, the bottom line is that people want to know where to look for things -- this is
necessary not just for orientation, but so that readers can have the freedom to read your document
in order they want.
Take a look at GolfWeb
or Virtual Society on the Web.
So, be creative, but be sensible. Things that can help include the following:
- Providing identification cues. These are located at top of page in
95% of web sites, so that's where most people expect to find them. So, it is probably not advisable
to move them unless you have a really good reason -- which you'll need to justify for me.
- Common cognitive cues including colored bullets/icons that have
similar meaning in each page of the document.
- Common header and footer elements. Recall in our discussion
of figure-ground last week: readers need boundaries.
- Common graphics style and size. Think about the effects of
pairing shiny photo-style graphics with amateurish cartoons -- get my point?
- Use frames judiciously. See Where
frames do not work and
Where frames do work
- Use tables judiciously. Again, see Technical
- Use whitespace (remember: figure-ground?).
- Audience!. Different layouts are applicable to different audiences. See
and The Yuckiest Site On the Internet.
- Group informationin order to make meaningful patterns
that will enable our audience to more quickly identify, interpret, and reach 'closure' in your
document. Some techniques for grouping include:
- Limit the number of things we must attend to (5 +-2 theory)
- Create/imply meaningful relationships using proximity,
similarity in size, shape, color, texture, tone, orientation, and/or shared alignment
- Employ chunking (group relevant items for memory). This is usually the first step
in structuring the visual field.
- Utilize queuing / separating functions . Create a visual hierarchy. Create a sequence
of first, second, third, and fourth levels of importance. Think about where, and in what order,
you want your audiences' eye path to go. See McGrane-Chauss:
Reader as User: Applying interface Design
Techniques to the Web..
- Filtering.. Layering information for easy access by different audiences (who have
different purposes for using your document). Filtering builds layers through typography, color, visual
cues, bullet lists and symbols. See Dallas Cowboys )
- Mixing Modes/Multiple Access. Different people learn in different ways. Some learn better
text than pictures, and vice versa. Let the user learn to use your document from many different modes.
Give them not just visual or text, but an "effective balance" of both. See Intercultural Computer-Mediated
- Sketch out (on paper)a grid of your proposed web site. We'll go through how to do this in
class, but for now, look at 3 sketches of how you might do this. The latter two are sketches of the
grid for the class syllabus. (Note: I will expect sketches of grids for your final projects!).
Find a partner or two. Look at each of the sites listed below. Considering the issues
about layout that we just discussed, try to ascertain 1) how the layout fits the intended audience
for the site, and 2) how the layout best allows for the purpose and proper functioning of the site.
(note: These notes were developed by Fil Sapienza for his
Writing to the World Wide Web
course. Portions paraphrased from Elizabeth Keyes "Topics in Visual Literacy," 1991
and from her courses on "Publication Practicum" (1994) and "Visual Communication" (1994)).
Some graphics taken from Jan V. White, Color in the Electronic Age, 1990).