1. Universal Design for Learning & Principles of Web Design C. Candace Chou

2. UDL How we gather facts and categorize what we see, hear, and read. Identifying letters, words, or an author's style are recognition tasks. Planning and performing tasks. How we organize and express our ideas. Writing an essay or solving a math problem are strategic tasks. How learners get engaged and stay motivated. How they are challenged, excited, or interested. These are affective dimensions. http://www.cast.org/udl/index.html

3. Principle I: Provide Multiple Means of Representation 1. Provide options for perception 2. Provide options for language, mathematical expressions, and symbols 3. Provide options for comprehension

4. Principle II. Provide Multiple Means of Action and Expression 4. Provide options for physical action 5. Provide options for expression and communication 6. Provide options for executive functions

5. Principle III. Provide Multiple Means of Engagement 7. Provide options for recruiting interest 8. Provide options for sustaining effort and persistence 9. Provide options for self- regulation

6. Learn More About UDL http://udlonline.cast.org/home

7. Basics of Web Design Simplicity and consistency Standard HTML Content and navigation Organization Typography Web-safe Color Accessibility http://webstyleguide.com/

8. Essential Information An informative title The creator’s identity (author or institution) A creation or revision date At least one link to a local home page The “home page” URL on the major menu pages in your site Source: Lynch, P & Horton, S (1999), Web Style Guide. Yale University Press.

9. Document Design

10. Selective Display

11. Rule of Thumb Use careful layouts of text and links with relatively small graphics Web page graphic should not be more than 535 pixels wide or more than about 320 pixels high (within letter size paper) Browser safe area: 600 x 350

12. Visual Design - Consistency

13. Contrast

16. White Space

17. Leave 20% white space. Use shorter paragraphs Avoid heavy lines. ( example) example)Layout

19. Researchers have noted the disorientation that results from scrolling on computer screens

20. Optical Center The viewer will tend to focus at the screen’s optical center, located slightly above the center of the screen. Tend to locate objects at this optical center

21. CENTER OF INTEREST Focal point

22. CENTER OF INTEREST Focal point

23. CENTER OF INTEREST NOT Focal point NOT

24. Rule of Thirds Divide the screen into thirds horizontally and vertically Place focus of interests on the four intersections

25. Rule of Thirds Upper right position See full shadow and tracks

26. Fonts T T Serif fonts have thin lines and feet. Sans-serif fonts have even lines and NO feet.

27. Fonts T T Serif fonts are easier to read in print media. Sans-serif fonts are more legible in projected media.

28. Fonts Helvetica Geneva Arial Sans-Serif Times Palitino Courier Serif

29. Readability of Fonts This is a serif font (Times) –Can you read this easily? Do the letters all run together? Would you like to see an entire screen full of this? This is Times 18-points This is a sans-serif font (Arial) –Which is easier to read, this text block or the block above? In general, sans-serif fonts look better on computer monitors. This is Arial 18-point.

30. Legi bility Use sans-serif for headers. Use sans-serif for projected visuals. Use at 18 points for projected visuals. Change preferences in web browsers.

31. Use serif font for lots of printed text. Use 12 points for adult learners. Use 14 for children & special needs. Readability

32. Use ragged right justification. Avoid centering. Avoid full justification. Avoid italic fonts, look awful in small fonts Readability

33. DON’T USE ALL CAPS FOR LARGE BLOCKS OF TYPE. READERS READ FASTEST WHEN SENTENCES ARE PRINTED IN UPPER AND LOWER CASE - THE WAY THEY NORMALLY ARE SEEN IN PRINT. HEADLINES ARE SET IN ALL CAPS BECAUSE THEY REQUIRE THE READER TO SLOW DOWN, GIVING EMPHASIS TO A FEW WORDS. WASN’T THIS BLOCK OF ALL CAPS DIFFICULT TO READ?

34. Don’t use all caps for large blocks of type. Readers read fastest when sentences are printed in upper and lower case - the way they normally are seen in print. Headlines are set in all caps because they require the reader to slow down, giving emphasis to a few words. Wasn’t this better? Compare

35. Single Concept

36. Color Use color to enhance your presentation. Avoid more than 5 colors on one slideAvoid more than 5 colors on one slide

38. http://www.lighthouse.org/accessibility/design/ac cessible-print-design/effective-color-contrast Choose dark colors with hues from the bottom half of this hue circle against light colors from the top half of the circle.

39. Avoid contrasting hues from adjacent parts of the hue circle, especially if the colors do not contrast sharply in lightness.

43. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country.

44. BEST LEGIBILITY for text ------------------------------------------------------------------------ black text on a white background dark green text on a white background dark blue text on a white background brown text on a white background. green text on red background red text on green background green text on blue background WORST LEGIBILITY for text ------------------------------------------------------------------------

45. BEST VISIBILITY to attract attention but not for large blocks of text text black on orange red on white dark blue on yellow white text on purple Source: http://library.thinkquest.org/50065/psych/effects.html

46. Background WhiteorYellowWhiteorYellow Red or Black Red or Black

47. Trial Run Check out your visuals in your presentation room. Make sure that everyone can read! Never be caught having to APOLOGIZE!

48. Web Resources Web Style Guide, 3 rd edtion, http://webstyleguide.com/wsg3/index.htmlWeb Style Guide, 3 rd edtion, http://webstyleguide.com/wsg3/index.html Web page design for designers, http://www.wpdfd.com/ Universal design for learning, http://www.cast.org/udl/index.htmlUniversal design for learning, http://www.cast.org/udl/index.html