- 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
Adding Content
To say that our user interface looks fairly bland at this point would be an understatement. So let's go back and add (non-working) links to the content that we derived in the last article. We'll also add a logo and a banner advertisement, as shown in Figure 10.
){kind=link}
Logo, menu links, and banner advertisement added.
The HTML file with logo, menu links, and banner advertisement added looks only slightly different, as shown in Listing 2.
Listing 2 Logo, menu text, and ad filled in
<HTML>
<HEAD>
<TITLE>Professor F's IT-Forum</TITLE>
</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=TOP>
<IMG src=informitad1.gif>
<TABLE WIDTH=100% CELLPADDING=0 CELLSPACING=0 BORDER=1 HEIGHT=340>
<TR>
<TD WIDTH=360><!--insert persistent content here--> </TD>
<TD WIDTH=120><!--insert dynamic content here--> </TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
However, the user interface still doesn't look that great. Perhaps the problem is a lack of actual content. Let's add some (fake) persistent and dynamic content (see Figure 11).
){kind=link}
Content added.
Listing 3 shows the HTML with content added.
Listing 3 Persistent and dynamic content filled in
<HTML>
<HEAD>
<TITLE>Professor F's IT-Forum</TITLE>
</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=TOP>
<IMG src=informitad1.gif>
<TABLE WIDTH=100% CELLPADDING=0 CELLSPACING=0 BORDER=1 HEIGHT=340>
<TR>
<TD WIDTH=360>
Professor F's IT-Forum<BR><BR>
Welcome to Professor F . com--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>
Top 5 Phrases<BR>
Sure, you're bitter<BR>
Any other questions?<BR>
Help me Spock!<BR>
Are you threatening me?<BR>
Did you just get in?<BR>
<BR>
Top 5 Words<BR>
Foo<BR>
Bar<BR>
Baz<BR>
Frob<BR>
Grok
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Unfortunately, the user interface still looks bad. The problem has to do with form. Besides having a good layout, the content needs to have good form. Form is the appearance of your content. In the following sections, we'll examine some design rules for fonts and colors that will improve the look of your user interface.