1. Web Design

2. Why is design important for the web? Traditional systems Traditional systems You controlled the user You controlled the user You know exactly who you are designing for You know exactly who you are designing for You know the exact screen spec You know the exact screen spec Web Pages…. Web Pages…. You don’t know how they got there – via home page or direct You don’t know how they got there – via home page or direct Search Engines Search Engines Bookmarks Bookmarks

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

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

5. Web Page Design Storyboards / screen mockups Storyboards / screen mockups Flow Charts / Page linkage Flow Charts / Page linkage

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

7. Rough example

9. Advantages and Disadvantages of Storyboards Advantages Advantages Paper based so quick to draw Paper based so quick to draw Application independent Application independent Little or no skills required ! Little or no skills required ! Disadvantages Disadvantages Does not provide a realistic front end Does not provide a realistic front end Does not provide full functionality Does not provide full functionality Difficult to change (rub out!) Difficult to change (rub out!)

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

11. A web site map / Flow chart Drawn by hand / Done On Computer Drawn by hand / Done On Computer Shows navigation through the web site Shows navigation through the web site Can end up being a spiders web mess Can end up being a spiders web mess Home Company info About Us Products

12. Multi-Dimensional Map Home Products Company Map Latest Offers CD DVD

13. Design Aspects - Colour

14. Colour Source: W3 Schools200616,777,21665,536256 January 2006 81%16%3% July 2005 77%20%3% January 2005 72%25%3% July 2004 69%28%3% January 2004 65%31%4% July 2003 55%40%5% January 2003 51% 44%5% October 2002 49%46%5%

15. Colour and Design Colour is very effective for highlighting, but must be used carefully. Colour is very effective for highlighting, but must be used carefully. Don’t use too many colours on one screen Don’t use too many colours on one screen Be consistent across the whole system Be consistent across the whole system one colour should not be used for more than one purpose. one colour should not be used for more than one purpose. Colours which clash should be avoided e.g. purple with pink. Colours which clash should be avoided e.g. purple with pink.

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

17. Colour Blindness http://www.vischeck.com/ http://www.vischeck.com/ http://www.vischeck.com/ http://www.iamcal.com/toys/colors /index.php http://www.iamcal.com/toys/colors /index.php http://www.iamcal.com/toys/colors /index.php 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.

18. Presentation And Contrast Positive presentation is when the background is fairly subdued, i.e. white background, dark text Positive presentation is when the background is fairly subdued, i.e. white background, dark text Negative presentation – dark background, white text. Negative presentation – dark background, white text. Bright colours can be too much in blocks. Consider panels Bright colours can be too much in blocks. Consider panels

19. Panels

20. Fonts

21. Type Face Font Size to be readable - clear and not unusual Font Size to be readable - clear and not unusual Use default or range of fonts as the default 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) 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 difficult to read, and should be avoided. Some fonts can be difficult to read, and should be avoided. Left Justified most of the text – can centre or right justify a few lines for effect Left Justified most of the text – can centre or right justify a few lines for effect Contrast foreground to background Contrast foreground to background Avoid blinking, zooming or moving text Avoid blinking, zooming or moving text

22. Mac or PC – spacing and fonts..

23. Font size W3C recommends that you let users set the base font size in their browser and that you set all sizes using "em". 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. 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.

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