Graphics and Animation for Web pages

1
Graphics and Animation for Web pages

• Design principles 1

2
Course Introduction

• Essentials
• Toilets - Fire Drill - Security Officer
• Schedule asked to register attendees
• Lunch on Thursday
• 6 voucher can only be used once so please spend
  as close to the full amount of 6. Any overspend
  must be covered by the individual.
• Rendezvous 1930hrs at Flynns?
• Web sites http//mmedia.glos.ac.uk/GAWP
• Also http//computing.glos.ac.uk for interest
• Brief intro to explain background experience of
  web site creation

3
Flynns Montpellier Courtyard

• Red pushpin marks Flynns
• 15 minute walk
• from Campus
• or Hotel

4
Design principles 1

• Users
• Purpose
• Design Principles
• Accessibility
• Usability

5
User needs

• Naïve users
• First time visitor to the site
• May not notice hidden interaction eg hotspots
• May need instructions (better to avoid)
• Experienced users
• May want more excitement / exploration
• May want shortcuts
• Accessibility issues
• Colour blindness, physical impairment
• Dyslexia avoid too much text, long line lengths
• Aids Sticky key, Mouse keys, Sound sentry,
  Serial key devices, voice output

6
Purpose of the product

• Provide information in short passages
• In a kiosk in a public place
• active layout, boxes, rules, white space
• Provide reference material user wants
• encyclopaedia, parts lists, financial data
• info retrieval via keyword, emphasis
• Impart information user doesnt care about
• Customs info, IR, PO
• persuasive colour, KISS
• Guide to user participation
• interactive CBL
• simple instructions, progressive revelation
• Combination
• Services websites critique later
• Unified design with different purposes catered for

7
Introductory Design Principles

• Many suggestions see bibliography
• 4 primary ones as an introduction
• Alignment
• Contrast
• Proximity
• Repetition

• Alignment
• Contrast

8
Design principles - Alignment

• Align every spatial element (block of text,
  image, bullet, button etc) with an edge of some
  other object
• Unify and organise a page/screen
• Even if items are far apart, use a visual
  alignment
• Use the Guides and grid in Photoshop to help
• Avoid unreasoned use of centred alignment
• Feels safe and comfortable, looks formal, sedate,
  old-fashioned and often dull
• Avoid mixing alignments
• eg some centred items plus some right aligned

9
Alignment example
10
Design Principles - Contrast

• Avoid elements on the screen/page which are
  merely similar.
• If the elements (line thickness, colour,
  typeface, font size, images) are not the same,
  then make them different!
• You can add contrast in a variety of ways black
  on white v. white on black ruler lines spatial
  relationships colours etc.

11
(No Transcript)
12
Design grid
Grid imposes visual order but cells can be used
together to Provide longer line lengths for
readability
Grey boxes and text
Mumble mumble mumble mumble mu mumble Mumble mum
mumble mumble mu mumble mumble mu Mumble mumble m
mumble mumble mum mumble Mumble mumble mumble mu
mumble mumble mum Mumble mumble m mumble mumblemum
13
Alignment ex 1
14
Alignment ex 2
15
Photoshop demo/practice

• Design Critique 1 (pairs)
• First steps in developing a graphical website
• Plan the design on paper/Photoshop
• Acquire legal images (in this case take digital
  photos)
• Set up your directory/folder structure
• Decide on screen res.
• Use grids/guides to create a layout
• Put each asset (text/image) in a separate layer
• Decide on fonts/size (graphic text v. html CSS)
• Size each image to suit design
• Save as .psd and .jpg

16
Bibliography

• Anderson R. A. (2006) Exploring the art and
  technology of web design how design principles
  and web design software come together to create
  compelling web sites. Clifton park, NY, Thomson
  Delmar.
• Evans P. and Thomas M.A. (2004) Exploring the
  Elements of Design How design elements and
  design principles work together to create
  effective communication. Clifton park, NY,
  Thomson Delmar.
• Nielsen J. Tahir M. (2001) Homepage Usability
  50 websites deconstructed. New Riders Publishing.
• Vest J, Crowson W. and Pochran S. (2005)
  Exploring web design an in-depth guide to the
  art and techniques of web design. Clifton park,
  NY, Thomson Delmar.
• Williams R. (1994) The Non-Designer's Design
  Book. Berkeley, CA, Peachpit Press.
• Williams R. Tollett J. (2001) Robin Williams
  Design Workshop. Berkeley, CA, Peachpit Press.