- Introduction
- Thinking About User_Interface Design for Your Personal Web Business
- My Favorite Personal Web Business User Interface: Layout Issues
- Implementing the Layout
- Adding Content
- Form: Font Issues
- Form: Color Issues
- Form: Border Issues
- Aesthetics: Spacing
- Homework Assignment 5: Designing Your User Interface
- Glossary of Business and Technical Terms
Form: Color Issues
Color is used for grouping and highlighting purposes. My color rules are as follows:
-
Use only two colors—a light color and a dark color—along with black, white, and gray. Choosing a light and a dark color within the same hue usually works; for example, dark blue and light blue. You'll have to experiment to find two good colors from different hues. I find that you can often get two different hues to work together if you match their brightness and saturation levels. Finally, if you have a logo, try taking a dark and a light color from the logo. A word of advice: Before settling on your two colors, create a mock UI with those colors and check how they look on different monitors. What looks like red on one monitor may look maroon or even pink on another monitor. PC and Macintosh monitors are notorious for not matching colors, although this probably has more to do with the manufacturer than a Mac-versus-PC problem.
-
Use the light color to separate the control (menu) area from the content areas.
-
Use light gray to separate instructions from information.
-
Use the dark color to separate links from information.
-
Use the dark or light color for titles and headings.
In our sample site, we'll use a light brown for the light color (#DFCCAC) and dark brown for the dark color (#572119). The values for these colors were taken from the logo. We'll make our links the dark color to visually distinguish them from the other text. To separate the site's instructions from the main content, we'll set the background color of the instructions to light gray. Figure 13 shows the user interface with the color rules applied.
){kind=link}
Color rules applied.
Again, the HTML for implementing the color rules is straightforward (see Listing 5).
Listing 5 Color rules added
<HTML>
<HEAD>
<TITLE>Professor F's IT-Forum</TITLE>
<STYLE>
<!--
BODY {font-family:verdana,arial,helvetica;font-size:9pt}
TD {font-family:verdana,arial,helvetica;font-size:9pt}
A {color: #572119; font-weight: bold}
-->
</STYLE>
</HEAD>
<BODY>
<TABLE WIDTH=600 HEIGHT=400 CELLPADDING=0 CELLSPACING=0 BORDER=1>
<TR>
<TD WIDTH=120 VALIGN=TOP BGCOLOR=#DFCCAC>
<img src=logo.gif><BR>
Phrases<BR>
Dictionary<BR>
Archive<BR>
History<BR>
Definition<BR>
Forum<BR>
Chat
</TD>
<TD WIDTH=480 VALIGN=TOP>
<IMG src=informitad1.gif>
<TABLE WIDTH=100% CELLPADDING=0 CELLSPACING=0 BORDER=1 HEIGHT=340>
<TR>
<TD WIDTH=360>
<CENTER><FONT STYLE="font-size:16pt" COLOR=#572119><B>
Professor F's IT-Forum</B>
</FONT></CENTER><BR>
<TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0><TR>
<TD BGCOLOR=LIGHTGREY>
Welcome to <B>Professor F . com</B>--a repository of hacker
culture and a forum for discussing I.T. issues.
Our mission is to correct the negative, misportrayal of the
hacker by the media. So, you won't find anything about breaking
into computers on this site. Instead, you'll find something much
more valuable--the truth. Enjoy!
</TD></TR></TABLE><BR>
Phrase: Sure, you're bitter <BR>
Usage: Whenever a friend or coworker complains too much. <BR>
Example: Barney: I spend all night hacking this algorithm and
I still can't get it to work<BR>
Fred: Sure, you're bitter. <BR>
</TD>
<TD WIDTH=120>
<CENTER><FONT STYLE="font-size:12pt" COLOR=#572119><B>
Top 5 Phrases
</CENTER></B></FONT><BR>
1. Sure, you're bitter<BR>
2. Any other questions?<BR>
3. Help me Spock!<BR>
4. Are you threatening me?<BR>
5. Did you just get in?<BR>
<BR>
<CENTER><FONT STYLE="font-size:12pt" COLOR=#572119><B>
Top 5 Words<BR>
</CENTER></B></FONT><BR>
1. Foo<BR>
2. Bar<BR>
3. Baz<BR>
4. Frob<BR>
5. Grok
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Color visually separates areas in the user interface as well as separates different kinds of information within an area. However, the interface still looks cluttered. The cluttering is usually due to too much information within a given area. To unclutter this information, it's helpful to use various kinds of borders, as described in the next section.