Website Design What is Involved?. Web Design ConsiderationsSlide 2Bsc Web Design Stage 1 Website Design Involves Interface Design Site Design –Organising

Website DesignWebsite DesignWebsite DesignWebsite Design

What is Involved?What is Involved?

Web Design Considerations Slide 2 Bsc Web Design Stage 1

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)


Interface Design

• How the user interacts with the site• Methods Used:

– Metaphors– Images– Text


… Interface Design

• Your website needs an interface that suits for your target audience

• It must be easy to use• Consistency throughout the site



• 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



• Define an efficient hierarchy of information– This allows users to access what

they want quickly– Minimize the steps needed to reach

it the information


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


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


… … Organising Organising InformationInformation

• 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


Navigation StructureNavigation 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)


… … Navigation 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


… … NavigationNavigation

• DO NOT rely on the ‘built-in’ browser navigation


… 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


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


Print v WebPrint v Web

• Similarities/Differences– Search facility v Indexing– Scanning of Link information v

Titles, Headings etc

• Screen v paper size• Different fonts


Web v Print Documents

• The viewer needs to know who, what, when and where about the document


Who

• Ownership of the page– Profit-seeking enterprise– Individual/Personal– Charitable organisation– Government agency etc


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


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


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


Other Design Considerations

• Bandwidth• Keep it Simple• Be Consistent• Engage the viewer through

interactive content• Facilitate User Needs• Graceful Degradation


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!)


Simplicity

• Minimise multimedia content• Simple interface• Suitable fonts


ConsistencyConsistency

• Use a consistent approach– Titles, subtitles– Page footers/headers– Navigational links to home and other

pages


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)


Facilitating User Needs

• Use alternative content for users who might have disabilities ie using sound for the visually impaired


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


The best information designs are ones the user does not notice!