1. ELARTU — Інституційний репозитарій ТНТУ імені Івана Пулюя
  2. Роботи студентів
  3. Бакалавр
  4. 122 — Компʼютерні науки (бакалаври)
Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал: http://elartu.tntu.edu.ua/handle/lib/49619
Повний запис метаданих
Поле DCЗначенняМова
dc.contributor.advisorКозбур, Галина Володимирівна-
dc.contributor.advisorKozbur, Halyna-
dc.contributor.authorТимощук, Юлія Сергіївна-
dc.contributor.authorTymoshchuk, Yuliia Serhiivna-
dc.date.accessioned2025-07-07T18:43:48Z-
dc.date.available2025-07-07T18:43:48Z-
dc.date.issued2025-06-28-
dc.date.submitted2025-06-14-
dc.identifier.citationТимощук Ю. С. Розробка дизайну інформаційного сайту проєкту DigSME із використанням принципів та методів UI/UX : робота на здобуття кваліфікаційного ступеня бакалавра : спец. 122 - комп’ютерні науки / наук. кер. Г. В. Козбур. Тернопіль : Тернопільський національний технічний університет імені Івана Пулюя, 2025. 76 с.uk_UA
dc.identifier.urihttp://elartu.tntu.edu.ua/handle/lib/49619-
dc.descriptionРоботу виконано на кафедрі комп'ютерних наук Тернопільського національного технічного університету імені Івана Пулюя. Захист відбудеться 28.06.2025р. на засіданні екзаменаційної комісії №30 у Тернопільському національному технічному університеті імені Івана Пулюяuk_UA
dc.description.abstractКваліфікаційна робота присвячена процесу створення дизайну інформаційного сайту проєкту DigSME з урахуванням сучасних принципів UI/UX дизайну та використанням програмного забезпечення Figma. У першому розділі кваліфікаційної роботи описано загальну характеристику проєкту DigSME, висвітлено актуальність цифровізації бізнесу у контексту B2B та B2C, розглянуто недоліки попередньої версії дизайну вебсайту та проаналізовано вимоги до інформаційного сайту в умовах цифрової трансформації. В другому розділі кваліфікаційної роботи досліджено теоретичні основи UI/UX дизайну, подано аналіз впливу інтерфейсу на поведінку користувачів, типову структуру інтерфейсів, розкрито методологію Atomic Design та можливості Figma у створенні дизайн. В третьому розділі кваліфікаційної роботи описано практичні етапи створення дизайну сайту: побудову wireframe-макетів, адаптивний дизайн, підбір кольорів та шрифтів, розробку інтерфейсу та підготовку мокапів. Проаналізовано візуальні рішення та проведено оформлення фінального макету. У четвертому розділі кваліфікаційної роботи висвітлено питання безпеки та охорони праці у діяльності UI/UX дизайнера та користувачів. Розглянуто профілактику психоемоційного вигорання, вплив мікроклімату на працездатність і ергономіку робочого місця для підвищення комфорту та ефективності праці. Об’єкт дослідження: процес UI/UX дизайну інтерфейсу. Предмет дослідження: розробка дизайну інформаційного сайту проєкту DigSME з використанням інструменту Figmauk_UA
dc.description.abstractThis 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 tooluk_UA
dc.description.tableofcontentsВСТУП РОЗДІЛ 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 Естетичне оформлення та ергономічне дослідження робочого місця оператора ВИСНОВКИ ПЕРЕЛІК ДЖЕРЕЛ ДОДАТКИuk_UA
dc.language.isoukuk_UA
dc.publisherТНТУ ім. І.Пулюя, ФІС, м. Тернопіль, Українаuk_UA
dc.subject122uk_UA
dc.subjectвебінтерфейсuk_UA
dc.subjectсайт-візиткаuk_UA
dc.subjectцифровізаціяuk_UA
dc.subjectінформаційний сайтuk_UA
dc.subjectweb interfaceuk_UA
dc.subjectdigitalizationuk_UA
dc.subjectdigsmeuk_UA
dc.subjectfigmauk_UA
dc.subjectinformational websiteuk_UA
dc.subjectlanding pageuk_UA
dc.subjectui/ux designuk_UA
dc.subjectui/ux дизайнuk_UA
dc.titleРозробка дизайну інформаційного сайту проєкту DigSME із використанням принципів та методів UI/UXuk_UA
dc.title.alternativeDesign of the DigSME Project Information Website Using UI/UX Principles and Methodsuk_UA
dc.typeBachelor Thesisuk_UA
dc.rights.holder© Тимощук Юлія Сергіївна, 2025uk_UA
dc.coverage.placenameТернопільuk_UA
dc.subject.udc004.51uk_UA
dc.relation.references1. Струтинська І., Дмитроца Л., Козбур Г., Дудкін П., Дудкіна О. (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.uk_UA
dc.relation.references2. Мосій Л., Козбур Г., Струтинська І., Мосій О., Яцишин В. (2024). Information technology to support the digital transformation of small and medium-sized businesses. CEUR Workshop Proceedings, 3742, с. 150–165.uk_UA
dc.relation.references3. Струтинська І., Козбур Г., Дмитроца Л., Козбур І., Гащин Н. (2023). Analysis of the SMEs' Digitalization State Using HIT Index and Machine Learning Technique. Proceedings of ACIT, с. 332–337.uk_UA
dc.relation.references4. Струтинська І., Дмитроца Л., Козбур Г., Гладо О., Сороківська О. (2021). Working-Out of Recommendation System to Increase the Digital Maturity Level of Enterprises. PIC S&T 2020 – Proceedings, с. 147–151.uk_UA
dc.relation.references5. Струтинська І., Дмитроца Л., Козбур Г., Мельник Л., Шерстюк Р. (2021). The Unification of Approaches to Measuring the Digital Maturity of Business Structures (International and Domestic Approaches). CEUR Workshop Proceedings, 3013, с. 10–23.uk_UA
dc.relation.references6. DigSME: Seamless Collaboration Tools for Modern Teams. [Електронний ресурс] – Режим доступу до ресурсу: https://ci.digsme.org.ua/uk (дата звернення: 07.03.2025).uk_UA
dc.relation.references7. Гусєва О. Ю Діджиталізація – як інструмент удосконалення бізнес-процесів, їх оптимізація / О. Ю Гусєва, С. В. Легомінова // Економіка. Менеджмент. Бізнес. - 2018. - № 1. - С. 33-39. - Режим доступу: http://nbuv.gov.ua/UJRN/ecmebi_2018_1_7.uk_UA
dc.relation.references8. Kęstutis R., Lina P. Principle Differences between B2B and B2C Marketing Communication Processes. Sciendo. [Електронний ресурс] – Режим доступу до ресурсу: https://surl.li/lfobfs (дата звернення: 09.03.2025).uk_UA
dc.relation.references9. Vinod K., Gagandeep R. Business to business (b2b) and business to consumer (b2c) management. International Journal of Computers & Technology. С. 447–451 (дата звернення: 09.03.2025).uk_UA
dc.relation.references10. 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).uk_UA
dc.relation.references11. 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).uk_UA
dc.relation.references12. Ярослав Я. Аналіз вмісту сайту: ключові аспекти та методи. WebMate. [Електронний ресурс] – Режим доступу до ресурсу: https://webmate.ua/analiz-contenta-saita(дата звернення: 14.03.2025).uk_UA
dc.relation.references13. 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).uk_UA
dc.relation.references14. 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).uk_UA
dc.relation.references15. Колесніков Д. Дизайн сайту та його вплив на конверсію: як опинитися в топі та вразити аудиторію?. 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).uk_UA
dc.relation.references16. Олена К. Конверсія – що це таке і як її порахувати?. Idea Digital. [Електронний ресурс] – Режим доступу до ресурсу: https://ideadigital.agency/blog/konversiya-shho-tse-take-i-yak-yiyi-porahuvati/ (дата звернення: 03.04.2025).uk_UA
dc.relation.references17. 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).uk_UA
dc.relation.references18. 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).uk_UA
dc.relation.references19. Dizz Agency. Принципи візуальної ієрархії. [Електронний ресурс] – Режим доступу до ресурсу: https://dizz.in.ua/uk/princzipy-vizualnoj-ierarhii/ (дата звернення: 10.04.2025).uk_UA
dc.relation.references20. 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).uk_UA
dc.relation.references21. 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).uk_UA
dc.relation.references22. 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).uk_UA
dc.relation.references23. 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).uk_UA
dc.relation.references24. Evergreen Agency. Навіщо ми використовуємо атомарний дизайн у розробці дизайн-систем. Evergreen. [Електронний ресурс] – Режим доступу до ресурсу: https://evergreens.com.ua/ua/articles/atomic-design.html (дата звернення: 29.04.2025).uk_UA
dc.relation.references25. Pelegrin J. The beginners guide to Atomic Design. Justinmind. [Електронний ресурс] – Режим доступу до ресурсу: https://www.justinmind.com/ui-design/atomic-design (дата звернення: 29.04.2025).uk_UA
dc.relation.references26. Figma: The Collaborative Interface Design Tool. Figma. [Електронний ресурс] – Режим доступу до ресурсу: https://www.figma.com (дата звернення: 03.05.2025).uk_UA
dc.relation.references27. INTRODUCTION TO FIGMA. Designlab. [Електронний ресурс] – Режим доступу до ресурсу: https://designlab.com/figma-101-course/introduction-to-figma (дата звернення: 03.05.2025).uk_UA
dc.relation.references28. Почати роботу з Adobe XD. Adobe. [Електронний ресурс] – Режим доступу до ресурсу: https://www.adobe.com/products/xd.html (дата звернення: 03.05.2025).uk_UA
dc.relation.references29. Adobe XD Tutorial: Basic Design Functions. Domestika. [Електронний ресурс] – Режим доступу до ресурсу: https://www.domestika.org/en/blog/4131-adobe-xd-tutorial-basic-design-functions (дата звернення: 03.05.2025).uk_UA
dc.relation.references30. Sketch. Design, prototype, collaborate and handoff. Sketch. [Електронний ресурс] – Режим доступу до ресурсу: https://www.sketch.com (дата звернення: 03.05.2025).uk_UA
dc.relation.references31. Andrew M. Sketch App Tutorial Series. Medium. [Електронний ресурс] – Режим доступу до ресурсу: https://marcandrew.medium.com/sketch-app-tutorial-series-part-1-of-4-1e4ee4265073 (дата звернення: 03.05.2025).uk_UA
dc.relation.references32. Bruton L. What is wireframing? A complete guide. UX Design Institute. [Електронний ресурс] – Режим доступу до ресурсу: https://www.uxdesigninstitute.com/blog/what-is-wireframing/ (дата звернення: 10.05.2025).uk_UA
dc.relation.references33. 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).uk_UA
dc.relation.references34. Responsive vs Adaptive Web Design: Comparing Guide. Medium. [Електронний ресурс] – Режим доступу до ресурсу: https://medium.com/theymakedesign/responsive-vs-adaptive-web-design-1da9e5398669 (дата звернення: 10.05.2025).uk_UA
dc.relation.references35. What is responsive website design? Key components + examples. Figma. [Електронний ресурс] – Режим доступу до ресурсу: https://www.figma.com/resource-library/responsive-website-design/ (дата звернення: 10.05.2025).uk_UA
dc.relation.references36. Дарина K. Колористика в дизайні. Основи теорії кольору – поради веб-дизайнерам початківцям. Komarov.design. [Електронний ресурс] – Режим доступу до ресурсу: https://www.komarov.design/koloristika-v-dizaini-osnovi-tieoriyi-koloru-poradi-vieb-dizainieram-pochatkivtsiam/ (дата звернення: 14.05.2025).uk_UA
dc.relation.references37. 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).uk_UA
dc.relation.references38. 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).uk_UA
dc.relation.references39. Немчинський С. Типографіка у веб дизайні. Основні поняття та правила. Foxminded. [Електронний ресурс] – Режим доступу до ресурсу: https://foxminded.ua/typohrafika-u-veb-dyzaini/ (дата звернення: 14.05.2025).uk_UA
dc.relation.references40. Головченко Я. Обґрунтування концепції фірмового стилю в контексті вивчення графічного дизайну для студії. DSpace. [Електронний ресурс] – Режим доступу до ресурсу: https://er.nau.edu.ua/server/api/core/bitstreams/3fd22b29-d87e-4ab3-922d-70e2f82dc79b/content (дата звернення: 20.05.2025).uk_UA
dc.relation.references41. Монько Д. Проектування дизайну та інтерфейсу користувача для сайту піцерії ”Quattro formaggi”. Elartu.tntu. [Електронний ресурс] – Режим доступу до ресурсу: https://elartu.tntu.edu.ua/handle/lib/41649 (дата звернення: 20.05.2025).uk_UA
dc.relation.references42. 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).uk_UA
dc.relation.references43. What are Mockups?. Interaction Design Foundation. [Електронний ресурс] – Режим доступу до ресурсу: https://www.interaction-design.org/literature/topics/mockups (дата звернення: 20.05.2025).uk_UA
dc.relation.references44. Копил В. В. Роль центральної нервової системи в трудовій діяльності працівників на об'єктах галузі за фахом / В. В. Копил // Охорона праці в галузі освіти: теоретичні і технологічні аспекти : матеріали Всеукраїнської науково-практичної конференції (Полтава, 7–8 квітня 2014 р.). – Полтава : ПНПУ, 2014.– С. 243-246.uk_UA
dc.relation.references45. Stud.com.ua. Роль нервової системи в здійсненні трудової діяльності – Електронний ресурс: – Режим доступу: https://stud.com.ua/81514/ekonomika/rol_nervovoyi_sistemi_zdiysnenni_trudovoyi_diyalnosti (дата звернення: 03.06.2025).uk_UA
dc.relation.references46. ДСТУ 7299:2013 Дизайн і ергономіка. Робоче місце оператора. Взаємне розташування елементів робочого місця. Загальні вимоги ергономіки. Будстандарт. URL: https://online.budstandart.com/ua/catalog/doc-page?id_doc=57364 (дата звернення: 03.06.2025).uk_UA
dc.relation.references47. ДСН 3.3.6.042-99 Санітарні норми мікроклімату виробничих приміщень. Будстандарт. URL: https://online.budstandart.com/ua/catalog/doc-page.html?id_doc=14283 (дата звернення: 05.06.2025).uk_UA
dc.relation.references48. ДСТУ 2869-94 Системи оброблення інформації. Обладнання периферійне. Терміни та визначення. Будстандарт. URL: https://online.budstandart.com/ua/catalog/doc-page.html?id_doc=73960 (дата звернення: 05.06.2025).uk_UA
dc.relation.references49. ДСТУ 7299:2013 Дизайн і ергономіка. Робоче місце оператора. Взаємне розташування елементів робочого місця. Загальні вимоги ергономіки. Будстандарт. URL: https://online.budstandart.com/ua/catalog/doc-page?id_doc=57364 (дата звернення: 07.06.2025).uk_UA
dc.relation.references50. ДСТУ 8604:2015 Дизайн і ергономіка. Робоче місце для виконання робіт у положенні сидячи. Загальні ергономічні вимоги. Будстандарт. URL: https://online.budstandart.com/ua/catalog/doc-page.html?id_doc=71028 (дата звернення: 07.06.2025).uk_UA
dc.contributor.affiliationТНТУ ім. І. Пулюя, Факультет комп’ютерно-інформаційних систем і програмної інженерії, Кафедра комп’ютерних наук, м. Тернопіль, Українаuk_UA
dc.coverage.countryUAuk_UA
Розташовується у зібраннях:122 — Компʼютерні науки (бакалаври)

Файли цього матеріалу:
Файл Опис РозмірФормат 
2025_KRB_SN-42_Tymoshchuk_JS.pdfДипломна робота20,32 MBAdobe PDFПереглянути/відкрити
Показати базовий опис матеріалу Перегляд статистики


Усі матеріали в архіві електронних ресурсів захищені авторським правом, всі права збережені.

Інструменти адміністратора