Transcript Web site Design

Website Design
What is Involved?
Website Design Involves
• Interface Design
• Site Design
– Organising Information or the Content of
the site (Information Architecture)
– Designing Navigation Schemes
• Page Design
– Designing the appearance/style of the
‘pages’ of the site
– Balancing elements (text, graphics)
Web Design Considerations
Slide 2
Bsc Web Design Stage 1
Interface Design
• How the user interacts with the
site
• Methods Used:
– Metaphors
– Images
– Text
Web Design Considerations
Slide 3
Bsc Web Design Stage 1
… Interface Design
• Your website needs an interface
that suits for your target
audience
• It must be easy to use
• Consistency throughout the site
Web Design Considerations
Slide 4
Bsc Web Design Stage 1
… Interface Design
• Must have clear Navigational Aids
– Links should be obvious and consistent
• Viewer should be able to return to
the ‘home’ page or other major
navigation points in your site at all
times
• The basic links should be presented
on every page
Web Design Considerations
Slide 5
Bsc Web Design Stage 1
… Interface Design
• Define an efficient hierarchy of
information
– This allows users to access what they
want quickly
– Minimize the steps needed to reach it
the information
Web Design Considerations
Slide 6
Bsc Web Design Stage 1
Site Design
• Organising information
– Organising site content. Each page in
your site needs to be placed in a
structure chart or storyboard
• Designing the Navigation Structure
– Textual v graphical
– Consistent placement and colour of links
– Global, local and document navigation
Web Design Considerations
Slide 7
Bsc Web Design Stage 1
Organising Information
• Organising content
– We can learn from the organisation of
printed material ie books, magazines and
periodicals and their conventions:
• Chapters, tables of contents, page
numbering, footnotes, indexes etc
• Web documents will evolve and
develop their own conventions in time
Web Design Considerations
Slide 8
Bsc Web Design Stage 1
… Organising Information
• Divide the content into logical units
– Establish a hierarchy of importance among
units
– Use this to structure relationships among
units
• Build a site to closely follow your
information structure
• Test your site
Web Design Considerations
Slide 9
Bsc Web Design Stage 1
Navigation Structure
• Should be easy to follow
• Use accepted conventions (eg links are
blue!)
• Links within your web pages draw the
viewer down the page and further
into your site (this is the goal)
Web Design Considerations
Slide 10
Bsc Web Design Stage 1
… Navigation
• Page/Screen length
– Many ‘pages’ don’t fit on the screen
• Need to be able to navigate through
the document quickly ie:
– Go to Top or
– Go to bottom etc
Web Design Considerations
Slide 11
Bsc Web Design Stage 1
… Navigation
• DO NOT rely on the ‘built-in’
browser navigation
Web Design Considerations
Slide 12
Bsc Web Design Stage 1
… Navigation
• Use ‘previous’ and ‘next’ links within
documents to help continuity
– ‘Back’ should lead to the last page viewed
– ‘Previous’ leads to the previous page
associated with the page you are currently
looking at but may not be last page viewed
Web Design Considerations
Slide 13
Bsc Web Design Stage 1
Page Design
• What does every web page need?
–
–
–
–
An informative Title
The creator’s Identity - Webmaster
A creation/revision Date
At least one link to a local or home
page
– The ability to get back to the home
page
Web Design Considerations
Slide 14
Bsc Web Design Stage 1
Print v Web
• Similarities/Differences
– Search facility v Indexing
– Scanning of Link information v Titles,
Headings etc
• Screen v paper size
• Different fonts
Web Design Considerations
Slide 15
Bsc Web Design Stage 1
Web v Print Documents
• The viewer needs to know who,
what, when and where about the
document
Web Design Considerations
Slide 16
Bsc Web Design Stage 1
Who
• Ownership of the page
–
–
–
–
Profit-seeking enterprise
Individual/Personal
Charitable organisation
Government agency etc
Web Design Considerations
Slide 17
Bsc Web Design Stage 1
What
• What is the site/page about?
– Page Titles can give useful
information
– Titles are used by Search
Engines to index pages
– Meta information – information
you put in the HEAD section of
your web page
Web Design Considerations
Slide 18
Bsc Web Design Stage 1
When
• A document’s value can depend on
its timeliness
– Newspapers have day and date
– Dating your web pages lets viewer
know how up-to-date the information
is
Web Design Considerations
Slide 19
Bsc Web Design Stage 1
Where
• Web surfers enter sites from many
different angles and may not enter
by the Home page
– Link all pages in site to the Home page
– Make sure viewer finds out ‘who’ you are
Web Design Considerations
Slide 20
Bsc Web Design Stage 1
Other Design Considerations
•
•
•
•
Bandwidth
Keep it Simple
Be Consistent
Engage the viewer through
interactive content
• Facilitate User Needs
• Graceful Degradation
Web Design Considerations
Slide 21
Bsc Web Design Stage 1
Bandwidth
Considerations
• Research shows that the threshold
for frustration is about 10 seconds
• The general web surfer probably has
a 56K modem at best (this may be
changing!)
Web Design Considerations
Slide 22
Bsc Web Design Stage 1
Simplicity
• Minimise multimedia content
• Simple interface
• Suitable fonts
Web Design Considerations
Slide 23
Bsc Web Design Stage 1
Consistency
• Use a consistent approach
– Titles, subtitles
– Page footers/headers
– Navigational links to home and other
pages
Web Design Considerations
Slide 24
Bsc Web Design Stage 1
Interactivity
• Good websites are interactive
– Order and Payment systems
• Be prepared to respond to viewer’s
comments and queries
– Feedback Forms
– Email contact
– Support forums (FAQ’s)
Web Design Considerations
Slide 25
Bsc Web Design Stage 1
Facilitating User Needs
• Use alternative content for users
who might have disabilities ie using
sound for the visually impaired
Web Design Considerations
Slide 26
Bsc Web Design Stage 1
Graceful Degradation
• This term means that your website
should look good regardless of the
technology of the user
– Don’t design for the ‘best machine
– Design for the ‘average’ viewer
– Do not design for the latest browser or
plug-in technology
– Allow alternatives/choices to viewer
Web Design Considerations
Slide 27
Bsc Web Design Stage 1
The best information
designs are ones the user
does not notice!
Web Design Considerations
Slide 28
Bsc Web Design Stage 1