| Barupa's Website Design Tutorial | ||
|
|
||
|
Graphics are a special challenge for web designers, requiring balance between overuse and skimpiness. A site filled with graphic images can have charm and impact. The secret for effective graphics is to stick to the theme and identity of the website. Logos as an identity predate the web, but a carefully chosen webpage logo clearly identifies the site and is a visual center of page design. Two types of images are used on webpages: gif and jpeg. Gif images are clipart type images; many are animated by a string of movements which cycle continually, or cycle once and freeze on a single image. Jpeg images are typically photographic, with subtle shading and blending rather than crisp lines. Icons are small gif images, about 25 pixels square. Visually descriptive icons can represent various subjects or links, especially if the icon is carried through to the page being linked to. Intuitive icons, such as arrows, help navigation when used consistently throughout a site (although you should always provide text links at the bottom of a page for accessibility by the disabled). Digital cameras or scanners create photographs or documents to put on webpages, but remember that most educational access is many times faster than the home modem of a visitor. An image that displays quickly on a professional workstation will take half a minute to load with a modem; several photos on a page can take more than a minute. Viewers won't wait long for a page to load--the average is 10 seconds--before clicking to something else. Limit large photos to one or two per page. Use LView or another graphics editor to reduce file size of digital camera/scanner images. Be careful when using Composer's Image Properties window to change the length and width of a graphic. While an image can be reduced for better page balance, an image reduced in this manner does not change load time. Enlarging images gives poor results and animated gifs often cannot be adjusted. The web design community persistently argues about animated gifs, but animated gifs can be effective, especially on school websites. A single animated gif at the top of a heavily texted page punctuates a theme and adds a bit of whimsy. When the visitor scrolls down the page, animation scrolls off the window, so the viewer is not distracted while reading. On navigation pages with little text, several animated images can be used, because the viewer spends too short a time on the page for movement to become annoying. Placement of images on a webpage can enhance or undermine a page. Webpages have more 3-D quality than printed pages, and since we unconsciously experience gravity, our senses are jarred by compositions that ignore it. Place weightier elements further down the page than lighter elements, or balance them with heavy text areas. Since we read from left to right, asymmetric page layout should have left-to-right horizontal and top-down vertical direction, so the eye flows to the lower right corner. Pages are often longer than a single window, so achieving such balance is a challenge. A right-facing graphic looks better on the left side of a page, and a left-facing graphic looks better on the right side of a page. Centering such images may not alleviate the conflict in our perception--set them off-center, away from the direction they face. Use a program, such as LView to flip an image for better orientation. If a webpage looks odd, try rearranging text areas, graphics, and empty space for better balance. Templates designed for headers, footers and colors may need to be modified during graphic and content layout. |
||
|
Barbara Paciotti 2004
|
||
Intro | 1-Identity | 2-Customer | 3-Navigation | 4-Layout | 5-Content | 6-Graphics | Back to HOMEPAGE