Abstract
With the rapid development of Internet technology, the dissemination of information is undergoing rapid changes. The Internet has become an indispensable part of people’s study, work, and life. In the context of the Internet, this paper analyzes the application of multimedia elements in visual communication art design, elaborates the basic concepts, visual features, and design principles of the visual communication art design, and analyzes the multifaceted aspects of multimedia elements. This paper discusses the basic methods and general rules of the application of multimedia elements in visual communication art design under the background of the Internet, as well as the research on the emotional factors and interactions of multimedia elements on people. Brain-like computing is the meaning of imitation brain. First is the structure, then the function, then from the structure design and analysis of the brain, and finally use the brain's thinking ability to solve problems. It summarizes the text, graphic images, and colors in the Internet background. The innovative application of multimedia elements such as page layout and animation in visual communication art design explains the influence of multimedia elements on the overall visual effect in visual communication art design. It explores how visual information can be conveyed more reasonably and effectively. In the context of the Internet, the application of multimedia elements has brought a new possibility for developing visual communication art design, providing a new platform for the traditional visual communication art design.
1. Introduction
Nowadays, with the rapid development of Internet technology, online media has become an emerging medium that genuinely integrates into our lives [1]. Compared with other traditional media, network media has its characteristics in technology and communication [2]. On the platform of this new information transmission supported by network technology, the visual communication design will have a new visual communication design expression suitable for it. In 1994, with the help of Michael Detrusors of the MIT (Massachusetts Institute of Technology) Computer Laboratory, Berners-Lee founded the World Wide Web (WWW), which laid the foundation for technical standards and development research for the development of web pages [3]. The brain-like computing system mainly simulates the human brain’s calculation function, analyzes and processes various data, obtains the best processing model through long-term training, and can do brain stimulation, understand brain mechanisms, treat brain diseases, etc. The rapid development of the Internet in the 1990s promoted the Internet’s rapid evolution [4]. Braun proposed the cropping and composition features of the changed image and obtained the image’s relevant information by using the image algorithm to extract the information quickly [5]. Paiva et al. proposed a memory-guided probability saliency model based on video data sets. This model memorizes changed video images, then extracts information in the background, and then conducts information fusion analysis to obtain relevant image information [6]. The Internet network architecture provided a technical platform for the development of web pages. The emergence and development of web pages also drove the modern information industry’s growth and realized the Internet as a society [7]. Development goals are an essential part of the economy and life.
A web page is the basic information publishing logic unit in the World Wide Web. This publishing method displays multimedia elements such as text, pictures, sound effects, and animations, which are the main elements of information exchange through the terminal screen, giving people convenient access to information and communication [8]. In terms of physical properties, web pages are computer-based information carriers and a collection of thousands of networks worldwide [9]. From its social role, people will naturally regard the network as the fourth media after newspapers, radio, and television. It is not only another new media, but an information exchange, information integration, and resource return [10]. With a diversified platform for class and processing, people’s wisdom and ideals are displayed on the maximum opportunity platform.
This paper takes website visual art design as the starting point. Firstly, it studies and discusses the five basic multimedia elements that constitute the visual art of web interface and summarizes the general rules of web interface visual design based on five basic elements [11]. The web page sample outlines the visual styles of different types of web page interfaces, analyzes the application of multimedia elements in visual communication art design under the background of the Internet, and summarizes the development trend of the visual communication art design contemporary web page interface [12].
The specific contributions of this paper include the following:(1)The application of multimedia elements in visual communication art design is analyzed(2)This paper expounds on the basic concept, visual characteristics, and design principles of the visual communication art design(3)The principle of brain-like computing is introduced(4)The influence of multimedia elements on the overall visual effect in visual communication art design is explained
The rest of this paper is organized as follows. Section 2 discusses related work, followed by color elements in the web interface in Section 3. Color elements in the web interface are discussed in Section 4. Section 5 concludes the paper with a summary and future research directions.
2. Related Work
The essence of visual communication art design is the transmission of information. Graphics, text, image, and color are the carriers of information. Every change in the way of information transmission will have an impact on visual communication design. With the changes in the media environment, the media vocabulary will also follow [13]. The increases in the visual communication design process have a very close relationship with the media. It can be said that the media change has promoted the development of the design. The changes in media and the evolution of visual communication design are shown in Table 1 [14].
Before we can visually design the web interface, we must first understand the factors that need to be paid attention to in the web interface’s visual design [15]. The visual design of the web interface has its characteristics. Unlike traditional media, the web interface includes new multimedia elements such as sound, video, and animation except for text, images, and colors, and various interactions realized by programming in code language. The effect of the web interface increases the vividness and complexity of the web interface and also makes the web designer need to consider the arrangement and optimization of more page elements [16]. This chapter will explore the five basic multimedia elements of the text like graphics, color, dynamic effects, and composition and layout of the web interface visual design to find a specific law. It can be understood as a general term for various media such as text, graphics, images, animation, sound, and videos that directly affect human senses, that is, the expression and transmission of various information carriers [17].
2.1. Elements and Characteristics of Multimedia Elements
(1)Text is a form of information expressed by words and various special symbols. It is the most used information storage and transmission method in real life. Conveying information in the text gives people a rich imagination. It is mainly used for the descriptive representation of knowledge, such as expounding concepts, definitions, principles, and problems and displaying titles, menus, and so on [18].(2)Image is one of the most important forms of information representation in multimedia software. It is a critical factor in determining the visual effect of multimedia software.(3)Animation uses human visual persistence characteristics to quickly play a series of graphic images of continuous motion changes, including special effects such as zooming, rotating, transforming, fade-in, and fade-out. Animation can visualize abstract content, making many incomprehensible teaching contents vivid and exciting. Reasonable use of animation can achieve twice the result with half the effort.(4)Sound is one of the most convenient and familiar ways people use to convey information and exchange feelings. In the multimedia courseware, according to its expression, the sound can be divided into three categories: explanation, music, and effect.(5)Video images have time series and rich information connotations, which are often used to explain the development of things. The video is very similar to the movies and TVs we are familiar with, and it plays an essential role in multimedia.
Because communication media is different from traditional media, it design focusing on multimedia visual communication design has also changed. It is mainly reflected in the new artistic expressions displayed by information design and interactive design. Knowledge can be expressed in the information, and information is defined in data. This is the causal relationship among data, information, and knowledge (see Figure 1). The information conversion process is shown in Figure 1.
Good information organization is the foundation of visual communication success. In the network-based multimedia visual communication design, visual communication’s success depends not only on the information related to every single page but on the information relationship between each page. Therefore, the visual communication design information organization in the network is richer and more complex, and the art form has the characteristics of multiple integrations and logical gradual progress. Figure 1 clearly shows the design and transformation process of information [19].
2.2. Text Elements in the Web Interface
Text is the essential carrier of Internet information, so the text’s design plays a pivotal role in the web page. In addition to transmitting information, the text displays the website’s content, enhances the visual communication effect, increases the appeal of the web page, and enhances the aesthetic value of the web page [20]. The quality of the text directly affects the quality of the entire page. Handling the relationship of the text is a problem that the designer should pay special attention to in the web page’s visual communication design. The visual characteristics of web page text include the following:(1)Uniqueness. The recognizability of the font is reflected in the unique style and strong personality impression. Create fonts of different personalities based on differences in information management concepts, cultural backgrounds, and industry characteristics.(2)Readability. The font should convey clear information, and the content is brief and easy to read. This is in line with the speed of modern information, which has the instant effect of visual communication [21].(3)Modeling. Whether the font design is successful or not, the modeling factor is the decisive condition. Under the premise of observing the principles and rules of styling, innovation, intimacy, and beauty are pursued. The font conveys the personality characteristics of the information through its morphological characteristics and strives to achieve the beauty of the communication, create a beautiful image, and improve communication efficiency.
2.3. Dynamic Effects in the Web Interface
Web design based on static text and images uses Gif animation to express a part of the line-of-sight effect. A variety of interactive techniques based on Flash-based motion animation (Motion) to induce user response have been produced. The dynamic effect (Dynamic Effect) gradually appeared. The form of motion animation is the design of time and space, which is beyond the static scope [22]. However, in the digital environment based on computers and networks, the new media has two-way interactive features that greatly support the new environment’s interaction. Dynamic effects can be divided into three types according to different interaction representation methods: interactive navigation, storytelling, and user interaction created by scripts.
Story narrative design is not only a simple performance effect but a way of designing ideas, which needs to have a plotting ability. Storytelling design also requires designers to have capabilities of narrative style and creative ideas that convey the theme. For example, Hillman Curtis, the first-generation leader in motion graphics design, used motion graphics to create illustrations of illustrator Craig Frazier. These illustrations express lyrical themes through peaceful and gentle storytelling, as shown in Figure 2.
2.4. Graphic Elements in the Web Interface
Although graphics creation has a certain degree of independence, once placed on a page, the meaning of graphics programming is to find a suitable visual relationship between graphics and other graphics and other page elements [23].(1)Processing of Graphics. The image processing includes the modification and improvement of the color, structure, and size of the image. For the layout design, the meaning of image processing is to uniformly edit the proportional relationship of the images in the layout surface, to highlight the image body at the center of the vision, and to coordinate the style between the image and other orchestration elements.(2)Combination of Graphics. The combined relationship of images mainly includes juxtaposition, primary and secondary relations, and prosody relations. The parallel connection refers to the combination of the same information level and visual form image in the layout; the primary and secondary relationship refers to the image combination with different information levels and visual forms in the layout; the prosody relationship refers to the overlap formed by the images according to certain visual laws, spiral, launch, and gradient combinations. In the page of multiple image combinations, the analysis of image information level and visual meaning is beneficial to find the internal relationship between images. The combination relationship between such images often determines the overall structure of the page [24].(3)The Composition of the Graphics. Whether it is photographic images or creative graphics, the graphic always has the visual structure formed by the creator’s subjective consciousness. For the layout page, the graphic composition itself is an important factor affecting the overall layout. The graphic composition with obvious structural style and directionality is an important reminder of the layout structure. With this feature, graphics and other elements in the page can be formed. The overall and organic connection between them creates the integrity and interest of the layout vision [25].
The motion graphic display design content can make up for the lack of two-dimensional performance in visual communication design, but for designers, there is a greater challenge.
3. Color Elements in the Web Interface
In the context of the new media era, digital technology and high-speed mobile information dissemination have changed our traditional visual communication methods. The expansion of new media to convey visual symbols is even more exciting. Due to the fast speed of information, the dissemination of new media is not affected by regions. The symbolic semantics of different cultural backgrounds will interact. The visual language nature of the image is more penetrating, with clearer visual semantics and symbolism.
The mobile information system is a relatively mature technology. Based on a comprehensive communication platform composed of modern mobile communication technology and mobile Internet technology, it realizes management services and application analysis through the interactive communication of information on multiple platforms such as handheld terminals, servers, and personal computers—terminal design. The interface design of mobile terminals has developed rapidly. From the earliest pure text and symbol design to the brilliant IOS and Android systems, the three major design elements of color, text, and graphics have been successfully integrated, which has not only changed people’s terminals [26]. Usage habits have also changed the development direction of the terminal. This article discusses the visual design of mobile terminals and, at the same time, puts forward a new point of view on the future interface visual communication design, namely, dynamic, intelligent window design. This visual communication method can play a good role in image analysis and visual analysis—the practical effect [27].
3.1. The Role of Color in Web Design
The direct psychological effect of color comes from the direct influence of physical light stimulation of color on human physiology. Psychologists have done many experiments on this. They found that, in an environment with red color, people’s pulse will speed up, their blood pressure will rise, and their emotions will be excited. In an environment with blue color, the pulse will slow down, and the mood will be quieter. Some scientists have found that color can affect brain waves; brain waves are alert to red and relaxed to blue. Since the middle of the 19th century, psychology has moved from philosophy to science, and psychologists have focused on the color psychological effects verified by experiments [28]. The psychological feelings of color give people a sense of warmth, lightness, and melancholy, excitement and calmness, gorgeousness and simplicity, comfort and fatigue, positive and negative feelings, etc. [29].
Traditionally, we know that a color image has a three-dimensional vector [R, G, B], called RGB space, in which both the color and brightness information of the image are included, such as the traditional image enhancement method for color and image transformation. While enhancing the image’s brightness, the color information will change, and supersaturation or color distortion will occur if the two pixels in the space are proportional, i.e.,
The two points of color information in the description space are the same but have different brightness. Taking an N × M color image f(x, y) as an example, consisting of a single pixel, its brightness value is within [0, 255]. The histogram can directly reflect the grayscale brightness information distribution of the image. The closer to the brightness of 255, the higher the area’s brightness, otherwise the lower. Therefore, we can separate the three primary colors, R, G, and B, separately calculate the three channels’ histogram distribution, and select the maximum value as the brightness gain. Then, formula (1) changes towhere represents the gray histogram of the red channel, represents the gray histogram of the green channel, and represents the gray histogram of the blue channel [30].
The obtained value is inverted as the primary color coefficient , and the primary color is mixed with the remaining two-channel values of the original image to obtain a new layer, which is defined aswhere i corresponds to the remaining two channels after the original color image is removed from the maximum brightness value channel. According to the above formula, we change the RGB value of the original image pixel, and the obtained new pixel value and the original image pixel value are mixed by formula (4) to obtain the last enhanced image.where a is the original image and b is the new layer obtained after the change. Substituting equations (2) and (3) into (4), the enhanced image is expressed as
3.2. Basic Design Principles for Web Page Color
Different colors have different symbolic meanings, giving people different psychological feelings. The color design of the web page should be targeted and should reflect its own characteristics. The web page’s color is unique and has its unique style, making the personality stand out and leave a deep impression on the viewer. Visual communication design mainly uses visual media to transmit information. An all-around audio-visual experience is an important form of digital media communication. For the way of digital multimedia is transmitted, visual communication design not only transmits information through vision but also integrates it into multisensory representation. The comprehensive experience of multimedia technology can be unified by editing and processing of graphics, images, text, sound, animation, and other media forms, bringing people a full range of audio-visual effects. A lot of research proved that multisensory memory is better than a single sensory memory, and the memory of the same information if perceived only by visual perception, after some time, will be less than 10%, while multisensory memory is five times that of the former, as shown in Figure 3.
It can be said that digital media communication enriches the communication effect of visual communication design, enabling designers to break through the limitations of paper media in design thinking and open up the creative space of design. The comprehensive sensory application of digital media can enable the audience to participate in information exchange actively. In the activity, it will mobilize all the perceptions of people and realize the blending of emotions and scenery to achieve the effect of efficient and interactive information dissemination.
3.3. Composition and Layout of the Web Interface
The visual characteristics of human beings determine the formation of visual processes. Because of the physiological structure of the human eye’s crystal structure, only one focus can be produced, and the line of sight cannot be kept at two or more places at the same time. The existence of many visual elements in a complicated layout makes the organization and scheduling of information difficult. According to the layout information level, reasonable classification and the complex page elements are summarized into several groups of visual level, which is the primary way to form an adequate visual level. So how do we classify page elements? First, we need to understand how humans organize visual aspects. Gestalt psychology explains this phenomenon for us. Gestalt psychology explains how humans organize visual elements as shown in Figure 4.
As shown in Figure 4, first, for proximity, similar objects in spatial locations are referred to as near or close relationships. Gestalt believes that the closer the distance between two visual elements, the easier it is for people to think of them as a whole. Therefore, the closer the page’s distance and position in the page, the more overall the visual orientation. Second, for similarity, in the actual layout design, the visual elements are often of various origins, with different visual features, finding the formal laws among these visual elements or creating uniform or similar visual features in different visual elements, which can be effective. Promote the relationship between the layout elements and form the visual whole of the layout. Third, continuity refers to a visual tissue with continuous motion or direction. Gestalt believes that a continuous visual image can direct the line of sight to form a visual whole. In page layout, continuous visual organization, especially continuous patterns with specific patterns, can often connect and closely visualize the layout to establish a specific visual order. Closedness is based on a kind of human temperament—people tend to perceive a part with intrinsic connections as a whole visual image.
4. Application Analysis of Multimedia Elements in Web Design Style Positioning-Taking Shopping Website as an Example
This article uses the Internet to search the required cases and conduct a sample selection of shopping websites. Mainly based on well-known shopping websites at home and abroad, the principle of sample selection is the homepage with diverse visual styles. First, the researcher subjectively selects 100 homepages. Through the five postgraduates with professional backgrounds, a total of 40 eligible shopping catalogs were chosen in a classified manner. Then, through the preliminary test, the cluster sample analysis divides the homepage sample into several clusters and selects 17 representative homepage samples, as shown in Table 2, for subsequent semantic difference analysis experiments.
Exploring the image semantics commonly used by users to describe web pages’ style and the relationship between image semantics, firstly refer to the 84 groups of imagery semantics summarized by Zhang Jiancheng, select 50 groups of adjectives, and filter out 13 sets of image semantics. Then, the 13 groups of image semantics were initially screened. According to the preliminary questionnaire, the final screening of the shopping website’s style was carried out, and the image semantics was reduced to 9 groups, as shown in Table 3.
The homepages of the 17 shopping websites selected were analyzed with the analysis of the researchers and the type attributes defined by the literature. Firstly, the first-page design factor of the shopping website is extracted. A total of seven design factors are removed: page layout, title design, navigation design, promotional image, product display area, web content, and color combination. The next step is to analyze different categories of each design factor. To avoid quantitative I-type analysis’s complexity, the shopping site is divided into three types, as shown in Table 4.
In order to verify the effectiveness of the visual analysis method proposed in this paper, this paper defines the technique proposed in the paper as A and then compares with other methods, including method B: multimedia design based on dynamic information model [13]; method C: based on e-learning continuity image analysis model [14]; method D: analysis method based on discriminative visual elements [16]; method E: analysis method based on reactive calculation as a model [20]; method F: based on subjective VoIP quality evaluation model [21]; method G: analysis model based on collision design optimization [23]. Except for method A, the other methods are commonly used visual analysis methods. Finally, the proportions in the image semantics of various methods are obtained through simulation as shown in Figure 5.
From the simulation analysis in Figure 5, it can be seen that each method can obtain image information, but method A is faster than other methods to obtain information, and the image converges faster. It can match the image in visual image analysis.
Taking stability and activity as an example, the design factors that have larger effects are the promotional image (D), the color combination (G), the product display area (E), the button shape (C), navigation design (B), and page layout (A). The influence of design factors is second, and the influence of web content (F) design factors is low. The analysis of the remaining experimental results is shown in Table 5.
It can be seen from Table 5 that the proportion of various design factors varies with the style of the web page, which also shows that various design attributes play different roles in a different image of style web pages. Different web design factor patterns have different effects on web page style. Some factor patterns have positive effects, and some factor types have negative effects. Table 6 shows the impact of the shopping site on the design factors for various image semantics. Due to the different proportions of each design factor type, if the sample design factor type is changed, the web page’s design style will change. Different design patterns for shopping site style image benefit value is shown in Table 6.
The principal component analysis was performed using the main component analysis method, and the results of the subjects’ subjective assessment results were used for principal component analysis. The results are shown in Table 7.
It can be found from Table 7 that the nine descriptive words in the semantic difference analysis method can be reduced to two factors axially. For the theme, the first factor is expressed as “popular, refined, lively, creative, rich, and beautiful,” which is mainly used to identify the homepage of the shopping website by the theme, so it is called the “evaluation factor.” The second factor is expressed as “professional, international, reconciliation” and so on. This stage’s meaning is to describe the image of the shopping website in the entire use and layout process, so it is called “structural factors.” In total, the above two main factors can explain 73.75% of the variation in the axial direction.
This chapter takes 17 homepages of shopping websites as an example to select the leading website style of competitive web pages and analyzes its characteristics, components, and image positioning. The main conclusions are as follows:(1)For the image positioning of the shopping website and the user, the shopping websites with prominent attribute characteristics of the structural factor will have a better positioning. The common feature of these websites is that the top of the page uses a high-definition product promotion picture that is looped, which indicates that it is an important indicator of whether there is a looping product promotion picture on the shopping website.(2)On the website with leading factors of evaluative factors, the design of the website’s product display area has become an advantage in the competition of the website. In the research data, it is found that the image display of the leading group web page product display area of the evaluation factor and the page color matching are two important indicators. Such websites have a large number of rich product display images and colorful web pages, which stimulate people’s vision and the desire to buy. However, at the same time, due to the excessive amount of information, users often cause confusion and frustration in the use process, making the time spent on the site reduced, so sites with leading structural factors cannot be a leader in the positioning of evaluative factors.(3)The color combination of the website is also an important indicator for the shopping website. In color, the user prefers the website style of the evaluative factor, and the web page based on it uses the enthusiastic and bright color; the color is rich, and the warm color is dominant, but this is actually not suitable for shopping. The color of the website, the website’s structural style, the web page based on it are simple in color design, and the color matching is higher, the color is less, fresh, and elegant, and it is a more rational color, with a color scheme that is more suitable for use in shopping websites.
5. Conclusion
The Internet’s speed has grown tremendously, and it has been amid many media in just a few decades. As the carrier of Internet communication information, the web interface must meet people’s practical needs and pay attention to the unity and integrity of the situation and content. The visual communication art design is a creative activity that blends technology and art harmoniously. It must not only consider the principle of the first nature of information transmission but also reflect the aesthetic function of the interface and the psychological and accepting forms of information received from the content and form of the page. The innovative use of multimedia elements in web interface design is a new trend in developing web interface design in the future. This paper analyzes the multimedia elements in the web interface, mainly including text, graphic images, colors, animations, and layout relationships. This paper explores various innovative methods for applying multimedia elements in web interface and visual communication art design. It also introduces the principle of web interface functionality and artistic harmony and has helped people further understand it.
Although the findings of this article have achieved stage results, the method lacks a solid theoretical foundation and efficient calculation methods. Therefore, in future work, we will work to make up for some of the theoretical flaws of this method and the efficiency of the algorithm.
Data Availability
The data used to support the findings of this study are available from the corresponding author upon request.
Conflicts of Interest
The authors declare that there are no conflicts of interest regarding the publication of this paper.