Triadic Colors

1. Triadic Colors • Any three color space equally around a color wheel • Offers wide variety of color choices • Group elements into associated groups • Interference between bright colors can create unwanted vibrations

2. Triadic

3. Triadic

4. Color Harmonies Most basic tips: • Use only a few different colors on one page • Use a color harmony schemes • Use hot and cool colors together

5. Color Harmonies

6. Color Harmonies

7. Color and Browsers • Not all colors can be displayed on all devices • Color of text can affect readability • Web-Safe pallet • Monitor Type: CRT vs LCD

8. Browser Safe Colors • Browsers can guaranty only certain number of colors displayed correctly • Referred to as web-safe colors • Previously 216 colors • Currently 4096 colors • Other strategies

9. Typography • Most basic elements of web are words • Section headings, links, blocks of text Typography is arranging text with attention to: • Placement • Size • Font choice

10. Typography

11. Font Size and Ledding • Vertical space between lines controlled ledding • Contributes to readability • Ledding different for each font family

12. Font Size

13. Font Families • Large number of text fonts • Most professional graphic designers uses a small number of fonts • Web has special consideration when it comes to fonts - fine detail

14. Font Families • Typically there are a fixed number of fonts available for the web • Most of them are existing ones which have been redesigned for the web

15. Font Families Times New Roman: Web Typography Georgia:

16. Font Families Sans Serif Fonts Arial: Web Typography Arial Black: Web Typography

17. Font Families Sans Serif Fonts Impact: Web Typography Comic Sans: Web Typography

18. Font Families Script: Web Typography Symbols: WebTpgrahy

19. Fixed Font template <typename T>inline T const & max (T const& a, T const& b){// if a < b then use b else use a if (a < b) { return b; else return a;} template <typename T>inline T const & max (T const& a, T const& b){// if a < b then use b else use a if (a < b) { return b; else return a;}

20. Line Spacing • Too much line spacing makes text harder to read • Too little, and the text runs together • Plain HTML not possible to create true ledding • CSS offers ledding control (“line spacing”)

21. Line Spacing A book could take that blow, but it sinks an essay. A biography in two volumes is indeed the proper depository; for there, where the license is so much wider, and hints and glimpses of outside things make part of the feast (we refer to the old type of Victorian volume), these yawns and stretches hardly matter, and have indeed some positive value of their A book could take that blow, but it sinks an essay. A biography in two volumes is indeed the proper depository; for there, where the license is so much wider, and hints and glimpses of outside things make part of the feast (we refer to the old type of Victorian volume), these yawns and stretches hardly matter, and have indeed some positive value of their A book could take that blow, but it sinks an essay. A biography in two volumes is indeed the proper depository; for there, where the license is so much wider, and hints and glimpses of outside things make part of the feast (we refer to the old type of Victorian volume), these yawns and stretches hardly matter, and have indeed some positive value of theirA book could take that blow, but it sinks an essay. A biography in two volumes is indeed the proper depository; for there, where the license is so much wider, and hints and glimpses of outside things make part of the feast (we refer to the old type of Victorian volume), these yawns and stretches hardly matter, and have indeed some positive value of their

22. Letter Spacing Increase spacing between letters: • Increases length • Impact • Visual Appeal

23. Letter Spacing THE TWO TOWERS T H E T W O T O W E R S

24. Text as Shapes

25. Capitalization

26. Antaliased Text

27. Writing for the Web • People then to read on web by scanning • Few read word by word • People read 25% more slowly • Users are impatient • Credibility is important

28. Writing for The Web

29. Writing for The Web

30. Writing for The Web

31. Writing for The Web

32. Writing for The Web

33. Inverted Pyramids Reformat text to be more like newspaper article: • Point of article in first paragraph • Start with conclusion • Use rest of text to expand first paragraph

34. Performance • Important to usability • Sites that are slow drives away users • Interruptions • System response • Want predicable response times

35. Performance

36. Multimedia Refers to combination of two or more media types: • Text • Audio • Graphics • Animation • Very effective

37. Audio Supplement web page by adding: • Speech • Music • Sounds • Used as alternative presentation • Inform users of events

38. Audio File Formats

39. Streaming Media • Media is streamed to buffer • Starts playing as soon as buffer is full • Opposed to non-streaming: plays when fully downloaded • Increased performance and response time

40. Streaming

41. Download

42. Video • Appealing medium • Combines animation and audio • Can be very large • May not compress very well

43. Video Formats

44. Animation • Synthetic motion create through artificial means • Viable alternative to video • Can be demonstrations or tutorials • Dynamically generated • Interactive

45. Animation • Animated GIF • Javascript • Java • Vector animation: Flash, SVG • Shockwave • 3D

46. Raster vs Vector • Vector: items drawn with lines • Smooth • Scaled very well • Cannot be filled with multiple colors • Raster: pixel based • 3D shading

47. Raster vs. Vector Raster

48. Raster vs. Vector Vector

49. Informing the User • Provide information to user • Inform of potential load/play times • Required plugins

50. Multimedia Information