University of Sunderland CDM105 Session 2

Web AuthoringWeb Authoring

Web Design

The main principles and the main guru

University of Sunderland CDM105 Session 2

The art of Web designThe art of Web design

• "Good Web design is something that has to be practised and mastered. While it's easy to pick up the rudiments of putting a Web page together, creating a cohesive, easy to use site is a different matter entirely. The essential questions are: can it be seen anywhere by anyone?" Computer Arts Special, Issue 10, 2000

• ………..then, will they like it enough to come back?

University of Sunderland CDM105 Session 2

Why should I consider Why should I consider design when I produce a design when I produce a

Web site?Web site?• ‘The user is all’

• You might like the site but if nobody else does nobody will visit

• To make users return again and again...

University of Sunderland CDM105 Session 2

But surely it's just a But surely it's just a question of personal question of personal

taste?taste?• Yes

– But it must also appeal to as many of the target audience as possible

– Using Web research may improve your site making people return to it

Remember, normally a ‘client’ is paying forthe Web site so their views may over-ride alldesign decisions

University of Sunderland CDM105 Session 2

Form Form versus Function Function

• Originally, HyperText Markup Language (HTML) was designed to only show the structure of a document without much regard to its meaning or presentation– e.g. many academic/research web sites which

where text based and simply communicated data

University of Sunderland CDM105 Session 2

Design Aims

Typographic aims

Visual Layout

Useable

Indexable

Searchable

Maintainable

Designers Structuralists

Form Form versus Function Function

University of Sunderland CDM105 Session 2

StructuralistsStructuralists

• Validated HTML– Conforms to agreed W3C standards

• Benefits– Search engines– Helps special needs users view the web – i.e. visually impaired people– permits users to turn off images

University of Sunderland CDM105 Session 2

DesignersDesigners

• Want to be able to create an online experience– they have worked previously in

television, CDROM development and time-based events

– aim to create online galleries, games, movie sites

i.e. web sites that grab people’s attention andgive them a good time …. then they will return

University of Sunderland CDM105 Session 2

Web BrowsersWeb Browsers

• Web browsers permit the end user to change the appearance of the page– e.g. change the default font size

• Different browsers may display pages slightly differently or may not support certain advanced features– Netscape, Internet Explorer, Opera

• Different platforms support different multimedia formats– Windows, UNIX, OS X (Mac)

Additional difficulties in web design

University of Sunderland CDM105 Session 2

So, what makes a So, what makes a 'good' Web site?'good' Web site?

• The main design issue is:

– Navigation– This should be largely intuitive– Try to include a menu bar which is always

visible on every page– If user jumps into the middle of the site it

should be apparent as to where they are and what the bigger picture is.

University of Sunderland CDM105 Session 2

• Download Speed– The most important aspect of design at the current time.

• Interactivity– Can make the site more interesting

– Avoid bells and whistles which add little !

• Predictability– e.g. The menu bar is always in the same place

• Consistency– e.g. use the icons/menu bar on each page

So, what makes a So, what makes a 'good' Web site?'good' Web site?

Other important design issues are:

University of Sunderland CDM105 Session 2

Design StagesDesign Stages

1 - Conceptualise: Define Goals

2 - Plan: Outline site from the start

3 - Design: Creating a coherent structure

4 - Implement: Develop the HTML

5 - Evaluate: Does the site meet the original specification?

6 - Maintain: Step 1 to 5 forever !

University of Sunderland CDM105 Session 2

Web site structuresWeb site structures

• Consider purpose of site before choosing structure

• An overview four types of structures– Sequence– Grid– Hierarchy– Web

University of Sunderland CDM105 Session 2

SequenceSequence

Simplicity- Basic content- Used often for training

Start End

University of Sunderland CDM105 Session 2

GridGrid

No obvious start or end butthey may exist !

Sometimes used witheducated audiences

University of Sunderland CDM105 Session 2

HierarchyHierarchy

Some structurei.e. a menu to a number of sequences

Menu/Start

End of Unit

End of Unit

End of Unit

End of Unit

University of Sunderland CDM105 Session 2

WebWeb

Non-linearFlexible be often confusing

No obvious start or end butthey may exist !

University of Sunderland CDM105 Session 2

Machine Based TutorialMachine Based Tutorial• The tutorial session again requires you to read over web

based materials and complete the exercises contained within them

• In the machine based tutorial session you will learn how to add multimedia assets to web pages.

• Then you will review the issues surrounding web design and then learn how to control the layout of web pages using the TABLE constructs and then experiment with web FRAMES.

• You will also learn about the Web Guru – Jakob Nielsen - of the last few years by looking at his web site on web design http://www.useit.com/

• You should aim to complete the machine based tutorial session 2 before the next lecture.