developer.com - Reference Click here to support our advertisers SOFTWAREFOR SALE BOOKSFOR SALE SEARCH CENTRAL JOB BANK CLASSIFIED ADS DIRECTORIES REFERENCE Online Library Reports TRAINING CENTER JOURNAL NEWS CENTRAL DOWNLOADS DISCUSSIONS CALENDAR ABOUT US Journal: Get the weekly email highlights from the most popular online Journal for developers! Current issue developer.com developerdirect.com htmlgoodies.com javagoodies.com jars.com intranetjournal.com javascripts.com All Categories : Web Graphics Chapter 6 Presenting Effective Web Graphics Reproduced on the following pages is a portfolio of current Web graphics that the authors find to be particularly effective. Of course, this is just a snapshot because the nature of the World Wide Web is fluid, with resources changing daily. Several themes can be identified in the images presented here. Effective graphics tend to be unambiguous. That is, the purpose of the image is not confusing. Effective graphics tend to be minimalist, with just the right amount of color, line work, and contrast. Visual elements are usually kept to a minimum, and a sense of tension is created with asymmetrical elements. Finally, great graphics almost always project contrast between light and dark, thick and thin, saturated and unsaturated. The examples aren't presented in any particular order so don't think we saved the best for last. As you look at each example, use what you already know about effective Web graphics to analyze the design. Do you agree with us? http://www.opentext.com/ Figure 6.1 : I liked Open Text's first Web site, and this new version doesn't disappoint. It offers nice, soft splash graphics with an easy-to-read textual jump list. Graphics combine table formatting and mapping. http://www.premenos.com/ Figure 6.2 : Color makes an impression when it is contrasted with a monochromatic background, such as this example from Premenos Corporation. The splash graphic is a Joint Picture Experts Group (JPEG) image map. http://www.honda.com/cars/prelude/mred.html Figure 6.3 : Honda of America delivers an almost publication-quality site with the interactivity that keeps you coming back. No cute tricks here, just solid design, graphics, and executions. http://www.imageclub.com/html/topten/topten-photo.html Figure 6.4 : Image Club is one of my favorite sources for art resources, so you'd think that their Web site would have the same concern for design, and it does! This is another example of using a table to format linked graphic images. http://cnn.com/WEATHER/ Figure 6.5 : I love this page! Cable News Network's site could be the prototype for Web information sites with easy-to-get data, lots of white-space, engaging graphics, and good layout. http://www.infograph.com/products.htm Figure 6.6 : Informative Graphics developed this site for BIG monitors. The buttons and the text are placed in tables. Its attributes include nice colors and a clean design. http://www.cs.purdue.edu/ Figure 6.7 : Nothing like plugging your own university! This splash page shows exactly what's included in the Web site in an attractive and rapidly loading Graphical Interchange Format (GIF) graphic. Subsequent Level 1 sections carry the same theme. http://www.a1.com/shirt/genius.html Figure 6.8 : This site from Sophisticated Shirts is a good example of a commerical Web site. Good use is made of reduced-resolution thumbnails. Which shirt do you think they will sell in highest quantity? http://www.penton.com/ Figure 6.9 : How do you make a page look fun and inviting? Use primary colors and a text font that isn't too serious. This page from Penton Publishing is clean, well organized, and shows good use of dominant asymmetry. http://www.alias.com/ Figure 6.10: As you might expect, a page from a high-profile graphics company like Alias/Wavefront(Silicon Graphics) would make effective use of a color background and JPEG images sequentially loaded into an image map. http://www.jdedwards.com/ Figure 6.11: Talk about clean!. Good use of small GIF icons, clean design, some tension, and default background. Linked text provides further flexibility without cluttering the page with a lot of buttons. http://www.indus.com/ Figure 6.12: The one-screen splash page from Web Professionals, Ino includes an interlaced banner logo and simple, clean information. Subsequent pages also carry the company logo. A great frequently asked questions (FAQ) link for Web information! Use of this site is subject to certain Terms & Conditions. Copyright (c) 1996-1998 EarthWeb, Inc.. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Please read the Acceptable Usage Statement. Contact [e-mail] with questions or comments. Copyright 1998 Macmillan Computer Publishing. All rights reserved.