Basic Web page Layout & Design

Introduction

This tutorial provides information on the basic elements of Web page design and layout. It is not meant to be a comprehensive course on Web site construction. Rather, it is meant to provide an overview of the most important issues that anybody building a Web page will confront.

The tutorial takes about 20 to 30 minutes to complete. Clicking on any selection in the Table of Contents below will take you directly to that portion of the tutorial.

Table of Contents

How this Tutorial Works

The pages of this tutorial are divided into right and left halves. The left half contains the main message. The right half, with the green background, features interactive elements, additional information, or examples.

As you go through the tutorial, be sure to try the interactive elements. Follow the instructions and take the quizzes, click the buttons, or try the action.

Defining A Web Site  

The very first step in designing a Web site is to define it. And to properly define a site there are three questions that must be answered.

  1. What is the purpose of the site?
  2. Who will be visiting the site?
  3. How will the site serve the client?

The answers to these questions will guide you as you construct the site

Your Web Design Here
   
Identify the Purpose of the Site  
A Web site may have several purposes. In that case it is necessary to determine which is the primary purpose, which is secondary, and so on. A site that is intended to be strictly informative, such as a news site, is likely to look much different that a site that is designed to sell a product. On the other hand, a site for a college may have some subtle similarities to a site that sells books. The college site probably will be intended to present the school is a very positive and manner so that students will want to enroll. The retail book site will want to convince visitors that it is the best place to purchase reading material. Let's say you are going to build a Web site. Check all that apply:
Choice 1 I want people to join my group
Choice 2 My site is like an online newsletter
Choice 3 I am trying to sell something
Choice 4 The main purpose of the site is educational
   
Identify Who Will Visit the Site  

Determining who the visitors are likely to be is crucial in deciding not only the general appearance of the site, but also the technology that might be used to build the site.

If the project is likely to have visitors who log in from home, it is necessary to design the pages with the understanding that users will probably have slow modem connections.

On the other hand, if visitors are expected to be fans of a rock band, then high-end technology such as Flash may be acceptable.

Click who you expect to visit your site:
Choice 1 Text for choice1
Choice 2 College students
Choice 3 Expert Web users
Choice 4 Internet newbies
Choice 4 Music fans
Choice 4 Pet owners
Choice 4 People with dial up modems
Choice 4 People with cable Internet access
Choice 4 International corporations
   
Serving the Needs of the Client  

The term "client" in this instance refers to anybody for whom a site is built, not just a paying customer. In the case of a Web site built for a family reunion, the client is the family. Will the site properly serve the need of the family by providing clear directions to the location of the reunion? Can the family photos be properly displayed?

A client could be a history professor. In such an instance the message of the professor must be clearly understood. Will he or she want to post assignments and readings? Does the site involve explaining research projects? And who will update the site later?

Does this site meet the needs of the "client?"
Choice 1 Yes, the text is easy to understand
Choice 2 Yes, the images are clear
Choice 3 Yes, the site downloads quickly
Choice 4 Oops, we forgot to put in our email address!
Choice 4 Yes, students can download their assignments
Choice 4 Oops, the site takes too long to download
Choice 4 Yes, the site is easy to update
 

Site prepared by Roger Lipera
Interactive Media Center
University Libraries, University at Albany

Click here to return to the Interactive Media Center Home Page Click here to go to the University at Albany Library Home Page