Blueprint to Develop a Great Web Site

• 03/01/01

I teach courses in designing and developing Web sites. Every semester, many students come to class and think developing a Web site involves merely learning the mechanics of a Web authoring program - not so. Just like building a house, building a great Web site requires a blueprint. No one would ever think about building a house without a blueprint, or without knowing what tools to use to build the house.

This article will serve as a blueprint to developing a great Web site. The Web blueprint has two components: Systematic Planning and Design and Development. The Systematic Planning and Design and Development components include the following elements:

A. Systematic Planning:

1. Web audience
2. Goals and objectives
3. Sketch out the Web site
4. Select a Web authoring tool

B. Design and Development:

1. Navigation structure
2. Design elements
3. Homepage and page construction
4. Graphics

Both the Systematic Planning and Design and Development elements of the Web blueprint will be discussed using a systems approach. First, we will discuss the systematic planning component of the Web blueprint.

Systematic Planning

Just as planning is important in building a house, planning is also very important in developing a Web site. Planning can ensure a quality Web site, save time and make the content of the Web site easy to navigate. A systems approach to Web development is an overall plan that gives attention to all the essential elements in designing a Web site. The following questions will guide the systematic planning of your site.

1. Who are your Web site visitors?
(Target Web audience)

2. What are the content, depth and breath of information in your Web site?
(Goals and objectives of your site)

3. How are you going to arrange the topics and subtopics of your site?
(Sketch out Web pages using index cards or flowchart)

4. What are you going to use to construct your Web site?
(Selection of a Web authoring program)

The Target Audience

When beginning the planning process, it is important to identify the specific audience that will be coming to your Web site. Ask yourself the following questions:

1. Who am I developing this Web site for?

2. D'es age, gender, financial status, marital status or education affect my site audience?

The audience guides every aspect of your Web design. The design of information, selection of graphics and visual elements (which include color, text, and graphics) are directly related to the target audience.

Goals and Objectives

Goals provide the general frameworks of your Web site and are broad statements that indicate the purpose of the site. For example: the purpose of developing my Web site is to provide school districts, corporations and individuals with information regarding computer training. Objectives are precise statements about specific Web site content. Objectives organize site content information and depth and breadth of site information. To help frame and write your Web site objectives, answer the following question: What specific information do I want my Web users to know? The following is an example of objectives for a Web site:

• The home page will provide an overview and links of services provided.
• The about us page will inform visitors of the creator's biography, which should include education, experience and research.
• The pricing page will provide information on the rates of services provided.
• The contact us page will provide a form in which clients will be able to send information back regarding their name, address and comments.
• The about courses page will inform visitors of courses offered and course content.

After the objectives are completed, build a topic and subtopic outline from your objectives.

Design and Development of the Web Site

An effective technique for sketching out the framework of your Web site is to use 5 x 8" index cards or a flow chart to organize and simulate your Web data for each objective. This technique will enable you to see and arrange the pages in your Web site. The latest Web programs deliver all of the authoring and site management tools you need to create a professional site. You can let one of these programs do a lot of the work for you by using wizards and design templates. However, I recommend that you build a site from scratch, using the powerful layout tools and interactive elements of the program. Select a Web authoring program that suits your needs, and master the program.

The design and development of a Web site encompasses the elements of the sites' navigation structures, design principles, homepage and page construction and graphics. Web pages are built around navigation structures. These structures hyperlink and organize the interrelationships of the Web site content. Four structures can be used to build a Web site; however, most sites use a combination of all four structures. The four structures are:

• Sequential
• Grid
• Hierarchical
• Web

A sequential structure organizes information sequentially in alphabetical order, chronological order, or in order from general to specific information.

A grid structure organizes information in no particular order of importance. The grid structure is hard to follow unless users recognize the interrelationships between the topics.

A hierarchical structure is the most common way to organize complex navigational schemes. This structure uses the typical home page with topic and subtopics arranged in order of importance.

A Web structure is a free-flowing, non-structured navigation. This structure allows users to explore Web links in an autonomous manner. However, this structure is hard to follow unless users recognize the interrelationships between topics. When deciding which Web structure to use, keep in mind that the more your audience is familiar with your information, the more complex the Web navigation structure you can use.

Design Principles

Anyone who is developing a Web site should be familiar with four design principles used in creating most types of graphics. These design principles are simplicity, balance, emphasis and unity. The following is a brief summary of each principle.

The simplicity principle states that in order to communicate effectively, visuals should convey one basic idea. Visuals that contain many ideas are confusing to viewers and misinterpretations are greatly increased. Therefore, the viewer best comprehends multiple ideas in a series of visuals, which are interpreted one at a time.

Emphasis provides a means by which attention can be drawn to the important elements of a visual. Emphasis can be accomplished by using labels, arrows and contrasting color, by changing the size relationship, or by doing anything that draws the eye to the important element in the visual.

Balance is a form of equilibrium within a Web page or visual. Visuals on a Web page that are out of balance are disturbing to viewers. There are two types of balance: formal and informal. Formal balance refers to a situation in which the two halves of the visual are symmetrically arranged around the vertical center of the visual. Informal balance refers to an arrangement in which the elements are not symmetrically arranged, but still appear balanced and stable. Informal balance is more difficult to achieve, but can result in more interesting visuals.

Unity refers to the strength of the relationship between the elements of a visual. The elements should be tied together into a single meaningful unit. To ensure unity in a visual, place the elements very close together, overlap the elements and use a border or a background shape.

