Designing the Interface and Navigation

Read Chapter Eight (The Non-Designer's Web Book)

Do all the projects.

Complete all the Quizzes.

Instructional Video: Watch

Interface design is a very important and often overlooked part of web site development. "Interface" refers to the way the pages look and interact with the viewer. There are parts of the interface that are defined by the browser:

• underlined words are links,
• the cursor changes from an arrow to a pointing finger over links,
• you can bookmark pages for easy reference later, and
• ... a host of other things.

There are also a whole variety of interface characteristics that are designed and defined by you, the person creating the site:

• color scheme,
• placement of text, graphics, and forms,
• the site map and page linkage, and
• navigation.

There are specific steps to follow when designing a site:

1. Make a list of the general topics to cover in the site.
   This list will include the major items that need to be addressed. Many times, this list is actually a listing of all of the pages in the site, or at least pretty close.

   A topic list for your electronic portfolio might look something like this:

   • Home page
   • Education
   • Work Experience
   • Community Involvement
   • Leadership Experience
   • Organizations
   • Resume
   • Gallery of work

    

   Not totally by accident, each item on this list translates directly into a web page. This may not always be the case, but it works out that way here.

2. Create a site map.
   The site map is a diagram that includes a box for ever page in the site. These boxes are arranged in the mapping to show how linkage will work. Generally, the home page is at the top of the map, with each subordinate page under it. Pages that further define the content of the subordinate pages are drawn in under the appropriate subpages. To visually simplify the diagram, links are drawn between the boxes to show the links.

   Here is a sample layout for a typical e-portfolio.

   

3. Make a to-do list.
   The to-do-list will include all of the work items that need to be completed before the site is completed. This list will change a lot during implementation as work items are completed or new items are added.

   Each item on the topic list is expanded to include all of the steps involved in completing that particular topic. For example, the to-do list for the Work Experience page might look something like this:

   • Work Experience
     1. Create empty page
     2. Type up overview of work experience
     3. Find pictures of McDonanld's and Cinema V
     4. Add links to Mac's and theater web sites

    

Horizontal formatting

Traditionally, good design practices dictate that the page be designed to have a horizontal look to it. In other words, the pages are defined to be wider than they are tall. However, under no cicumstances should the viewer be expected to scroll from side to side. So, how does this work? Easy. You home page should never require scrolling to view. Keep it within a width of 750 pixels and a height of 550 pixels and your viewer will not have to scroll. For subpages, stay within the 750-pixel width, but let the pages get longer if they must.

Navigational design

Navigation is pretty easy to evaluate. If you can find your way around the site easily and efficiently, the navigation is well designed. If you get lost, cannot find the page you are looking for, cannot find your way back to a page you were just at, or the navigation is in a different spot on every page, you have some work to do.

There are several styles of navigation that are readily accepted as good design. You will see sites that have their navigation across the top of the page, the bottom of the page, or down the side of the page. All are okay, as long as it is easy to find and placed consistently on every page. The key here is repetition: Use the same buttons or textual links on all pages and plut them in the same place on every page.

It is also considered a good idea to include more than one type of navigation on the page. If you have graphical navigation on the top of the page, consider adding the same links as text at the bottom of the page. There are two advantages to this: it gives the people that do not view graphics a set of links and it keeps the viewer from having to scroll back to the top of the page to use a link.

Using Table Templates

Table templates allow you to easily section of portion of your web page to give a uniform and professional appearance.

After setting the table border to zero then the template create a seamless appearance.

Here is a sample page layout scheme:

Creating Table Templates

Template 1:

Template 2:

Template 3: