Web Page Design

INTRODUCTION

A web page is an electronic publication. It is a very effective medium for communicating ideas and providing services on the Internet. Creating an effective web page involves:

To communicate your message and make an impact on the reader, these components must be put together in an effective way. A further complication is that the user will be viewing and using the information while using a browser (such as Netscape or Explorer) on the Internet. So, it is also important to have some understanding of the technical issues related to the Internet and the various ways that a browser will display information.

Before we discuss some of these issues, let us review some examples:

A few years ago, I was involved in a project which was designed to show instructors how to use a certain website. The developers of this site were in Austin and had the latest and greatest computers and state-of-the-art connections. They developed a really great website, however it was basically unusable because the instructors who might use the material did not have fast connections and speedy computers. It was very hard for the project leaders to understand why their web site was basically ignored. It was a neat website, but the access was so slow that folks grew impatient waiting on it. When you develop a website, try to remember the capabilities of the systems and folks who will be using it. A wonderful website that takes a long time to load will not be used.

Recently, I was involved in a discussion concerning a certain website that had been built for a contractor who built country homes. He was frustrated with the website because the designer had used bright greens, yellows and reds in the color scheme. He felt that a site which promoted 'country' homes should have used country colors such as browns, dark greens and blues.

The same web page can look different based upon which web browser is used. Netscape Communicator and Internet Explorer are made by different companies - different programmers. Some people make the assumption that the web page will look the same and that it doesn't matter which browser the user is running. We will discuss these differences in greater detail in a later module. (see Browser Differences)

Summary: When designing a webpage, it is important to know the intended audience, their system's capabitilies, the subject and how they will view the webpage. Sometimes, the best strategy is to design the webpage so that it works for most people.

TECHNICAL CONSIDERATIONS

One difficulty with designing web pages is that there are a number of technical conditions that affect the way a page looks. Some of these factors are:

When you design a web page, you have no control over these factors, but they could adversely affect the way that your web page appears on the users computer. A middle-of-the-road approach is to design a web page that uses common colors and has a resolution of 800 X 600 pixels.

DESIGN CONSIDERATIONS

The best advice that can be offered for any project is to plan - and then plan some more. There is no substitute for planning. Take the time to think about what you want to do and how you can accomplish it. When writing a web page, it is important to develop and include good content. It is true that some people will be attracted by a flashy web page, but they are not likely to come back unless the page has the content they need. In this section, we will consider several design concepts.

Develop a clear statement of the purpose of the web site.
What do you want to accomplish through your web page?
Do you want to write a personal web page or provide information about a specific topic?
Do you want to describe a concept or process?
Do you want to sell a product or advocate a cause?
You may have another purpose in mind, but the important thing is to spend some time developing the theme and objective of your web page.
(For this course, the web site will serve as a place where you can store your assignments. You will be graded based upon the quality of the work which is stored on your site. However, later in the course, the assignments will be shaded towards development of a personal web page which will reflect your interests.)

Identify your audience
Identifying the audience helps you to develop the proper content and design.
Do you expect the page or topic to appeal to people in a specific age group?
Will the readers be experienced Internet users?
Will the readers have common interests and experiences?
What type of Internet connection will the majority of the readers have?

Take a look at other sites or pages that have a similar purpose
Learn from the best and forget the rest. See what others have done with their web pages. Critically examine appealing style elements and useful features.

Identify the material you will use to accomplish your purpose
Focus on the content you will be providing in the web site. Develop an outline for the site. Think about major topics, images and hyperlinks. Further develop each of these with enough detail so that they can be completed after making final design decisions.
At this time, it is good to show your ideas to someone else. Ask for their ideas and comments. Sometimes you will like what they say and sometimes you will not. How you feel about what they say is not the issue. The issue is 'Does this web page effectively express the ideas that I want to express?' Sometimes, it adequately expresses the ideas to the person who created the page but totally confuses those who try to use it. So, ask others for their comments.

A quick example, for the WTC web page, the programmer developed a logo which would be put on almost every page. The administrator didn't particularly care for the graphic, so he asked for an opinion from several students. They liked the logo, so it stayed. The principle is that the WTC web page is designed towards students, not those of the older generation.

Establish a uniform layout for the web site

Early in the process, adopt a common format. Pick the colors and fonts that will be used. Think about the structure of the web page. If the page can't be displayed in a single window, then you will want to give important information a prominent position at the top of the page. You will also want to include a table of contents or links to other parts of the document or pages in your site.
To be effective, the site must be easy to navigate. Include an email address for comments, the name of the author/designer/producer. Display the URL for the page and the date that the web page was last modified. Generally, these items are placed at the bottom of the web page. The email address allows the reader to make comments and suggestions. The listing of the names gives credit to those who were responsible for the page. The URL listing is included so that anyone could reach it from a printed copy of the page. Knowing when something was last changed is helpful for readers to keep track of the most recent version of the document and it also gives some indication of how current the page is.

Use relatively small images and limit the number of images in your web site.