Site Home Page

The homepage of your Web site is where you meet and greet your site visitors. The top vertical four inches are the most valuable real estate in your Web site. This area should be the densest area in your site. The layout for designing Web pages is different from the layout for print materials. Print layout is viewed as "whole units" of information, whereas Web pages are viewed as "screens of information." When a homepage is designed using print layout, the functionality of the homepage is upside-down. Web pages designed using print layout place a large graphic on the top of the Web page to capture attention. The list of links, text content and minor graphics are below the major graphic. The result is that the navigation links and descriptive information get pushed off the bottom edge of the screen.

Web layout is about designing screens of information because readers only see part of the page at any one time. A typical 17" monitor cannot show even a single letter size (8.5 x 11") page. Homepage layout should divide the page into two visual and functional zones. Zone One is the top screen of information because it is the only area sure to be visible to all users without scrolling. Zone One is denser with links, text and graphics. Zone Two has lower priority items and is visible by scrolling. As the reader descends into the Web site, the pages should be less dense with links, visual and functional complexity. This technique will not cause the readers to become distracted, and will allow them to focus on specific Web content.

One appropriate design grid for all Web pages d'es not exist. Consistency is the key to good grid design. Experiment with various arrangements of titles, subtitles, navigation links, buttons, text and graphics. Determine the likely size of your Web page by looking at the widest table that will print on a standard letter-size page, which is 535 pixels. Most Web designers today develop Web pages for 17" monitors with 640 x 480 pixel screen resolution.

Length and Text Considerations of a Web Page

Research indicates that long Web pages (scrolling the computer screen three or more pages) can cause a disorienting effect. As a general rule, a Web page should contain no more than about one or two (640 x 480) screens of information. Ideally, limit the text line length on a Web page to 10-12 words per line. Margins define the reading area of your page by separating the main text from non-text elements. Use table cells to establish margins, and use them consistently throughout your site to provide unity.

Web audiences tend to be diverse, and from a readability standpoint, all information must be clear and concise. Web users have short attention spans. A Web visitor expects to find a specific unit of relevant information - not a book. Therefore, concise "chunks" of information are better suited to the computer screen since reading speeds are about 25% slower on a monitor than on paper.

Text design includes font, style, size and color. The following considerations are general guidelines for Web page use. Fonts fall mainly into two categories: serif and sans serif. Serif fonts (e.g. Times New Roman, Georgia) have beginning or finishing strokes on each letter. Sans serif fonts (e.g., Arial, Verdana) have no strokes. Sans serif fonts are best suited for titles, headers, and labels because they are easily recognized and understood. Serif fonts are more suited for body text because they are easier to read for extended time periods. However, either serif or sans serif font can be used for body text. In general, use no more than two different typefaces.

Adding emphasis to text in a document will provide landmarks to direct the reader through Web content. Italicized text attracts the eye because it contrasts in shape from body text. Boldface text gives emphasis because it contrasts in thickness from body text. However, large blocks of text set in bold lack contrast and lose their effectiveness. Underlined and colored text is not desirable on Web pages because it can be confused with a hyperlink. Capitalized text is one of the most common and least effective methods for adding typographical emphasis.

One of the most effective ways to create visual contrast is to add space before and after the header or title to differentiate it from a text block. Indentation using a bulleted list is an effective means of distinguishing important information.

Graphics and Graphic Tools

The two dominant file formats for the Web are GIF (Graphic Interchange Format) and JPEG (Joint Photographic Experts Group). GIF images are preferred when compressing images with large areas of homogeneous color. However, GIF images cannot have more than 8-bit color (256 colors or fewer). The file format allows you to combine multiple images into a single file to create animations. This format supports Interlacing. In Interlaced GIF files, the image data is stored in a format that allows browsers to build a low-resolution version of the full-sized GIF picture on the screen while downloading. This proves beneficial when downloading illustrations and pictures.

JPEG images are 24-bit color ("true color") that can display millions of colors. JPEG is preferred when color is needed for detail and gives excellent results in most photographs. JPEG images also support huge compression ratios, which mean faster download speeds.

In the development of a Web site, it is important that the Web designer be able to edit graphics and create animations. Two great graphic editing software programs are Microsoft's PhotoDraw and Adobe PhotoShop. Also, Macromedia's Flash is an exceptional program that enables developers to create an array of dazzling effects. In addition, a digital camera and scanner are important tools for capturing and editing graphics.

Conclusion

Using the Web development blueprint can help teachers and students design and develop a high-quality Web site. This approach to creating a Web site is systematic and can save time. Give the blueprint a try next time you are teaching or developing a Web site.

Michael F. Ruffini is an assistant professor of Instructional Technology at Delaware State University. He teaches graduate courses in Web design and multimedia. Ruffini possesses an Ed.D. from Widener University. In addition, he is an adjunct faculty member in the Continuing Education Department at Penn State Great Valley and an IT consultant for school districts and corporations.

E-mail: [email protected]

References

Lynch, P. J., and S. Horton. 1999. Web Style Guide: Basic Design for Creating Web Sites. New Haven, CT: Yale University Press. http://info.med.yale.edu/caim/manual/.

Holzschlag, M. E. 1998. Web by Design, San Francisco, CA: Sybex.

Niederst, J., and Koman, R. 2000. Web Design in a Nutshell. Sebastopol, CA: O'Reilly & Associates.

Nielsen, J. 2000. Designing Web Usability. Indianapolis: New Riders Publishing.