graphics web design professor frank. graphics what are the most effective uses of graphics? what’s...
TRANSCRIPT
![Page 1: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/1.jpg)
Graphics
Web DesignProfessor Frank
![Page 2: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/2.jpg)
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?
![Page 3: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/3.jpg)
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!
![Page 4: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/4.jpg)
Graphics as Content
• Illustrations• Diagrams• Quantitative Data• Analysis and Causality• Integration
![Page 5: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/5.jpg)
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
![Page 6: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/6.jpg)
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”
![Page 7: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/7.jpg)
![Page 8: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/8.jpg)
Characteristics of Web Graphics
• Dependent on user’s display monitor and bandwidth capacity
• Consider handheld technology too!
![Page 9: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/9.jpg)
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
![Page 10: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/10.jpg)
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)
![Page 11: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/11.jpg)
Gamma
• Degree of contrast between the midlevel gray values of an image
![Page 12: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/12.jpg)
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!
![Page 13: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/13.jpg)
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
![Page 14: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/14.jpg)
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
![Page 15: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/15.jpg)
GIF File Compression
• Uses lzw compression scheme = best at compressing images with large fields of homogeneous color, such as logos and diagrams
![Page 16: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/16.jpg)
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
![Page 17: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/17.jpg)
Dithering
![Page 18: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/18.jpg)
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
![Page 19: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/19.jpg)
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
![Page 20: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/20.jpg)
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
![Page 21: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/21.jpg)
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
![Page 22: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/22.jpg)
JPEG Compression
• Can choose degree of compression but . . .• The more you squeeze a picture with jpeg
compression, the more you degrade its quality
![Page 23: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/23.jpg)
JPEG Compression
![Page 24: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/24.jpg)
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!
![Page 25: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/25.jpg)
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
![Page 26: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/26.jpg)
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
![Page 27: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/27.jpg)
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.
![Page 28: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/28.jpg)
Photographs as GIFs, JPEGs, PNGs
![Page 29: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/29.jpg)
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
![Page 30: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/30.jpg)
Archiving Web Graphics
• Always save a copy of your original graphics files, including intermediate pieces, not just the original and final files!
![Page 31: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/31.jpg)
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
![Page 32: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/32.jpg)
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
![Page 33: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/33.jpg)
Screen vs Printed Color Artwork
![Page 34: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/34.jpg)
Complex Illustrations/Photographs
![Page 35: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/35.jpg)
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
![Page 36: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/36.jpg)
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
![Page 37: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/37.jpg)
Graphic Text
• Use plain html text for text, particularly for essential functional elements of the interface, such as navigation links
![Page 38: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/38.jpg)
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.
![Page 39: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/39.jpg)
Hidden Graphics
• Use media style sheets to hide unnecessary graphics, and replace necessary graphics, such as navigation links, with text
![Page 40: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/40.jpg)
Height and Width Tags
• All page graphics source tags should include height and width tags
![Page 41: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/41.jpg)
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
![Page 42: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/42.jpg)
Colored Backgrounds
• Change look of page without adding graphics, or using band-width
• Contrast between text and background must be legible!
![Page 43: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/43.jpg)
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
![Page 44: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/44.jpg)
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.
![Page 45: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/45.jpg)
Color Terminology
![Page 46: 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](https://reader035.vdocuments.site/reader035/viewer/2022081514/56649e145503460f94afe780/html5/thumbnails/46.jpg)
Last Words
• Consider goals for website! Brightly colored, graphics heavy design might not be best for advertising financial firm.