The issue is the amount of time it will take to retrieve the page. Again, it is important to think about the communications equipment that your readers will be using. If everyone is on a cable, DSL or T-1 line - then this really isn't a consideration. If everyone is on a 56K modem and you put huge images on your site, then it will be virtually unusable.
It takes more bytes to represent an image than text. A quick example, let's consider an image that is 63 kilobytes in size. A 56K modem receives information at approximately 56,000 bits per second. Notice that the industry uses two different measures here. The image is measured in bytes and the modem speed is measured in bits. A byte is equal to 8 bits. Since it will make the numbers smaller - let's convert the modem speed to bytes: 56,000 / 8 equals 7,000. (That is, 56,000 bits is equal to 7,000 bytes. A kilobyte is exactly 1,024 bytes but approximately 1,000 bytes.) So, the 63K image which is loaded using a 7K modem will take about 9 seconds. However, to do this in 9 seconds, we have to assume that everything is running at an optimal speed and it doesn't. My experience is that a download on a 56K modem will average between 3 and 4 KB per second. I have seen it run as high as 4.7 but also as low as 0.3. So, in practice, a 63K picture will probably take about 18 seconds to download (assuming an average speed of 3.5 KB per second).
I know that the previous discussion probably got a little technical for some. I don't intend to go through the calculations in detail, but if we were using a T-1 line (which runs at 1.4 Mb per second or 1,400,000 bits per second or 175,000 bytes per second), the same 63 K image would take about 1/3 of a second - assuming optimal conditions.
The 'take-home' from this discussion is don't use large images if your intended audience will be using 56K modems. Remember, there are still a lot of personal computers that have 28K modems installed and they are even slower.

The bottom line is that bandwidth-efficient page design is an important consideration.

Use proper spacing and emphasis
Let the spacing reflect the organization of the text and content of the web site. If the page has several distinct sections, separate them with a shaded bar or blank spaces. Use bold or italic font appropriately. Section headings should be emphasized, as well as important subsections or words. On the other hand, you do not need to overdo the use of spacing, shaded bars and emphasized text. Strive for balance.

Use features that most browsers can deal with The basic features that will be used in this course will work with all browsers. However, as you advance in your HTML skills, you will find that some HTML code and features used in developing web pages are treated differently by different browsers. Try to stick to the features that most browsers support.
This is easier said than done because there is no universal agreement on which version of HTML to support. This is one reason why it is important to view your web page with different browsers on different types of computers.

Use proper grammar and spelling
This cannot be overemphasized. If you want your page to be effective and well received, grammar and spelling must be correct. The presence of grammatical and spelling errors doesn't give a very good impression of the web site. In fact, these errors can chase a potential reader away.

Review, review, review Go over all the previous items, think about the purpose for the web site and improve the design. The design process goes on and on. Some people put "UNDER CONSTRUCTION" icons or comments on their web pages. Generally, this is not necessary because most pages are constantly being modified, updated, redesigned, reviewed and improved. Plan to revise and reevaluate your work.

DESIGNING A WEB SITE

A web site is a collection of web pages that have a common theme or purpose. We have talked about the importance of:

Additionally, when people visit your site, you will want them to be able to navigate the site. By navigation, we are referring to the process they will use to move from one page to another. You will want the pages to be set up in an easy and logical manner with a similar format or design. This promotes a feeling of comfort, the visitors sense a feeling of place, they identify with the common theme. With this in mind, the web site designer will also want to:

Web site arrangements Web sites can be arranged in the following ways:

In the hierarchical arrangement, the top page has links to the next level. The second level has links to the third level. The user has to move from level to level to navigate the site. This is useful for information that is divided into categories or topic areas. 

In the sequential arrangement, all pages have similar status. Visitors can go from one page to another, with each having a link to the first page which serves as a starting point. The first page often has links to the individual pages. Basically, this is similar to a 'table of contents' arrangement that is used in books. It is useful for material that the reader needs to go through in order and may need to go back and review. 

In the equality arrangement, the pages are connected in a circular arrangement. The user has a choice to move to the next page or to the previous page. The pages are connected to each other, but the visitor can't skip around, their choices are limited to the pages which are next to the current page. It can be viewed as a ring. It is useful for a webpage that gives a pictorial tour, where the user goes from one page to the next and can start on any page.

You will find many variations on these themes - in fact, most web pages are a hybrid of two or more of these basic arrangements. It is your task to determine what is best for your web site. Whatever you choose, remember to keep in mind that you arrange the information in a way that meets the purpose of the web site and keeps your visitors attention.

WEB PAGE Evaluation
When you evaluate a web page, consider these factors:

Our textbook author offers this additional design information from her website.

Designing a Web Page Assignment

The Good, The Bad, and the Ugly

It is easy to create Web pages these days, but it takes a little extra effort to make sure your Web pages are well organized and attractive as well as reasonably nimble on a phone line. As soon as you've mastered the basics, it's time to study the do's and don'ts of Web page design. Read through the following links for additional information that will help you make decisions about designing your webpage.


COSC 1301
Begin jotting down ideas for  the website you will design for this class.

<