1. ELARTU — Інституційний репозитарій ТНТУ імені Івана Пулюя
  2. Роботи студентів
  3. Бакалавр
  4. 122 — Компʼютерні науки (бакалаври)
霂瑞霂��撘����迨��辣: http://elartu.tntu.edu.ua/handle/lib/49619
Title: Розробка дизайну інформаційного сайту проєкту DigSME із використанням принципів та методів UI/UX
Other Titles: Design of the DigSME Project Information Website Using UI/UX Principles and Methods
Authors: Тимощук, Юлія Сергіївна
Tymoshchuk, Yuliia Serhiivna
Affiliation: ТНТУ ім. І. Пулюя, Факультет комп’ютерно-інформаційних систем і програмної інженерії, Кафедра комп’ютерних наук, м. Тернопіль, Україна
Bibliographic description (Ukraine): Тимощук Ю. С. Розробка дизайну інформаційного сайту проєкту DigSME із використанням принципів та методів UI/UX : робота на здобуття кваліфікаційного ступеня бакалавра : спец. 122 - комп’ютерні науки / наук. кер. Г. В. Козбур. Тернопіль : Тернопільський національний технічний університет імені Івана Пулюя, 2025. 76 с.
Issue Date: 28-六月-2025
Submitted date: 14-六月-2025
Date of entry: 7-七月-2025
Publisher: ТНТУ ім. І.Пулюя, ФІС, м. Тернопіль, Україна
Country (code): UA
Place of the edition/event: Тернопіль
Supervisor: Козбур, Галина Володимирівна
Kozbur, Halyna
UDC: 004.51
Keywords: 122
вебінтерфейс
сайт-візитка
цифровізація
інформаційний сайт
web interface
digitalization
digsme
figma
informational website
landing page
ui/ux design
ui/ux дизайн
Abstract: Кваліфікаційна робота присвячена процесу створення дизайну інформаційного сайту проєкту DigSME з урахуванням сучасних принципів UI/UX дизайну та використанням програмного забезпечення Figma. У першому розділі кваліфікаційної роботи описано загальну характеристику проєкту DigSME, висвітлено актуальність цифровізації бізнесу у контексту B2B та B2C, розглянуто недоліки попередньої версії дизайну вебсайту та проаналізовано вимоги до інформаційного сайту в умовах цифрової трансформації. В другому розділі кваліфікаційної роботи досліджено теоретичні основи UI/UX дизайну, подано аналіз впливу інтерфейсу на поведінку користувачів, типову структуру інтерфейсів, розкрито методологію Atomic Design та можливості Figma у створенні дизайн. В третьому розділі кваліфікаційної роботи описано практичні етапи створення дизайну сайту: побудову wireframe-макетів, адаптивний дизайн, підбір кольорів та шрифтів, розробку інтерфейсу та підготовку мокапів. Проаналізовано візуальні рішення та проведено оформлення фінального макету. У четвертому розділі кваліфікаційної роботи висвітлено питання безпеки та охорони праці у діяльності UI/UX дизайнера та користувачів. Розглянуто профілактику психоемоційного вигорання, вплив мікроклімату на працездатність і ергономіку робочого місця для підвищення комфорту та ефективності праці. Об’єкт дослідження: процес UI/UX дизайну інтерфейсу. Предмет дослідження: розробка дизайну інформаційного сайту проєкту DigSME з використанням інструменту Figma
This qualification paper is dedicated to the study of the design process of the informational website for the DigSME project, taking into account modern UI/UX design approaches and the use of Figma software. The first chapter of the paper outlines the general characteristics of the DigSME project, highlights the relevance of business digitalization in the B2B and B2C contexts, examines the shortcomings of the previous version of the website design, and analyzes the requirements for an informational website in the context of digital transformation. The second chapter explores the theoretical foundations of UI/UX design, provides an analysis of interface influence on user behavior, discusses the typical structure of interfaces, and presents the Atomic Design methodology as well as the capabilities of Figma in interface development. The third chapter describes the practical stages of website design: creating wireframes, implementing responsive design, selecting colors and typography, developing the interface, and preparing mockups. The visual solutions are analyzed and the final layout is presented. The fourth chapter of the qualification work addresses issues of occupational health and safety in activities of UI/UX designers and users. It covers the prevention of psycho-emotional burnout, the impact of the microclimate on work capacity, and workplace ergonomics aimed at improving comfort and work afficiency. Object of research: the process of UI/UX interface design. Subject of research: the design development of an informational website for the DigSME project using the Figma tool
Description: Роботу виконано на кафедрі комп'ютерних наук Тернопільського національного технічного університету імені Івана Пулюя. Захист відбудеться 28.06.2025р. на засіданні екзаменаційної комісії №30 у Тернопільському національному технічному університеті імені Івана Пулюя
Content: ВСТУП РОЗДІЛ 1. ОГЛЯД ПРОЄКТУ ТА АНАЛІТИЧНІ ОСНОВИ РОЗРОБКИ ДИЗАЙНУ ІНФОРМАЦІЙНОГО САЙТУ 1.1. Загальна характеристика проєкту DigSME 1.2 Актуальність цифровізації бізнесу в контексті B2B та B2C 1.3 Критичний аналіз попередньої версії дизайну вебсайту 1.4 Вимоги до інформаційного сайту в умовах цифрової трансформації РОЗДІЛ 2. ОСНОВИ UI/UX ДИЗАЙНУ ТА ВИКОРИСТАННЯ FIGMA У СТВОРЕННІ ВЕБІНТЕРФЕЙСІВ 2.1 Поняття та принципи UI/UX дизайну 2.2 Вплив UI/UX дизайну на конверсію та структуру інтерфейсу 2.2.1 Конверсія як показник ефективності UI/UX дизайну 2.2.2 Візуальна ієрархія як інструмент фокусування уваги 2.2.3 Система Atomic Design у побудові UI-інтерфейсів 2.3 Порівняльна характеристика Figma та альтернативних інструментів UI/UX дизайну РОЗДІЛ 3. ЕТАПИ ПРОЄКТУВАННЯ ІНТЕРФЕЙСУ ІНФОРМАЦІЙНОГО САЙТУ 3.1 Wireframe 3.2 Адаптивний дизайн 3.3 Колір та типографіка 3.4 Розробка дизайну та інтерфейсу 3.5 Мокапи РОЗДІЛ 4. БЕЗПЕКА ЖИТТЄДІЯЛЬНОСТІ ТА ОХОРОНА ПРАЦІ 4.1 Профілактика психоемоційного вигорання у професійній діяльності UI/UX дизайнера 4.2 Вплив мікроклімату на працездатність користувача 4.3 Естетичне оформлення та ергономічне дослідження робочого місця оператора ВИСНОВКИ ПЕРЕЛІК ДЖЕРЕЛ ДОДАТКИ
URI: http://elartu.tntu.edu.ua/handle/lib/49619
Copyright owner: © Тимощук Юлія Сергіївна, 2025
References (Ukraine): 1. Струтинська І., Дмитроца Л., Козбур Г., Дудкін П., Дудкіна О. (2020). Development of Digital Platform to Identify and Monitor the Digital Business Transformation Index. International Scientific and Technical Conference on Computer Sciences and Information Technologies, 2, с. 171–175.
2. Мосій Л., Козбур Г., Струтинська І., Мосій О., Яцишин В. (2024). Information technology to support the digital transformation of small and medium-sized businesses. CEUR Workshop Proceedings, 3742, с. 150–165.
3. Струтинська І., Козбур Г., Дмитроца Л., Козбур І., Гащин Н. (2023). Analysis of the SMEs' Digitalization State Using HIT Index and Machine Learning Technique. Proceedings of ACIT, с. 332–337.
4. Струтинська І., Дмитроца Л., Козбур Г., Гладо О., Сороківська О. (2021). Working-Out of Recommendation System to Increase the Digital Maturity Level of Enterprises. PIC S&T 2020 – Proceedings, с. 147–151.
5. Струтинська І., Дмитроца Л., Козбур Г., Мельник Л., Шерстюк Р. (2021). The Unification of Approaches to Measuring the Digital Maturity of Business Structures (International and Domestic Approaches). CEUR Workshop Proceedings, 3013, с. 10–23.
6. DigSME: Seamless Collaboration Tools for Modern Teams. [Електронний ресурс] – Режим доступу до ресурсу: https://ci.digsme.org.ua/uk (дата звернення: 07.03.2025).
7. Гусєва О. Ю Діджиталізація – як інструмент удосконалення бізнес-процесів, їх оптимізація / О. Ю Гусєва, С. В. Легомінова // Економіка. Менеджмент. Бізнес. - 2018. - № 1. - С. 33-39. - Режим доступу: http://nbuv.gov.ua/UJRN/ecmebi_2018_1_7.
8. Kęstutis R., Lina P. Principle Differences between B2B and B2C Marketing Communication Processes. Sciendo. [Електронний ресурс] – Режим доступу до ресурсу: https://surl.li/lfobfs (дата звернення: 09.03.2025).
9. Vinod K., Gagandeep R. Business to business (b2b) and business to consumer (b2c) management. International Journal of Computers & Technology. С. 447–451 (дата звернення: 09.03.2025).
10. Benjamin Y. Toward an analytical approach for effective Web site design: A framework for modeling, evaluation and enhancement. AIS Electronic Library. [Електронний ресурс] – Режим доступу до ресурсу: https://core.ac.uk/download/pdf/301340787.pdf (дата звернення: 14.03.2025).
11. Wing Shui Ng S. N. Critical Design Factors of Developing a High-quality Educational Website: Perspectives of Pre-service Teachers. ResearchGate. [Електронний ресурс] – Режим доступу до ресурсу: https://iisit.org/Vol11/IISITv11p101-113Ng0459.pdf (дата звернення: 14.03.2025).
12. Ярослав Я. Аналіз вмісту сайту: ключові аспекти та методи. WebMate. [Електронний ресурс] – Режим доступу до ресурсу: https://webmate.ua/analiz-contenta-saita(дата звернення: 14.03.2025).
13. Nesi H. Introduction to UI/UX Design: Key Concepts and Principles. Academia. [Електронний ресурс] – Режим доступу до ресурсу: https://www.academia.edu/98036432/Introduction_to_UI_UX_Design_Key_Concepts_and_Principles (дата звернення: 16.03.2025).
14. Vivek J. The Role of UX/UI in E-Commerce Conversions. Academia. [Електронний ресурс] – Режим доступу до ресурсу: https://www.academia.edu/128347515/The_Role_of_UX_UI_in_E_Commerce_Conversions (дата звернення: 25.03.2025).
15. Колесніков Д. Дизайн сайту та його вплив на конверсію: як опинитися в топі та вразити аудиторію?. brainlab. [Електронний ресурс] – Режим доступу до ресурсу: https://brainlab.com.ua/uk/blog-uk/dizajn-sajtu-ta-jogo-vpliv-na-konversiyu-yak-opinitisya-v-topi-ta-vraziti-auditoriyu (дата звернення: 25.03.2025).
16. Олена К. Конверсія – що це таке і як її порахувати?. Idea Digital. [Електронний ресурс] – Режим доступу до ресурсу: https://ideadigital.agency/blog/konversiya-shho-tse-take-i-yak-yiyi-porahuvati/ (дата звернення: 03.04.2025).
17. Pratyusha G. Top 10 Conversion Rate Optimization Case Studies to Inspire Your CRO Journey. Vwo. [Електронний ресурс] – Режим доступу до ресурсу: https://vwo.com/conversion-rate-optimization/conversion-rate-optimization-case-studies/?utm_source=chatgpt.com#1-bear-mattress-leveraged-cross-sell-opportunities-and-increased-revenue-by-16 (дата звернення: 03.04.2025).
18. David M. Conversion rate optimisation: eight case studies that show the benefit of UX testing. Econsultancy. [Електронний ресурс] – Режим доступу до ресурсу: https://econsultancy.com/conversion-rate-optimisation-eight-case-studies-that-show-the-benefit-of-ux-testing/ (дата звернення: 10.04.2025).
19. Dizz Agency. Принципи візуальної ієрархії. [Електронний ресурс] – Режим доступу до ресурсу: https://dizz.in.ua/uk/princzipy-vizualnoj-ierarhii/ (дата звернення: 10.04.2025).
20. Djamasbi S., Siegel M. Visual Hierarchy and Viewing Behavior: An Eye Tracking Study. Springer Nature Links. [Електронний ресурс] – Режим доступу до ресурсу: https://link.springer.com/chapter/10.1007/978-3-642-21602-2_36 (дата звернення: 10.04.2025).
21. Duarte P. M. S. Understanding the F-Shaped and Z-shaped Reading Patterns for Optimal Usability in Complex Systems. Medium. [Електронний ресурс] – Режим доступу до ресурсу: https://medium.com/uxd-critical-software/understanding-the-f-shaped-and-z-shaped-reading-patterns-for-optimal-usability-in-complex-systems-e96668839abd (дата звернення: 19.04.2025).
22. Pernice K. F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile). nngroup. [Електронний ресурс] – Режим доступу до ресурсу: https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/ (дата звернення: 19.04.2025).
23. Irwin K. The Z-Pattern In Web Design: What It Is & Why It Matters. Medium. [Електронний ресурс] – Режим доступу до ресурсу: https://kat-irwin-design.medium.com/the-z-pattern-in-web-design-what-it-is-why-it-matters-89395f72710e (дата звернення: 29.04.2025).
24. Evergreen Agency. Навіщо ми використовуємо атомарний дизайн у розробці дизайн-систем. Evergreen. [Електронний ресурс] – Режим доступу до ресурсу: https://evergreens.com.ua/ua/articles/atomic-design.html (дата звернення: 29.04.2025).
25. Pelegrin J. The beginners guide to Atomic Design. Justinmind. [Електронний ресурс] – Режим доступу до ресурсу: https://www.justinmind.com/ui-design/atomic-design (дата звернення: 29.04.2025).
26. Figma: The Collaborative Interface Design Tool. Figma. [Електронний ресурс] – Режим доступу до ресурсу: https://www.figma.com (дата звернення: 03.05.2025).
27. INTRODUCTION TO FIGMA. Designlab. [Електронний ресурс] – Режим доступу до ресурсу: https://designlab.com/figma-101-course/introduction-to-figma (дата звернення: 03.05.2025).
28. Почати роботу з Adobe XD. Adobe. [Електронний ресурс] – Режим доступу до ресурсу: https://www.adobe.com/products/xd.html (дата звернення: 03.05.2025).
29. Adobe XD Tutorial: Basic Design Functions. Domestika. [Електронний ресурс] – Режим доступу до ресурсу: https://www.domestika.org/en/blog/4131-adobe-xd-tutorial-basic-design-functions (дата звернення: 03.05.2025).
30. Sketch. Design, prototype, collaborate and handoff. Sketch. [Електронний ресурс] – Режим доступу до ресурсу: https://www.sketch.com (дата звернення: 03.05.2025).
31. Andrew M. Sketch App Tutorial Series. Medium. [Електронний ресурс] – Режим доступу до ресурсу: https://marcandrew.medium.com/sketch-app-tutorial-series-part-1-of-4-1e4ee4265073 (дата звернення: 03.05.2025).
32. Bruton L. What is wireframing? A complete guide. UX Design Institute. [Електронний ресурс] – Режим доступу до ресурсу: https://www.uxdesigninstitute.com/blog/what-is-wireframing/ (дата звернення: 10.05.2025).
33. What is a Wireframe?. MockFlow. [Електронний ресурс] – Режим доступу до ресурсу: https://mockflow.com/blog/what-is-a-wireframe#:~:text=A%20wireframe%20is%20a%20low,%22%20or%20%22UI%20sketches.%22 (дата звернення: 10.05.2025).
34. Responsive vs Adaptive Web Design: Comparing Guide. Medium. [Електронний ресурс] – Режим доступу до ресурсу: https://medium.com/theymakedesign/responsive-vs-adaptive-web-design-1da9e5398669 (дата звернення: 10.05.2025).
35. What is responsive website design? Key components + examples. Figma. [Електронний ресурс] – Режим доступу до ресурсу: https://www.figma.com/resource-library/responsive-website-design/ (дата звернення: 10.05.2025).
36. Дарина K. Колористика в дизайні. Основи теорії кольору – поради веб-дизайнерам початківцям. Komarov.design. [Електронний ресурс] – Режим доступу до ресурсу: https://www.komarov.design/koloristika-v-dizaini-osnovi-tieoriyi-koloru-poradi-vieb-dizainieram-pochatkivtsiam/ (дата звернення: 14.05.2025).
37. Itten J. The Elements of Color. [Електронний ресурс] – Режим доступу до ресурсу: https://monoskop.org/images/4/46/Itten_Johannes_The_Elements_of_Color.pdf?utm_source=www.uoota.com (дата звернення: 14.05.2025).
38. Mudalihe O. The State of Research on the Font Poster in Scientific Discourse. ResearchGate. [Електронний ресурс] – Режим доступу до ресурсу: https://www.researchgate.net/publication/379625168_The_State_of_Research_on_the_Font_Poster_in_Scientific_Discourse (дата звернення: 14.05.2025).
39. Немчинський С. Типографіка у веб дизайні. Основні поняття та правила. Foxminded. [Електронний ресурс] – Режим доступу до ресурсу: https://foxminded.ua/typohrafika-u-veb-dyzaini/ (дата звернення: 14.05.2025).
40. Головченко Я. Обґрунтування концепції фірмового стилю в контексті вивчення графічного дизайну для студії. DSpace. [Електронний ресурс] – Режим доступу до ресурсу: https://er.nau.edu.ua/server/api/core/bitstreams/3fd22b29-d87e-4ab3-922d-70e2f82dc79b/content (дата звернення: 20.05.2025).
41. Монько Д. Проектування дизайну та інтерфейсу користувача для сайту піцерії ”Quattro formaggi”. Elartu.tntu. [Електронний ресурс] – Режим доступу до ресурсу: https://elartu.tntu.edu.ua/handle/lib/41649 (дата звернення: 20.05.2025).
42. Duan S., Zhang R. Efficient and Aesthetic UI Design with a Deep Learning-Based Interface Generation Tree Algorithm. Cornell University. [Електронний ресурс] – Режим доступу до ресурсу: https://arxiv.org/pdf/2410.17586 (дата звернення: 20.05.2025).
43. What are Mockups?. Interaction Design Foundation. [Електронний ресурс] – Режим доступу до ресурсу: https://www.interaction-design.org/literature/topics/mockups (дата звернення: 20.05.2025).
44. Копил В. В. Роль центральної нервової системи в трудовій діяльності працівників на об'єктах галузі за фахом / В. В. Копил // Охорона праці в галузі освіти: теоретичні і технологічні аспекти : матеріали Всеукраїнської науково-практичної конференції (Полтава, 7–8 квітня 2014 р.). – Полтава : ПНПУ, 2014.– С. 243-246.
45. Stud.com.ua. Роль нервової системи в здійсненні трудової діяльності – Електронний ресурс: – Режим доступу: https://stud.com.ua/81514/ekonomika/rol_nervovoyi_sistemi_zdiysnenni_trudovoyi_diyalnosti (дата звернення: 03.06.2025).
46. ДСТУ 7299:2013 Дизайн і ергономіка. Робоче місце оператора. Взаємне розташування елементів робочого місця. Загальні вимоги ергономіки. Будстандарт. URL: https://online.budstandart.com/ua/catalog/doc-page?id_doc=57364 (дата звернення: 03.06.2025).
47. ДСН 3.3.6.042-99 Санітарні норми мікроклімату виробничих приміщень. Будстандарт. URL: https://online.budstandart.com/ua/catalog/doc-page.html?id_doc=14283 (дата звернення: 05.06.2025).
48. ДСТУ 2869-94 Системи оброблення інформації. Обладнання периферійне. Терміни та визначення. Будстандарт. URL: https://online.budstandart.com/ua/catalog/doc-page.html?id_doc=73960 (дата звернення: 05.06.2025).
49. ДСТУ 7299:2013 Дизайн і ергономіка. Робоче місце оператора. Взаємне розташування елементів робочого місця. Загальні вимоги ергономіки. Будстандарт. URL: https://online.budstandart.com/ua/catalog/doc-page?id_doc=57364 (дата звернення: 07.06.2025).
50. ДСТУ 8604:2015 Дизайн і ергономіка. Робоче місце для виконання робіт у положенні сидячи. Загальні ергономічні вимоги. Будстандарт. URL: https://online.budstandart.com/ua/catalog/doc-page.html?id_doc=71028 (дата звернення: 07.06.2025).
Content type: Bachelor Thesis
�蝷箔����:122 — Компʼютерні науки (бакалаври)

��辣銝剔�﹝獢�:
獢�獢� ��膩 憭批���撘� 
2025_KRB_SN-42_Tymoshchuk_JS.pdfДипломна робота20,32 MBAdobe PDF璉�閫�/撘��
�蝷箸�辣摰蝥芸��


�DSpace銝剜�������★��������雿��.

蝞∠�極