Empreu aquest identificador per citar o enllaçar aquest ítem: http://elartu.tntu.edu.ua/handle/lib/52699
Títol: Розробка UI/UX дизайну для інтернет-магазину TrekWear
Altres títols: UI/UX Design Development for the TrekWear Online Store
Autor: Єлісєєв, Денис Дмитрович
Yelisieiev, Denys
Affiliation: Тернопільський національний технічний університет імені ім. І. Пулюя
Bibliographic reference (2015): Єлісєєв Д. Д. Розробка UI/UX дизайну для інтернет-магазину TrekWear : робота на здобуття кваліфікаційного ступеня бакалавра : спец. 122 - комп’ютерні науки / наук. кер. Р. М. Небесний. Тернопіль : Тернопільський національний технічний університет імені Івана Пулюя, 2026. 64 с.
Data de publicació: 23-de -2026
Submitted date: 9-de -2026
Date of entry: 25-de -2026
Editorial: Тернопільський національний технічний університет імені ім. І. Пулюя
Country (code): UA
Place of the edition/event: Тернопіль
Supervisor: Небесний, Руслан Михайлович
Nebesnyi, Ruslan
UDC: 004.42
Paraules clau: 122
комп’ютерні науки
користувацький досвід
інтерфейс користувача
електронна комерція
інформаційна архітектура
штучний інтелект
вебдоступність
оптимізація конверсії
інтернет магазин
Page range: 64
Resum: Кваліфікаційна робота присвячена UI/UX проєктуванню інтернет-магазину трекінгового спорядження TrekWear, зорієнтованого на оптимізацію користувацького шляху та підвищення конверсії. У першому розділі досліджено e-commerce тренди (включаючи AI-інтеграцію), специфіку ніші технологічного одягу та проведено аналіз конкурентів («Gorgany», «Shambala») за допомогою VertaaUX. У другому розділі сформовано інформаційну архітектуру, виконано UML-моделювання логіки платформи та обґрунтовано застосування методології Atomic Design для створення компонентної системи. У третьому розділі розроблено адаптивні каркаси (wireframes), унікальну дизайн-систему (UI Kit) та створено інтерактивний високодеталізований прототип ключових сторінок магазину у Figma. Об’єкт дослідження: процес UI/UX проєктування та розробки інтерфейсів для платформ електронної комерції. Предмет дослідження: принципи, методи та інструменти створення адаптивного й ергономічного UI/UX дизайну інтернет-магазину TrekWear.
The qualification work is dedicated to the UI/UX design of the TrekWear online store of trekking equipment, focused on optimizing the user journey and increasing conversion. The first section examines e-commerce trends (including AI integration), the specifics of the technological clothing niche, and conducts an analysis of competitors («Gorgany», «Shambala») using VertaaUX. The second section forms an information architecture, performs UML modeling of the platform logic, and justifies the use of the Atomic Design methodology to create a component system. The third section develops adaptive wireframes, a unique design system (UI Kit), and creates an interactive, highly detailed prototype of the store's key pages in Figma. Object of research: the process of UI/UX design and development of interfaces for e-commerce platforms. Subject of research: principles, methods, and tools for creating an adaptive and ergonomic UI/UX design of the TrekWear online store.
Descripció: Роботу виконано на кафедрі комп'ютерних наук Тернопільського національного технічного університету імені Івана Пулюя. Захист відбудеться 23.06.2026р. на засіданні екзаменаційної комісії №31 у Тернопільському національному технічному університеті імені Івана Пулюя
Content: ВСТУП 7 РОЗДІЛ 1. ТЕОРЕТИЧНІ ОСНОВИ ТА АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ 10 1.1 Тенденції, стандарти та методології UI/UX в e-commerce 10 1.2 Аналіз ринку та конкурентів у сегменті TrekWear 13 1.3 Специфікація вимог до інтерфейсу інтернет-магазину TrekWear 19 1.4 Висновок до першого розділу 20 РОЗДІЛ 2. ПРОЄКТУВАННЯ ІНТЕРНЕТ-МАГАЗИНУ TREKWEAR 21 2.1 Методи та інструменти проєктування інтерфейсу 21 2.2 Інформаційна архітектура та UML-моделювання логіки взаємодії 24 2.3 Атомарний дизайн у розробці компонентів інтерфейсу 28 2.4 Висновок до другого розділу 30 РОЗДІЛ 3. ПРАКТИЧНА РЕАЛІЗАЦІЯ ТА ПРОТОТИПУВАННЯ ІНТЕРФЕЙСУ 31 3.1 Розробка низькодеталізованих адаптивних каркасів 31 3.2 Формування дизайн-системи: колірна палітра та типографіка 33 3.3 UI-проєктування та адаптивна трансформація екранів TrekWear 36 3.3.1 Головна сторінка 37 3.3.2 Каталог товарів 41 3.3.3 Картка товару 43 3.3.4 Overlay-кошик 46 3.4 Створення інтерактивного high-fidelity прототипу 48 3.5 Висновок до третього розділу 50 РОЗДІЛ 4. БЕЗПЕКА ЖИТТЄДІЯЛЬНОСТІ, ОСНОВИ ОХОРОНИ ПРАЦІ 52 4.1 Організація робочого місця та ергономіка праці 52 4.2 Безпека та цивільний захист в умовах воєнного стану 54 4.3 Висновок до четвертого розділу 55 ВИСНОВКИ 57 ПЕРЕЛІК ДЖЕРЕЛ 59
URI: http://elartu.tntu.edu.ua/handle/lib/52699
Copyright owner: © Єлісєєв Денис Дмитрович, 2026
References (Ukraine): 1 Exploring the Nexus of User Interface (UI) and User Experience (UX) in the Context of Emerging Trends and Customer Experience, Human Computer Interaction, Applications of Artificial Intelligence / B. Paneru та ін. International Journal of Informatics, Information System and Computer Engineering (INJIISCOM). 2024. Т. 5, № 1. С. 102–113. URL: https://doi.org/10.34010/injiiscom.v5i1.12488 (дата звернення: 15.05.2026).
2 Expert 7 UI/UX Design Trends for 2026 - Insights Cheatsheet. craftberry - Shopify Agency & Shopify Plus Partner. URL: https://craftberry.co/articles/7-ui-ux-ecommerce-design-trends-for-2025 (дата звернення: 17.05.2026).
3 Pratyush Tewari. UX Principles for Modern UI/UX Design and Their Measurement: A Framework for Digital Product Excellence. Journal of Computer Science and Technology Studies. 2025. Т. 7, № 7. С. 898–907. URL: https://doi.org/10.32996/jcsts.2025.7.7.99 (дата звернення: 16.05.2026).
4 Walter C. A. Understanding UX/UI: Basics, Methods & Best Practices | FIDA Software & Beratung. FIDA Software & Beratung. URL: https://www.fida.de/en/blog/understanding-ux-ui-basics-methods-and-amp-best-practices (дата звернення: 15.05.2026).
5 What are UX Design Methodologies?. UXpilot.ai. URL: https://uxpilot.ai/blogs/design-methodology (дата звернення: 19.05.2026).
6 Faceted Navigation Best Practices for Ecommerce | Lasso. Lasso. URL: https://productlasso.com/en/blog/faceted-navigation-best-practices (дата звернення: 20.05.2026).
7 Scott E. Product Page UX Best Practices 2026 – Baymard Institute. Baymard Institute. URL: https://baymard.com/blog/current-state-ecommerce-product-page-ux (дата звернення: 21.05.2026)
8 How Has AI Been Affecting UX Design?. Coursera. URL: https://www.coursera.org/articles/how-has-ai-been-affecting-ux-design (дата звернення: 22.05.2026).
9 Hiking clothing: a comprehensive guide. Alpinetrek. URL: https://www.alpinetrek.co.uk/blog/hiking-clothes-basics/ (дата звернення: 23.05.2026).
10 Government Digital Service. Understanding WCAG 2.2. GOV.UK. URL: https://www.gov.uk/service-manual/helping-people-to-use-your-service/understanding-wcag (дата звернення: 27.05.2026).
11 Best UX/UI design tools in 2025 | SquarePlanet. SquarePlanet. URL: https://hype4.academy/articles/design/best-ux-ui-design-tools-in-2025 (дата звернення: 30.05.2026).
12 Pernice K. F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile). Nielsen Norman Group. URL: https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/ (дата звернення: 04.06.2026).
13 Santoso M. F. Implementation Of UI/UX Concepts And Techniques In Web Layout Design With Figma. Jurnal Teknologi Dan Sistem Informasi Bisnis. 2024. Т. 6, № 2. С. 279–284. URL: https://doi.org/10.47233/jteksis.v6i2.1223 (дата звернення: 07.06.2026).
14 The Z-Pattern in Web Design: How to Guide User Attention Effectively - Martin Kairys. Martin Kairys. URL: https://www.hellomartin.co.uk/blog/the-z-pattern-in-web-design-how-to-guide-user-attention-effectively/ (дата звернення: 08.06.2026).
15 UI/UX Design Impact on E-Commerce Attracting Users / T. I. Hasan та ін. Procedia Computer Science. 2024. Т. 245. С. 1075–1082. URL: https://doi.org/10.1016/j.procs.2024.10.336 (дата звернення: 09.06.2026).
16 Visualisation of User Stories to UML use Case Diagram / M. N. Mornie та ін. Journal of Advanced Research in Applied Sciences and Engineering Technology. 2025. Т. 63, № 3. С. 68–80. URL: https://doi.org/10.37934/araset.63.3.6880 (дата звернення: 14.06.2026).
17 Атомарний дизайн: оптимізуйте роботу над веб-ресурсом уже сьогодні. Evergreen - web розробка і діджиталізація бізнесу за допомогою AI продуктів. URL: https://evergreens.com.ua/ua/articles/atomic-design.html (дата звернення: 14.06.2026).
18 What is Wireframing? The Complete Guide [Free Checklist]| Figma. Figma. URL: https://www.figma.com/resource-library/what-is-wireframing/ (дата звернення: 14.06.2026).
19 Natarajan J. From Wireframes to Interfaces: Developing a Practical Framework for UI/UX Design : Master’s Thesis. Turku, 2025. 94 с.
20 Dick M. E. K., Woloszyn M. Influence of typographic properties on user experience in digital interfaces. Estudos em Design. 2023. Т. 31, № 2. URL: https://doi.org/10.35522/eed.v31i2.1711 (дата звернення: 16.06.2026).
21 Go E. M., Mothelsang K. Trends in Modern Typography Design: Visual Preferences on E-Commerce Platforms. International Journal of Graphic Design. 2024. Т. 2, № 2. С. 248–263. URL: https://doi.org/10.51903/ijgd.v2i2.2147 (дата звернення: 16.06.2026).
22 Darina. Колористика в дизайні. Основи теорії кольору – поради веб-дизайнерам початківцям. Komarov.Design – AI для дизайнерів: інструменти, гайди, огляди. URL: https://www.komarov.design/koloristika-v-dizaini-osnovi-tieoriyi-koloru-poradi-vieb-dizainieram-pochatkivtsiam/ (дата звернення: 16.06.2026).
23 Типографіка у веб дизайні: Ключ до ефективного сайту. FoxmindEd. URL: https://foxminded.ua/typohrafika-u-veb-dyzaini/ (дата звернення: 12.06.2026).
24 AI UI: Як швидко створювати дизайн-макети з ШІ – кейс Serpstat – Serpstat Blog. Serpstat – Marketing Tool for SEO and Content Tasks. URL: https://serpstat.com/uk/blog/ai-ui-yak-stvoryuvati-dizajn-maketi-z-shi/ (дата звернення: 11.06.2026).
25 Mavi Design. Create a Simple 'Add to Cart' User Flow in Figma, 2022. YouTube. URL: https://www.youtube.com/watch?v=Wq30e04I-Kc (дата звернення: 16.06.2026).
26 Guide to prototyping in Figma. Figma Learn - Help Center. URL: https://help.figma.com/hc/en-us/articles/360040314193-Guide-to-prototyping-in-Figma (дата звернення: 16.06.2026).
27 ДСТУ EN ISO 26800:2022 Ергономіка. Загальний підхід, принципи та концепції (EN ISO 26800:2011, IDT; ISO 26800:2011, IDT). 28 ДСТУ ISO 9241-3-2001 Ергономічні вимоги до роботи з відеотерміналами в офісі. Частина 3. Вимоги до відео терміналів (ISO 9241-3:1992, IDT). Поправка (ІПС № 3-2002).
29 ДСТУ 8733:2018 Склад та зміст розділу інженерно-технічних заходів цивільного захисту в складі проектної документації на будівництво об`єктів. Основні положення.
30 Наказ від 03.01.2024 № 8 Про затвердження Організаційно-методичних вказівок з підготовки населення до дій у надзвичайних ситуаціях на 2024 - 2025 роки.
31 Небесний Р. М. Рекомендаційна система формування команд виконавців з відповідними фаховими компетентностями : дис. … д-ра філософії : 122. Тернопіль, 2023. 253 с.
32 Аналіз процесів формування симуляцій з використанням графічного процесора / Ю. Калинич, Ю. Ю. Білак, Р. Небесний, П. П. Федорка. Вісник Національного університету «Львівська політехніка». Серія: Інформаційні системи та мережі. 2022. Вип. 11. С. 110–126.
33 Мацюк М. Адаптивний інтерфейс вебсайту з урахуванням принципів UX / UI дизайну / Мацюк М. // Матеріали Ⅷ Міжнародної студентської конференції „Природничі та гуманітарні науки“, 24-25 квітня 2025 року. — Т. : ТНТУ, 2025. — С. 176–177. — (Інформаційні технології).
34 Кормило І., Небесний Р. Побудова інформаційної технології візуалізації інформаційних ресурсів [Електронний ресурс]. Режим доступу: https://elartu.tntu.edu.ua/bitstream/lib/23079/2/CAZST_2017v2_Kormilo_I-Construction_of_information_96-97.pdf (дата звернення: 09.06.2025).
Content type: Bachelor Thesis
Apareix a les col·leccions:122 — Компʼютерні науки, F3 Комп’ютерні науки (бакалаври)

Arxius per aquest ítem:
Arxiu Descripció MidaFormat 
2026_KRB_SN-41_Yelisieiev_DD.pdfДипломна робота2,28 MBAdobe PDFVeure/Obrir


Els ítems de DSpace es troben protegits per copyright, amb tots els drets reservats, sempre i quan no s’indiqui el contrari.

Eines d'Administrador