Застосування сучасних хмарних інструментів дизайну у практиках розробки веб-інтерфейсів
DOI:
https://doi.org/10.30857/2617-0272.2026.1.8Ключові слова:
UI-дизайн, Figma, Adobe XD, Sketch, цифрові інтерфейси, дизайн-система, графічний редакторАнотація
Актуальність цього дослідження зумовлена стрімким розвитком цифрового середовища та зростанням вимог до якості користувацьких інтерфейсів, що потребує ефективного використання сучасних інструментів графічного дизайну у практиках веб-дизайну. Мета статті полягала у комплексному аналізі ролі платформ Figma, Adobe XD та Sketch у процесах розробки веб-інтерфейсів та їхнього впливу на ефективність виконання завдань, швидкість проєктування, рівень колаборації та розвиток дизайн-систем. Для досягнення цієї мети застосовано комплексний підхід, що поєднав теоретичний аналіз, кейс-стаді та емпіричний експеримент із навчальною групою студентів. Проаналізовано ключові характеристики інструментів, оцінено їхню ефективність у виконанні типових проєктних завдань та виявлено вплив на продуктивність і якість інтерфейсів. Визначено, що сучасні
графічні редактори значною мірою трансформують професійну практику User Interface дизайну, забезпечуючи масштабованість, послідовність та ефективність цифрового продукту. Проаналізовано успішні приклади використання інструментів у сферах e-commerce, медичних сервісів, освітніх платформ та SaaS-рішень. Виявлено переваги хмарної співпраці, інтеграції з іншими програмними екосистемами та підтримки стандартів доступності. На підставі емпіричних даних сформульовано рекомендації щодо вибору інструментів залежно від потреб проєкту, а також окреслено потенційні ризики надмірної шаблонізації дизайну. Дослідження може бути використане дизайнерами, фронтенд-розробниками, менеджерами та викладачами для оптимізації процесів User Interface, підвищення продуктивності команд та покращення якості веб-інтерфейсів.
Завантаження
Посилання
Feng, K.J.K., Li, T.W., & Zhang, A.X. (2023). Understanding collaborative practices and tools of professional UX practitioners in software organizations. In CHI conference on human factors in computing systems (article number 764). New York: Association for Computing Machinery. doi: 10.1145/3544548.3581273.
Goraya, S.S. (2024). Defending and extending design systems. (Master’s thesis, The University of Guelph, Guelph, Canada).
Huang, T. (2024). FEAD: Figma-Enhanced App Design framework for improving UI/UX in educational app development. arXiv. doi: 10.48550/arXiv.2412.06793.
Jolak, R., Wortmann, A., Liebel, G., Umuhoza, E., & Chaudron, M.R. (2023). Design thinking and creativity of colocated versus globally distributed software developers. Journal of Software: Evolution and Process, 35(5), article number e2377. doi: 10.1002/smr.2377.
Kowalczyk, E., Glinka, A., & Szymczyk, T. (2022). Comparative analysis of interface sketch design tools in the context of User Experience. Journal of Computer Sciences Institute, 22, 51-58. doi: 10.35784/jcsi.2803.
Krammer, C. (2017). Figma vs Sketch: The showdown. Smashing Magazine. Retrieved from https://www. smashingmagazine.com/2017/03/sketch-figma-showdown/.
Krokhmal, P.V., Rybalchenko, O.H., & Bilashenko, S.V. (2024). Adaptability and tools for developing flexible interfaces. In Development of industry and society: Materials from the international scientific and technical conference (p. 247). Kryvyi Rih National University: Kryvyi Rih.
Lamine, Y., & Cheng, J. (2022). Understanding and supporting the design systems practice. Empirical Software Engineering, 27, article number 146. doi: 10.1007/s10664-022-10181-y.
Masveta, D., & Manyangara, M.E. (2025). The UX-UI continuum: Exploring the interplay between user experience and user interface in e-learning platforms. Cogent Education, 12(1), article number 2536531. doi:10.1080/2331186X.2025.2536531.
Maxwell, H., & Brisco, R. (2025). A comparative analysis of synchronous and asynchronous computersupported collaborative design. Proceedings of the Design Society, 5, 11-20. doi: 10.1017/pds.2025.10015.
Rajala, O. (2024). Impact of React component libraries on developer experience – an empirical study on component libraries’ styling approaches. (Master’s thesis, Aalto University, Espoo, Finland). doi: 10.13140/RG.2.2.18504.33282.
Samulinas, S., & Zhytienova, N. (2025). Innovations in UI/UX design as a key to successful digital product development. Professional Art Education, 6(1), 93-106. doi: 10.34142/27091805.2025.6.01.09.
Shah, H. (2024). Enhancing web accessibility: Navigating the upgrade of design systems from WCAG 2.0 to WCAG 2.1. International Journal of Web & Semantic Technology, 15(1), 1-16. doi: 10.5121/ijwest.2024.15101-у.
Shokrizadeh, A. (2025). Ideating under constraints with UIDEC in UI/UX design. In CHI conference on human factors in computing systems (article number 1106). New York: Association for Computing Machinery. doi: 10.1145/3706598.3713785.
Tevi, A., Parker, J., Koslow, S., & Ang, L. (2025). Creative performance in professional advertising development: The role of ideation templates, consumer insight, and intrinsic motivation. Journal of the Academy of Marketing Science, 53, 854-875. doi: 10.1007/s11747-024-01063-4.
The Competition and Markets Authority. (2023). Anticipated acquisition by Adobe Inc. of Figma, Inc. Retrieved from https://assets.publishing.service.gov.uk/media/656891e55936bb00133167cf/Final_Report.pdf.
Uhlyk, R.S. (2025). Interface generation through layout images. (Master’s thesis, Kharkiv National University of Radio Electronics, Kharkiv, Ukraine).
Wang, J., Xu, Z., Wang, X., & Lu, J. (2022). A comparative research on usability and user experience of user interface design software. International Journal of Advanced Computer Science and Applications, 13(8), 21-29. doi: 10.14569/IJACSA.2022.0130804.
World Medical Association. (2013). Declaration of Helsinki: Ethical principles for medicalresearch involving human subjects. Retrieved from https://www.wma.net/what-we-do/medical-ethics/declaration-of-helsinki/.
World Wide Web Consortium. (2018). Web Content Accessibility Guidelines (WCAG) 2.1. Retrieved from https://www.w3.org/Translations/WCAG21-ua/.
Ye, X., Frens, J., & Hu, J. (2024). Design tools for supporting the remote collaborative design process: A systematic review. In Proceedings of the 10th international symposium of Chinese CHI (pp. 83-95). New York: Association for Computing Machinery. doi: 10.1145/3565698.3565772.
Yu, R., Gu, N., & Masoumzadeh, S. (2024). Exploring the impact of digital technologies on team collaborative design. Buildings, 14(10), article number 3263. doi: 10.3390/buildings14103263.
Zhang, M., Gong, Y., Deng, R., & Zhang, S. (2022). The effect of color coding and layout coding on users’ visual search on mobile map navigation icons. Frontiers in Psychology, 13, article number 1040533. doi:10.3389/fpsyg.2022.1040533.
Zhang, S., Zhang, T., Cheng, J., & Zhou, S. (2025). Who is to blame: A comprehensive review of challenges and opportunities in designer-developer collaboration. Proceedings of the ACM on Human-Computer Interaction, 9(2), article number CSCW207. doi: 10.1145/3711105.
