From Beginning to End and More

1
Lesson 9

• From Beginning to End (and More)

2
Objectives

• Upon completion of this lesson, you should be
  able to
• Explain the Web site design process, including
  information design, interaction design, and
  presentation design.
• Explain Web site production processes, including
  writing Web texts, manipulating graphics, and
  programming HTML.
• Understand the difference between formative and
  summative testing, and prepare a survey to
  conduct summative testing.

3
The Importance of Design

• A design document outlines your sites goals and
  outlines three critical aspects of design
• Information design (writers needed)
• Interaction design (programmers needed)
• Presentation design (artists needed)

Step-by-Step 9.1
4
Information Design

• Information design requires balancing three
  elements
• Message (Whats the message of the site?)
• Audience (Who is the audience for the site?)
• Presentation design (What is the purpose of the
  site?)

Step-by-Step 9.1
5
Information Design and the Design Document

• A design document should contain these elements
  that helped you to organize your information
  design
• Message
• Scope
• Audience
• Audience background
• Persona
• Purpose
• Structure-flowchart
• Resource list

Step-by-Step 9.1
6
How Should the Message Be Structured?

• Try to visualize your flow of information by
  using a flowchart. It may take several drafts
  and attempts to organize your information.

Step-by-Step 9.1
7
Interaction Design

• Interaction design is concerned with navigation
  and interaction. To assess this, you must be
  concerned about
• Functionality How the Web site works, such as
  how you move around in it.
• Usability Whether it is easy to use.

Step-by-Step 9.1
8
Interaction Design

• A storyboard allows Web site developers to plan
  interactions and to test navigation schemes.
• Storyboard cards allow you to gather the ideas
  that will be developed into Web pages.

Step-by-Step 9.1
9
Presentation Design

• Presentation design lets you decide what your Web
  pages will look like
• Thumbnail sketches are used for brainstorming.
• A rough sketch is a more developed sketch, as
  elements are more refined.
• Rough sketches eventually turn into marvelous Web
  pages.

Step-by-Step 9.1
10
Getting It Built

• Its now time to apply everything Ive learned
  and build an entire Web site by
• Creating text.
• Producing graphics.
• Programming.

Step-by-Step 9.2
11
Put Things in Order

• You must decide the proper order of events to
  maximize time and efficiency
• Complete first
• Complete second
• Complete last

Step-by-Step 9.2
12
Testing Your Web Site

• After you have finished your site, you must test
  it. There are two categories of testing
• Formative testing
• Testing accomplished during the creation of a Web
  site.
• Summative testing
• Testing done after the project is complete the
  final grade or ultimate examination.

Step-by-Step 9.3
13
Testing Your Web Site

• The Likert scale helps with summative evaluation
• 1 strongly disagree
• 5 strongly agree
• Instructions Circle the number that reflects how
  you feel
• 1 2 3 4 5
• This Web site was about sushi!

Step-by-Step 9.3
14
Summary

• In this lesson, you learned
• How the design process of a Web site is an
  integration of information design, interaction
  design, and presentation design.
• That the production of a Web site includes
  processes such as writing Web texts, manipulating
  graphics, and programming HTML.
• The differences between formative and summative
  testing, and how to prepare a survey to conduct
  summative testing.