PPT by Susanne Keene adapted by Kevin Flude. Class 2: Agenda. ▫ Before you
begin. ▫ Setting up a website. ▫ Basic design. ▫ Accessibility by Donna Haugh.
Simple principles for website (and other) design
PPT by Susanne Keene adapted by Kevin Flude
Class 2: Agenda
Before you begin Setting up a website Basic design Accessibility by Donna Haugh Project planning will be discussed at a later class
PPT by Susanne Keene adapted by Kevin Flude
Before you begin
PPT by Susanne Keene adapted by Kevin Flude
Planning your website
Project Planning will be discussed in detail in another session In the mean-time look at: The Web Styleguide http://www.webstyleguide.com/process/index.html
PPT by Susanne Keene adapted by Kevin Flude
Equipment
Computer – where the pages are created Internet Connection
Broadband Dialup
Web Host – where the pages are kept
PPT by Susanne Keene adapted by Kevin Flude
Web host
Internet Service Provider (ISP) Connect to the Web and create pages on:
Home pages Blog (www.blogspot.com) Wiki (www.pbwiki.com) Groups (Groups - yahoo.com) Facebook or Myspace (etc.) PPT by Susanne Keene adapted by Kevin Flude
Web host
Hosting Service
Page copied from your computer To the Host computer by a file transfer programme
FTP
Eg http://www.smartftp.com/ (free)
PPT by Susanne Keene adapted by Kevin Flude
Web Page Creation
HTML
Dreamweaver Open Office Acehtml – free html editor
CONTENT MANAGEMENT SYSTEM
PPT by Susanne Keene adapted by Kevin Flude
Web Server
Or the Web Host can be on your own computer acting as a Web Server
Complicated Expensive Needs professional staff
PPT by Susanne Keene adapted by Kevin Flude
1st Principles
PPT by Susanne Keene adapted by Kevin Flude
3 Principles
Know Your Audience Design the Web Site So It Can Be Found
There is no point having a good web site if no one can find it!
In some cases content is as important as design PPT by Susanne Keene adapted by Kevin Flude
Domain Name
Choose a Domain Name Something unique that can be remembered and found
www.bbc.co.uk www.bm.ac.uk www.vam.ac.uk? Google, Yahoo, YouTube
PPT by Susanne Keene adapted by Kevin Flude
Google Friendly
Make sure key search terms are in:
URL www.bm/ac.uk/archaeology Title: 'Archaeology at the British Museum' In the First Paragraph In the meta tags
meta name="description" content="Archaeology in the British Museum"> PPT by Susanne Keene adapted by Kevin Flude
Link Friendly
High Page Rank
Maximise relevant incoming links
PPT by Susanne Keene adapted by Kevin Flude
Market the Web Site
On leaflets Emails Letters Publicity Press Releases Collaborators
PPT by Susanne Keene adapted by Kevin Flude
Check the marketing
Analysis the web site statistics
Aim
- to be discussed another time Number 1 on Google search page Or on first page of Google
Buy a place?
PPT by Susanne Keene adapted by Kevin Flude
Simple principles for website (and other) design
PPT by Susanne Keene adapted by Kevin Flude
4 main factors
Proximity Alignment Repetition Contrast
and Colour
PPT by Susanne Keene adapted by Kevin Flude
Proximity
PPT by Susanne Keene adapted by Kevin Flude
Proximity
Objects close together become a visual and conceptual unity
Items relating to each other should be grouped: if not related, separated
Notice how your eye travels on the page (squint at it) PPT by Susanne Keene adapted by Kevin Flude
Proximity Anne Smith
020 7679 2010
Better Websites
Better Websites 126 Langer Rd
London W14
Anne Smith 126 Langer Rd, London W14 020 7679 2010
PPT by Susanne Keene adapted by Kevin Flude
Proximity - more e-conomy innovations internet museum higher ed. education library Europe how-to conferences articles, e-news books links pages grants gov’mt. reports
Topics
Topics
e-conomy innovations internet
e-conomy innovations internet
Organisations museum higher ed. education library Europe
Resources how-to conferences articles, e-news books links pages grants gov’mt. reports
Organisations museum higher ed. education library Europe
Resources how-to conferences articles, e-news books links pages grants gov’mt. reports
PPT by Susanne Keene adapted by Kevin Flude
Alignment
PPT by Susanne Keene adapted by Kevin Flude
Alignment
The simplest way towards a neat page
Nothing should be placed arbitrarily: everything should be related to something else
PPT by Susanne Keene adapted by Kevin Flude
Alignment Better Websites
Better Websites
Anne Smith 126 Langer Rd, London W14 020 7679 2010
Anne Smith
020 7679 2010
Better Websites 126 Langer Rd
Anne Smith 126 Langer Rd, London W14 020 7679 2010
London W14
Better Websites Anne Smith 126 Langer Rd, London W14 020 7679 2010
PPT by Susanne Keene adapted by Kevin Flude
Alignment Better Websites
Better Websites
Anne Smith 126 Langer Rd, London W14 020 7679 2010
Anne Smith
020 7679 2010
Better Websites 126 Langer Rd
Anne Smith 126 Langer Rd, London W14 020 7679 2010
London W14
Better Websites Anne Smith 126 Langer Rd, London W14 020 7679 2010
PPT by Susanne Keene adapted by Kevin Flude
Alignment Better Websites Better Websites
Better Websites
Anne Smith 126 Langer Rd, London W14 020 7679 2010
Anne Smith 126 Langer Rd, London W14 020 7679 2010
Better Websites Anne Smith 126 Langer Rd, London W14 020 7679 2010
PPT by Susanne Keene adapted by Kevin Flude
Alignment Better Websites Better Websites
Better Websites
Anne Smith 126 Langer Rd, London W14 020 7679 2010
Anne Smith 126 Langer Rd, London W14 020 7679 2010
Better Websites Better Websites Better Websites Anne Smith 126 Langer Rd, London W14 020 7679 2010
Anne Smith 126 Langer Rd, London W14 020 7679 2010
PPT by Susanne Keene adapted by Kevin Flude
Alignment To centre? Living Daylights Living Daylights Poems from my misspent youth
Blah blah blah blah blah blah blahblah blah
Poems from my misspent youth
Blah blah blah blah blah blah blahblah blah PPT by Susanne Keene adapted by Kevin Flude
Living Daylights Poems from my misspent youth
Blah blah blah blah blah blah blahblah blah
Repetition
PPT by Susanne Keene adapted by Kevin Flude
Repetition
= consistency Repeat a distinctive design element throughout the piece Allows a user to know where to expect to find things
PPT by Susanne Keene adapted by Kevin Flude
Contrast
PPT by Susanne Keene adapted by Kevin Flude
Contrast: 4 elements
Typeface
Size
Weight
Colour
PPT by Susanne Keene adapted by Kevin Flude
Contrast: typeface
Serif – easiest to read blocks of text
Sans Serif – good for headlines
Script- use with care and large!
Decorative- be very careful! PPT by Susanne Keene adapted by Kevin Flude
Contrast: Size
Typeface
Size
Weight
Colour PPT by Susanne Keene adapted by Kevin Flude
Contrast: Colour
Typeface
Size
Weight
Colour
PPT by Susanne Keene adapted by Kevin Flude
Contrast: 1 Rule
Keep it Simple
1 Headline Font 1 body font
If you break the Rule:
PPT by Susanne Keene adapted by Kevin Flude
contrast: the rule Break
it Boldly Then they know you meant it! PPT by Susanne Keene adapted by Kevin Flude
An Afterthought
Usability should not be one
PPT by Susanne Keene adapted by Kevin Flude
Text: simple rules
Avoid long lines of text Use margins Write concisely – short interesting points Sans serif for short punchy text Serif for longer sections PPT by Susanne Keene adapted by Kevin Flude
Design for Usability
PPT by Susanne Keene adapted by Kevin Flude
Design for Usability
'The idea is that, no matter what you're doing, there's a user-centered way of doing it. Users should be considered throughout the website design process.'
http://www.usabilityfirst.com/websites/index.txl
PPT by Susanne Keene adapted by Kevin Flude
Design for Usability
Without a big development team how do you achieve usability?
1. Use a simple clear design 2. Seek good web sites – see how they do it and emulate them 3. Web site navigation is beginning to become more standardised – use those standards.
PPT by Susanne Keene adapted by Kevin Flude
Design for Usability
Some Examples: http://www.thecreationmuseum.org/ http://www.recoveredhistories.org/index.php http://www.screenonline.org.uk/tours/index.html http://www.featherstone-associates.co.uk/
http://www.christies.com/home_page/home_page.asp
PPT by Susanne Keene adapted by Kevin Flude
Design for Usability
PPT by Susanne Keene adapted by Kevin Flude
Design for Usability
PPT by Susanne Keene adapted by Kevin Flude
Design for Usability
Some Examples: http://www.thecreationmuseum.org/ http://www.recoveredhistories.org/index.php http://www.screenonline.org.uk/tours/index.html
PPT by Susanne Keene adapted by Kevin Flude
Design for Usability
PPT by Susanne Keene adapted by Kevin Flude
Design for Usability
PPT by Susanne Keene adapted by Kevin Flude
Contrast
PPT by Susanne Keene adapted by Kevin Flude
Colour
PPT by Susanne Keene adapted by Kevin Flude
Colour http://www.colorschemer.com/schemes/
PPT by Susanne Keene adapted by Kevin Flude
Colour
Colour
hue = what colour is it? saturation = vivid or faint? chroma = pure colour or chalkey/grey? colour wheel Tate Amazon PPT by Susanne Keene adapted by Kevin Flude
