Web Design

Why is design important for the web?

 Traditional systems  You controlled the user  You know exactly who you are designing for  You know the exact screen spec  Web Pages….

 You don’t know how they got there – via home page or direct  Search Engines  Bookmarks

Planning the site..

     Design your site What are your goals for the site? Who is the audience for the Web site? Is a web site useable  If its not, then it will not attract visitors How will you measure the success of your site?  Consider the purpose of the site  Test the site with users

Design Principles

 Useable  Colour  Layout  Predictability / Consistency / Guidance not control  Economy - Minimum number of steps necessary  Accessibility  Making it available to all

Web Page Design

 Storyboards / screen mockups  Flow Charts / Page linkage

Storyboards

 A4 piece of paper, pen, Post-it Notes  PowerPoint with notes view on  Needs details of fonts, sizes, style sheet, pictures, text  Should be able to pass it to someone else and they build it

Rough example

Advantages and Disadvantages of Storyboards

 Advantages  Paper based so quick to draw  Application independent  Little or no skills required !

 Disadvantages  Does not provide a realistic front end  Does not provide full functionality  Difficult to change (rub out!)

Designing a template

 Gets your style sheet sorted  Build with rubbish content – just for page layout  http://www.soc.staffs.ac.uk/flk1/test/test.htm

A web site map / Flow chart

   Drawn by hand / Done On Computer Shows navigation through the web site Can end up being a spiders web mess Home About Us Company info Products

Multi-Dimensional Map

Home Products Company Map CD DVD Latest Offers

Design Aspects Colour

2006

January 2006 July 2005 January 2005 July 2004 January 2004 July 2003 January 2003 October 2002

Colour

16,777,216

81% 77% 72% 69% 65% 55% 51% 49%

65,536

16% 20% 25% 28% 31% 40% 44% 46%

256

3% 3% 3% 3% 4% 5% 5% 5% Source: W3 Schools

Colour and Design

    Colour is very effective for highlighting, but must be used carefully.

Don’t use too many colours on one screen Be consistent across the whole system  one colour should not be used for more than one purpose.

Colours which clash should be avoided e.g. purple with pink.

Colour Blind

 Care should be taken as 1 in 12 men and 1 in 200 women are colour blind.

Colour Blindness

  http://www.vischeck.com/ http://www.iamcal.com/toys/colors /index.php

Hats.

As seen by a person with deuteranopia.

As seen by a person with protanopia, another form of red/green deficit.

Presentation And Contrast

   Positive presentation is when the background is fairly subdued, i.e. white background, dark text Negative presentation – dark background, white text.

Bright colours can be too much in blocks. Consider panels

Panels

Fonts

Type Face

       Font Size to be readable - clear and not unusual Use default or range of fonts as the default Don’t use more than 2 fonts on a page (unless you are displaying computer code then a third font is ok) Some fonts can be should be avoided.

difficult to read , and Left Justified most of the text – can centre or right justify a few lines for effect Contrast foreground to background Avoid blinking, zooming or moving text

Mac or PC – spacing and fonts..

Font size

  W3C recommends that you let users set the base font size in their browser and that you set all sizes using "em". Using em, if the user-set default is 12-point, then a 2-em text indent would be 24-point, but if the user used the text zoom feature of the browser to change the size to 16 point, the indent would change to 32 point.

Browser font size..

http://www.soc.staffs.ac.uk/flk1/test/font.htm