Translate this page:
Please select your language to translate the article


You can just close the window to don't translate
Library
Your profile

Back to contents

Culture and Art
Reference:

Modern animation technologies in web design

Dadianova Irina

PhD in Sociology

Associate Professor, Department of Information Technology and Computer Design, St. Petersburg State University of Culture

191028, Russia, g. Sankt Peterburg, ul. Mokhovaya, 14, kv. 32

newspaper2004@yandex.ru
Other publications by this author
 

 

DOI:

10.7256/2454-0625.2022.2.36463

Received:

15-09-2021


Published:

04-03-2022


Abstract: The subject of this research is animation technologies in modern visual culture, their role and importance in web design and development trends. The purpose of the study is to determine the role of animation in modern visual culture, in general, and in web design, in particular. The main tasks include, firstly, the analysis of trends in the development of the sphere of animation used in web design; secondly, the identification of key characteristics of web animation and the classification of the main animation forms; thirdly, the analysis of the technological aspect of the development of web animation with specific examples of tools that implement this or that a different technology. In the course of the study, both general logical research methods (analysis and synthesis, deduction and induction, generalization) and methods of systematization of scientific knowledge – typologization and classification were used. The novelty of the research lies in rethinking the importance of animation technologies in modern visual culture. As a result of the research, the specific features of web animation, its role in modern web design, the main areas of application, forms, methods and techniques were highlighted. The technological aspect of web animation creation was also analyzed, the classification of modern web technologies that allow solving various tasks facing web animation was presented.


Keywords:

Visual culture, Computer technology, Computer science, Animation, Animation effects, Web animation, Graphical interface, Website design, Web technologies, The Internet

This article is automatically translated.

At the current stage of social development, animation has firmly taken its place in modern visual culture and has become widespread in various fields of activity – advertising, business, education. Popov E.A. asserts that "the expansion of computer technologies into the field of culture and art at the turn of the XX and XXI centuries contributed to the transition of animation to a new, larger-scale and qualitative level, requiring analytical study of new types of animation works and their interaction with previously formed ones." [8, p.21]

The term "animation" comes from the Latin "anima" – soul. Animation translates from French as "animation". Animation is understood as "a kind of spatio-temporal art, an artistic image based on animating any objects by attributing motion to them." [12, p.70] Animation can also be defined as "a type of artistic creativity belonging to the category of audiovisual arts, the distinctive feature of which is the "revival", the endowment of the "soul" of the image created artificially, through a variety of techniques and means of expression." [8, p.42]

The rapid development of computer technology has made it possible to simplify the creation of animation and expanded the boundaries of its application. Various forms of animation are used in design, on television, on the Internet.

The subject of this study is web animation used in the interfaces of modern web applications, its functions in the process of interaction between the user and Internet resources, forms and technologies for creating animation effects. The research used general logical research methods (analysis and synthesis, deduction and induction), methods of systematization of scientific knowledge – typologization and classification. The scientific novelty of the research lies in the consideration of the current trends in the evolution of the role of animation in modern web design, as well as in the systematization of modern technologies for creating web animation.  The practical application of the results is realized within the framework of teaching by the author of the university disciplines "Web Design", "Multimedia technologies", "Animation design" for students of the "Design" training direction.

