| About InfoWorld : Advertise : Subscribe : Contact Us : Awards : Events : Store |
 |
||||
|
||||
 | ||||
 |
|
|||
 |
||||
|
|
|
||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||
 TEST CENTER Add some bang, get some bucks By Mike Heck , InfoWorld Test Center December 1, 2000 Often underestimated, good Web design and technically superior graphics can have a significant impact on the success of your site, your image, and your bottom line
Aside from being aesthetically attractive, graphics have to be technically superior, with dense color resolution and compact file size. All the beauty in the world won't spare your visitors frustration from a slow-loading site. And frustration is not something you want to be part of your branding. Surprisingly, many companies expend relatively little effort when building sites; presumably, they think that because Web pages are malleable, they can skip the extensive due diligence normally associated with building a "real" storefront. Wrong. The building materials for a Web site are expertise and time, and they are every bit as expensive as cinder blocks and plywood. Simply, there is no substitute for hiring the best you can afford to build your site. But once the site is up, you can still do a lot to maintain and modify throughout the course of business, so it is important to use good design and technology. In fact, your enterprise's in-house staff can employ many of the same techniques and applications that the pros use to help you project a memorable image without sacrificing your site's usability or breaking your budgets. Adding visual impact Naturally, designing a Web site is a subjective exercise. But from the start, many companies overlook some common-sense, accepted principles. Keep it simple: Take a hard look at your design and delete elements that aren't important to the page's content. For example, consider purging all of those icons in favor of clear text links. Maintain white space between text and graphics. Limit branding, such as company logos and slogans, to the very top of the page. Keep images small, in proportion to other page elements. If you must show large photos or charts, link to them from quick-loading thumbnails. Use a limited number of colors and apply them consistently to headings, dividing lines, and other objects. Building for visits With a balanced page design in hand, you can build and format your graphics in multiple ways. Don't dismiss relatively new formats such as PNG (Portable Network Graphics). But for the widest browser compatibility, you're still constrained to using GIF, best for text and flat artwork, and JPEG, for photos. Up until recently, designers spent undue time optimizing the size of either file type by hand or through specialized utilities. Make sure you are using an application that creates Web-ready graphic files. With these latest graphics applications, going from design to Web is fast and effortless. Most graphics applications, including Jasc Software's Paint Shop Pro 7, Corel's CorelDraw 10, Macromedia's Fireworks 4, and Adobe Systems' Adobe Photoshop 6.0 (see our Test Center Review) have "save to Web" functions that automatically convert artwork to various Web formats. Photoshop 6.0 offers the most flexibility and produces the best results. Like the other packages, the designer can pick the compression rate for JPEG files or the number of colors in GIF images and then preview the quality and file size of the settings. But Photoshop's new Weighted Optimization lets the designer mask part of an image. As a result, critical parts of an image (a product) are very sharp whereas other areas (the background) can go soft. In tests, this technique allowed us to reduce a JPEG image from 100KB to 17KB in size without compromising overall quality. Consider CorelDraw 10. Its new Image Optimizer for GIF, JPEG, and PNG files -- while not as powerful as Photoshop -- requires little time or skill to master. Low-bandwidth multimedia Experts favor judicious use of animation and other multimedia. For creating GIF images that move or button rollovers, we prefer Adobe's ImageReady 3.0 (which ships with Photoshop 6.0) because of its simple operation coupled with high-end features such as the ability to employ Photoshop's special effects. But the GIF format isn't a good choice for designing product demos or interactive Web content because file sizes are still large. For that job, Macromedia's Flash 5 is the acknowledged leader. Beyond animating vector shapes, which are far smaller compared to bitmap images, Flash offers abundant programmability to build page navigation and interfaces to applications. Furthermore, Macromedia's companion Generator software produces customized Flash movies on-the-fly. But Generator's cost and complexity limit its value. If you don't need Flash's high-end features and associated long learning curve try Adobe LiveMotion 1.0 or CorelDraw 10's new Real Animated Vector Effects utility. Both products offer an understandable time line for controlling animations and both save files as Flash movies. By taking our advice, you will make great strides toward having your Web sites perform faster, helping visitors quickly find what they're seeking, and improving their positive memories of your organization. Related articles Graphics tools to meet demands of network publishing Photoshop 6.0 artfully enables outstanding design work Netscape strikes out with Navigator 6.0 Cleaner 5 is clean, but not spotless Mike Heck (mike_heck@infoworld.com) is a contributing editor. He builds Web and intranet sites for Unisys in Blue Bell, Pa.
 RELATED SUBJECTS  App devWeb TechnologiesE-CommerceSPONSORED WHITE PAPERS 
SPONSORED LINKS
|
|||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||
|
||||||||||
