PBA Front-End Programming Visual Elements
Visual elements • Why do we actually need graphics on a website…?
Visual elements • Just as for colors, a distinct graphic can be part of a corporate identity • In general, we use graphics for • Illustration • Explanation • Integration
Visual elements • ”Many children on the African continent suffer from malnutrition, which can be attributed to poor living conditions, climate changes, civil unrest and population growth”
Visual elements • ”Many people find that Puppies are cute. The prominent eyes, fluffy fur and their childish personalities and behavior support this perception of Puppies”
Visual elements • An illustration can – obviously – convey emotions quite effectively • Illustrations should of course be chosen in accordance with the general theme, style and tone of the website
Visual elements • A diagram can help explain complex concepts to the user • However, the complexity of the diagram need not be reduced (no ”dumbing-down”…) • Be aware of physical limitations • Printed material: 300+ dpi (dots per inch) • PC Screen resolution: 80-100 dpi
Visual elements • A chart can help present quantita-tive data to the user • Same considerations as for diagrams apply to charts
Visual elements • General tips on using diagrams/charts: • Trust the reader’s intelligence • Respect the medium • Tell the truth as you see it • Do not bias your data • …and test it!
Visual elements • Still quite a number of technical issues to consider when using graphics • Display capacity • Bandwith • File formats • Graphics technology • Graphics compression
Visual elements • Mainstream PC monitor: • 24” size, 16:9 format (approx 20” x 12”) • 1920x1080 resolution • Approx 100 dpi • 24-bit color (16.7 mill hues) • Price: Cheap!
Visual elements • Other displays • Laptop: 12”-17”, around 120 dpi • Tablet: 7”-10”, around 150 dpi (iPad1 132) • Smart-phones: 3.5”-6”, up to 300+ dpi (!) • Upcoming resolutions • 2560x1600 (even in 10” tablets!) • UHD/4K, about 10M pixels (TV, monitors soon…)
Visual elements • No reason to rework e.g. a printed image with regards to colors – we can show all colors! • May need to rework resolution • Graphics for the web should be optimised for typical screen resolutions
Visual elements • Gamma – degree of midtone contrast (?)
Visual elements • What can we assume about bandwidth…? • Does ”eyerybody” have a broadband (2+ mbps) connection now…? • What about mobile broadband…? • Is the ”penetration” of high-speed access related to e.g. demographic factors?
Visual elements • The more graphics on a web page, the longer it takes to load (duh!?) • BUT • 0,01 sec vs. 0,1 sec, not so important • 1 sec vs. 10 secs, definitely important!
Visual elements • Even with broadband, care must be taken to optimise physical size of graphics • Efficient algorithms for compressing images exist – images can thus be stored as: • Uncompressed • Compressed without quality loss • Compressed with quality loss • Pixel-oriented graphics are called raster graphics
Visual elements • Uncompressed • Saved as ”raw” bitmap • Fixed number of bits per pixel (4-24) • Size only depends on image size • .bmp format (on Windows) • Should never be used on the Web!
Visual elements • Compressed without loss of quality • Several different algorithms (e.g. Lempel-Ziv-Welch, or just LZW) • Used in the GIF image format (and PNG) • GIF only supports 256 colors in an image, but the actual 256 colors can vary • GIF suitable for sharp-edge line art (logo), simple animations, low-res clips (animated GIF) • Not so well suited for high-quality images
Visual elements Not-so-good for GIF Good for GIF
Visual elements • Compressed with (possible) loss of quality • Most common file format is JPEG • Offers image quality vs. file size tradeoff • Compression highly dependent on image content and complexity, can be quite impressive • Can be used for….anything. But where is a non-perfect image acceptable? • Logo, probably not • Photo, probably ok
Visual elements • http://en.wikipedia.org/wiki/File:Quality_comparison_jpg_vs_saveforweb.jpg
Visual elements • Progressive JPEG • Loads successively better versions of the image • Useful for providing ”preview” of a large image • Helps on user impatience
Visual elements • Be aware that JPEG is a no-way-back compression of images! • Keep the original material uncompressed, and create suitably compressed JPEG versions as needed
Visual elements • Vector graphics • Defining an image in terms of geometric shapes instead of pixels • No inherent resolution! • Image definition is purely logical (geometric)
Visual elements • Creating vector graphics • Mostly useful for creating complex diagrams, illustrations, etc. • Several professional programs for creating vector graphics exist (Abode Illustrator) • Most common file format is SVG (Scalable Vector Graphics), developed by W3C
Visual elements • Using vector graphics • Can be converted to e.g. JPEG in any desired quality, and then published • Adobe Flash supports vector graphics directly • Some older browsers do not support SVG (IE8-)
Visual elements • Using video on a Website…why? • Some concepts lend themselves well to ”dynamic” visual presen-tation (complex instructions, sales presentations, etc.) • Users are used to video on the Web (Youtube) • Bandwidth is not really an issue anymore
Visual elements • Using video on a Website…why not? • Producing high-quality video is very costly and time-demanding • Users have higher and higher expectations concerning quality of content • Bandwidth is still an issue
Visual elements • Video uses a lot of bandwidth! • Almost all video formats use some sort of compression • Other factors • Resolution • Frame rate • Content • http://web.forret.com/tools/video_fps.asp
Visual elements • Video compression is also very sensitive to content • Compression works by storing differences between subsequent frames • ”Car chase” – poor comp • ”TV speaker” – high comp
Visual elements • Tips on creating video for the Web • Shoot original video – full quality control • Use close-ups – better for low resolution • Use simple backgrounds – better compression • Steady camera – better compression • Avoid zooming and panning – bad for low resolution, bad for compression • Use hard cuts, avoid cheesy transition effects – bad for compression