There are two directions of animation development – non-commercial (author's) and commercial. The author's animation is engaged in the search for new artistic values, new expressive forms and means to express the creative idea of the creator. Commercial or mass animation, intended for a wide range of viewers, has as its main goal the promotion of goods and services and the conquest of commercial markets.

Animation also plays a significant role on the Internet and can be presented in various forms - both in the form of separate animated videos and as components of websites. Animation integrated into the website helps to attract attention to a certain point on the page and push the user to action. An animated object forces the user to react to it and perform some action. Animation also makes it possible to demonstrate any goods or services in more detail, with details, from interesting angles and with illustrations. [6, p.267]

At the moment, one of the most popular areas of web design is the field of interface development, since a well-designed interface allows you to make user interaction with a website more efficient and comfortable. [11, p.342]

Not so long ago, Adobe Flash technology was dominant in the field of web animation, but it usually implemented entertainment and advertising functions, since flash technology was mainly used to develop promo sites, games and animated banners. With the advent of HTML5 technologies combined with CSS3, animated objects have become an integral part of an effective interface. Interface animation includes various changes in the characteristics of an object – its size, position in space, transparency, color, shape, and so on. – in response to a user action or a programmed event. [9, p.342]

Let's look at the main functions of animation of objects integrated into the interface of a website or application:

- imitation of the real world. Transferring the characteristics of real objects to the interface elements brings the interface closer to the user, makes the use of the site more psychologically comfortable.

- contextual or binding. Animation helps the user to realize what processes are being implemented in the interface at the moment. Contextual animation is implemented in various interface elements – pop-ups and notifications, loading indicators (preloaders), smooth transitions between pages.

- stylistic. From an artistic point of view, creating a unique visual image based on animation sets the website apart from the rest, helps to build up from competitors. [1, p. 58]

The appearance of animation effects can be brought to the following classification:

- animation when scrolling the page, alternate appearance of new elements. The scroll bar acts as a timeline;

- the animation of the layout change consists in the dynamic movement of page elements when the window is resized;

- animation of layers. Layers superimposed on each other, each layer has a separate animation;

- micro-animation. Minor changes to the interface elements that prompt action (button, link, checkbox).

The competent use of different types of animation creates a comfortable space for the user to work on a website or application. However, an excessive amount of animation and animated elements, an overloaded web page structure leads to a decrease in the speed of working with the website. Animation effects are not supported by all browser versions.

The introduction of animation is an important part of the process of developing the interface of a website or application. Reasonable use of animated elements increases the level of attractiveness and comfort of user interaction with a website or application. [3, p. 113]

Animation is usually associated with animation or video creation. However, animation has also become widespread in the web development environment. Modern websites use various types of animations that allow you to attract the user's attention, place accents and make the use of the site more comfortable and attractive.

Figure 1 is an animated illustration showing the differences between the two fonts from a landing page dedicated to the Baskerville font (here and further, the works of students of the Department of Information Technology and Computer Design of St. Petersburg State University are used for illustrations).

Various types of animation can be used on the Internet, but the most popular are animated interface elements that reveal the purpose and functionality of the user interface more effectively than static text. [10, p.421] Animation also allows you to focus the user's attention and direct his actions in the right direction. There are special requirements for high-quality interface animation: it should be functional, well-developed and not irritate the user with an overly active design.

The next important type of web animation is the waiting animation, which is a response to the user's need to know that the process is running and at the moment you need to wait without performing any actions. Waiting animations are implemented in the form of preloaders (loaders) with a wide variety of designs consistent with the overall visual concept of the site.

Also, recently, the so-called narrative animation (storytelling) has become increasingly popular, which consistently tells a story, leading the user along. Such animations can tell about the site itself and its history, product or service. A suitable illustration would be a website demonstrating the process of assembling a new product or implementing a process in front of the user.

Figure 2 is a fragment of an animated webcomic dedicated to the advantages of using a bicycle in urban conditions.

Finally, we note that a large share of the Internet services market is occupied by animation created for advertising purposes. Advertising animation often consists of short video clips that vividly, clearly and quickly convey information so that it makes the maximum impression and is deposited in the minds of potential buyers. Advertising animation can describe the essence of a brand, broadcast information about a product or service, and motivate to buy.

Figure 3 – Design of the main page of an advertising site using animation.

At the moment, web animation is a full-fledged part of the website design and is designed to improve the usability of the site. Let's consider what advantages the use of animation on the site brings. Firstly, animation helps to place accents and attracts visitors to important details. So, with the help of animation, you can highlight the main information on a web page, draw attention to the goods that need to be sold first, and indicate information about available discounts. Animation can also make site navigation more understandable and accessible. Secondly, animation is used to express emotions (for example, expressing approval when the user performs the right action, and vice versa). Thirdly, animation is able to reflect the physical characteristics of the object. Fourth, animation creates motivation to perform targeted actions (for example, animation accompaniment of all user registration steps).

As for the technologies for creating web animation, at the moment they are quite diverse. The leading position is occupied by technologies of cascading style sheets of the third generation (CSS 3.0) and the JavaScript web programming language.

Cascading style sheets of the third generation make it possible to create animations and animated transitions between different states of objects using keyframes. The main advantages of CSS animations are the absence of the need to connect external visual effects libraries and high performance. However, CSS cannot reproduce complex physical characteristics and simulate realistic movement. There is also a limit on the number of animations played in a row. [5, p. 379]

Composite animations are best developed using the JavaScript web programming language, which provides a wider range of features. JavaScript has its own functionality for animation development, however, external additional libraries (for example, jQuery) are most often used. In this case, it should be borne in mind that the performance of the site will depend on the library selected and on the complexity of the programmed animation. Thus, JavaScript animations provide more opportunities in creating advanced animations than CSS. [9, p. 269]

The next technology for creating web animations that is gaining popularity is (scalable vector graphics). SVG is a vector graphics format that allows you to scale SVG images and animations without loss of quality. You can animate SVG elements using CSS and JavaScript, as well as using your own programming language called SMIL. [10, p.221]

To create complex animation effects, including three-dimensional animation and virtual reality effects, the WebGL web graphics library is often used. The web graphics library allows you to create animations with a frame rate of 69 frames per second, which makes it possible to create high-quality animation effects of a high level.

As for the various tools for creating web animations, they are mostly represented by various external libraries, such as GreenSock (GSAP), ScrollMagic, Velocity.js, Mo.js, Anime.js and others. A powerful tool for developing three-dimensional animations is the library Three.js . Adobe After Effects is also often used to create and render web animations.

There are also software tools that allow you to animate elements of web pages without programming knowledge. A variety of website designers, such as Readymag and Webflow, make it possible to create a website and animate its elements using an intuitive interface.

Being a popular website builder, Readymag allows you to animate elements of a website, apply basic animation effects (scaling, changing transparency, moving, rotating), adjust the animation time and speed, scroll sequence, binding to events. Webflow is a constructor that allows you to create complex multi–pass animations without writing code. [2, p.174]

Thus, it can be concluded that in recent years web animation has undergone significant changes in terms of its role in web design, changing its main function from entertainment to managing user interaction with a web resource. It should also be noted that there has been a paradigm shift in the development of web animation - a whole pool of fundamentally new technologies and tools has appeared, which has made it possible to raise web animation to a new level of development, requiring rethinking and a new systematic approach to the study and teaching of web design.  

References
1. Vasiliev, N.P. (2019) Design and development of WEB-applications. Introduction to frontend and backend development with JavaScript and node.js. St. Petersburg, Russia: Lan.
2. Veitman, V. (2010) Programming for the Web. Moscow, Russia: Williams Publishing House.
3. Garrett, D. (2015) Web design. Elements of interaction experience. St. Petersburg, Russia: Symbol-plus.
4. Grant, K. (2019) CSS for the pros. St. Petersburg, Russia: Piter.
5. McFarland, D.S. (2017) The New Big Book of CSS. St. Petersburg, Russia: Piter.
6. Marcott, I. Responsive Web Design: No. 1. Moscow, Russia: Mann, Ivanov and Ferber, 2012. 176 p.
7. Kravtsov, N. (2019) History of animation: how art is born. Moscow, Russia: LitRes Samizdat.
8. Popov, E.A. (2011) Animated work: typology and evolution. St. Petersburg, Russia: St. Petersburg State University of Trade Unions.
9. Robin, N. (2019) Building dynamic websites with PHP, MySQL, JavaScript, CSS and HTML5. St. Petersburg, Russia: Piter.
10. Robson, E. (2019) Learning HTML, XHTML and CSS. St. Petersburg, Russia: Piter.
11. Raw, Y. (2019) Modern web design. Desktop and mobile. Moscow, Russia: Dialectika.
12. Yumashev, D.O. (2015) Animation in the mass media system: development of the communicative potential of animation. Scientific Bulletin of the Belgorod State University, Series: Humanities, 27 (18), 68-72.
13. Yatsyuk, O. G. (2009) Multimedia technologies in the design culture of design: humanitarian aspect. Moscow, Russia: VNIITE.

Peer Review

Peer reviewers' evaluations remain confidential and are not disclosed to the public. Only external reviews, authorized for publication by the article's author(s), are made public. Typically, these final reviews are conducted after the manuscript's revision. Adhering to our double-blind review policy, the reviewer's identity is kept confidential.
The list of publisher reviewers can be found here.

The author presented his article "Modern animation technologies in web design" to the magazine "Culture and Art", which conducted a study of modern animation technologies and the possibilities of their application. The author proceeds in studying this issue from the fact that at the present stage of development animation has firmly taken its place in visual culture and has become widespread in various fields of activity – advertising, business, education. The rapid development of computer technology has simplified the creation of animation and expanded the boundaries of its application. Various forms of animation are used in design, on television, and on the Internet. The relevance of the research is due to the fact that modern computer technologies have already found wide practical application in all spheres of life, including the field of culture and art, and need scientific systematization and analysis, therefore, this is the scientific novelty of the research. The theoretical basis of the study was the work of such researchers as E.A. Popov, D.O. Yumashev, O.G. Yatsyuk and others. The empirical basis of the study was samples of works by students of the Department of Information Technology and Computer Design of St. Petersburg State University. The purpose of the study is to consider the current trends in the evolution of the role of animation in modern web design, as well as to systematize modern technologies for creating web animation. The subject of this study is web animation used in the interfaces of modern web applications, its functions in the process of interaction between the user and Internet resources, forms and technologies for creating animation effects. The research used general scientific research methods (analysis and synthesis, deduction and induction), methods of systematization of scientific knowledge – typologization and classification. The practical application of the results is realized by the author within the framework of teaching such disciplines as "Web design", "Multimedia technologies", "Animation design" for students of the "Design" field of study. In the article, the author gives the following definition of animation: "a type of artistic creation belonging to the category of audiovisual arts, the distinctive feature of which is the "revival", endowing with the "soul" of an image created artificially through a variety of techniques and means of expression." To achieve this goal, the author carried out a detailed functional analysis of the types and directions of animation according to several criteria. Thus, the author identifies the following areas of animation development: non-commercial (author's) and commercial. On the Internet, animated objects can be either in the form of separate videos or as components of websites. The author notes the following functions of animation of objects integrated into the interface of a website or application: imitating the real world, contextual or connecting, stylistic. The author presents a classification of the appearance of animation effects: animation when scrolling the page, alternate appearance of new elements; animation of layout changes, consisting in dynamic movement of page elements when resizing the window; animation of layers; micro-animation (button, link, checkbox). Analyzing the types of animation in modern websites, the author gives the following classification: animated interface elements; animation of expectation, animation of narration. According to the author, a significant share of modern animation in the creation of websites and applications is accounted for by advertising animation, which allows to draw the consumer's attention to certain information and create motivation to perform targeted actions. According to the author, the use of animation technologies provides a number of advantages, namely, attracting the attention of visitors to certain details, creating accessible and understandable navigation, expressing emotions, etc. The author also gives a detailed description of technologies for creating web animations (technologies of cascading style sheets of the third generation (CSS 3.0), JavaScript web programming language, scalable vector graphics), software tools (various web graphics libraries and site designers). After conducting the research, the author comes to the conclusion that web animation has undergone significant changes in terms of its role in web design, its main function has become the management of user interaction with a web resource. There has been a paradigm shift in the development of web animation, fundamentally new technologies and tools are constantly emerging that allow web animation to rise to a new level of development, requiring rethinking and a new systematic approach to the study and teaching of web design. It seems that the author in his material touched upon relevant and interesting issues for modern socio-humanitarian knowledge, choosing a topic for analysis, consideration of which in scientific research discourse will entail certain changes in the established approaches and directions of analysis of the problem addressed in the presented article. The results obtained allow us to assert that the use of modern animation technologies in the field of culture and art is of undoubted cultural and art criticism interest and can serve as a source of further research. The material presented in the work has a clear, logically structured structure that contributes to a more complete assimilation of the material. This is also facilitated by an adequate choice of an appropriate methodological framework. The bibliographic list of the study consists of 13 sources, which seems sufficient for the generalization and analysis of scientific discourse on the subject under study. The author fulfilled his goal, received certain scientific results that allowed him to summarize the material. It should be noted that the article may be of interest to readers and deserves to be published in a reputable scientific publication.