The School for Champions is an educational website that shows you how to achieve your dreams.



Web Design topics

Initial Considerations

Define the Purpose of Your Website

Goals for Web Designers

Become a Champion in Website Design

Overview of Web Design

Reasons for a Website

Concerns About Website Effectiveness

Getting People to Visit Your Web Site

Using Animation on a Web Page

Fundamentals

Basic Steps in Developing a Web Site

Managing Your Images

Reasons for a Slow Web Page

Web Pages Should Be Readable

Web Browser Popularity Statistics

Database-Driven Web Sites

SEO Table Trick for Left-Hand Navigation

List of Search Engines

Usability

Breadcrumbs Show Users Where They Are

Redirect to Another Web Page

Also see

Weekly Feedback Blog

Web Design Survey Results

SQL Development

Flash Development

ColdFusion Development


SfC Home > Web Design >

Explanation of Uses of Animation on a Web Page - Succeed in Web Design. Also refer to GIF animator, Adobe Flash, java, advertising, banner ads, demonstrations, entertainment, cartoons, navigation, mouse-over, Ron Kurtus, School for Champions. Copyright © Restrictions

Uses of Animation on a Web Page

by Ron Kurtus (revised 24 June 2008)

Animation on a web page is any form of movement of objects or images. Animations are usually done in Adobe Flash, although Java and GIF animations are also used in many websites. Streaming video in Flash is coming increasingly popular.

Reasons to have motion on a web page are to draw attention to something, to provide a demonstration or to entertain. The need for movement on a page depends on the purpose and content of the page. A financial institute would not really need animations on their pages, while an entertainment site obviously would have such movement.

Questions you may have include:

This lesson will answer those questions. There is a mini-quiz near the end of the lesson.

Drawing attention

You can use animation to draw attention to something you want the user to look at. This can range from blinking text to movement of items as in a cartoon. It is primarily used in online advertisement.

Entice you to action

For example, you all have seen banner ad in websites. The animations in the add are intended to attract your attention and entice you to take an action, like clicking on the banner to see more about the product or service. Another example is an animated company logo. Its movement draws your attention to the logo.

Too much no good

Unfortunately, too much of a good thing can backfire. Animated banner ads or company logos can become very irritating if they are continually blinking or moving while you are trying to read the content of the page. Certainly, the objective of the company is not to alienate customers, but that is often what they do through over-animation.

No value

Drawing attention to something of no use is also a negative application of animation. An example is an animated separator line. Cute, but of no real value.

Demonstrating

One reason to have animation is to help to demonstrate something you are explaining in your message.

Useful for products

Although a picture or illustration is useful, in some situations it is not sufficient to describe some action. An animation or video is necessary. An example of this is demonstrating how a device works.

Don't force users

Note that a demonstration is only effective if the user wants to see it. Some business sites force users to watch a demonstration of their product line, when they really wanted other information.

Slow loading time

Another problem is when animations or videos take too long to download. This often results in abandonment of the page.

Entertaining

If course, entertainment in the form of a game or a comic strip often uses motion fulfill its goal or to keep interest. There are many online game and entertainment sites on the Web.

Only when asked for

Entertainment when it isn't asked for is a turn-off. This type of animation is also not appropriate for most business sites.

Can show creativity

Sites advertising creative services—especially related to graphical design, entertainment, or advertising—should have animation to show off their creativity.

Summary

Animation on a web page is any form of movement of objects or images. Reasons to have motion on a web page are to draw attention to something, to provide a demonstration or to entertain. The need for movement on a page depends on the purpose and content of the page.

Answers to Readers' Questions


Use your imagination to create new things


Resources

The following resources provide information on this subject:

Websites

Web Page Design Resources

Books

Top-rated books on Website Design


Mini-quiz to check your understanding

1. What should you beware of when adding animation to a page?

That you do not have enough happening

That it doesn't irritate the user

That cartoon characters look real

2. Why would you demonstrate a concept using animation?

You never should do it

It allows you to include advertising

It helps to illustrate what you are explaining

3. What purpose would a graphic designer have to include animation in his or her site?

To show special skills

To waste bandwidth

Graphic designers should never have Web sites

If you got all three correct, you are on your way to becoming a Champion in Web Design. If you had problems, you had better look over the material again.


What do you think?

Do you have any questions, comments, or opinions on this subject? If so, send an email with your feedback. We will try to get back to you as soon as possible.


Share link

Feel free to establish a link from your website to pages in this site.

Or use our form to send this link to yourself or a friend.


Students and researchers

The Web address of this page is
www.school-for-champions.com/web/animation.htm.

Please include it as a reference in your report, document, or thesis.


Where can you go from here?

School for Champions

Web Design topics

Using Animation on a Web Page


The School for Champions helps you become the type of person who can be called a Champion.