1. Date : 01/09/2014 The Web as Multimedia – Text and Images

2. “In most people’s vocabularies, design means veneer. It’s interior decorating. It’s the fabric of the curtains and the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a man-made creation that ends up expressing itself in successive outer layers of the product or service.” – Steve Jobs, Fortune magazine 2000, quoted in The Guardian Thoughts on Design

3. Tonight ✤ Recap ✤ Web technologies ✤ Text and Images ✤ Some basics ✤ Lab : Deconstructing a book site

4. Recap

6. Hypermedia Links, Nodes, Anchors, Navigation

7. Web Tech : Alphabet Soup Clients & Servers Protocols HTTP FTP Languages HTML4 & HTML5 XML Javascript & jQuery CSS Flash Scripts

8. What Is A Web App?

9. How Web Apps Work Client (browser) Visual logic and interface Web Server (Apache, IIS) and Middleware (php,.net, ruby) Database (MySQL, SQL Server) Content

11. Type and Typefaces A typeface is a family of graphic characters, often with many type sizes and styles. A font is a collection of characters of a single size and style belonging to a particular typeface family. Styles : bold, italic, underline, strike-through

12. Font Sizes, Serif and SanSerif  Font size is measured in points or pixels.  Kerning is the spacing between character pairs.  Leading is the space between lines.  Rule of thumb: serif for print; san serif for screen

13. Caps and Lower Case  A capitalized letter is referred to as uppercase, while a small letter is referred to as lowercase.  Placing an uppercase letter in the middle of a word is referred to as an inter cap.  Placing an uppercase letter at the start of a paragraph is referred to as an initial cap.

14. Text On The Web  Menus for navigation  Interactive buttons  Fields for reading  HTML documents  Symbols and icons

15. Chosing Fonts ✤ Legibility and Readability ✤ Avoid Clutter ✤ User Color Purposefully ✤ Anti-Aliased Text ✤ Flush Left, Not Centered ✤ Animations Sparingly

16. Text Navigation ✤ Readability studies: text hyperlinks work better than most buttons ✤ CSS ✤ Mouseovers ✤ Colors

17. Font Wars! ✤ PostScript (Aldus/Adobe) ✤ TrueType (Apple/MSFT) ✤ OpenType (Adobe/MSFT) ✤ All are vector-based (not bit- maps – no “jaggies” or need for anti-aliasing)

18. Mapping Across Machines ✤ Type is not cross-platform ✤ Fonts must be installed on user machine or else substitution happens ✤ Thus we specify several families in HTML

19. Symbols and Icons ✤ Symbols and icons are hard to create! ✤ Standalone graphic elements ✤ Icons represents objects and processes ✤ Used to convey meaningful messages; must match mental model of visitors (mailbox for email example)

20. Images

21. BitMap (Raster) Images

22. BitMap Depth (Size)

23. Variations In Depth 24 bits depth. Millions of colors. Dithered to 8 bits. Adaptive palette of 256 colors. Dithered to 8 bits. Macintosh palette of 256 colors. Dithered to 4 bits. 16 colors. Dithered to 8-bit gray- scale. 256 shades of gray. Dithered to 4-bit gray- scale. 16 shades of gray. Dithered to 1-bit. Two colors, black and white.

24. Image Types ✤ GIF, JPG, PNG ✤ Or SVG (Vector) ✤ See http://wiredpen.com/2010/04/07/design-basics-gif- jpg-png/http://wiredpen.com/2010/04/07/design-basics-gif- jpg-png/

25. A Word About Roles Animator Audio Specialist Content Editor Interface Designer Multimedia Designer Multimedia Programmer Photographer Project Manager Video Specialist Web Producer Writer

26. Lab ✤ Web Design: Deconstruction ✤ Demo: CSS Zen GardenCSS Zen Garden

27. Contact ✤ Kathy E Gill ✤ kegill at uw dot edu ✤ http://faculty.u.washington.edu/kegill http://faculty.u.washington.edu/kegill