Week 8 Page 7: Using Color for Organization

 

Color for Page and Site Organization

Color can be very useful as a visual organizer either on a page or within the site structure.

. . . . . . . . . . . . . . . . . . . . . . . . .

Use of color to organize a site

On the site level, designers often identify areas of a large site by color. They use the same top banner and navigation but change the color scheme. Site visitors know instantly where they are in the site. Here's a perfect example of that:

Color used for organization

The following example features several zoos that are color coded. Viewers know instantly which zoo's site they are looking at:

Is color used as a good organizing element in this site? It appears to create visual confusion rather than visual organization. Scroll down to enjoy the variety of color!

With the advent of smart phones and other "touch" driven devices, many designers are using color as a way to distinguish different "screen loads" of information. As the user scrolls through the site (vertically), the colors change to indicate a different part. Here's a good example. Each part of the site has a different colored background but the site also accommodates traditional browsers by providing a color coded legend/menu at the top left.

. . . . . . . . . . . . . . . . . . . . . . . . .

Use of color to organize a single page

On the page level, designers often use color to visually separate groups of information. This might take the form of lines, borders or even different colored boxes. What do you think of the use of color for content organization on this site? (Archived version)

color boxes for organization web example

  

. . . . . . . . . . . . . . . . . . . . . . . . .

Use of color for visual understanding

Color is also useful for visually organizing a schedule. Here is an example:

http://www.nywaterway.com/FerryRoutesSchedules.aspx Links to an external site.

 Go to next page >>