1. ELARTU — Інституційний репозитарій ТНТУ імені Івана Пулюя
  2. Роботи студентів
  3. Бакалавр
  4. 122 — Компʼютерні науки, F3 Комп’ютерні науки (бакалаври)
Utilize este identificador para referenciar este registo: http://elartu.tntu.edu.ua/handle/lib/52889
Título: Розробка інтерфейсу інтернет-магазину «Beauty. Hub. Men» з урахуванням рекомендацій веб-доступності WCAG
Outros títulos: Development of the "Beauty. Hub. Men" Online Store Interface Considering WCAG Web Accessibility Guidelines
Autor: Мацюк, Софія Олександрівна
Matsiuk, Sofiia
Affiliation: Тернопільський національний технічний університет імені ім. І. Пулюя
Bibliographic reference (2015): Мацюк С. О. Розробка інтерфейсу інтернет-магазину «Beauty. Hub. Men» з урахуванням рекомендацій веб-доступності WCAG : робота на здобуття кваліфікаційного ступеня бакалавра : спец. 122 - комп’ютерні науки / наук. кер. Г. І. Липак. Тернопіль : Тернопільський національний технічний університет імені Івана Пулюя, 2026. 67 с.
Data: 24-Jun-2026
Submitted date: 10-Jun-2026
Date of entry: 29-Jun-2026
Editora: Тернопільський національний технічний університет імені ім. І. Пулюя
Country (code): UA
Place of the edition/event: Тернопіль
Supervisor: Липак, Галина Ігорівна
Lypak, Halyna
UDC: 004.5
Palavras-chave: 122
комп’ютерні науки
інтернет-магазин
дизайн інтерфейсу
веб-доступність
адаптивний дизайн
електронна комерція
користувацький досвід
ui/ux-дизайн
wcag
online store
interface design
web accessibility
ui/ux design
adaptive design
e-commerce
user experience
Page range: 67
Resumo: Кваліфікаційна робота присвячена дослідженню принципів проєктування інтерфейсу інтернет-магазину з урахуванням відповідності вимогам веб-доступності WCAG. У першому розділі розглянуто теоретичні засади UX/UI-дизайну та принципи веб-доступності. Проаналізовано аналоги та конкурентні рішення у сфері косметичної продукції. У другому розділі виконано аналіз предметної області, визначено вимоги до інтернет-магазину та досліджено потреби цільової аудиторії. Розроблено структуру та дизайн-концепцію сайту. У третьому розділі описано процес розроблення інтерфейсу інтернет-магазину "Beauty.Hub.Men". Проведено аналіз відповідності дизайну вимогам веб-доступності, адаптивності та зручності використання.
The qualification work is dedicated to the study of online store interface design principles in accordance with WCAG web accessibility requirements. The first section of the qualification paper considered the theoretical foundations of UX/UI design and web accessibility principles. Existing analogues and competing solutions in the field of cosmetic products are analyzed. In the second section of the qualification work, it is considered an analysis of the subject area, defines the requirements for the online store, and investigates the needs of the target audience. The website structure and design concept are developed. In the third section of the qualification work, it is considered the process of designing the interface of the "Beauty.Hub.Men" online store. An analysis of the design’s compliance with web accessibility, responsiveness, and usability requirements is carried out.
Descrição: Роботу виконано на кафедрі комп'ютерних наук Тернопільського національного технічного університету імені Івана Пулюя. Захист відбудеться 24.06.2026р. на засіданні екзаменаційної комісії №31 у Тернопільському національному технічному університеті імені Івана Пулюя
Content: ВСТУП 8 РОЗДІЛ 1. АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ВЕБ-ДОСТУПНОСТІ В ІНТЕРНЕТ-МАГАЗИНАХ. 10 1.1. Поняття та особливості інтерфейсів інтернет-магазинів 10 1.2. Основи користувацького досвіду в e-commerce 11 1.3. Принципи та стандарти веб-доступності 14 1.3.1 Поняття веб-доступності та стандарти WCAG 14 1.3.2 Основні принципи доступності та рівні відповідності 16 1.3.3 Методи оцінювання веб-доступності 18 1.4. Вибір платформи та підхід до реалізації 21 1.4.1 Аналіз платформи EVA.UA 21 1.4.2 Аналіз платформи MAKEUP 22 1.4.3 Аналіз платформи NOTINO 23 1.5. Висновок до першого розділу 24 РОЗДІЛ 2. ПРОЄКТУВАННЯ ІНТЕРФЕЙСУ ІНТЕРНЕТ-МАГАЗИНУ «BEAUTY.HUB.MEN» 26 2.1. Характеристика проєкту та цільової аудиторії 26 2.2. Структура сайту та інформаційна архітектура 28 2.3. Розробка прототипів і дизайн-коцепції 30 2.4. Реалізація принципів веб-доступності відповідно до вимог WCAG 32 2.5. Висновок до другого розділу 34 РОЗДІЛ 3. ПРАКТИЧНА РЕАЛІЗАЦІЯ ТА ТЕСТУВАННЯ ІНТЕРФЕЙСУ ІНТЕРНЕТ-МАГАЗИНУ «BEAUTY.HUB.MEN» 35 3.1. Створення дизайну основних сторінок інтернет-магазину 35 3.2. Адаптивність та зручність використання на різних пристроях 42 3.3. Тестування інтерфейсу на відповідність вимогам WCAG 46 3.4. Висновок до третього розділу 52 РОЗДІЛ 4. БЕЗПЕКА ЖИТТЄДІЯЛЬНОСТІ, ОСНОВИ ОХОРОНИ ПРАЦІ 54 4.1. Соціальні та психологічні фактори ризику 54 4.2. Вимоги до режимів праці і відпочинку при роботі з ВДТ 55 4.3. Висновок до четвертого розділу 58 ВИСНОВКИ 59 ПЕРЕЛІК ДЖЕРЕЛ 61
URI: http://elartu.tntu.edu.ua/handle/lib/52889
Copyright owner: © Мацюк Софія Олександрівна, 2026
References (Ukraine): 1. What Is an Online Store? Definition, Benefits, Types and How Internet Shopping Works. URL: https://fabbuilder.com/blogs/what-is-online-store-and-types/ (дата звернення: 11.05.2026)
2. E-commerce worldwide – statistics and facts. URL: https://www.statista.com/topics/871/online-shopping/ (дата звернення: 11.05.2025)
3. Дослідження українського ринку ecommerce. URL: https://lnk.ua/bzJjM7480 (дата звернення: 11.05.2026)
4. What is an online store and why do you need one? URL: https://www.wix.com/blog/what-is-an-online-store (дата звернення: 11.05.2026)
5. Липак Г., Ющенко О. Інтеграція інтелектуальних рішень в екосистему wordpress для e-commerce платформ // Матеріали ⅩⅢ науково-технічної конференції „Інформаційні моделі, системи та технології“, Тернопіль, 17-18 грудня 2025 року. 2025. С. 159.
6. What Is User Experience (and What Is It Not)? URL: https://www.nngroup.com/articles/what-is-user-experience/ (дата звернення: 12.05.2026)
7. What Is UI? Understanding the Basics of User Interface Design. URL: https://clay.global/blog/what-is-ui (дата звернення: 12.05.2026)
8. Introduction to UI/UX Design: Key Concepts and Principles/ URL: https://www.academia.edu/98036432/Introduction_to_UI_UX_Design_Key_Concepts_and_Principles (дата звернення: 12.05.2026)
9. Евристики Нільсена: 10 принципів юзабіліті для дизайну інтерфейсів. URL: https://www.komarov.design/ievristiki-nilsiena-10-printsipiv-iuzabiliti-dlia-dizainu-intierfieisiv/ (дата звернення: 12.05.2026)
10. Липак Г., Кунанець Н., Дуда О., Липак Т. Побудова інтерфейсів користувача вебсайту бібліотеки на засадах UX-дизайну. Цифрова платформа: інформаційні технології в соціокультурній сфері. Т8 (№1), 2025. С. 172-192. https://doi.org/10.31866/2617-796X.8.1.2025.335539
11. Як зробити ваш продукт вебдоступним. URL: https://dou.ua/forums/topic/46499/ (дата звернення: 13.05.2026)
12. Соціальний захист населення України. Статистичний збірник. URL: https://ukrstat.gov.ua/druk/publicat/kat_u/2022/zb/07/zb_szn_2021.pdf (дата звернення: 13.05.2026)
13. Статистичний щорічний збірник. URL: https://ukrstat.gov.ua/druk/publicat/kat_u/2023/zb/11/year_23_u.pdf (дата звернення: 13.05.2026)
14. Веб-доступність (WCAG) та принципи інклюзивного дизайну. URL: https://surl.li/zeccnm (дата звернення: 13.05.2026)
15. History of the Web Content Accessibility Guidelines (WCAG). URL: https://www.boia.org/blog/history-of-the-web-content-accessibility-guidelines-wcag (дата звернення: 13.05.2026)
16. Принцип 1: Сприймання. URL: https://design.gov.ua/ua/principy-dostupnosti/princip-1-sprijmannya (дата звернення: 14.05.2026)
17. Принцип 2: Керованість. URL: https://design.gov.ua/ua/principy-dostupnosti/princip-2-kerovanist (дата звернення: 14.05.2026)
18. Принцип 3: Зрозумілість. URL: https://design.gov.ua/ua/principy-dostupnosti/princip-3-zrozumilist (дата звернення: 14.05.2026)
19. Принцип 4: Сумісність. URL: https://design.gov.ua/ua/principy-dostupnosti/princip-4-sumisnist (дата звернення: 14.05.2026)
20. What are the Levels of WCAG Compliance? URL: https://reciteme.com/news/what-are-the-levels-of-wcag-compliance/ (дата звернення: 14.05.2026)
21. Giorgio Brajnik. A Comparative Test ofWeb Accessibility Evaluation Methods // Proceedings of the 10th international ACM SIGACCESS conference on Computers and accessibility, pp. 113 - 120
22. Web Accessibility Evaluation Tools List. URL: https://www.w3.org/WAI/test-evaluate/tools/list/ (дата звернення: 15.05.2026)
23. Axe DevTools Edge browser extension. URL: https://surl.li/udhfpd (дата звернення: 15.05.2026)
24. Lighthouse. URL: https://developer.chrome.com/docs/lighthouse/ (дата звернення: 15.05.2026)
25. WAVE Web Accessibility Evaluation Tools. URL: https://wave.webaim.org/ (дата звернення: 15.05.2026)
26. Web Accessibility Testing: Key Methods and the Role of User Feedback. URL: https://www.levelaccess.com/blog/web-accessibility-testing/ (дата звернення: 15.05.2026)
27. Автоматичне та ручне тестування вебдоступності: у чому різниця. URL: https://www.levelaccess.com/blog/web-accessibility-testing/ (дата звернення: 16.05.2026)
28. Koutsabasis, P. Vlachogiannis, E. Darzentas, J.S. Beyond Specifications: Towards a Practical Methodology for Evaluating Web Accessibility // Journal of Usability Studies, August 2010, pp. 157-171
29. Топ-10 інтернет-магазинів косметики в Україні 2026. URL: https://uba.top/online-cosmetics-stores-in-ukraine-2/ (дата звернення: 17.05.2026)
30. PageSpeed Insights. EVA. URL: https://pagespeed.web.dev/analysis/https-eva-ua-ua/dw1lqzh7p8?form_factor=desktop (дата звернення: 17.05.2026)
31. PageSpeed Insights. Makeup. URL: https://lnk.ua/HbCBDzhd3 (дата звернення: 17.05.2026)
32. PageSpeed Insights. Notino. URL: https://lnk.ua/2YTfukjX9 (дата звернення: 17.05.2026)
33. Men’s Personal Care Market Size, Share and 2031 Trends Report. URL: https://www.mordorintelligence.com/industry-reports/mens-personal-care-market (дата звернення: 18.05.2026)
34. Primary and Secondary Audiences. URL: https://www.ebsco.com/research-starters/communication-and-mass-media/primary-and-secondary-audiences (дата звернення: 18.05.2026)
35. What are UX personas and what are they used for? URL: https://www.uxdesigninstitute.com/blog/what-are-ux-personas/ (дата звернення: 19.05.2026)
36. Липак Т. А., Липак Г. І. Вплив новітніх технологій на методологію дослідження досвіду користувача / Теорія модернізації в контексті сучасної світової науки: збірник наукових праць з матеріалами IV Міжнародної наукової конференції, м. Мукачево, 24січня, 2025р. / Міжнародний центр наукових досліджень. - Вінниця: ТОВ «УКРЛОГОС Груп», 2025. - C.318. https://doi.org/10.62731/mcnd-24.01.2025
37. Липак Т. А., Липак Г. І. Оцінка користувацького досвіду (UX Evaluation) при розробці інтерфейсів / Scientific Collection «InterConf»,(235): with the Proceedings of the 5th International Scientific and Practical Conference «Society and Science: Interconnection» (February16-18, 2025; Porto, Portugal)/ comp. by LLC SPC «InterConf».Porto: Kramer, 2025. P.236-239.
38. Information Architecture. URL: https://web.tamu.edu/aggie-ux-university/defining-and-organizing-your-sites-content/key-elements-of-user-experience/information-architecture/ (дата звернення: 20.05.2026)
39. Lypak, H., Kunanets, N., Veretennikova, N., Matsiuk, H., Kramar, T., & Duda, O. (2023, October). An Information System Project Using Augmented Reality for a Small Local History Museum. In 2023 IEEE 18th International Conference on Computer Science and Information Technologies (CSIT) (pp. 1-4). IEEE. DOI: 10.1109/CSIT61576.2023.10324194https://ieeexplore.ieee.org/abstract/document/10324194
40. Information Architecture: A Complete Guide For Beginners. URL: https://www.geeksforgeeks.org/blogs/information-architecture/ / (дата звернення: 20.05.2026)
41. Why Designers Should Start with a Sitemap. URL: https://www.modulify.ai/post/why-designers-should-start-with-a-sitemap (дата звернення: 21.05.2026)
42. Desktop Screen Resolution Stats Ukraine. URL: https://gs.statcounter.com/screen-resolution-stats/desktop/ukraine (дата звернення: 22.05.2026)
43. Montserrat Font Family. URL: https://www.1001fonts.com/montserrat-font.html (дата звернення: 22.05.2026)
44. Stark: The suite of integrated accessibility tools. URL: https://www.getstark.co/for-designers/ (дата звернення: 23.05.2026)
45. Understanding Success Criterion 1.4.3: Contrast (Minimum). URL: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html (дата звернення: 23.05.2026 )
46. Understanding Success Criterion 2.5.5: Target Size (Enhanced) URL: https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html (дата звернення: 24.05.2026)
47. Understanding Success Criterion 2.4.6: Headings and Labels URL: https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels.html (дата звернення: 24.05.2026)
48. Understanding Success Criterion 1.3.5: Identify Input Purpose URL: https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html (дата звернення: 24.05.2026)
49. Understanding Success Criterion 1.4.1: Use of Color URL: https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html (дата звернення: 24.05.2026)
50. UI KIT: для єдиної стилістики та координації роботи з розробниками. URL: https://cases.media/article/ui-kit-dlya-yedinoyi-stilistiki-ta-koordinaciyi-roboti-z-rozrobnikami (дата звернення: 25.05.2026)
51. What is Adaptive Web Design? URL: https://lnk.ua/lXUoxolq7 (дата звернення: 26.05.2026)
52. Mobile Screen Resolution Stats Ukraine. URL: https://gs.statcounter.com/screen-resolution-stats/mobile/ukraine (дата звернення: 26.05.2026)
53. ReviewKit - AI Powered Automatic Accessibility Review for Figma. URL: https://prodpoke.com/report/reviewkit-ai (дата звернення: 29.05.2026)
54. AI Design Reviewer: UI/UX, Accessibility, Design System Linter + Prototypes. URL: https://lnk.ua/JZzw9EmZV (дата звернення: 29.05.2026)
55. Axe for Designers in Figma. URL: https://www.deque.com/axe/design-beta/ (дата звернення: 29.05.2026)
56. Запорожець О.І., Протоєрейський О.С., Франчук Г.М., Боровик І.В. Безпека життєдіяльності : підручник. Київ : Центр учбової літератури, 2019.
57. Психосоціальні ризики та їхні фактори. URL: https://smu.dsp.gov.ua/psykhosotsialni-ryzyky-ta-ikhni-faktory/ (дата звернення: 01.06.2026)
58. Mental health at work. URL: https://www.who.int/news-room/fact-sheets/detail/mental-health-at-work (дата звернення: 02.06.2026)
59. Psycho-social risks and mental health. URL: https://www.who.int/tools/occupational-hazards-in-health-sector/psycho-social-risks-mental-health (дата звернення: 03.06.2026)
60. Березуцький В. В. Основи охорони праці : навч. посіб. / В. В. Березуцький, Т. С. Бондаренко, Г. Г. Валенко та ін. ; за ред. В. В. Березуцького. – 2-ге вид., перероб. і доп. – Харків : Факт, 2007. – 480 с.
61. Державні санітарні правила і норми. URL: https://lnk.ua/zqKPPpHsu (дата звернення: 06.06.2026)
Content type: Bachelor Thesis
Aparece nas colecções:122 — Компʼютерні науки, F3 Комп’ютерні науки (бакалаври)

Ficheiros deste registo:
Ficheiro Descrição TamanhoFormato 
2026_KRB_SN-42_Matsiuk_SO.pdfДипломна робота3,22 MBAdobe PDFVer/Abrir
Mostrar registo em formato completo Visualizar estatísticas


Todos os registos no repositório estão protegidos por leis de copyright, com todos os direitos reservados.

Ferramentas administrativas