Web Design Beginning Web Page Design Advanced Web Site Design Web Site Management Professor Higgins Web Design Resources

CSC 112 - Lesson 2

Elements of Site Design

No matter what the goal of your web site, whether it to inform, educate or persuade (sell), your design should assist the interaction between the content and the intention. By making the site easy to navigate (find information that the users are looking for) and fast loading, the users will be more likely to spend more time at your site, thus giving you a greater opportunity to get your message across.

Unlike conventional desktop software, web sites can't depend on the customers to spend the time to learn how to use the sites features. When you purchase commercial desktop software such as Flash or MS Word, you spend your money first, then you have to learn the program.

On the web, it's different. People simply are not willing to spend time to learn how to use a web site. There are too many other web sites out there clamoring for their attention. It's easier for them to push the back button than to tax their brains trying to figure out a web site. On the web..."Confusion is our enemy."

The same thing goes for slow loading sites. If your site is slow to load, many visitors will also hit the back button, especially on your home page. Spend the time optimizing your site so it will load fast. This is one of the main keys to having a successful web site. No one likes to wait for a site to load. Don't make them wait any longer than they have to.

Consistent Theme

A consistent theme is important for many reasons. Visitors expect for the navigation to be the same (consistent) from page to page in a web site. They want the buttons to be in the same place so they can find them easily. If they have to relearn the navigation on every page, naturally they will be confused. Remember...Confusion is our enemy. We don't want our visitors to be confused. When they are confused they leave without buying and of course, we don't want that.

The same thing goes for colors, fonts and other embellishments. Visitors expect consistency in color and when they don't see it they think they have left the site. Again, our ugly enemy confusion rears its dreaded head and scares our customers away.


You should maintain consistency with your fonts not only in type but also in color and size. All of your headings of equal value should be the same size and most likely in the same color and weight too. Inconsistency in type faces, sizes, colors, styles, and weight looks sloppy and unprofessional. Be sure to review your site to be sure that your fonts are consistent.

There are basically two schools of thought when it comes to font selection for your web site. The old school comes from the print background and they say that your should use serif fonts such as Times New Roman for the body text and use sans serif fonts for the headings. The new school says just the opposite.

The logic of the new school is that sans serif fonts like Arial are easier to read on computer screens than serif fonts like Times or Times New Roman. Since the text us smaller in the body text, they argue that the sans-serif is easier to read and makes more sense since our goal is communication.

The new school states that the headlines and headings are larger and thus easier to read, so serif fonts including some pretty outrageous ones may be used to draw attention to the smaller body text, which is the goal of the headlines in the first place, to entice the visitors to read the text.

The old school's argument is convention. They say that people are accustomed to reading serif fonts in the body and seeing sans-serif fonts in the headings because this is the way printed material is typically presented. Since this is what people are used to and comfortable with, they argue that this style creates comfort and familiarity.

You can decide for yourself how you want to display your fonts on your web site but whatever style you choose for your fonts, be consistent. To me, consistency is comfort.

Fancy Fonts

Fancy fonts can add character to a web site but be careful with their use because the visitor's computer may not have this particular font installed on their computer and won't be able to see your headlines the way you intended.

In order to combat this potential problem, most web designers use multiple fonts in their font tags in case their first choice is unavailable. Many designers follow the 3 font format: the first font is for Windows users, the second font is for Macintosh users and the final font is actually a type of font, either serif or sans-serif.

You can use as many fonts in a series as you want though. If the font you specify is not available on the users computer, the next font type that is available will be displayed. If none are available on the users computer, the default font assigned by the user's browser will be used.

The html for multiple fonts is the same as for a single font except the next font follows the preceding separated by a comma.

Single font example:
<font face="Arial">Fancy Fonts</font>

Multiple font example:
<font face="Jokerman, Arial, sans-serif">Fancy Fonts</font>

Many larger companies that I have worked with have had formal guidelines and policies when it comes to fonts, colors, etc. used in any marketing communication approved by the company.

I remember a bank that I worked with where the font for the logo needed to be Garamond stretched 120% and kerned 5%. Obviously this type of accuracy is impossible using default fonts on the users browser. When you need to depict text in the exact format required in a logo for example, you have no other choice than to create a graphic out of your text in an image editing program like Photoshop.

Just like anything else on the web, there are advantages and disadvantages of using graphic text. The advantage already mentioned is the exact replication of the desired font. There are two main disadvantages.

Since the graphic is no longer text which can be scanned and indexed by search engines, you loose this ability for the robots to find you. Being found on the Internet is pretty important and you might want to think twice before turning key titles and phrased contained in headings into graphics.

The second disadvantage of using graphic text is load time. Graphics take much longer to load than standard html text. If you do use graphic text on your pages be sure to optimize it to load quickly in an optimization program like Fireworks
(See Graphics Compression: CSC 110 - Lesson 3). You want to keep your load time to a minimum, so consider carefully any graphic text that you intend to use on your pages.

Joy in Repetition

The biggest reason for consistency from page to page is reduced loading time. Browsers cache (store in memory) graphics and other media such as Java programs so they don't have to be reloaded each time the same image is accessed by the browser. This keeps load time to a minimum.

Design Issues

Usually unless you have some reason for going against the grain, it is usually best to follow convention when designing your web site. Users have been to other web pages before and are accustomed to certain standard ways that certain items on a web page are customarily displayed. For example: the search feature is usually in the upper left corner of the web page. If it's not there, the user is less likely to find it.

Common Conventions

  • Logo in upper left corner.
  • Logo clickable (hyperlinked) to home page except on home page.
  • Search engine in upper right corner
  • Navigation buttons on the left
  • Secondary navigation on the left
  • Copyright information at the bottom of the page in the center
  • Text links at the bottom for compatibility with non graphical browsers and to insure compatibility for people with disabilities.
  • Main content in the center of the page.
  • Tag line explaining what to expect at this site.
  • Scrolling should be kept to a minimum.
  • Text should be chunked into small paragraphs.

These conventions are simply guidelines. You may choose to design your site differently but keep these conventions in mind because this is what people will expect because they have used this format on may other web sites in the past.

If you don't follow these conventions, you may need to add additional instructions or design features in order for the users to understand your navigation and your offering.

Many sites have navigation across the top of the page, which is perfectly acceptable. The main idea is for the users to be able to find and use the navigation controls. If your design calls for a header and a footer this may be your only choice. This design is almost as common as the left navigation. Don't be afraid to use it.

If you use an unconventional navigation system, try it out on your friends before you show it to your customers and see how they get around. This will allow you to fine tune your navigation to get it just right.