 Designing
a Website deals with both the content design and presentational
design. Content design deals with the scope and outline from the analysis
and/or goals that were determined. Presentational design involves all of
the interfaces, navigational elements and the layout, look and feel of
the Website, including artistic elements such as graphic design and/or
other media design. Storyboards, flowcharts and/or scripts are very useful
for organizing all of the information including any multimedia components.
Producing a prototype is highly recommended.
Unlike a sequential
slide show or presentation, most Web sites are non-linear in nature. This
basically means that users can find their own path through the site. The
proper organization of the information to be presented is very important.
This is an ideal phase in which to assign marks, as students can produce
a network chart, storyboard or prototype for evaluation and assessment.
A
very basic flowchart showing organization
The flowchart above illustrates the organization
of a simple Web site. Each block represents a page that is linked to the
main page (top). Larger Web sites require more organization.
A user should be able to navigate through a Web site by clicking on various hyperlinks that are available on each Web page, or at least find their way back to the main page or index easily from any page.
|
|
| Preliminary
Design Checklist
 Have
students look for Websites with layout and design elements that appeal
to them.
Discuss elements of good design: consistency across pages, ease of navigation
and the proper use of colours, fonts and graphics.
Get students to determine what parts of the information are best suited
to text, graphics, animation, sound, video, etc.
Have students start to think about the various multimedia elements they
can use to convey their information, with an emphasis on originality, and
what is feasible and practical.
Have students create a flowchart or storyboard of their site to illustrate
how the topic is organized and how various pages integrate.
Encourage self and peer reflection in reviewing all of the various designs
proposed.
|
|
 Storyboards
can be an effective tool in planning Web sites. Storyboard cards hold much
more information than a flowchart, as they can contain a visual sketch
of the page or screen, a detailed description of the content, and/or various
production notes. The biggest benefit of using storyboard cards is that
they can easily be shuffled around in various configurations, helping students
to visualize and organize the structure of their project.
Storyboards are a little more amenable
to multimedia projects, such as those created with Hyperstudio. Hyperstudio
multimedia projects can be displayed over the Internet with a special
browser plug-in, but loading times may be very slow, especially when there
are audio or video elements involved!
|
An online
lesson on planning multimedia (Hyperstudio) projects using storyboard cards
and free downloadable cards are available at:
Resources on Web
page design are available at:
.
|
In the content design, students should
consider the various sources of information that they will be using. Originality
is important, and you may want to emphasize to your students the balance
you expect between the creation and use of primary resources and the use
of existing secondary resources.
| PRIMARY
RESOURCES |
|
SECONDARY
RESOURCES |
-
Direct observations
-
Interviews
-
Oral histories
-
Diaries
-
Letters
-
Original documents
-
Original photos,
pictures, diagrams, etc.
-
Eye-witness accounts
-
Raw video footage
|
|
-
Books
-
Research articles
and papers·
-
News summaries·
Lectures
-
Documentaries
-
Encyclopaedias
-
Reports
|
There are a variety of tools available to assist students in getting their original work into an electronic format. These include paint programs, scanners, animation programs and digital cameras. Even (digital) audio can be easily recorded on a computer.
| Final
Presentational Design Checklist
Introductory
page and supporting pages have a common ‘look’.
Backgrounds
and colours all contribute to layout and readability.
Fonts
selected are of the appropriate typeface and colour.
Navigation
elements (icons, images, text) are easy to locate and use.
Various
media elements (audio, visuals, animations, etc.) are not distracting.
|
|
Final
Content Design Checklist
Clearly
demonstrates student learning in relation to curriculum expectations.
There
is a definite focus to the content.
Primary
(and perhaps secondary) sources of information are evident.
Site
is proofed for spelling and grammar.
The
content is valid and audience appropriate.
When
sensitive issues are portrayed, a balanced presentation of all sides is
given.
Copyright
has been obtained and credited or cited where necessary.
Links
to other sites that support the content are age appropriate.
The
content shows a certain level of originality.
|
Most of the items in the above check lists
are used in the final evaluation of projects, but it is important to make
students aware of them at this early stage. In this way, they can consider
all of the content and presentational issues involved in designing a successful
Web-based project. |
