Skip to main content
Log in

Multimedia webpage visual design and color emotion test

  • Published:
Multimedia Tools and Applications Aims and scope Submit manuscript

Abstract

Colors and visual design are the main visual languages for expressing the emotions and content of a webpage. The layout of a webpage is crucial to website aesthetics and affects user preference. A webpage’s title, image, colors, and structure affects the design style of its visual interface. This study consisted of two experiments. Experiment 1 focused on the color emotional characteristics of multimedia webpage color combinations and identified the most popular dual-tone color designs for multimedia webpages. Experiment 2 involved an examination of the optimal visual effect design for multimedia webpage composition. Ten types of geometric shapes were selected and combined with dynamic pictures, and the combined products were then used to conduct a multimedia dynamic pictorial webpage experiment; the purpose of the experiment was to test the effects of geometrical dynamic shapes on webpage psychology and determine the most popular multimedia dynamic picture visual design style. The researchers used semantic differential and Likert scales to conduct psychological tests aimed at measuring psychological reactions to various webpage colors and visual designs. The results indicated that the most popular color combinations for multimedia webpages are cyan and gray, cyan and black, and blue violet and gray. The most suitable graphic shape for multimedia visual designs is the oval and square dynamic picture composition. The results of the multimedia webpage color and visual effect design experiments can serve as a reference for webpage design-related research and to webpage designers.

This is a preview of subscription content, log in via an institution to check access.

Access this article

Price excludes VAT (USA)
Tax calculation will be finalised during checkout.

Instant access to the full article PDF.

Fig. 1
Fig. 2
Fig. 3
Fig. 4
Fig. 5

Similar content being viewed by others

Data availability

Sources such as research data (data) were completed through questionnaires, Google statistics tables, and SPSS statistical software statistics. If the journal accepts the article, you can get the raw data with the appropriate author.

