Graphics Web Design Professor Frank. Graphics What are the most effective uses of graphics? What’s...

Graphics

Web DesignProfessor 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

• 19th Century mapmaking• 1850-1950 Mechanical reproduction and mass

publications• Early 20th 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

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.