Escolar Documentos
Profissional Documentos
Cultura Documentos
Interface Design
Web Page Design Basics Site Design
Page Design
Rosanna Chan Six-step Design
rosannachan@cuhk.edu.hk Some Examples
References:
Web Style Guide: Basic Design Principals for Creating Web Sites, Lynch and
Horton, 1997
Kerlins.net, 2001 2
3 4
Interface Design
Access Issues
Give user direct access
Provide the user with the information they want in the
fewest possible steps
Simplicity and consistency
Keep it simple, familiar and logical to the audience
Use same basic layout, graphic themes, editorial
conventions, and hierarchies of organization across
pages
Design carefully!
Feedback and dialog
Well-designed Web sites should always provide direct
links to the site's editor or the "webmaster"
5 6
7 8
Site Design Site Design
Organising Information Hierarchy
Adopt a solid and logical organizational Build a hierarchy from the most important or most
general concepts, down to the most specific or
backbone for your web site optional topics.
4 steps in organising information
divide it into logical units (chunks)
establish a hierarchy of importance and generality
use the hierarchy to structure relationships among
chunks
analyze the functional and visual success of your
system
9 10
8 Grid
A good way to correlate variables
Examples include procedural manuals
and lists of university courses
Best for those who already have a
9
basic understanding of the topic and
its organization.
8 11 12
Site Design Site Design
Site Structure (Con’t) Site Structure - Summary
Hierarchy
Users find it easy to build mental models
of the site
You need to organise the material
thoroughly
Web
Pose few restrictions on the pattern of
information use
Work best for small sites dominated by
lists of links
Not for a basic understanding of your topic
13 14
19 20
Page Design
Page Length Six-Step Design
The page should contain Step One – Conceptualize your site
no more than two Step Two – Plan the Site
640X480 screens worth Step Three – Prototype
of information
Content, navigation, presentation
Long Web pages require
readers to remember too Step Four – Implement
much information that is Step Five – Evaluate
currently scrolled off the
Step Six – Site Maintenance
screen
21 22
23 24
Six-Step Design Six-Step Design
3 – Prototype: Content 3 – Prototype: Content
Develop and collect (online and hard copy) Effectively designed navigation systems will:
content materials take into account the human limitations of
Develop a Storyboard for your site memory
minimize complexity
Templates
reduce the likelihood of human (user) error
give your site a unique "look and feel“
minimize the need for training
Add aesthetic integrity
improve the user's decision-making
Add consistency, predictability and perceived
stability increase productivity and user satisfaction
Spell-check your contents Please refer to the previous part of this
Powerpoint
25 26
27 28
Six-Step Design Six-Step Design
5 – Evaluate 5 – Evaluate
Check List:
Check and Double-Check Your Content home page
mission/purpose statement about the site
Develop a user feedback form
33