Overview

Now that you've got some of the basics of web design under your belt, it's time to start thinking critically about web design. When you design a website and publish it on the Internet, other people are going to look at it. It is the choices you make when putting together a website that will ultimately decide whether people will want to look at it. Attention to audience, then, is crucial.

Your ENG 105 website will have an audience - your instructor and your peers. Every choice you make needs to reflect awareness of your audience. Though you're creating a website that reflects who you are, you must always ask yourself if the choices you're making will turn people away from your website. In this section of the tutorial, you'll learn how to make design choices that show a concern for your audience.

Microsoft Frontpage Tutorial

Welcome to the second part of the Microsoft FrontPage Tutorial. In this section, we'll move past the functional and learn some of the advanced aspects of web design. The five principles outlined below are from The Non-Designer's Web Book by Robin Williams and John Tollett.

Part Two - Advanced Concepts

I - Alignment

Example 1a

Example 1b

Click on Example 1a above. Notice that this is the example site from the previous tutorial section. The design is not only basic and uninteresting, but poorly designed. Why? A lack of allignment. Notice how the picture of the koala and the title of the webpage are centered, while the links below are off to the left. This is incorrect, from a design standpoint, because it forces the reader's eye down and to the left. If you were going to use a design similar to this, you would have to align everything to the left, or to the center, as in Example 1b.

II - Proximity

Example 2a

Example 2b

Click on Example 2a above. Again, notice how many times the reader has to shift his/her eyes to read the information on the page. The visual elements on the page are spread too far out. In Example 2b, the image of the koala is made larger, and the text is forced to wrap to the right. All of the text on the page is now closer together. This design concern is known as Proximity. Related elements should always be grouped together. By spreading them apart, you send a visual clue to the reader that the elements are unrelated. Such text should be placed on a separate page.

III - Paragraph vs. Break

Example 3a

Example 3b

Before we discuss the importance of these two design concepts, we must distinguish between them. Webpages, as you may know, are created using a language called HTML. Microsoft Frontpage simplifies things by letting you create webpages without having to know any HTML. You send a paragraph command to FrontPage whenever you hit the <Enter> button while typing text. This adds an extra space between new text and the text that came before it. When you send the break command, done by hitting Shift+Enter simultaneously, you tell Frontpage not to put a space between new text and the text preceding it.

In Example 3a, you'll see the "About Me" page of the website in the previous example. Notice the text is divided into three sections, each with its own heading. Also notice that each heading has a paragraph command separating it from the text below. The extra space dimishes the relationship between the heading and the text below it, so you would want to change each paragraph command to a break command. This is done by moving each body paragraph to the same line as its heading, and hitting Shift+Enter simultaneously. The result, in Example 3b, shows the headings much closer to their respective paragraphs. The relationship between heading and paragraph is now much stronger.

IV - Repetition

Example 4a

Example 4b

Repetition is one of the most important things to consider when designing your website. Every page of your website should have a similar layout, and use similar colors. Using different layouts and colors will not only confuse readers of your site, but will diminish your ethos (bad websites always reflect poorly on their respective authors).

As you browse through Example 4a, you'll notice that the pages differ drastically from one another. There's no sense of cohension between the pages. While the image of the koala remains constant, as does the navigation bar at the top, there's no consistency in font and color choice. This will severely damage the author's ethos, because he/she hasn't thought about audience, instead choosing to mix different visual elements at will.

Now look at Example 4b. Notice how the visual elements on every page are exactly the same. You know what to expect on every page. This is why repetition is crucial, it provides your reader with visual clues that will allow him/her to find information on your website quickly and easily.

V - Contrast/Focal Point

Example 5a

Example 5b

The final design concept we will look at is Contrast. You may have notice this occuring in previous examples. Contrast involves giving your reader visual clues that dictate a hierarchy of importance on a given webpage. The most important information is given the largest font, or put in bold, while all other elements are given steadily diminishing visual importance through decreased font sizes and lack of bold or italics.

Look at Example 5a. Notice how the first two lines of text are not only the same size, both are in block letters. Similarly, the two lines below the image of the koala lack distinction from one another. There is no difference in color, nor is there application of font styles such as bold or italics. The whole page lacks the visual clues that would allow the reader to discern the most important information on the page.

Now, look at Example 5b. From the very first line of text, we can see evidence of a visual hierarchy. The first line is not only in block letters, but in 24pt bold font. The line below it is in 18pt, and lacks all of the visual elements of the line above it. Anyone who sees this page has enough visual clues to understand that the first line is the most important.

The two lines below the koala have also been changed. The admission fee is now in black. This is a decision made with concern for audience. The author of this page clearly thought that anyone whose interest had been piqued by the page would next want to know how much the event costs. The last line, mentioning the koala exhibit, is smallest. Perhaps the author, having already placed a large image of a koala on the page, thought this information needed little emphasis. The visual hierarchy presented on the page makes it easy for any reader to go from top to bottom and assess the importance of every line of text on the page.

Applying What You've Learned

Now that you've seen these five concepts illustrated, try to apply all of them in the construction of your website. To get you started, look at Example 4b again for a basic example of a website that encapsulates all five design principles.