Date : 01/09/2014 The Web as Multimedia Text and Images In most peoples vocabularies, design means veneer. Its interior decorating. Its 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 Tonight Recap Web technologies Text and Images Some basics Lab : Deconstructing a book site Recap Hypermedia Links, Nodes, Anchors, Navigation Web Tech : Alphabet Soup Clients & Servers Protocols HTTP FTP Languages HTML4 & HTML5 XML Javascript & jQuery CSS Flash Scripts What Is A Web App? How Web Apps Work Client (browser) Visual logic and interface Web Server (Apache, IIS) and Middleware (php,.net, ruby) Database (MySQL, SQL Server) Content 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 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 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. Text On The Web Menus for navigation Interactive buttons Fields for reading HTML documents Symbols and icons Chosing Fonts Legibility and Readability Avoid Clutter User Color Purposefully Anti-Aliased Text Flush Left, Not Centered Animations Sparingly Text Navigation Readability studies: text hyperlinks work better than most buttons CSS Mouseovers Colors 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) 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 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 forexample) Images BitMap (Raster) Images BitMap Depth (Size) 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. Image Types GIF, JPG, PNG Or SVG (Vector) Seejpg-png/http://wiredpen.com/2010/04/07/design-basics-gif- jpg-png/ A Word About Roles Animator Audio Specialist Content Editor Interface Designer Multimedia Designer Multimedia Programmer Photographer Project Manager Video Specialist Web Producer Writer Lab Web Design: Deconstruction Demo: CSS Zen GardenCSS Zen Garden Contact Kathy E Gill kegill at uw dot edu