- 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: Font Issues
In the context of information, form is how your information looks. On a Web page, the bulk of the information is textual. There are two properties of textual information that you can modify to affect its look: font size and color. I like to use the following font rules:
-
Use a sans serif font such as Helvetica, Arial, or Verdana. Serif fonts, such as Times Roman, look "dirty" or "fuzzy" when you have a lot of small text on a page.
-
Use a 9-point font for most of your text.
-
Use a 12-point bold font for headings.
-
Use a 16-point bold font for titles.
-
Center titles and headings.
Figure 12 shows the results of applying these font rules.
){kind=link}
Font rules applied.
The HTML for implementing these font rules is minimal, especially if we make use of the <STYLE> tag (see Listing 4). Briefly, the <STYLE> tag lets you redefine the default properties for an HTML tag.
Listing 4 Implementation of font rules
<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}
-->
</STYLE>
</HEAD>
<BODY>
<TABLE WIDTH=600 HEIGHT=400 CELLPADDING=0 CELLSPACING=0 BORDER=1>
<TR>
<TD WIDTH=120 VALIGN=TOP>
<img src=logo.gif><BR>
<A HREF=" ">Phrases</A><BR>
<A HREF=" ">Dictionary</A><BR>
<A HREF=" ">Archive</A><BR>
<A HREF=" ">History</A><BR>
<A HREF=" ">Definition</A><BR>
<A HREF=" ">Forum</A><BR>
<A HREF=" ">Chat</A>
</TD>
<TD WIDTH=480 VALIGN=BOTTOM>
<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"><B>
Professor F's IT-Forum
</B></FONT></CENTER><BR><BR>
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! <BR><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"><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"><B>
Top 5 Words
</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>
As you can see, the user interface is looking better, but it's still quite bland. One problem is that the content is too cluttered. You can use colors to partially unclutter the interface.