References

  1. Adami E, Jewitt C (2016) Special issue: social media and the visual. Vis Commun 15(3):263–270

    Article  Google Scholar 

  2. Breves P, Dodel N (2021) The influence of cybersickness and the media devices’ mobility on the persuasive effects of 360° commercials. Multimed Tools Appl 80:27299–27322

    Article  Google Scholar 

  3. Caple H, Knox JS (2012) Online news galleries, photojournalism and the photo essay. Vis Commun 11(2):207–236

    Article  Google Scholar 

  4. Castellano G, Lella E, Vessio G (2021) Visual link retrieval and knowledge discovery in painting datasets. Multimed Tools Appl 80:6599–6616

    Article  Google Scholar 

  5. Celentano A (2017) Interactive web-based hypermedia coordination. Multimed Tools Appl 76:5511–5538

    Article  Google Scholar 

  6. Chen Y, He F, Li H, Zhang D, Wu Y (2020) A full migration BBO algorithm with enhanced population quality bounds for multimodal biomedical image registration. Appl Soft Comput 93:106335

    Article  Google Scholar 

  7. Chen Y, Yu L, Westland S, Cheung V (2021) Investigation of designers' colour selection process. Color Res Appl 46(3):557–565

    Article  Google Scholar 

  8. Cyr D, Trevor-Smith H (2004) Localization of web design: an empirical comparison of German, Japanese, and United States web site characteristics. J Am Soc Inf Sci 55(13):1199–1208

    Article  Google Scholar 

  9. Demir Ü (2020) Investigation of color-emotion associations of the university students. Color Res Appl 45(5):871–884

    Article  MathSciNet  Google Scholar 

  10. Dionisio M, Nisi V (2021) Leveraging transmedia storytelling to engage tourists in the understanding of the destination’s local heritage. Multimed Tools Appl. https://doi.org/10.1007/s11042-021-10949-2

  11. Duce D, Herman I, Hopgood B (2002) Web 2D graphics file formats. Comput Graph Forum 21(1):43–64

    Article  MATH  Google Scholar 

  12. Fateminia M, Ghotbabadi TD, Azad KM (2020) Perceptions of the taste of colors in children and adults. Color Res Appl 45(4):743–753

    Article  Google Scholar 

  13. Frery AC, dos Santos Melo CA, Fernandes RC (2000) Web-based interactive dynamics for color models learning. Color Res Appl 25(6):435–441

    Article  Google Scholar 

  14. Guo F, Li F, Nagamachi M, Hu M, Li M (2020) Research on color optimization of tricolor product considering color harmony and users' emotion. Color Res Appl 45(1):156–171

    Article  Google Scholar 

  15. Gürsimsek ÖA, Animated (2016) GIFs as vernacular graphic design: producing Tumblr blogs. Vis Commun 15(3):329–349

    Article  Google Scholar 

  16. Hsu C-C (2011) Factors affecting webpage’s visual interface design and style. Proc Comput Sci 3:1315–1320

    Article  Google Scholar 

  17. Hunt RWG (2001) How to shop on the web without seeing red. J Soc Inf Disp 9(2):79–86

    Article  Google Scholar 

  18. Jaklič A, Solina F, Šajn L (2017) User interface for a better eye contact in videoconferencing. Displays. 46:25–36

    Article  Google Scholar 

  19. Jalali NY, Papatla P (2016) The palette that stands out: color compositions of online curated visual UGC that attracts higher consumer interaction. Quant Mark Econ 14:353–384

    Article  Google Scholar 

  20. Jeon E, Han Y, Nam M (2020) How you see yourself influences your color preference: effects of self-construal on evaluations of color combinations. Psychol Mark 37(7):980–994

    Article  Google Scholar 

  21. Jeong SH, Lee KP (2005) Extraction of user’s representative emotions expressed white using a product. J Korean Soc Des Sci 18(1):69–80

    Google Scholar 

  22. Jessen IB, Graakjær NJ (2013) Cross-media communication in advertising: exploring multimodal connections between television commercials and websites. Vis Commun 12(4):437–458

    Article  Google Scholar 

  23. Jin H, Miao Y, Chen X et al (2020) Motivation research on the participation of multimedia web page users in “share” behavior: a case study of Alipay. Multimed Tools Appl. https://doi.org/10.1007/s11042-020-08819-4

  24. Katerattanakul P, Siau K (2008) Factors affecting the information quality of personal web portfolios. J Am Soc Inf Sci 59(1):63–76

    Article  Google Scholar 

  25. Kodžoman D, Hladnik A, Pavko Čuden A, Čok V (2021) Exploring color attractiveness and its relevance to fashion. Color Res Appl:1–12. https://doi.org/10.1002/col.22705

  26. Koivunen-Niemi L, Masoodian M (2020) Visualizing narrative patterns in online news media. Multimed Tools Appl 79:919–946

    Article  Google Scholar 

  27. Lin H (2014) Red-colored products enhance the attractiveness of women. Displays. 35(4):202–205

    Article  Google Scholar 

  28. Liu X, Jiang Y (2021) Aesthetic assessment of website design based on multimodal fusion. Futur Gener Comput Syst 117:433–438

    Article  Google Scholar 

  29. MacKay B, Watters C (2012) An examination of multisession web tasks. J Am Soc Inf Sci 63(11):1183–1197

    Article  Google Scholar 

  30. Man Z, Li J, Di X et al (2021) A novel image encryption algorithm based on least squares generative adversarial network random number generator. Multimed Tools Appl 80:27445–27469

    Article  Google Scholar 

  31. Na N, Suk H-J (2017) Optimal display color for nighttime smartphone users. Color Res Appl 42(1):60–67

    Article  Google Scholar 

  32. Ng AWY, Chan AHS (2018) Color associations among designers and non-designers for common warning and operation concepts. Appl Ergon 70:18–25

    Article  Google Scholar 

  33. Pan Y, He F, Yu H (2020) Learning social representations with deep autoencoder for recommender system. World Wide Web 23:2259–2279

    Article  Google Scholar 

  34. Pelet JÉ, Papadopoulou P (2012) The effect of colors of e-commerce websites on consumer mood, memorization and buying intention. Eur J Inf Syst 21:438–467

    Article  Google Scholar 

  35. Pichl M, Zangerle E (2021) User models for multi-context-aware music recommendation. Multimed Tools Appl 80:22509–22531

    Article  Google Scholar 

  36. Pollet TV, Costello J, Groeneboom L, Peperkoorn LS, Wu J (2019) Do red objects enhance sexual attractiveness? No evidence from two large replications. Displays. 56:23–29

    Article  Google Scholar 

  37. Rinaldi AM, Russo C (2021) Using a multimedia semantic graph for web document visualization and summarization. Multimed Tools Appl 80:3885–3925

    Article  Google Scholar 

  38. Rodriguez-Gil L, Orduña P, García-Zubia J et al (2018) Interactive live-streaming technologies and approaches for web-based applications. Multimed Tools Appl 77:6471–6502

    Article  Google Scholar 

  39. Saito D, Saito K, Notomi K, Saito M (2006) A study on visibility estimation of web-safe colors using paired comparison and discriminant analysis. Elect Eng Jpn 157(2):32–39

    Article  Google Scholar 

  40. Shen Z, Zhang L, Li R, Hou J, Liu C, Hu W (2021) The effects of color combinations, luminance contrast, and area ratio on icon visual search performance. Displays. 67:101999

    Article  Google Scholar 

  41. Sun L, Yamasaki T, Aizawa K (2018) Photo aesthetic quality estimation using visual complexity features. Multimed Tools Appl 77:5189–5213

    Article  Google Scholar 

  42. Walsh T, Kapfhammer G, McMinn P (2020) Automatically identifying potential regressions in the layout of responsive web pages. Softw Test Verif Reliab 30(6):e1748

    Google Scholar 

  43. Wan H, Ji W, Wu G, Jia X, Xue Z, Yuan M, Wang R (2021) A novel webpage layout aesthetic evaluation model for quantifying webpage layout design. Inf Sci 576:589–608

    Article  MathSciNet  Google Scholar 

  44. Wang M, Li X, Chau PYK (2021) Leveraging image-processing techniques for empirical research: feasibility and reliability in online shopping context. Inf Syst Front 23:607–626

    Article  Google Scholar 

  45. Wang Y, Huang Y, Li J, Zhang J (2021) The effect of mobile applications’ initial loading pages on users’ mental state and behavior. Displays. 68:102007

    Article  Google Scholar 

  46. Wu Y, He F, Zhang D, Li X (2018) Service-oriented feature-based data exchange for cloud-based design and manufacturing. IEEE Trans Serv Comput 11(2):341–353

    Article  Google Scholar 

  47. Xu C, Zhang Q (2019) The dominant factor of social tags for users’ decision behavior on e-commerce websites. Color or text. J Assoc Inf Sci Technol 70(9):942–953

    Google Scholar 

  48. Yang CC, Liu N (2009) Web site topic-hierarchy generation based on link structure. J Am Soc Inf Sci 60(3):495–508

    Article  Google Scholar 

  49. Yu N, Kong J (2016) User experience with web browsing on small screens: experimental investigations of mobile-page interface design and homepage design for news websites. Inf Sci 330:427–443

    Article  Google Scholar 

  50. Yu H, He F, Pan Y (2020) A scalable region-based level set method using adaptive bilateral filter for noisy image segmentation. Multimed Tools Appl 79:5743–5765

    Article  Google Scholar 

  51. Zhao N, Cao Y, Lau RW (2018) Modeling fonts in context: font prediction on web designs. Comput Graph Forum. 37(7):385–395

    Article  Google Scholar 

  52. Zhenyu G, Lou J (2016) Data driven webpage color design. Comput Aided Des 77:46–59

    Article  Google Scholar 

  53. Zhu Y, Huang Z, Zhou H (2017) Modeling and verification of web services composition based on model transformation. Softw Pract Exper 47(5):709–730

    Article  Google Scholar 

Download references

Funding

Sanming University. Research Foundation for Advanced Talents, Grant Number: 21YG02S.

Author information

Authors and Affiliations

Authors

Contributions

Although this study adopted dynamic web pages on tourist landscape in the experiments, the experimental results provide a theoretical and practical reference for the selection of appropriate colors and design styles for tourism websites and web pages of other product types. This research acts as a reference for web design researchers and website designers.

Corresponding author

Correspondence to Tsuiyueh Chang.

Ethics declarations

Conflicts of interest/Competing interests

There are no conflicts of interest in the content of this article.

Additional information

Publisher’s note

Springer Nature remains neutral with regard to jurisdictional claims in published maps and institutional affiliations.

Rights and permissions

Reprints and permissions

About this article

Check for updates. Verify currency and authenticity via CrossMark

Cite this article

Kuo, L., Chang, T. & Lai, CC. Multimedia webpage visual design and color emotion test. Multimed Tools Appl 81, 2621–2636 (2022). https://doi.org/10.1007/s11042-021-11684-4

Download citation

  • Received:

  • Revised:

  • Accepted:

  • Published:

  • Issue Date:

  • DOI: https://doi.org/10.1007/s11042-021-11684-4

Keywords

Navigation