UI flat design and skeuomorphism mediation with neumorphism (material design)

Andreas James Darmawan(1*), Elizabeth Jessica Sentani(2), Adela Carera(3), Clarissa Fidelya Gerungan(4), Dina Agustina Lestari Gultom(5)

(1) Universitas Internasional Jakarta
(2) Universitas Internasional Jakarta
(3) Universitas Internasional Jakarta
(4) Universitas Internasional Jakarta
(5) Universitas Internasional Jakarta
(*) Corresponding Author

Abstract


This study discusses the mediation between Skeuomorphism and Flat Design through the Neumorphism or Material Design approach in interface design or user interface (UI). Skeuomorphism UI is known to present user nostalgia with realistic visuals that maintain the correlation of real objects, but often loads the performance of handheld devices. In contrast, Flat Design UI offers memory efficiency through minimalist images with flat color blocks, but tends to disappoint and confuse users. Neumorphism UI emerges as a solution that combines the advantages of both, creating visuals that still resemble real objects but are lighter, presenting a minimalist realistic feel. This study uses a qualitative method with a descriptive approach, data collection through purposive sampling, literature studies and interface design observations. The results of the study are expected to contribute as learning materials in introducing, using, and creating better interface designs, both in terms of aesthetics and functionality. By understanding the role of Neumorphism UI as a mediator between visual nostalgia and efficiency of use, interface designers are expected to be able to present an optimal, innovative, and relevant user experience (UX) with technological developments.

Full Text:

PDF

References


Basu, S. (2013). Modern UI Design. In Real World Windows 8 Development (pp. 11–24). Apress. https://doi.org/10.1007/978-1-4302-5026-5_2

Burmistrov, I., Zlokazova, T., Izmalkova, A., & Leonova, A. (2015). Flat Design vs Traditional Design: Comparative Experimental Study. 15th Human-Computer Interaction (INTERACT). Human-Computer Interaction–INTERACT 2015: 15th IFIP TC 13 International Conference, 106–114. https://doi.org/10.1007/978-3-319-22668-2_10ï

Darmawan, A. J., Arimbawa, I. M. G., Heptariza, A., & Brayen, H. (2024). Harnessing Ai Image Generator Prompt Engineering For Academic Excellence. Proceeding Bali-Bhuwana Waskita: Global Art Creativity Conference, 4, 192–202. https://doi.org/10.31091/bbwp.v4i1.478

Darmawan, A. J., Utomo, S. R. H., Yoo, M., & Gea, L. K. (2024). The A.I. Generated Images in Indonesia’s 2024 Presidential Election. Jurnal Desain, 12(1), 80. https://doi.org/10.30998/jd.v12i1.23366

Hsu, V., & Ling, D. B. (n.d.). A study of the Material Design for mobile game UI/UX. https://m3.material.io/

Jung, D., & Kim, S.-I. (2020). A Study on Mobile Application UI Design Components & Design Guidelines-Focused on the Google Material Design Guidelines. Journal of Digital Convergence, 18(5), 417–423. https://doi.org/10.14400/JDC.2020.18.5.417

Kwan, T. H., Chan, D. P. C., & Lee, S. S. (2022). User Experience and Usability of Neumorphism and Gamification User Interface Designs in an HIV Self-Test Referral Program for Men Who Have Sex With Men: Prospective Open-Label Parallel-Group Randomized Controlled Trial. JMIR Serious Games, 10(2), e35869. https://doi.org/10.2196/35869

Lee, J. (2014). Responsive Web Framework Based on Metro UI. Kookmin University.

Okoye, J. N. (2020). Universal Design & Usability Investigation into Flat Design and Skeuomorphic interfaces. Case Study of a News Website. Oslomet University.

Oswald, D., & Kolb, S. (2014). Flat Design Vs. Skeuomorphism–Effects on Learnability and Image Attributions In Digital Product Interfaces. DS 78: Proceedings of the 16th International Conference on Engineering and Product Design Education (E&PDE14), 402–407.

Page, T. (2014). Skeuomorphism Or Flat Design: Future Directions in Mobile Device User Interface (UI) Design Education. International Journal of Mobile Learning and Organisation, 8(2), 130–142. https://doi.org/10.1504/IJMLO.2014.062350

Park, J.-H. (n.d.). 뉴모피즘 디자인이 적용된 UI 디자인 트렌드 분석 연구 A Study on UI Design Trends Analysis with Neumorphism Design. https://doi.org/10.5392/JKCA.2021.21.02.148

Spiliotopoulos, K., Rigou, M., & Sirmakessis, S. (2018). A comparative study of skeuomorphic and flat design from a ux perspective. Multimodal Technologies and Interaction, 2(2). https://doi.org/10.3390/mti2020031

Stevens, J. E., Robinson, A. C., & MacEachren, A. M. (2013). Designing Map Symbols for Mobile Devices: Challenges, Best Practices, and the Utilization of Skeuomorphism. 26th International Cartographic Conference, 25–30.

Urbano, I. C. V. P., Guerreiro, J. P. V., & Nicolau, H. M. A. A. (2022). From Skeuomorphism to Flat Design: Age-Related Differences In Performance And Aesthetic Perceptions. Behaviour & Information Technology, 41(3), 452–467. https://doi.org/10.1080/0144929X.2020.1814867




DOI: http://dx.doi.org/10.30998/jd.v12i3.28147

Refbacks

  • There are currently no refbacks.


Copyright (c) 2025 Andreas James Darmawan, Elizabeth Jessica Sentani, Adela Carera, Clarissa Fidelya Gerungan, Dina Agustina Lestari Gultom

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.

Editorial Office:
Institute for Research and Community services (LPPM)
Universitas Indraprasta PGRI

Address: Campus A Building 3, 2nd Floor | Jl. Nangka No. 58 C (TB. Simatupang), Kel. Tanjung Barat, Kec. Jagakarsa, Jakarta Selatan 12530, Jakarta, Indonesia.
Phone: (021) 7818718 – 78835283 ext. 123 
Work Hour: 09.00 AM – 08.00 PM | Close in sunday and public holidays in Indonesia

Creative Commons License
Jurnal Desain is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.