FCIT Home > A Teacher's Guide to School Web Sites > Chapter 4: Design


When you have answered the basic questions about the purpose and goals of your site, you are ready to begin the Design Phase.

Organize Your Content

After brainstorming the kinds of elements you want on the web site, you must organize them into categories or logical groupings of information. There are several ways to accomplish this:

concept mapping example


Determine the Site Structure

Next, create a site structure that includes all of the elements grouped in a logical way so that users can easily find information. During this process you will be analyzing, sifting, grouping, and linking similar content in order to create a flowchart of your site.

As you design your flowchart, keep in mind your initial decisions regarding the users of the site. What will the audience be looking for? Which elements should go on the home page, and which major categories need to be accessible from the home page? It may be helpful to create some user profiles. If you were a prospective parent, what information would you be looking for and what would be a logical grouping of that information? Use the profiles later in the evaluation process to check whether or not you have accomplished your goals.

Creating a flowchart can be done in several ways similar to brainstorming: note cards, concept mapping software, white boards, or butcher paper. When you look at other school web sites you will see the different ways information can be organized. Try to develop an organizational scheme that works for the goals of your school site, as determined in your initial decision phase. Although there are several ways of structuring a web site, most sites will follow a hierarchical scheme such as the one below.

site structure chart


Set Up Your Navigation

You can help to avoid frustration on the part of your users by putting thought and good design principles into effect in your navigation interface. The navigational structure is the means by which the user moves through the site. Examples of navigation aids you may want to consider are breadcrumbs, tabs, and sidebar menus.

Tips for Navigational Structure:

Choose the Look and Feel

The look and feel is determined by the overall image of your site. The type of graphics, fonts, layout, and colors all contribute to what is called the look and feel. You may decide that the look and feel needs to be different for parental areas than for student areas. Also, think about how you want to portray your school to prospective parents and students. Faculty at a preschool most likely will want an entirely different look and feel than teachers and students at a high school. One school may want to emphasize how much fun learning can be, while the other may want to portray the importance of high academic standards. If the committee members have done the preparatory research, they will have other sites to use as a frame of reference for what they like and what might work for their school.

Design Your Pages

After you arrive at an overall site structure and decide on a look and feel, you are ready to lay out your individual pages. First, determine what information will go on each page, according to the structure you have developed. Second, draw a rough layout of each page identifying the text and graphics that will be included.

Thumbnail sketches help you to visualize your finished page. The first example below exemplifies good use of basic design principles: balance, unity, simplicity, and emphasis. The second and third sketches show, respectively, poor balance and unity in web page design.

Table of Contents || Chapter 1 || Chapter 2 || Chapter 3 || Chapter 4 || Chapter 5 || Chapter 6 || Chapter 7 || Glossary

©2004 Florida Center for Instructional Technology
College of Education, University of South Florida
4202 E. Fowler Ave., EDU162
Tampa, Florida 33620
Next Back Table of Contents Introduction Overview Decide Develop Evaluate & Maintain Other Issues Glossary