1. Web Design

2. 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
Support user controlled navigation, not be harsh and dominating, logo linked to home page on every page

3. 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

4. Design Principles Useable Accessibility Colour Layout
Predictability / Consistency / Guidance not control
Economy - Minimum number of steps necessary
Accessibility
Making it available to all
User Friendly
1.      Easy to start
2.      Self-contained,
3.      Quick access.
4.      Always appear friendly to the user.
5.      The user should know what to do and when to do it, why they are doing it, and how they do it at every stage.
6.      Minimum of Effort to complete the task,
7.      Robust,
8.      On Screen Help Available.
9.      Re-configurable, e.g. Colour, Fonts
10.  Use of WYSIWYG where possible
Internally transparent to the user/ Autoexec macro
1.      All internal mechanisms should be transparent to the user, as this could distract or confuse them.
Guidance not control
1.      Simplified Choices
2.      Validation of data is important, so a screen should be designed so the user can’t make a mistake.
Predictability
1.      All actions should be predictable to the user
2.      Every response should be acknowledged
Reversibility
1.      Dangerous responses should be queried e.g. Are you sure?
2.      Good Recovery From Error.
Consistency
1.      Intuitive to Use
2.      Screen Layout should be consistent. Headings should always be at the top, and instructions should always be in the same place.
3.      Consistent in responses.
Reduces learning load
1.      Cramped or crowded screens should be avoided. The screen should only contain the information needed for the current task..
2.      Users should not be expected to remember chunks of information from one screen to the next.
3.      Use Clear and Concise Wording. Jargon should be avoided in all messages. Messages should also be constructive. They should tell the user exactly what to do i.e. ‘Enter your surname here’ or ‘Press to continue’. They should use the same word or picture for the same thing throughout the system, e.g. Just ‘Exit’ not ‘Quit’, ‘Leave’, ‘Back’
Increases recognition
1.      If a form is represented on the screen, it should follow the same layout as a paper-based version
2.      Items that are grouped should be kept near together on the screen.

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

6. 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

7. Rough example

9. Advantages and Disadvantages of Storyboards
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!)

10. Designing a template Gets your style sheet sorted
Build with rubbish content – just for page layout

11. 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
Note some double arrows and some single – can use no arrows for double arrows as well
About Us
Company info
Products

12. Multi-Dimensional Map
Home
Latest
Offers
Map
Products
Company
Using levels – any on the second level can be got from home page and any other on that level. Any on cd level can only be got from that level and from products
Menu, sub menu structure
DVD CD

13. Design Aspects -Colour

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

15. 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.

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

17. As seen by a person with deuteranopia.
Colour Blindness
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
Negative presentation – dark background, white text.
Bright colours can be too much in blocks. Consider panels

19. Panels
Not the best design but shows blocked panels of similar content. Using pastels instead of white. Note white strip – fixed width page.

20. Fonts

21. 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 difficult to read, and should be avoided.
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

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".
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
If you change the size of the text in the browser from normal to large the page should still be readable and the font size should change