Graphics Web Design Professor Frank

Graphics What are the most effective uses of graphics? What’s the best way to integrate words and images into an understandable story for the user?

Role of Web Graphics Define boundaries of a web “site” or “place” on the web Graphics don’t need to be elaborate but they do need to be consistent!

Graphics as Content Illustrations Diagrams Quantitative Data Analysis and Causality Integration

Graphics as Communication Trust the reader’s intelligence Respect the medium Tell the truth as you understand it Don’t cherry pick your data Be bold and substantial

Origins of Information Graphics 19 th Century mapmaking Mechanical reproduction and mass publications Early 20 th Century – Joseph Pulitzer used graphics to educate illiterate “masses”

Characteristics of Web Graphics Dependent on user’s display monitor and bandwidth capacity Consider handheld technology too!

Color Displays Cathode ray tubes or backlighted flat-screen technologies Red-green-blue (RGB) additive color model – “adds up” to white light Most screens can transmit 16.8million colors

Screen Resolution Pixel – “picture elements” Most standard computer displays have resolutions that vary from 72 to 96 pixels per inch (ppi) 1:1 display ratio (one pixel in the image equals one pixel on the screen)

Gamma Degree of contrast between the midlevel gray values of an image

Graphics and Bandwidth Don’t assume all users have high-speed connections (ie rural areas) The more graphics you incorporate, the longer the user will wait to see your page!

Graphic File Formats GIF, JPEG or PNG Rules of thumb: – Nature of the image (“photographic” collection of smooth tonal transitions or a diagrammatic image with hard edges and lines?) – Effect of ile compression on image quality – Efficiency of a compression technique in producing smallest file size that looks good

GIF Graphic Interchange Format Incorporates “lossless” compression scheme to keep file sizes at a minimum without compromising quality 8-bit graphics and thus can only accommodate 256 colors

GIF File Compression Uses lzw compression scheme = best at compressing images with large fields of homogeneous color, such as logos and diagrams

Dithering Process of reducing many colors to 256 (GIF max) or fewer Pixels of two colors are juxtaposed to create the illusion that a third color is present

Dithering

Improving GIF Compression Remove colors that aren’t needed – a simple logo might only need 6 or 8 or 10 colors In Photoshop - don’t save every file automatically with 256 colors

Interlaced GIF Image data is stored in format that allows browsers that support this feature to build a low-resolution version of the full-sized gif picture on the screen while the file is downloading (“fuzzy to sharp”) Best for 200 x 100 pixels or greater

Transparent GIF Select colors in a gif graphic’s color palette to become transparent – usually background Imperfect property - every pixel in the graphic that shares that color will also become transparent

JPEG Joint Photographic Experts Group Full-color images, at least 24 bits of memory to each pixel = up to 16.8 million colors “Progressive JPEGs” gradually load on screen

JPEG Compression Can choose degree of compression but... The more you squeeze a picture with jpeg compression, the more you degrade its quality

JPEG Compression

Once an image is compressed using jpeg compression, data is lost and you cannot recover it from that image file Each time you save or resave an image in jpeg format, the image is compressed further and the artifacts and noise in the image increase Always save an uncompressed original!

PNG Graphics Portable Network Graphic Nonproprietary alternative to GIF Designed specifically for use on web pages Full range of color depths, support for sophisticated image transparency, better interlacing, and automatic corrections for display monitor gamma

PNG Graphics Can also hold a short text description of the image’s content (Internet searchable) Best for line art, text and logos Files are much larger than JPEGs Not all web browsers support PNG files

Imaging Strategies Small page navigation graphics, buttons, and graphic design elements such as logos and icons should be handled as noninterlaced gif or png graphics.

Photographs as GIFs, JPEGs, PNGs

Diagrams/Illustrations Best to use vector graphics: – Easier to draw and modify using vector-based illustration programs such as Adobe Illustrator – Can be easily resized without loss of image quality

Archiving Web Graphics Always save a copy of your original graphics files, including intermediate pieces, not just the original and final files!

Summary Advantages of GIF Files – most widely supported graphics format – diagrammatic images look better than jpegs – supports transparency and interlacing Advantages of JPEG Files – achieves huge compression ratios (faster downloads) – produces excellent results for most photographs and complex images – supports full-color (24-bit, true-color) images

Images on the Screen Complex graphics or color photographs often look surprisingly good on web pages – True-color (24 or 32 bit) displays show enough colors to reproduce photographs and complex art accurately, in as many as 16.8 millions colors – The light transmitted from display monitors shows more dynamic range and color intensity than light reflected from printed pages

Screen vs Printed Color Artwork

Complex Illustrations/Photographs

Diagrams for Computer Screens Carefully design to match the grid of pixels on the screen Use orthogonal lines (straight horizontal or vertical lines) or diagonal lines at 45-degree angles Keep icons and navigational graphics simple

Diagram Size Graphics carefully built to match the pixel grid cannot be resized in Photoshop Use anti-aliasing to smooth the boundaries of curves and angles

Graphic Text Use plain html text for text, particularly for essential functional elements of the interface, such as navigation links

Working With Large Images Reducing image dimensions: the fewer pixels in the image, the smaller the file size, and the faster the image loads. Consider displaying a modest-sized version of the photo, with links to the full-size or wallpaper version.

Hidden Graphics Use media style sheets to hide unnecessary graphics, and replace necessary graphics, such as navigation links, with text

Height and Width Tags All page graphics source tags should include height and width tags

Alt-text Alt attribute allows you to supply an alternate text description with any images you place on your page Describe the content and function of an image in just a few words

Colored Backgrounds Change look of page without adding graphics, or using band-width Contrast between text and background must be legible!

Background Graphics Cascading Style Sheets (CSS) – sets background graphic/defines where it displays, whether it repeats, and, if so, in what direction, whether the image is fixed in place or scrolls with the page, etc

Color Terminology Hue - wavelength of color along the spectrum of visible light, ie “yellow,” “orange,” or “red.” Saturation - the intensity of a color Brightness - The lightness or darkness of a color or how close to either black or white a given color is.

Color Terminology

Last Words Consider goals for website! Brightly colored, graphics heavy design might not be best for advertising financial firm.