Använd denna länk för att citera eller länka till detta dokument:
http://elartu.tntu.edu.ua/handle/lib/49570| Titolo: | Створення адаптивного дизайну веб-сайту квіткової крамниці «Flora» за допомогою Figma |
| Titoli alternativi: | Creating an Adaptive Design for the «Flora» Flower Shop Website Using Figma |
| Autori: | Мацюк, Мар’яна Сергіївна Matsiuk, Mariana Serhiivna |
| Affiliation: | ТНТУ ім. І. Пулюя, Факультет комп’ютерно-інформаційних систем і програмної інженерії, Кафедра комп’ютерних наук, м. Тернопіль, Україна |
| Bibliographic description (Ukraine): | Мацюк М. С. Створення адаптивного дизайну веб-сайту квіткової крамниці «Flora» за допомогою Figma : робота на здобуття кваліфікаційного ступеня бакалавра : спец. 122 - комп’ютерні науки / наук. кер. Л. П. Дмитроца. Тернопіль : Тернопільський національний технічний університет імені Івана Пулюя, 2025. 58 с. |
| Data: | 26-giu-2025 |
| Submitted date: | 12-giu-2025 |
| Date of entry: | 5-lug-2025 |
| Editore: | ТНТУ ім. І.Пулюя, ФІС, м. Тернопіль, Україна |
| Country (code): | UA |
| Place of the edition/event: | Тернопіль |
| Supervisor: | Дмитроца, Леся Павлівна Dmytrotsa, Lesia |
| UDC: | 004.51 |
| Parole chiave: | 122 адаптивний дизайн дизайн вебсайту прототипування типографіка інтерфейс design interface prototyping typography website responsive design |
| Page range: | 58 |
| Abstract: | Кваліфікаційна робота присвячена дослідженню принципів створення адаптивного дизайну вебсайту для квіткової крамниці «Flora» за допомогою Figma.
У першому розділі висвітлено підходи для побудови зрозумілого та цілісного інтерфейсу із використанням принципів UI/UX – дизайну. Розглянуто значення адаптивності у формуванні позитивного користувацького досвіду, а також проаналізовано конкурентне середовище у сфері продажу квітів.
У другому розділі проведено аналіз програмного забезпечення для реалізації поставлених завдань. Досліджено переваги використання Figma як основного інструменту для розробки дизайну вебсайту.
У третьому розділі представлено практичну реалізацію дизайну вебсайту квіткової крамниці. Описано вибір кольорів та типографіки, побудову структури основної версії сайту, а також створення дизайну для мобільних пристроїв. Крім того, наведено опис створення прототипу.
Четвертий розділ присвячено безпеці життєдіяльності та основам охорони праці. Описано вплив кольору на покращення роботоздатності, наведено вимоги організації безпечних умов праці користувачів ПК та розглянуто рекомендації щодо надання долікарської допомоги в умовах надзвичайної ситуації The qualification work is dedicated to the study of the principles of creating a responsive website design for the flower shop «Flora» using Figma. In the first section, approaches to building a clear and cohesive interface using UI/UX design principles are presented. The importance of responsiveness in shaping a positive user experience is examined, along with an analysis of the competitive environment in the flower sales industry. In the second section, an analysis of software for the implementation of the assigned tasks is conducted. The advantages of using Figma as the primary tool for website design development have been studied. In third section presents the practical implementation of the flower shop`s website design. The choice of colors and typography, the construction of the main version structure, as well as the creation of the design for mobile devices are described. In addition, a description of the creation of a prototype is provided. The fourth section is dedicated to life safety and the fundamentals of occupational health. The influence of color on improving work capacity is described, the requirements for organizing safe working conditions for PC users are provided, and recommendations for providing first aid in emergency situations |
| Descrizione: | Роботу виконано на кафедрі комп'ютерних наук Тернопільського національного технічного університету імені Івана Пулюя. Захист відбудеться 26.06.2025р. на засіданні екзаменаційної комісії №30 у Тернопільському національному технічному університеті імені Івана Пулюя |
| Content: | ВСТУП 8 РОЗДІЛ 1. ПІДХОДИ ДО РОЗРОБКИ ЕФЕКТИВНОГО ТА АДАПТИВНОГО ВЕБІНТЕРФЕЙСУ 9 1.1 UI/UX – дизайн для побудови зрозумілого та цілісного інтерфейсу 9 1.2 Роль адаптивності у формуванні позитивного користувацького досвіду 10 1.3 Огляд конкурентного середовища 11 РОЗДІЛ 2. АНАЛІЗ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ ДЛЯ РЕАЛІЗАЦІЇ ПРОЄКТУ 17 2.1 Критерії вибору інструментів для створення дизайну вебсайту. 17 2.2 Оцінка програмного забезпечення для розробки UI/UX 18 2.2.1 Sketch для побудови дизайн – систем і векторної графіки 19 2.2.2 Adobe XD як інструмент для інтерактивного прототипування 20 2.2.3 InVision для демонстрації користувацьких сценаріїв 20 2.2.4 Axure RP для моделювання логіки інтерфейсу 21 2.2.5 Figma для побудови макетів і візуального структурування сторінок 22 2.3 Використання Figma для реалізації проєктного рішення. 23 РОЗДІЛ 3. РОЗРОБКА ДИЗАЙНУ ВЕБСАЙТУ КВІТКОВОЇ КРАМНИЦІ «FLORA» 24 3.1 Вибір кольору та типографіки для побудови цілісного інтерфейсу 24 3.2 Створення дизайну вебсайту квіткової крамниці 29 3.3 Розробка дизайну мобільної версії «Flora» 33 3.4 Побудова прототипу для візуалізації взаємодії користувача із сайтом 38 РОЗДІЛ 4. БЕЗПЕКА ЖИТТЄДІЯЛЬНОСТІ, ОСНОВИ ОХОРОНИ ПРАЦІ 44 4.1 Вплив кольору на покращення умов праці 44 4.2 Організація безпечних умов праці користувачів ПК 45 4.3 Долікарська медична допомога в умовах надзвичайної ситуації 46 ВИСНОВКИ 48 ПЕРЕЛІК ДЖЕРЕЛ 49 ДОДАТКИ |
| URI: | http://elartu.tntu.edu.ua/handle/lib/49570 |
| Copyright owner: | © Мацюк Мар‘яна Сергіївна, 2025 |
| References (Ukraine): | 1 Струтинська І. В., Дмитроца Л. П., Сороківська О. А., Козбур Г. В. Особливості цифрового розвитку малого і середнього бізнесу України, країн Європи та G7 / І. В. Струтинська, Л. П. Дмитроца, О. А. Сороківська, Г. В. Козбур // Трансформація бізнесу для сталого майбутнього: дослідження, цифровізація та інновації: монографія. – ФОП Паляниця В. А., 2024. – С. 411- 427. 2 UX/UI дизайн – що це таке та як його правильно застосовувати [Електронний ресурс]. – Режим доступу: https://www.site2b.ua/ua/web-blog-ua/ux-ui-dizajn-shho-ce-take-ta-yak-jogo-pravilno-zastosovuvati.html (дата звернення: 24.05.2025). 3 UI Design Blog and Tutorials — Toptal [Електронний ресурс]. Режим доступу до ресурсу: https://www.toptal.com/designers/blog/ui-design (дата звернення: 24.05.2025). 4 UX Design Principles — Gabriela Arcia (2023) [Електронний ресурс]. – Режим доступу до ресурсу: https://medium.com/@gabrielaaarcia/ux-design-principles-d163e9871845 (дата звернення: 24.05.2025). 5 CASES. Як зробити аналіз цільової аудиторії? [Електронний ресурс]. – Режим доступу до ресурсу: https://cases.media/article/yak_zrobiti_analiz_cilovoyi_audit (дата звернення: 24.05.2025). 6 Найкращі практики адаптивного веб-дизайну — Dizz Agency (2023) [Електронний ресурс]. – Режим доступу до ресурсу: https://dizz.in.ua/uk/najkrashhi-praktiki-adaptivnogo-veb-dizajnu/ (дата звернення: 25.05.2025). 7 Адаптивний дизайн сайту і його основні переваги — Selector.Space (2021) [Електронний ресурс]. – Режим доступу до ресурсу: https://blog.selector.space/blog/адаптивний-дизайн-сайту/ (дата звернення: 25.05.2025). 8 Дмитроца Л., Старицький О. Оптимізація продуктивності та SEO при масштабуванні проєктів на основі React і Next.js / Л. Дмитроца, О. Старицький. – Збірник тез доповідей ⅩⅢ Міжнародної науково-практичної конференції молодих учених та студентів «Актуальні задачі сучасних технологій». – 2024. – С. 465–466. 9 Мацюк М. Адаптивний інтерфейс вебсайту з урахуванням принципів UX / UI дизайну / М. Мацюк. – VIII Міжнародна студентська науково-технічна конференція «Природничі та гуманітарні науки. Актуальні питання» – Тернопіль: Тернопільський національний технічний університет ім. І. Пулюя, 2025., 24–25 квіт. – С. 176 –177. 10 A Guide to Competitive Analysis for UX Design [Електронний ресурс]. – Режим доступу: https://medium.com/design-bootcamp/a-guide-to-competitive-analysis-for-ux-design-1ddafeb9a3e7 (дата звернення: 26.05.2025). 11 Flowers.ua [Електронний ресурс]. – Режим доступу до ресурсу: https://flowers.ua/ (дата звернення: 26.05.2025). 12 UFL (Українська служба доставки квітів) [Електронний ресурс]. – Режим доступу до ресурсу: https://www.u-f-l.net/ (дата звернення: 26.05.2025). 13 Мушинська Г., Дмитроца Л. П. Ефективність чат-ботів у сфері електронної комерції / Г. Мушинська, Л. П. Дмитроца // Трансформація бізнесу для сталого майбутнього: дослідження, діджиталізація та інновації: збірник тез доповідей Ⅱ Міжнародної науково-практичної конференції. – 2022. – С. 47–49. 14 Kvitna.ua – Електронний ресурс. – Режим доступу: https://kvitna.ua/ (дата звернення: 26.05.2025). 15 ТОП -10 інструментів для UX/UI дизайнера [Електронний ресурс]. – Режим доступу до ресурсу: https://ocean-agency.com.ua/top-10-instrumentiv-dlya-ux-ui-dizajnera (дата звернення: 27.05.2025). 16 UI/UX Tools for Beginners: Designing and Prototyping in Sketch — Ramotion [Електронний ресурс]. Режим доступу до ресурсу: https://store.ramotion.com/blog/ui-ux-tools-for-beginners-designing-and-prototyping-in-sketch/ (дата звернення: 27.05.2025). 17 Sketch. Інструменти для прототипування у Sketch [Електронний ресурс]. Режим доступу до ресурсу: https://www.sketch.com/prototype/ (дата звернення: 27.05.2025). 18 Sketch. Офіційний сайт програми Sketch [Електронний ресурс]. Режим доступу до ресурсу: https://www.sketch.com (дата звернення: 27.05.2025). 19 Adobe XD. Довідка користувача [Електронний ресурс]. – Режим доступу до ресурсу: https://helpx.adobe.com/ua/xd/user-guide.html (дата звернення: 27.05.2025). 20 Simplilearn. Adobe XD Tutorial: What is Adobe XD and How to Use it? [Електронний ресурс]. – Режим доступу до ресурсу: https://www.simplilearn.com/tutorials/ui-ux-career-resources/adobe-xd (дата звернення: 27.05.2025). 21 Kaarwan. How to Use InVision for Prototyping: A Comprehensive Guide [Електронний ресурс]. – Режим доступу до ресурсу: https://www.kaarwan.com/blog/ui-ux-design/how-to-use-invision-for-prototyping-a-comprehensive-guide?id=1403 (дата звернення: 28.05.2025). 22 ProfileTree. Prototyping Made Easy with InVision [Електронний ресурс]. – Режим доступу до ресурсу: https://profiletree.com/prototyping-made-easy-with-invision/ (дата звернення: 28.05.2025). 23 Axure. Official website of Axure RP – UX Prototypes, Specifications, and Diagrams [Електронний ресурс]. – Режим доступу до ресурсу: https://www.axure.com/ (дата звернення: 28.05.2025). 24 Axure Boutique. Axure Tutorial – Actions Full Guide: Axure Interactive Template [Електронний ресурс]. – Режим доступу до ресурсу: https://axureboutique.medium.com/axure-tutorial-actions-full-guide-axure-interactive-template-4f0808ac4eb0 (дата звернення: 28.05.2025). 25 Figma. Офіційний сайт Figma – інструмент для створення UI/UX дизайну [Електронний ресурс]. – Режим доступу до ресурсу: https://www.figma.com/ (дата звернення: 28.05.2025). 26 Mate Academy. Figma shortcuts: швидкі клавіші для ефективної роботи у Figma [Електронний ресурс]. – Режим доступу: https://mate.academy/blog/ui-ux-design/figma-shortcuts/ (дата звернення: 28.05.2025). 27 UX Playbook. Figma tips for UX designers [Електронний ресурс]. – Режим доступу: https://uxplaybook.org/articles/figma-tips-for-ux-designers (дата звернення: 28.05.2025). 28 CareerFoundry. Beginner’s guide to typography [Електронний ресурс]. – Режим доступу: https://careerfoundry.com/en/blog/ui-design/beginners-guide-to-typography/ (дата звернення: 29.05.2025). 29 Typography. 10 порад для типографіки у Web дизайні [Електронний ресурс]. – Режим доступу: https://medium.com/@uiuxukr/10-7de8e1567a0e (дата звернення: 29.05.2025). 30 Webpromo. Як вибрати гамму кольорів для дизайну сайту? [Електронний ресурс]. – Режим доступу: https://web-promo.ua/ua/blog/kak-vybrat-cvetovuyu-gammu-dlya-dizaina-sajta/ (дата звернення: 29.05.2025). 31 Brainlab. Колір в веб-дизайні: особливості використання та основні тренди 2020 [Електронний ресурс]. – Режим доступу: https://brainlab.com.ua/uk/blog-uk/kolr-v-veb-dizayn-osoblivost-vikoristannya-ta-osnovni-trendu-2020 (дата звернення: 29.05.2025). 32 Скиба, О. П., Назаревич, О. Б., & Шимчук, Г. В. (2019). Комп’ютерна графіка: методичний посібник та завдання до виконання графічних та самостійних робіт для студентів усіх форм навчання спеціальностей 122" Комп’ютерні науки" та 123" Комп’ютерна інженерія" з курсу" Комп’ютерна графіка". 33 Шимчук, Г. В., Маєвський, О. В., & Назаревич, О. Б. (2016). Конспект лекцій з дисципліни Комп’ютерна графіка для студентів освітнього рівня «бакалавр» спеціальності 125 «Кібербезпека». 34 Evergreen. Прототип сайту – як він допомагає оцінювати і розробляти сайти [Електронний ресурс]. – Режим доступу: https://evergreens.com.ua/ua/articles/prototype-site.html. 35 StudentBooks. Вплив кольору на людину та її працездатність – Електронний ресурс. – Режим доступу: URL: https://studentbooks.com.ua/content/view/955/76/1/4/ (дата звернення: 30.05.2025). 36 ДСТУ ISO 9241-5:2004. Ергономічні вимоги до офісних робочих місць з відеотерміналами (ВДТ). Частина 5. Розташування робочого місця та робоче положення користувача. – Чинний від 2005-01-01. – К.: Держспоживстандарт України, 2004. – 15 с. 37 Onninen. Як світлі кольори впливають на ефективність роботи – Електронний ресурс. – Режим доступу: URL: https://onninen.ua/stattya/jak-svitli-kolbory-vplyvajutb-na-efektyvnistb-roboty (дата звернення: 30.05.2025). 38 ДСТУ EN 12464-1:2017. Світло та освітлення. Освітлення робочих місць. Частина 1. Робочі місця в приміщеннях. – Чинний від 2018-01-01. – К.: ДП «УкрНДНЦ», 2017. – 45 39 Держпраці. Охорона праці при роботі з комп’ютером: роз’яснює Держпраці – Електронний ресурс: – Режим доступу: URL: https://news.dtkt.ua/labor/labor-relations/39447-oxorona-praci-pri-roboti-z-kompiuterom-roziasniuye-derzpraci (дата звернення: 30.05.2025). 40 Paramdic.ua. Як надати першу допомогу при кровотечах? – Електронний ресурс. – Режим доступу: URL: https://paramedic.ua/ua/pervaja-pomoshh-pri-krovotechenii (дата звернення: 30.05.2025). 41 PHC.org.ua. Як надавати першу домедичну допомогу при термічних опіках – Електронний ресурс. – Режим доступу: URL: https://phc.org.ua/news/yak-nadavati-pershu-domedichnu-dopomogu-pri-termichnikh-opikakh (дата звернення: 30.05.2025). |
| Content type: | Bachelor Thesis |
| È visualizzato nelle collezioni: | 122 — Компʼютерні науки (бакалаври) |
File in questo documento:
| File | Descrizione | Dimensioni | Formato | |
|---|---|---|---|---|
| 2025_KRB_SN-42_Matsiuk_M.S..pdf | Дипломна робота | 2,33 MB | Adobe PDF | Visualizza/apri |
Tutti i documenti archiviati in DSpace sono protetti da copyright. Tutti i diritti riservati.
Administrativa verktyg