Blog - Design Animation


Website Animation, Graphic Design and Animation, and Kinetic Design

Animation in Websites

Computer animation is an “artful blend of creative vision and technology.” It has its uses in developing attractive websites. Movements in a webpage induce different reactions from users. Too little movements can cause boredom to viewers, but too much of it can be unpleasant for them. A well-done animation incites interest, while a bad animation produces distraction and increase in download times. Animation is like a hot sauce that is pleasant to the taste of most people when used sparingly, but not when used excessively.

Two factors constrain you in creating animated web pages: your skills and the limitations of the viewer’s browsers.

An article in All Web Design Blog provides the following pointers in using animations in your website:


1. Appropriateness of an animation to the contents of your site

The animation that you plan to use must have relevance to the message that you want to convey to your readers. If, for example, you are selling electronics products, then it is only appropriate to make and show animations of cool gadgets and not of any other things unrelated to electronics.

2. Effect of the animation you plan to use on the load time of your website

You should not compromise the load time of your website by putting too much animation that slows it down significantly. People may not have enough patience to wait a very long time.

3. How your animation blends with your website

Your animation might be too much for the viewers of your website. Overdoing it can make a webpage chaotic. Colors must blend properly. Some websites are more attractive with bright colors; some websites are better with soft colors. 

4. Uniqueness

How memorable is your animation to the minds of the viewers of your website? Is it unique, or is it common to other websites?

5. The use of plug-ins

If your animation requires the use of plug-ins, some people might not be able to view it.

Graphic Design and Animation

To be skilled in both graphic design and animation, some students study fine arts, communications, advertising, marketing, design services, and multimedia. Some other areas that they also study are 2D and 3D design, art history, communication design, typography, layout, drawing, and computer science. Both graphic design and animation requires knowledge in communication and graphic design software. They encourage students to acquire exceptional skills in communication and problem-solving, and to see things visually and conceptually.

Graphic design is what we see in t-shirts, magazines, billboards, corporate brandings, and web pages for private firms, while animation is what we view in televisions, films, and computers.

Kinetic Design

The animation of a product has almost the same importance as form, color, or material in terms of aesthetics. Kinetic design is the “aesthetic design of physical movement.” Animators use their knowledge in the concepts of movement to imitate reality and create special effects for the entertainment industry.4 Movement has been studied over many years in order to come up with something more creative than what we already know.5 The video is the “most natural and effective method to record motion concepts.” A designer can video the movements of an object that he is developing from different angles. He can also study the movements of the object as it moves at varying speeds.

There are two ways in which kinetic design is useful: a means of improving how objects do their functions, and a method of inventing and developing product concepts.

Critical elements of kinetic design methodology

  1. A vocabulary for motion
  2. Methods for sketching motion
  3. Recording motion

Kinetic design helps us to develop an object that not only looks like the real one but also acts like it. An illustration is a female robot that is in form and color similar to a real female human being but does not act the same way as the real one. It would be better and awe-inspiring if we could develop a female robot that can also move and walk in a manner similar to a real human. Kinetic design helps us to see a hint of life to an otherwise lifeless object.

Kinetic design helps us to develop objects that are not only functional but also artistic and beautiful. Examples are the equipment's found in sci-fi movies where the gadgets they use do not only serve their purpose but are also impressive aesthetically. It is also better if the design of an object is innovative. Example, if you could develop a faucet that has some engaging features aside from the existing features that it usually have, then the added interest of consumers will reflect in the sales of the company that developed it.5

Studying the motions of objects and using the concepts underlying them in designing is helpful in developing state-of-the-art products. The styling and appearance of a product is one thing; its movement and kinetic character is another matter.


1Thomason, Larisa. “Design Tip: Animation with JavaScript.” Net Mechanic. Aug 2000. 20 Dec 2010 <>.
2admin. “Using Animation Effectively in Web Design.” Online posting. 3 Dec 2010. All Web Design Blog. 20 Dec 2010 <>.
3“Become a Professional in Animation.” Design Training. 30 Nov 2010. 20 Dec 2010 <>.
4“Graphic Design and Animation Curriculum.” Sep 2010. 20 Dec 2010 <>.
5Hopson, Ben. “Kinetic Design and the Animation of Products.” Online posting. 1 Mar 2009. Core77. 20 Dec 2010 <>.