Slide 1-1

The Web Wizard’s Guide to Web Design

by James Lengel

Slide 1-2

CHAPTER 2Designing Display and

Navigation

Objectives To consider the various ways that text, images,

and multimedia can be displayed on a web page To develop systems that allow users to find their

way through the site To describe methods for collecting user feedback

and supporting interactivity To understand the role of corporate identity in the

design of a web site

Slide 1-4

The display of information

Print vs. web layout Print layouts are typically taller than they are wide Web layouts are always wider than they are tall

Slide 1-5

Navigation through the site If your site has more than one screen of

information you need to provide, on every page, the answers to the following questions: Whose site am I looking at? Where am I in the site? What else is available at this site? Where should I go next? How do I find what I am looking for?

A good site navigation is also consistent across the length and breadth of the site

Slide 1-6

Identifying the site

Display the organization’s name or logo (if well-known) at the same location on each page Link from the logo or name back to the home page

Employ a common visual theme on all pages (company colors, font, logos, etc.)

Site identification doesn’t need to provide everything there is to know about the organization, only enough to identify it

Slide 1-7

Knowing where you are - menus

Menus serve several navigational purposes Show categories into which the site is organized Indicate which category the viewer is in right now Let the users click to move to another category

Should be short (1-3 words) Number of items should be limited

Not every page on the site needs its own menu item Identical from page to page throughout the site

Slide 1-8

Knowing where you are – site map

Shows the various sections and identifies the current page

Shows the relationship between the different categories and what pages are located in them (you can use a 2-stage map to indicate all of the pages within a category)

Consider your initial layout of the website for creating your site map

Slide 1-9

Knowing where you are – cascading titles

Many sites show you the depth you’ve descended into the site by showing the page in relationship to its descendents E.g. Yahoo

May be placed at the top or the bottom of the page

Allows the user to jump to any direct descendent of the current page within the site’s heirarchy

Serially developed sites may also include a previous and/or a next button to move through the different pages of a particular section

Slide 1-10

Interactivity

Providing feedback and interaction with your users allows you to take advantage of the nature of the WWW

Forms provide a method of 1-way communication from the user to the company

Discussion boards provide a asynchronous method of 2-way communication between the user and the company or other users & interested parties

Chats provide an synchronous method of 2-way communication

Text, voice and/or video may be utilized to create a more personal interaction with the users.

Slide 1-11

The role of Image, Logos, and Corporate Identity

The web site designer must understand the nature and importance of color, fonts, designs, and shapes to the organization’s identity

Color: many organizations have an official color scheme (even the shade of a particular color may have importance to the organization)

If the corporation has a logo important to its identity, it should be included on each page

Many companies have a specific font they use in their ads. Other companies may prefer a specific genre of font (e.g. business-like, whimsical, etc.)

Slide 1-12

Summary

The display of text, images, video, and sound must be built around the principles of information design and the needs of the target audience

Navigation information must tell viewers whose site it is, where they are, what else is available, where they can go next, and how to find what they are looking for

Image, logo, and corporate identity are important aspects of a web site and must be designed into every page