|
Web
Authoring that Works: |
By Lana Johnson and Pam Peters, University of Nebraska -- Lincoln
|
In Lesson 3, you will learn how to use color, graphics and text to create effective Web pages. To do this, we will consider the following:
To help you improve your sites we will offer: |
Although the content of your Web site is of primary importance, it is often your page and site design that will entice users to stop and visit in the first place. Effective use of page layout, images, text, and colors can influence whether a visitor will stay long enough to read your page's content. In this lesson, we will discuss graphic design elements and how to use them effectively on the Web.
Graphic image files come in a variety of formats. When working with image files for the Web, it is important to distinguish between true image formats and compressed image formats.
True image formats include TIFF, BMP, and PICT. These formats can be edited and resaved again and again without loss of quality or detail. Always save an original copy of your image in a true image format, in case you need to edit it later on.
Because true image format files tend to be large and require lengthy download times, they are impractical for use on the Web. You must convert true image format files to compressed image formats in order to decrease download time.
It is a good idea to create two image file folders as you work: one to hold all your originals, the other to hold the edited versions for placement into Web pages.
Compressed image formats are true image format files that have been compacted to reduce file size. The most common compressed image formats for use on the Web are GIF and JPEG. Each time a compressed file is saved, however, information is lost, degrading the original. To keep images looking their best, use only true image format files when editing, and then save your files as GIF or JPEG.
How do you know when to save an image as GIF and when to save it as JPEG?
GIF -- Graphics Interchange Format
GIF file format is appropriate for images with sharp-edged areas of flat color, such as line drawings, simple icons and buttons. DO NOT use GIF file format for photos or "High Color" artwork (pictures that involve smooth color gradients). Saving an image as GIF will reduce the file's size by reducing the number of colors in the image to 256 or fewer browser-safe colors. GIF files compress well and can be made very small.
Transparent GIF
GIF files can be assigned one transparent color, which allows a selected color within the image's rectangular boundaries to be made invisible. Designers often choose to make their image’s background color transparent, giving the illusion that the image is irregularly shaped rather than rectangular. The example below illustrates a transparent GIF and a non-transparent GIF on a colored background.
EXAMPLE: Transparent and non-transparent GIFs
Currently, GIF files are the only file types that support transparency on the Web. NOTE: When you select a color to be transparent, that color will be eliminated from every part of the image, not just the background.
Interlaced GIF
Interlaced GIFs allow your entire Web page to download quickly while the image files download in stages. In the first stage, the images appear out of focus. In subsequent stages, images gradually come into focus.
Animated GIFs 18
GIF images can be combined into animated sequences by using imaging software.
JPEG -- Joint Photographic Experts Group
Photos and High Color artwork (pictures that involve smooth color gradients) or pictures with 24-bit color should be saved as JPEG, not GIF. When an image file is compressed into a JPEG, information in the file is discarded. What remains is "blurred" to give the impression of the original image. Any object or text that is thin or small may get blurred to the point of being unrecognizable.
Software programs that compress files into JPEG format allow you to select the degree of compression you want. The more compressed the JPEG, the smaller the file, but the greater the loss of image detail. This loss is permanent. To avoid image quality degradation, always edit your images in true image format file, and then "save as" JPEG.
EXAMPLE: Adobe Photoshop® -- Save as JPEG
Resolution of digital images is one of the least understood topics in electronic publishing, but is one of the most important to know. What is resolution? How does it affect the quality and file size of your images? Knowing the answers to these questions will help you create images that download quickly on the Web, yet also contain adequate picture detail for quality output.
To understand resolution, you need to know that images are made up of tiny dots that have been assigned, or "mapped," to a given space. These dots are referred to as pixels.
A pixel is actually square in shape. Digital images (also called bitmap images) are made up of tiny square pixels, like a checkerboard. Bitmap images are always rectangular in shape. Pixels may contain color, shades of gray ("grayscale") or be black and white.
EXAMPLE: Pixels
NOTE: Pixels are NOT the same as the dots (on a laser printer) or lines (on commercial printing presses).
The resolution of an image is defined by the number of pixels per inch that make up the image. High resolution images contain more (smaller) pixels per inch than low resolution images. They are more detailed and their file sizes are larger.
Fewer pixels per inch means lower resolution, larger pixel size, less picture detail and smaller file size.
EXAMPLE: Low and high resolutions
When preparing an image for a Web page, match the number of pixels in the image with the pixel dimension it will occupy on the screen. For example, if your browser window is 800 pixels wide and 600 pixels high and you want the image to occupy one-half the width of this area, the image must be 400 pixels wide. This will result in an appropriate file size and good picture quality.
Use photo-editing software (such as Photoshop® ) to size your images before placing them in a Web page. NOTE: Reducing an image using HTML coding will decrease its dimensions (so that it will appear smaller on the screen) but the resolution will NOT be decreased (the same number of pixels will be packed into half the space). More importantly, the image's file size will remain the same, meaning the download time will remain the same.
When an image is enlarged using HTML coding, the fixed number of pixels are stretched to fit the larger dimensions, producing a decrease in resolution, and causing the image to appear pixelated or blurry.
Bit depth is a measure of how much computer memory is used by each pixel of the image. Each pixel has a bit depth ranging from 1-32. The larger the number, the more memory used and the better the quality of the image. Simple black and white images, which have a bit depth of 1, will have a much smaller file size than the same image saved in 24-bit depth in 16 million colors. (For a full discussion of bit depth and color, read Patrick Lynch and Sarah Hortons Web Style Guide Color Display Primer.)
When creating Web graphics, your goal is to strike a balance between file size and image quality. The file size should be made as small as possible for quick downloads, but at the same time, the image must be readable to be effective.
EXAMPLE: 8-bit and 24-bit images
Even the smallest image file will add download time to your page. Before adding an image, ask yourself:
Does this image enhance the content of my site?
Is this image appropriate for the subject matter of my site?
Will my visitors find this image useful?
If the answer to these questions is yes, then add the image to your page.
Sometimes you must include a large image file in your Web page because it contains details that are important to the user. When this is the case, try placing a small thumbnail-sized image on the main page, with a link to the full-sized image on a second page, giving users the option of waiting for the larger full-size version to download. Warn them that the link goes to a big graphic by including the file size in brackets beside the link. It is also helpful to add text near the thumbnail to briefly summarize the information the image contains.
EXAMPLE: Thumbnail
Rather than reducing your full-sized image to a smaller-sized duplicate, try cropping the larger image to a thumbnail-sized "clue."
EXAMPLE: Cropped thumbnail
When graphic images are used as links, keep them consistent and predictable from one page to the next throughout the site. This will help users understand your site’s organization in a visual way.
Wherever a linked icon appears, it should direct the user to the same location. Help your user by placing linked icons in the same position on every page where they appear. NOTE: Provide an additional text link for every image link on your page.
Always label images with an ALT (Alternative Text Tag). ALTs are essential for people who rely on assistive technologies, such as screen readers, as well as for users who shut off graphics for faster download times.
The general rule when using images on a Web page is to provide an ALT attribute in the image code that provides the same information the visual user sees. This is called "providing an equivalent experience." An ALT attribute should be meaningful and contain no more than nine words. (For more about ALT attributes, see Accessibility Issues and Solutions below.)
Use color to unify, organize or convey a mood when designing your site. Consider the emotional and psychological impacts of color. Red = STOP! Green = GO. Yellow = CAUTION . . . or sunshine . . . or Happy Face. Certain color combinations carry predictable meanings: bright, complementary colors are dynamic, and are often found on Web sites for kids; pastels are soft, romantic and soothing, and may be found on sites for new mothers or newlyweds; earth tones are . . . well . . . "earthy," and may be found on sites about environmentally safe products; and some classic combinations, such as dark green and gold, are a natural choice for investment firms or other traditional services.
NOTE: To assure that color-blind people have an equivalent experience, information required for navigation or meaning should NOT be dependent on the ability to identify specific colors. (See Accessibility Issues and Solutions below.)
Computer screens display color using the RGB (Red/Green/Blue, 24-bit) color model. Printed materials use the CYMK (Cyan/Yellow/Magenta/Black, 32-bit) color model. (For more information about color models, see About.com Mike's Sketchpad - Color Models). Use RGB color when editing images for the Web.
EXAMPLE: Adobe Photoshop® color model choices
Every computer, monitor, operating system, and browser displays color a little differently. People see color differently, too. It is nearly impossible to make the colors on your Web pages look the same to everyone. View your site on a variety of computers, monitors and browsers to see if your colors come across as you intended. And remember, it is impossible to control color exactly on the Web.
For simple graphics, such as GIF images or colored backgrounds, use browser-safe colors to achieve the most consistent color possible.
Every browser uses its own color palette management system to display colors. These color palettes typically contain 256 colors. All artwork and color are forced into a browser's specific color palette when viewed on the Web, so colors may not appear the same in all browsers.
Of the 256 available colors, 216 (referred to as browser-safe colors) are universally honored between browsers, operating systems and computer platforms. When you use these 216 colors, you can be fairly certain that the color will look the same regardless of browser or computer platform (monitor settings may alter colors, however). When you use colors outside the 216 browser-safe colors, the user's browser will convert or dither it (approximating your color choice by using its available colors) and your color choices may end up looking quite different than you had planned.
Choose browser-safe colors for all flat color images and background colors. When working with full color images such as photos or full color artwork (JPEGs), there is no need to worry about using browser-safe colors. Because JPEGs are 24-bit "true-color" images, the colors in JPEGs will be displayed by the user's operating system rather than their browser.
There are a number of Web sites that list the browser-safe colors.
These include:
dotParagon-BrowserSafeColors at http://www.dotparagon.com/resources/color.html
University of Arizona, Color Charts at http://www.fcii.arizona.edu/stp/color.htm
Cat 'n Moose dot com Presents Web Safe Color Sampler at http://www.catnmoose.com/wsc.shtml
Web Master’s Color Laboratory at http://www.visibone.com/colorlab/
To convert from RGB color to browser-safe HEX code
http://builder.cnet.com/webbuilding/pages/QuickReference/Color/converter.htmlChart of browser-safe colors
http://webdesign.about.com/library/weekly/aa061598chart.htm
Choose background colors and images with care. Maintain a high contrast between text color and background color in order to maximize readability. (See Accessibility Issues and Solutions for examples.) Black on white is the best. Other combinations may be difficult for your users to read. NOTE: Black or dark backgrounds may not print, rendering white text invisible.
Always test your background on several commonly-used platforms and monitors to be sure the text is easy to read.
Because content is the most important element in a Web site, text is arguably the most important design element. Make sure the text on your site is readable and legible to all visitors. Text size, color and spacing can enhance your layout while making your content easier to read.
Text tips for Web pages:
Choose a font (two at most), sizes for headings and subheads, and as few text styles/colors as possible, and use them consistently throughout your site.
Use colors with high contrast between text and background.
Don’t highlight (bold or italicize) too much. Nothing has prominence when everything is emphasized.
Left justify text. Use centering and right justification only in small doses, usually for titles and headers. Bodies of text that are centered or justified right are difficult to read.
Don’t animate text.
Small text is more readable in sans-serif typefaces. With low resolution monitors, serifs on serif fonts often look blurry or chopped off.
Don’t set text in all caps. Upper and lower case text is easier to read.
Use adequately sized fonts. Although there is very little variation in text size between browsers, there is a big difference between platforms. Windows fonts will look 2-3 points larger than the equivalent typeface on a Mac.
Limit line length. Long lines of text are difficult to read.
Good page design and layout can create order, emphasis and predictability on a page, allowing users to quickly find information.
According to Jakob Nielsen, “visual appearance and having a polished graphic design is literally the first thing users see upon entering a site and good looking visuals are a major opportunity for establishing credibility.” Page design is the most immediately visible part of Web design, and people will often "judge a book by its cover."
Strive for consistency on every page throughout your site. Layouts that repeat design elements from page to page help users find what they are looking for faster. When pages are similar, readers don’t need to learn their way around each and every new page.
To create a consistent look, establish a page layout plan or template for your site. Decide on the style of text and graphics, where the menu bar will go, what icons will link where, what the text for the ALT attributes will say, and so on. Use it on all your pages.
Page templates can help you add new pages to your site quickly, since your underlying layout and design will already be established. LLBean and Land’s End make good use of template designs in their sites. No matter which links the user follows within these sites, he knows where he is.
When creating a template for your Web pages, make sure that every page in your site includes your logo/name and a way to get back to the home page.
Pages with simple designs
- download quickly;
- are easy for visitors to understand and use;
- won't look "dated" too soon; and
- are more likely to meet accessibility guidelines.
Contrast ensures legibility. Contrast between elements can help users skim information to quickly find what they want. Contrast also adds visual interest to a page.
Use contrast to steer the visitor around your page. Contrasting elements can show the user where to look first and in what order to read information.
Examples of contrast:
large or bold type
brightly colored graphic or type
graphic or type surrounded by white space
Patrick Lynch and Sarah Horton in Web Style Guide discuss and illustrate examples of contrast and simplicity on Web pages at http://info.med.yale.edu/caim/manual/pages/graphic_design100.html
Align text and graphics consistently throughout your site to provide an orderly, easy-to-follow design. Consistent alignment makes your pages look cleaner and more organized. Use tables and columns to align your design elements. NOTE: Do not center everything on your page. Centered text is difficult to read and a symmetrical design can be boring.
Spatial arrangement provides users with instant visual clues about the hierarchy of information. Group elements that are related together. Place headings directly above the text they represent to help the user find and understand information. Place captions close to pictures. Make sure there is adequate space between elements that are unrelated.
In traditional print, white space refers to areas of a page with no text or graphic elements. These areas provide a necessary "rest stop" for the user's eyes. This is equally effective in Web design. White space helps guide the eye around the page. It can be used to encapsulate and organize information, improving the user's understanding of the material. Remember, margins are also white space. Keep your design from looking too crowded by moving text away from the outer edges of the monitor.
Should you design for 640 x 480 resolution? 800 x 600? Something else?
Computer monitors come in a large variety of resolutions (width/ height of monitor measured in pixels) and sizes (15-, 17-, 21-inch). Resolutions range from 640w x 480h to 1280w x1024h pixels.
When deciding on page size, it is resolution—not a monitor’s physical size—that is the critical factor. It is best to design for your end user. If users are graphic designers, you can probably design for high resolution. If your users are using older, low resolution monitors, you will need to design for lower resolution. (To learn how to determine your audience, return to Lesson 1: Designing for Your Audience.)
Tables are commonly used to lay out Web pages and control the look of complex designs. You will learn more about designing with tables in Lesson 5: Using Web Technology Effectively.
Most graphic designers enjoy creating splash screens; it's one of their few opportunities to go all out and control every aspect of a page's "look." However, consider a splash screen from a user's perspective. Ask yourself, does the splash page tell me anything useful? Does it get me quickly to the information I want? What will I see if my graphics are turned off?
Unless your visitors are high-end users with an interest in graphic design or technology, skip the splash page. Most visitors are interested in accessing information quickly and find splash screens not only useless but frustrating.
Use animations sparingly and only when they add valuable content to your site (for example, to illustrate a concept or technique). Consider opening animations in a secondary window that includes a "close" button. (Example from Brain POP)
Moving objects will dominate the page and fight for your attention. They draw the user's eye, making it difficult for them to read the text and concentrate on content. Use animated graphics only when the animation supplies information that cannot be communicated in any other way. NOTE: Never "loop" animations continuously.
Moving text and scrolling marquees are difficult for many users to read. Do not use them.
Designing effective Web pages takes time and experience. Go to sites you admire and analyze what it is you like about them. Use the information you gather when designing your own site.
Clean, consistent, well-designed pages with readable and legible text will encourage users to return to your site again and again.
1. Go to Barney and AARP sites. List some differences between the two sites. Compare graphics, text, white space, color contrast, repetition of graphic elements, image sizes, etc. How well do the two sites accommodate their specific audiences?
2. Download this TIFF file (449KB). The file was scanned at a width of 500 pixels. Use a photo-editing program to convert the image to a width of 250 pixels, and then save it as a JPEG. Compare the size of the file before and after the change.
3. Select a palette of colors at VisiBones Webmaster Color Laboratory. Select at least three colors that look good together.
PageLab -- A good example of an effective animated graphic can be found in the article "Magic in red, green, and blue" at PageLab. This Before & After article uses a series of simple animations to illustrate the workings of RGB light and how to achieve perfect browser colors for Web display.
PBS Barney -- This site is for young viewers. The colors are vibrant and appealing for children and it features age-appropriate games and songs for kids as well as sections for caregivers and parents.
IBM -- It's corporate, it's clean, it's easy to use.
AARP -- A site providing information for seniors. Notice the difference between this site and Barney. How are the colors different? AARP provides a lot of information and navigation on this site seems simple enough to find what you may be looking for.
Stanford University -- What information is important to students, parents, faculty and outside visitors? Many of us grapple with these questions for education web sites. Look at other institutions to get good ideas for your site.
EXCITE -- This site is designed with a simple, effective layout, graphics and navigation. There is plenty of white space around the text and graphics to help the viewer read the page more efficiently.
Nutrition, Fitness and Youth -- This site is designed for junior high aged kids. Notice the color scheme and the cartoon character portrayed throughout the site. A consistent template design and navigation system is used to help guide the viewer through the site more easily.
LLBean -- A shopping site with great use of a template design. Effective color coordination and superb navigation.
Land’s End -- Another shopping site with great use of templates and superb navigation.
Nobel e- Museum -- An educational site with great use of a template design. Effective color coordination and superb navigation.
Google.com -- This search engine lets you start a search right away. Isn't that why we use search engines?
|
1 Heffel, Jason. August 8, 2001. Web Graphics Overview, Page 5 — Formats for Every Occasion, WebMonkey, Design, Graphics.
2 Johnson, Lana K. and Pamela K. Peters. March 2001. Understanding Graphic File Formats, CIT Information Newsletter, University of Nebraska, Lincoln.
3 Anderson, Paul. March 6, 2001. Graphics 101, Web Building, C|net.com, Builder.com.
4 North Dakota State University. 2000. Master Internet Volunteer Program, Web Design, North Dakota State University.
5 Johnson, Lana K., February, 2001. EXCITE - Understanding Digital Graphics, University of Nebraska, Lincoln.
6 Kay, Michael. August 9, 1999. Designing for Different Resolutions. WebMonkey, Design, Site Building.
7 Lynch, Patrick and Sarah Horton. 1997. Graphic Safe Areas, Web Style Guide: Basic Design Principles for Creating Web Sites.
8 Lynch, Patrick and Sarah Horton. 1997. Color Display Primer, Web Style Guide: Basic Design Principles for Creating Web Sites.
9 Adobe Systems Incorporated. 2000. Color Models, The RGB (CMY) Color Model, Adobe Technical Guide.
10 Mattox., Joel and Derrick Story. August 6, 1999. Accurate Color on the Web, Webreview, Cross-Training for Web Teams, webreview.com.
11 Nielsen, Jakob. Ten Good Deeds in Web Design. Jakob Nielsen’s Alertbox, useit.com. October 3, 1999.
12 University of Arizona. 2000. Web Design Resources, Color Charts.
13 Kaiser, Shirley E. September, 2001. Website Tips for Designers, Color. websitetips.com, SKDesigns.
14 Kaiser, Jean. 2001. Web Design, Color. About.com.
15 Detert, Ryan. August 6, 1999. How Color Works, Accurate Color on the Web. Designers, Webreview, Cross-Training for Web Teams, webreview.com.
16 Gillespie, Joe. 1996-2001. Web Page Design for Designers, graphics and palettes.
17 Lynch, Patrick and Sarah Horton. 1999. Web Style Guide: Basic Design Principles for Creating Web Sites. Yale University Press. pages 133-135.
18 Gillespie, Joe. 1996-2001. Web Page Design for Designers, Tips and Tricks.
19 Lynch, Patrick and Sarah Horton. 1997. Typography I, Web Style Guide: Basic Design Principles for Creating Web Sites.
20 Norton, Rob. March 14, 2001. NUA Knowledge Base: Web Typography: the rooki mistakes (Net Style).
21 Dartmouth College, Curricular Computing. 1997. Introduction to Web Images, Images for the Web.
22 Nielsen, Jakob. 2000. Designing Web Usability: The Practice of Simplicity. New Riders Publishing, Indianapolis.
23 Ashenhurst, John. 2001. Designing Successful Web Sites, Put usability first; practice simplicity. The Rough Notes Magazine.
24 Lynch, Patrick and Sarah Horton. 1999. Web Style Guide: Basic Design Principles for Creating Web Sites. Yale University Press. Pages 53-78
Return to the main index.