Using Graphic Images On Web Pages

Using Graphic Images On Web Pages

Perhaps one of​ the​ biggest mistakes web page designers make is​ to​ misuse or​ overuse graphic images on web pages. Designers become so enthusiastic about using new technology that they tend to​ focus on "look what we can make for​ you" rather than a​ web page's functionality.

Web page graphics must serve a​ function. if​ a​ graphic image's only function is​ "to look cool," you are unnecessarily increasing the​ download time of​ your web pages. "Looking cool" can ultimately cost you more money and​ make you lose potential customers.

The following list is​ a​ summary of​ the​ types of​ graphic images that are acceptable on a​ web page:

Navigation buttons - Used to​ help visitors navigate your web site. if​ designed well, these buttons can be much easier to​ read and​ find than text links.

Image maps - Also used to​ help visitors navigate your web site. if​ designed well, image maps greatly add to​ the​ visual appeal of​ a​ web page but can considerably increase the​ page's download time.

Logo - Used for​ your corporate or​ business identity. Logos increase brand name recognition and​ add visual appeal to​ any document or​ web page.

Bullet points - Used to​ draw your visitors' eyes to​ the​ main points of​ your document. Also used to​ break up a​ web page full of​ paragraphs.

Mastheads - Also known as​ a​ title graphic. Main function is​ to​ let your visitors know which web page they are on. Adding clip art or​ an​ illustration to​ a​ masthead adds more visual appeal.

Divider lines or​ horizontal rules - Commonly used to​ separate footers, categories within a​ single web page, and​ FAQ questions and​ answers.

Background images - Used to​ enhance the​ visual appeal of​ a​ web page and​ make a​ web site easier to​ navigate. One of​ the​ most common background images is​ a​ sidebar which usually contains the​ links to​ the​ other pages in​ your site.

Headings (text graphic) - Commonly used to​ preserve a​ typeface that many people do not have on their computers.

Photos - Commonly used to​ make your web pages seem more personal and​ more inviting. Visitors' eyes are naturally drawn to​ photos of​ people. an​ absolute necessity to​ showcase products on certain e-commerce sites.

All graphic images on your web site should match in​ colour, typeface, and​ special effects. for​ example, the​ text in​ all of​ your navigation buttons should use the​ same typeface and​ have the​ same special effects on them (such as​ a​ drop shadow). Your navigation buttons, mastheads, bullet points, and​ divider lines look best if​ they are designed using one of​ the​ colours in​ your logo.

For a​ truly professional-looking web site, the​ minimum set of​ graphics on web pages should be a​ set of​ navigational graphics, a​ logo, bullet points, and​ set of​ mastheads. if​ this set of​ graphics does not significantly increase a​ page's download time, then you can add other graphic images to​ enhance your site. the​ general rule is​ to​ keep web page size between 40-60K. if​ you are a​ graphic designer, photographer, architect, or​ programmer, a​ 75K web page will still give a​ relatively fast download time on a​ 28.8 Kbps modem.

Any extra graphic images on your web pages should serve a​ function that is​ directly related to​ your business. for​ example, on a​ web site, you can have illustrations serve multiple functions:

If a​ design firm has professional illustrators in​ its staff, they should showcase this talent in​ some form throughout the​ web site.

Illustrations can also serve a​ navigational function. in​ some web sites, you can tell which section of​ a​ web site you are in​ based on the​ illustration shown.

A talented web graphic designer can design graphic images which download quickly and​ look good. Graphic images should be sized down without losing the​ integrity of​ the​ graphic image.

Remember, graphic images are primarily used to​ enhance a​ web pages function. if​ graphic images considerably increase your web pages' download time, you will have to​ either size down the​ graphic images, replace them with smaller images, or​ replace them with the​ HTML default bullets, horizontal rules, or​ coloured heading text

You Might Also Like:

No comments:

Powered by Blogger.