Webpage Design

Definition

Webpage design is the design subactivity that consists of the cohesive collection of tasks involving all aspects of reusing, producing, and maintaining the design of an individual webpage.

Goals

The typical goals of webpage design are to design a webpage that will:

• Be easy to learn and use.
• Be attractive and pleasing to use.
• Enable its users to efficiently perform their duties.
• Be easy to maintain.

Objectives

The typical objectives of webpage design are to:

• Determine the purpose of the webpage.
• Design the content, behavior, and navigation of the webpage
• Create low-fidelity and high-fidelity prototypes of the webpage

Examples

Examples of webpage design include:

• Design of a homepage.
• Design of a static informational webpage.
• Design of a data entry webpage.
• Design of a dynamically generated webpage.

Preconditions

Webpage design typically may begin when the following preconditions hold:

• The initiation phase has started.
• The user experience team is initially staffed and adequately trained in webpage design.
• The parts of the human interface design document relating to website design has been produced.

Completion Criteria

Webpage design is typically complete when the following postconditions hold:

• The webpage design is documented in the Human Interface Design Document which has:
  • Passed evaluation.
  • Been accepted by the customer.
  • Been delivered to the customer.
• The low-fidelity and high-fidelity prototypes have been produced, evaluated, and accepted.

Tasks

• User Experience Team, which performs:
  • Design Reuse
    • Reuse webpage design conventions.
  • Design Production:
    • Determine Webpage Purpose
    • Determine Webpage Content, Behavior, and Linkages
    • Create Low-Fidelity Webpage Prototype
    • Create High-Fidelity Webpage Prototype
  • Design Documentation
    • Develop the webpage design parts of the human interface design document.

Environments

Webpage design is typically performed using the following environment(s) and associated tools:

• Development Environment:
  • Whiteboards
  • Paper Prototypes
  • Camera and props
  • Graphic Design Tools (e.g., Photoshop, Visio)
  • Typography Tools (e.g., Illustrator)
  • Animation Tools (e.g., GIF Animator, GIFmation)
  • Audio Tools
  • Video Tools
  • HTML, XML, and CSS Editors
  • HTML, XML, and CSS Validators
  • Link Checkers
  • Browser (for debugging)

Work Products

Webpage design results in the production of the design work product set:

• Low-Fidelity Prototype
• High-Fidelity Prototype
• Human Interface Design Document

Guidelines

• Follow the website design guidelines.