1. ELARTU — Інституційний репозитарій ТНТУ імені Івана Пулюя
  2. Роботи студентів
  3. Бакалавр
  4. 122 — Компʼютерні науки (бакалаври)
Denne identifikatoren kan du bruke til å sitere eller lenke til denne innførselen: http://elartu.tntu.edu.ua/handle/lib/49578
Tittel: Розробка та впровадження UI/UX дизайну для інтернет-магазину «Bloom»
Alternative titler: Development and Implementation of UI/UX Design for the «Bloom» Online Store
Authors: Петрик, Олеся Юріївна
Petryk, Olesia Yuriyivna
Affiliation: ТНТУ ім. І. Пулюя, Факультет комп’ютерно-інформаційних систем і програмної інженерії, Кафедра комп’ютерних наук, м. Тернопіль, Україна
Bibliographic description (Ukraine): Петрик О. Ю. Розробка та впровадження UI/UX дизайну для інтернет-магазину “Bloom” : робота на здобуття кваліфікаційного ступеня бакалавра : спец. 122 - комп’ютерні науки / наук. кер. О. В. Палка. Тернопіль : Тернопільський національний технічний університет імені Івана Пулюя, 2025. 87 с.
Utgivelsesdato: 27-jun-2025
Submitted date: 13-jun-2025
Date of entry: 5-jul-2025
Forlag: ТНТУ ім. І.Пулюя, ФІС, м. Тернопіль, Україна
Country (code): UA
Place of the edition/event: Тернопіль
Supervisor: Палка, Олег Вікторович
Palka, Oleh
UDC: 004.04
Emneord: 122
адаптивність
база даних
дизайн
користувацький досвід
розробка
інтернет-магазин
інтерфейс користувача
UI/UX
database
design
development
online store
responsiveness
user experience
user interface
Page range: 87
Abstrakt: Кваліфікаційна робота присвячена дослідженню процесів розробки та впровадження UI/UX дизайну для інтернет-магазину квітів «Bloom». У першому розділі кваліфікаційної роботи описано аналіз предметної області, особливості сучасних інтернет-магазинів, а також вимоги до створення інтерфейсу та вибору інструментів. Висвітлено актуальність теми та переваги застосування якісного UI/UX. Розглянуто аналіз конкурентів та засоби проєктування дизайну. У другому розділі кваліфікаційної роботи змодельовано архітектуру магазину, описано ролі користувачів, варіанти використання та структуру бази даних. Досліджено трирівневу клієнт-серверну модель. Подано діаграми взаємодії та схеми структури таблиць. У третьому розділі кваліфікаційної роботи описано реалізацію клієнтської та серверної частин, застосування HTML, CSS, JavaScript та PHP. Проаналізовано процес тестування, адаптацію під різні пристрої та роботу з базою даних
This qualification work is dedicated to researching the processes of development and implementation of UI/UX design for the flower online store "Bloom". The first chapter presents an analysis of the subject area, features of modern online stores, as well as the requirements for interface creation and tool selection. The relevance of the topic and the benefits of applying high-quality UI/UX design are highlighted. Competitor analysis and design prototyping tools are considered. The second chapter models the architecture of the store, describes user roles, use cases, and the database structure. The three-tier client-server model is examined. Interaction diagrams and table structure schemes are provided. The third chapter describes the implementation of the client-side and server-side components using HTML, CSS, JavaScript, and PHP. The processes of testing, responsiveness across various devices, and database interaction are analyzed
Beskrivelse: Роботу виконано на кафедрі комп'ютерних наук Тернопільського національного технічного університету імені Івана Пулюя. Захист відбудеться 27.06.2025р. на засіданні екзаменаційної комісії №30 у Тернопільському національному технічному університеті імені Івана Пулюя
Content: ВСТУП 8 РОЗДІЛ 1. АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ПОСТАНОВКА ЗАВДАННЯ 9 1.1 Аналіз предметної області інтернет-магазину «BLООM» 9 1.2 Аналіз конкуретнів інтернет-магазинів квітів 10 1.3 Формулювання вимог до інтернет-магазину «BLOOM» 12 1.4 Вибір засобів розробки для інтернет-магазину «BLOOM» 13 1.4.1 Визначення UI/UX 13 1.4.2 Figma 18 1.4.3 Порівняння програм для розробки дизайну 19 1.5 Програмні засоби для розробки 21 1.6 Розміщення сайту на хостингу 22 1.6.1 Netlify 22 1.6.2 AWARDSPACE 23 1.7 Постановка задач для інтернет-магазину «BLOOM» 24 1.8 Висновок до першого розділу 25 РОЗДІЛ 2. ПРОЕКТУВАННЯ ІНТЕРНЕТ-МАГАЗИНУ «BLOOM» 26 2.1 Моделювання архітектури та структури інтернет-магазину «BLOOM» 26 2.2 Моделювання архітектури інтернет-магазину квітів 26 2.3 Варіанти використання інтернет-магазину квітів 28 2.4 Розробка структури таблиць для інтернет-магазину «BLOOM» 31 2.5 Висновки до другого розділу 36 РОЗДІЛ 3. РЕАЛІЗАЦІЯ ТА ТЕСТУВАННЯ ІНТЕРНЕТ-МАГАЗИНУ «BLOOM» 37 3.1 Розробка інтерфейсу та серверної частини для інтернет-магазину «BLOOM» 37 3.1.1 Розробка frontend-частини для інтернет-магазину квітів 37 3.1.2 Розробка бекенд -частини для інтернет-магазину квітів 49 3.2 Тестування інтерфейсу сайту інтернет-магазину «BLOOM» 54 3.2.1 Тестування адаптивності вебсайту інтернет-магазину 55 3.2.2 Кросплатформність інтерфейсу інтернет-магазину квітів 64 3.3 Висновки до третього розділу 70 РОЗДІЛ 4. БЕЗПЕКА ЖИТТЄДІЯЛЬНОСТІ, ОСНОВИ ОХОРОНИ ПРАЦІ 71 4.1 Вплив діяльності людини на довкілля 71 4.2 Естетичне оформлення та ергономічне дослідження робочого місця оператора 72 4.3 Вплив кольору на покращення умов праці та підвищення продуктивності виробництва 74 4.4 Висновок до четвертого розділу 76 ВИСНОВКИ 77 ПЕРЕЛІК ДЖЕРЕЛ 79 ДОДАТКИ
URI: http://elartu.tntu.edu.ua/handle/lib/49578
Copyright owner: ТНТУ ім. І.Пулюя, ФІС, м. Тернопіль, Україна
References (Ukraine): 1. The digital transformation of business. Towards the datafication of the relationship with customers. / C. Fernandez-Rovіra et al. Technologіcal Forecastіng and Socіal Change. 2021. Vol. 162. URL: https://doi.org/10.1016/j. techfore.2020.120339
2. Use of Online Shop Chatbots: How Trust in Seller Moderates Brand Preference and Purchase Intention. Springer Proceedings in Business and Economics / M. Illescas-Manzano et al. Cham: Springer Nature Switzerland, 2024. С. 151–171.
3. Переваги та недоліки Інтернет-Торгівлі [Електронний ресурс]. Режим доступу до ресурсу: https://pidru4niki.com/74049/marketing/perevagi_nedoliki_internet-_torgivli (
4. Чому створення інтернет-магазину це один з кращих методів розширення бізнесу [Електронний ресурс]. Режим доступу до ресурсу: https://lb.ua/tech/2023/10/23/579979_chomu_stvorennya_internetmagazinu_tse.html
5. Квітковий магазин «Sparkle Ternоpіl» [Електронний ресурс]. Режим доступу до ресурсу: https://sparkle shop.com.ua/?srsltid=AfmBOorSDltc4YxsSjC22MQm91DH983ysgkQqS0cYBsYBkzs3JBEh5BU
6. Магазин квітів «Flоra de luxe» [Електронний ресурс]. Режим доступу до ресурсу: https://www.Instagram.cоm/flоrаdeluxe_ternоpіl/
7. Магазин квітів «Mіllіоn Flоwers» [Електронний ресурс]. Режим доступу до ресурсу: https://www.instagram.com/million.flowers.ternopil?igsh=MTc5aXhwdW02NTZnOQ%3D%3D
8. Магазин квітів «Flоаrt» [Електронний ресурс]. Режим доступу до ресурсу: https://www.instagram.com/florart_ternopil/
9. Умови завдання та вимоги [Електронний ресурс]. Режим доступу до ресурсу: https://itconsultant.com.ua/umovy-zavdannia-ta-vymohy-do-stvorennia-saytu
10. Види тестування сайтів [Електронний ресурс]. Режим доступу до ресурсу: https://webtune.com.ua/statti/web-rozrobka/vydy-testuvannya-sajtiv/
11. Як UI/UX дизайн покращує позицію сайту в пошукових системах [Електронний ресурс]. Режим доступу до ресурсу: https://www.seobanda.com/uk/blog/design-and-seo/
12. UI/UX Design of Web-Based for Outcome-based Education (OBE) Assessment Information System in Universitas Maritim Raja Ali Haji (UMRAH) Using Prototype Method / M. Pertiwi et al. BIO Web of Conferences, eds.: G. Jameson et al. Les Ulis : EDP Sciences, 2024. P. 134.
13. Статистика актуальності UI/UX у різних сферах на базі SCOPUS [Електронний ресурс]. Режим доступу до ресурсу: https://www.scopus.com/term/analyzer.uri?sort=plf f&src=s&sid=21aa0c025229b79857874fff9f8b2681&sot=a&sdt=a&sl=13&s=what+is+ui%2fux&origin=resultslist&count=10&analyzeResults=Analyze+results
14. Статистика щорічної актуальності UI/UX на базі SCOPUS [Електронний ресурс]. Режим доступу до ресурсу: https://www.scopus.com/term/analyzer.uri?sort=plf f&src=s&sid=21aa0c025229b79857874fff9f8b2681&sot=a&sdt=a&sl=13&s=what+is+ui%2fux&origin=resultslist&count=10&analyzeResults=Analyze+results
15. User Interface Redesign of E-Commerce Platform Mobile Application (Kudo) Through User Experience Evaluation to Increase User Attraction / E. Muslim та ін. IOP Conference Series: Materials Science and Engineering. Bristol : IOP Publishing, 2019. С. 508. URL: https://doi.org/10.1088/1757-899x/508/1/012113.
16. ЩО РОБИТЬ ДИЗАЙНЕР UI UX: обов’язки, зарплата, курс і відмінності [Електронний ресурс] Режим доступу до ресурсу: https://businessyield.com/uk/%D0%BA%D0%B0%D1%80%27%D1%94%D1%80%D0%B0/ui-ux-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D0%B5%D1%80/
17. UX / UI desіgn іn 2021: Hоw tо creаte а cоmfоrtаble websіte thаt brіngs prоfіt [Електронний ресурс]. Режим доступу до ресурсу: https://gl.ua/en/blog/ux-ui-design-2021-how-create-comfortable-website-brings-profit
18. Unlocking the Power of UX Design for Ecommerce Businesses. [Електронний ресурс]. Режим доступу до ресурсу: https://www.ecwid.com/blog/ux-design-for-ecommerce-businesses.html
19. UI vs. UX Design: What’s the Difference?. [Електронний ресурс]. Режим доступу до ресурсу: https://www.coursera.org/articles/ui-vs-ux-design
20. Have you ever wondered about the difference between UX (User Experience) and UI (User Interface)? - Ali Hassan. [Електронний ресурс]. Режим доступу до ресурсу: https://www.linkedin.com/posts/ali-hassan-tech_ux-vs-ui activity 7279764680850526208 WYvG?utm_source=share&utm_medium=member_desktop
21. Thoyyib B., Zulfikar D. H. Desain UI/UX Website Referral untuk Program Gerakan Funding Culture Menggunakan Figma. Prosiding Seminar Nasional Teknologi Komputer dan Sains. 2023. Т. 1. С. 232–241.
22. The Dіfference Between UX аnd UI Desіgn: А Begіnner’s GUIde. [Електронний ресурс]. Режим доступу до ресурсу: https://careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-laymans-guide/
23. Palka O., Kunanets N., Pasichnyk V., Matsiuk O. and Matsiuk S. Comparative Analysis of Smart City Platforms. Proceedings of the COLINS-2023: 7th International Conference on Computational Linguistics and Intelligent Systems (Kharkiv, Ukraine, April 20–21, 2023). CEUR Workshop Proceedings (CEUR-WS.org). 2023. Vol-3403. pp. 487-499.
24. B2B vs B2C - What can you learn from a badly designed toy?. [Електронний ресурс]. Режим доступу до ресурсу: https://www.abilitymatrix.com/post/b2b-vs-b2c-what-can-you-learn-from-a-badly-designed-toy
25. UI/UX Design Process Stages and Deliverables Checklist. [Електронний ресурс]. Режим доступу до ресурсу: https://mobidev.biz/blog/ui-ux-design-stages-deliverables-checklist
26. Muthia N. F., Setiawan A., Sukmasetya P. UI/UX Design of Plant Seedling Sales and Tracking System Using Design Thinking Method. E3S Web of Conferences. EDP Sciences, 2024. С. 500.
27. UI and UX are two distinct disciplines with remarkably similar goals. [Електронний ресурс]. Режим доступу до ресурсу: https://webflow.com/blog/ux-vs-ui-design
28. Jampur, F. X. A. P., Santjojo D. J . Journal of Public Administration and Policy. 2022. Т. 14. С. 256.
29. Hidayanti P., Handayani R., Rifai B. UI/UX Design of Online Tickets for Situ Pasir Maung Tourism in Dago Village Using the Figma Application. Sinkron. 2023. Т. 8.
30. What is Figma? [Електронний ресурс]. Режим доступу до ресурсу: https://www.nobledesktop.com/learn/figma/what-is-figma
31. What Is Canva And How Does It Work? [Електронний ресурс]. Режим доступу до ресурсу: https://www.techlearning.com/how-to/what-is-canva-and-how-does-it-work-for-education
32. 24. EXPLORING THE IMPACT OF LINEAR & NON-LINEAR PRESENTATION METHODS IN A DESIGN HISTORY COURSE. / Howell, B. F., Hemming, A. L., Kilbourn-Barber, G., & Christensen, S. Y. ін. Proceedings of the International Conference on Engineering and Product Design Education, EPDE 2023. The Design Society, 2023.
33. What is Visual Studio Code? Microsoft’s extensible code editor [Електронний ресурс]. Режим доступу до ресурсу: https://www.infoworld.com/article/2335960/what-is-visual-studio-code-microsofts-extensible-code-editor.html
34. What is Notepad++? [Електронний ресурс]. Режим доступу до ресурсу: https://www.computerhope.com/jargon/n/notepad-plus-plus.htm
35. The Sublime Text Code Editor – An In-Depth Review [Електронний ресурс]. Режим доступу до ресурсу: https://www.elegantthemes.com/blog/resources/the-sublime-text-code-editor-an-in-depth-review
36. Compare Sublime Text, Visual Studio and Notepad++ [Електронний ресурс]. Режим доступу до ресурсу: https://www.g2.com/compare/sublime-text-vs-visual-studio-code-vs-notepad?source=search
37. GitHub Copilot in VS Code [Електронний ресурс]. Режим доступу до ресурсу: https://code.visualstudio.com/docs/copilot/overview
38. About Netlify [Електронний ресурс]. Режим доступу до ресурсу: https://www.Netlify.com/аbout/
39. Етапи створення сайту [Електронний ресурс]. Режим доступу до ресурсу: https://webtune.com.ua/statti/web-rozrobka/etapy-stvorennya-veb-sajtiv/
40. Особливості платформи Netlify [Електронний ресурс]. Режим доступу до ресурсу: https://foxminded.ua/netlify-shcho-tse/
41. What is AwardSpace, Free Hosting no ads popular web hosting companies? URLhttps://www.mindphp.com/en/meaning-phase/8750-what-is-awardspace-en.html
42. Forms setup [Електронний ресурс]. Режим доступу до ресурсу: https://docs.Netlify.com/forms/setup/
43. Free Web Hosting Services: A Comprehensive Comparison. [Електронний ресурс]. Режим доступу до ресурсу: https://medium.com/@KanakSengar/free-web-hosting-services-a-comprehensive-comparison-d770de3dfffc
44. Бізнес-процеси інтернет-магазину та їх оптимізація [Електронний ресурс]. Режим доступу до ресурсу: https://wezom.com.ua/ua/blog/biznes-processy-internet-magazina-i-ih-optimizaciya
45. Що таке архітектура програмного забезпечення [Електронний ресурс]. Режим доступу до ресурсу: https://soandso.biz/blog/softwareengineering/arhitektura-programnogo-zabezpechennya.html
46. Палка О. та Дмитроца Л. Аналіз мікросервісної архітектури розумного міста. Вісник Хмельницького національного університету. Серія: «Технічні науки». 2023. №6(329). ст. 98-102.
47. Using a Three-Tier Architecture Model [Електронний ресурс]. Режим доступу до ресурсу: https://learn.microsoft.com/en us/windows/win32/cossdk/using-a-three-tier-architecture-model
48. Побудова та розуміння алгоритмів: крок за кроком для новачків . [Електронний ресурс]. Режим доступу до ресурсу: https://cloud.itstep.org/blog/building-and-understanding-algorithms-a-step-by-step-guide-for-beginners
49. Алгоритми в програмуванні: що потрібно знати? [Електронний ресурс]. Режим доступу до ресурсу: https://denzadnem.com.ua/blogy/korysni-porady/168016
50. Use Case Diagram Templates for Online Shopping Management [Електронний ресурс]. Режим доступу до ресурсу: http://edrawmax.wondershare.com/diagram-tips/use-case-diagrams-online-shopping-management.html
51. Greimas' Actantial Model. [Електронний ресурс]. Режим доступу до ресурсу: https://www.researchgate.net/figure/Greimas-Actantial-Model-MA-Narrative-Environments-2018_fig1_356612598
52. Conventional User Authentication & Authorization in Web Application [Електронний ресурс]. Режим доступу до ресурсу: https://siddhivinayak-sk.medium.com/conventional-user-authentication-authorization-in-web-application-5ba6882143e2
53. Що таке адмін-панель сайту та як туди зайти [Електронний ресурс]. Режим доступу до ресурсу: https://hostiq.ua/blog/ukr/admin-panel/
54. The Role of the Database in E-Commerce. [Електронний ресурс]. Режим доступу до ресурсу: https://trellis.co/blog/the-role-of-the-database-in-e-commerce
55. Як підібрати кольори? [Електронний ресурс]. Режим доступу до ресурсу:https://trellis.co/blog/the-role-of-the-database-in-e-commerce (дата звернення: 12.02.2025).
56. Як вибрати шрифт для сайту [Електронний ресурс]. Режим доступу до ресурсу: https://www.site2b.ua/ua/web-blog-ua/yak-vibrati-shrift-dlya-sajtu.html
57. CSS Layout Commerce. URL: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout (дата звернення: 21.02.2025).
58. Using media queries [Електронний ресурс]. Режим доступу до ресурсу: https://developer.mozilla.org/en US/docs/Web/CSS/CSS_media_queries/Using_media_queries
59. Як адаптувати свій сайт для мобільних пристроїв сайту [Електронний ресурс]. Режим доступу до ресурсу: https://cityhost.ua/uk/blog/yak-optimizuvati-sviy-sayt-dlya-mobilnih-pristro-v.html
60. Вплив навколишнього середовища на здоров’я людини [Електронний ресурс]. Режим доступу до ресурсу: https://polyanytsya.if.ua/vplyv-navkolyshnogo-seredovyshha-na-zdorovya-lyudyny/
61. Найактуальніши екологічні проблеми Землі [Електронний ресурс]. Режим доступу до ресурсу: https://eco.aep.kiev.ua/novini/15-najaktualnishih-ekologichnih-problem-zemli/
62. Human Impacts on the Environment [Електронний ресурс]. Режим доступу до ресурсу: https://education.nationalgeographic.org/resource/resource-library-human-impacts-environment/
63. How has the environment been affected by the Chernobyl accident? [Електронний ресурс]. Режим доступу до ресурсу: https://www.greenfacts.org/en/chernobyl/l-2/3-chernobyl-environment.htm
64. 1. Розділ 2.3: Вплив людської діяльності на екосистеми.. Екосистеми та люди. LibreTexts, 2022.
65. П’ять стратегій кругового дизайну? [Електронний ресурс]. Режим доступу до ресурсу: https://info.ppv.net.ua/five-circular-design-strategies/
66. Чи впливають дизайнери на глобальні екологічні виклики [Електронний ресурс]. Режим доступу до ресурсу: https://info.ppv.net.ua/global-environmental-challenges/
67. 1. ДСТУ ISO 9241-5-2004. ЕРГОНОМІЧНІ ВИМОГИ ДО РОБОТИ З ВІДЕОТЕРМІНАЛАМИ В ОФІСІ Частина 5. Вимоги до компонування робочого місця та до робочої пози. Київ, 2006. 18 с.
68. Гігієнічні вимоги до організації і обладнання робочих місць користувачів комп’ютерів [Електронний ресурс]. Режим доступу до ресурсу: https://cpo.stu.cn.ua/Oksana/posibnik/1010.html
69. Стандартизація в дизайнерській діяльності: навчальний посібник / В.О. Свірко, А.Л. Рубцов, О.В. Чемакіна, О.В. Кузьмін / За заг. ред. В.О. Свірка. – Херсон : ОЛДІ-ПЛЮС, 2020. – 232 с. ISBN 978‐966‐289‐355‐7
70. The Influence of Color on Human Behavior: A Deep Dive [Електронний ресурс]. Режим доступу до ресурсу: https://imotions.com/blog/insights/color-and-human-behavior/
71. ДСТУ ISO 3864-1:2005. Графічні символи. Кольори та знаки безпеки. Частина 1. Принципи проектування знаків безпеки для робочих місць та місць громадського призначення. Київ, 2005. 24 с.
72. How To Use Color To Improve Your Conversion Rate [Електронний ресурс]. Режим доступу до ресурсу: https://www.forbes.com/councils/theyec/2022/01/31/how-to-use-color-to-improve-your-conversion-rate/
73. The Role of Color Psychology in Workplace Productivity [Електронний ресурс]. Режим доступу до ресурсу: https://onfra.io/blogs/color-psychology-and-its-role-in-workplace-productivity/
74. How Colors Affect Conversion Rate [Електронний ресурс]. Режим доступу до ресурсу: https://www.quicksprout.com/how-colors-affect-conversion-rate/
Content type: Bachelor Thesis
Vises i samlingene:122 — Компʼютерні науки (бакалаври)

Tilhørende filer:
Fil Beskrivelse StørrelseFormat 
2025_KRB_SN-42_Petryk.O.Y.pdfДипломна робота4,18 MBAdobe PDFVis/Åpne
Vis fullstendig innførsel


Alle innførsler i DSpace er beskyttet av copyright

Administrasjonsverktøy