Aspects of Web Design Introduction

1
Aspects of Web DesignIntroduction
2
Staff involved with the module
3
Format

• Lecture slots
• 1.00pm Queens 4.2
• Practical sessions
• Time to be arranged
• Optional
• Worksheets on the web or work on your assessment
  design tasks

4
Aims of the Module

• By the end of the module you will be able to
• Show competence in a web authoring application
• Have an understanding of HTML, XHTML and CSS
• Be aware of www standards and their significance
• Understand the fundamental principles of
  usability
• Design, construct and maintain a complete website

5

• No experience in design expected

just an interest in it.
6
Applications covered

• MS Windows XP PC operating system
• Clearly most common OS (Vista lagging)
• Everyone knows how to start applications and save
  and print work BUT
• Essential that everyone is competent with
  creating folder structures, relative and absolute
  file locations, file types, file manipulation and
  other relevant skills

7
Applications covered

• Notepad simple text editor
• Most already familiar with code, but some may
  need to recap
• Essential that everyone is comfortable creating
  HTML, XHTML and CSS file using a text editor

8
Applications covered

• Adobe Dreamweaver 8 - webpages
• Has become the industry standard
• Latest version (CS3) not available on University
  machines, but does not offer features we would
  use
• Essential that everyone can demonstrate
  competence with Dreamweaver

9
Other applications

• MS Word wordprocessor
• DO NOT USE FOR WEBPAGES!
• Often does not generate standards-compliant
  mark-up
• Erratic behaviours, messy mark-up
• Fine for paper-version of essay and critique

10
Other applications

• MS Frontpage webpages
• DO NOT USE FOR ANYTHING!
• Often does not generate standards-compliant
  mark-up
• Erratic behaviours

11
Other applications

• Adobe Illustrator vector graphics
• Industry standard drawing application
• Steep learning curve
• Fantastic tool for creating original graphics for
  your pages

12
Other applications

• Adobe Photoshop bitmap graphics
• Industry standard painting application
• Very powerful but with an acceptable learning
  curve
• Use it to create, edit and manipulate bitmap
  graphics for your pages
• Hundreds of tutorials available, eg
  http//photoshopcontest.com/tutorials/26/displacem
  ent-water.html

13
Topics Covered

• Psychology of Design
• The study of the way in which we interact with
  our surroundings, eg Miller, G A (1956)
• The Magical Number Seven, Plus or Minus Two
  Some Limits on our Capacity for Processing
  Information
• Usability
• The work of Jacob Nielsen et al, accessibility
  and the DDA
• Design Process
• Some techniques that make web design and
  subsequent maintenance easier and more efficient
  structure, standards, best practice

14
Assessment (details to be confirmed)

• Paper to Web
• Create an XHTML web page from a paper based
  leaflet of your choice
• Provide a critique of your work highlighting the
  issues of browser page layout
• Design Task
• Design a website on an academic topic of your
  choice
• Provide a 2000 word critique of the website to
  include your rationale, the process of its
  creation, its navigational and technical features

15
Workload Module assessment
Paper-to-Web Design Task

• highlights problems of page layout
• Not enough to just scan it in!!
• Compromises need to be made difficulty of going
  from paper to web

16
Workload Module assessment
Web Design Project

• Emphasis on Usability
• Demonstrate technical competence
• Very useful for your CV / Portfolio evidence of
  practical skills

17
Recommended books
D S McFarland (2006) Dreamweaver 8 The Missing
Manual 22.39 (Amazon) (reference copy in CMIT
office) Note - The practicals presume you have
a copy.
18
Recommended books
D S McFarland (2006) Dreamweaver 8 The Missing
Manual 22.39 (Amazon) (reference copy in CMIT
office) Note - The practicals presume you have
a copy.
19
Recommended books
Jakob Nielsen (1999) Designing Web
Usability from 33.24 (Amazon) Widely regarded
as canonical text on the subject, dated but
thoroughly relevant (copies in
Library, reference copy in CMIT office)
20
Recommended Books
Jennifer Niederst (2003) Learning Web Design A
Beginners Guide to HTML, Graphics and
Beyond 19.95
Good all round text
(reference copy in CMIT office)
21
Recommended books
Jakob Nielsen, Hoa Loranger (2006) Prioritizing
Web Usability 30.59 (Amazon) Update to
Nielsen (1999) (reference copy in CMIT
office)
22
Recommended books
Jakob Nielsen Marie Tahir (2001) Homepage
Usability from 29.44 (Amazon) Dated but very
relevant (copy in Library)
23
Recommended journals
Computer Arts University Library P 001.6405
C30 Graphics World University Library P
705 G18
24
Any general books on graphic design are useful.
25
Any general books on web design are useful.
26
Sites to inspire you and learn from
http//www.w3csites.com/
Lists sites that are W3 compliant - i.e.

• good models of
• style
• HTML practice
• navigation

Look at it to inspire you and give you examples.
27
Information

• CMIT web pages
• http//www.ex.ac.uk/cmit
• Student handbook
• Details of assessment
• Lecture slides
• Practical worksheets
• email list
• cmit-webdesign_at_exeter.ac.uk

28
Those Photoshop images again(from
http//photoshopcontest.com/tutorials/)