ChSTU repository
ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets
Learn More
Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/5441| Title: | Користувацька частина WEB-ресурсу з продажу японського чаю |
| Authors: | Рудницький, Сергій Володимирович Докукіна, Анна Володимирівна |
| Keywords: | web-ресурс;програмне забезпечення;структура сайту;користувацька частина;японський чай |
| Issue Date: | 14-Jun-2023 |
| Abstract: | У сучасному світі електронна комерція постійно зростає, надаючи людям можливість здійснювати покупки зручно та швидко просто зі свого домівки. Зокрема, інтернет-магазини стали популярними майданчиками для продажу різноманітних товарів. У цьому контексті, розробка ефективних та привабливих WEB-ресурсів стає дедалі важливішою. Об'єкт дослідження: WEB-ресурс з продажу японського чаю. Предметом кваліфікаційної роботи є розробка користувацької частини WEBресурсу з продажу японського чаю з метою забезпечення зручного та ефективного взаємодії користувачів з сайтом при придбанні японського чаю, включаючи аспекти дизайну, навігації, функціональності та зручного процесу оформлення замовлення. Метою роботи є розробка користувацької частини WEB-ресурсу з продажу японського чаю, що забезпечить зручну навігацію, привабливий дизайн та функціональність для користувачів. Це дозволить залучити більше клієнтів, полегшити процес вибору та замовлення чаю, а також забезпечити задоволення від покупки та використання японського чаю. У роботі слід вирішити такі завдання для досягнення мети: - розглянути переваги застосування WEB-ресурсу для продажу японського чаю; - провести огляд вимог до web-ресурсів; - провести огляд існуючих аналогів та порівняти їх; - обрати програмне забезпечення; - обрати технології; - провести постановку задач; - спроектувати структуру сайту; - обрати кольорову гаму та шрифти; - розробити дизайн; - реалізувати фронтенд користувацької частини;- реалізувати фронтенд адмінської частини. Актуальність розробки WEB-ресурсу з продажу японського чаю зумовлена зростаючим попитом на цей продукт, а також необхідністю надати клієнтам зручну та надійну платформу для придбання високоякісного японського чаю. Даний WEBресурс спрямований на задоволення потреб клієнтів та підвищення якості їхнього досвіду покупки чаю. Новизна роботи полягає у сукупності функціоналу розроблюваного WEBресурсу, який відсутій у розглянутих сайтах-аналогах. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/5441 |
| Appears in Collections: | 126 Інформаційні системи та технології (Web-технології, web-дизайн) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| РЕП_БАК_Докукіна_WEBC-2111.pdf Restricted Access | Користувацька частина WEB-ресурсу з продажу японського чаю | 3.54 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ ТА НАУКИ УКРАЇНИ ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ ПОЯСНЮВАЛЬНА ЗАПИСКА до кваліфікаційної роботи «бакалавра» на тему: «Користувацька частина WEB-ресурсу з продажу японського чаю» Виконала: студентка 4 курсу, WEBC-2111 Спеціальності 126 «Інформаційні системи та технології» (шифр і назва напряму підготовки) Докукіна Анна Володимирівна Керівник: доцент кафедри інформаційних технологій проектування, кандидат технічних наук, доцент Рудницький Сергій Володимирович Черкаси – 2023 року ЗМІСТ ВСТУП ............................................................................................................................. 5 1 АНАЛІТИЧНА ЧАСТИНА ...................................................................................... 7 1.1 Переваги застосування WEB-ресурсу для продажу японського чаю ........ 7 1.2 Вимоги до Web-ресурсів ..................................................................................... 8 1.3 Огляд існуючих аналогів і їх порівняння ..................................................... 10 1.4 Висновок до частини 1 ...................................................................................... 15 2. ПРОЕКТУВАННЯ WEB-РЕСУРСУ ................................................................... 16 2.1 Програмне забезпечення ................................................................................... 16 2.2 HTML та CSS ...................................................................................................... 19 2.3 Постановка задачі .............................................................................................. 22 2.4 Проектування структури сайту ...................................................................... 23 2.5 Кольорова гама та шрифти .............................................................................. 29 2.6 Висновок до частини 2 ...................................................................................... 32 3 РЕАЛІЗАЦІЯ WEB-РЕСУРСУ .............................................................................. 33 3.1 Розробка дизайну ................................................................................................ 33 3.2 Реалізація фронтенду користувацької частини ........................................... 35 3.3 Реалізація фронтенду адмінської частини .................................................... 41 3.4 Висновок до частини 3 ...................................................................................... 46 ВИСНОВКИ ................................................................................................................. 47 СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ................................................................ 48 ПРОГРАМНІ ЗАСОБИ .............................................................................................. 49 ДОДАТОК А 482 ЧДТУ 332229 – 01 «Користувацька частина WEB-ресурсу з продажу японського чаю». Специфікація .............................................................. 50 ДОДАТОК Б 482 ЧДТУ 232229 – 01 12 01 Текст програми ................................ 52 ЧДТУ 232229.002 ПЗ Зм. Лист № докумемента Підпис Дата Розроб. Докукіна А.В. Літ. Лист Листів Перев. Рудницький С.В Користувацька частина WEB-ресурсу з Н 2 46 Реценз.. Мельник Р. П. продажу японського чаю ФІТІС, Н.контр. Рудницький С.В Пояснювальна записка кафедра ІТП, WEBC- 2111 Затв. ПрокопенкоТ.О.. СПИСОК СКОРОЧЕНЬ ТА УМОВНИХ ПОЗНАЧЕНЬ HTML – Мова розмітки. CSS – Каскадна таблиця стилів. URL – Унікальний ідентифікатор ресурсу. ПЗ – Програмне забезпечення. JS – динамічна, об'єктно-орієнтована прототипна мова програмування. UI ( «User Interface») — це «призначений для користувача інтерфейс». UX («user experience») – це «досвід користувача». ВСТУП У сучасному світі електронна комерція постійно зростає, надаючи людям можливість здійснювати покупки зручно та швидко просто зі свого домівки. Зокрема, інтернет-магазини стали популярними майданчиками для продажу різноманітних товарів. У цьому контексті, розробка ефективних та привабливих WEB-ресурсів стає дедалі важливішою. Об'єкт дослідження: WEB-ресурс з продажу японського чаю. Предметом кваліфікаційної роботи є розробка користувацької частини WEB- ресурсу з продажу японського чаю з метою забезпечення зручного та ефективного взаємодії користувачів з сайтом при придбанні японського чаю, включаючи аспекти дизайну, навігації, функціональності та зручного процесу оформлення замовлення. Метою роботи є розробка користувацької частини WEB-ресурсу з продажу японського чаю, що забезпечить зручну навігацію, привабливий дизайн та функціональність для користувачів. Це дозволить залучити більше клієнтів, полегшити процес вибору та замовлення чаю, а також забезпечити задоволення від покупки та використання японського чаю. У роботі слід вирішити такі завдання для досягнення мети: - розглянути переваги застосування WEB-ресурсу для продажу японського чаю; - провести огляд вимог до web-ресурсів; - провести огляд існуючих аналогів та порівняти їх; - обрати програмне забезпечення; - обрати технології; - провести постановку задач; - спроектувати структуру сайту; - обрати кольорову гаму та шрифти; - розробити дизайн; - реалізувати фронтенд користувацької частини; - реалізувати фронтенд адмінської частини. Актуальність розробки WEB-ресурсу з продажу японського чаю зумовлена зростаючим попитом на цей продукт, а також необхідністю надати клієнтам зручну та надійну платформу для придбання високоякісного японського чаю. Даний WEB- ресурс спрямований на задоволення потреб клієнтів та підвищення якості їхнього досвіду покупки чаю. Новизна роботи полягає у сукупності функціоналу розроблюваного WEB- ресурсу, який відсутій у розглянутих сайтах-аналогах. 1 АНАЛІТИЧНА ЧАСТИНА 1.1 Переваги застосування WEB-ресурсу для продажу японського чаю Японський чай володіє особливим смаком, ароматом та корисними властивостями, завдяки чому він є об'єктом популярності та попиту серед шанувальників чаю по всьому світу. Японські чаївники відомі своєю вмінням вирощувати та обробляти чай, передаючи у кожну чашку традиції та унікальність японської культури. Однак, знайти високоякісний японський чай може бути складним завданням, особливо для тих, хто проживає поза межами Японії. Саме тут стає актуальним розробка WEB-ресурсу з продажу японського чаю. Цей ресурс має на меті забезпечити доступ клієнтів до аутентичного японського чаю в будь-якій точці світу. Він створює зручну та надійну платформу, де шанувальники японського чаю можуть легко знайти, вибрати та придбати високоякісні сорти японського чаю безпосередньо від надійних виробників у Японії. Однією з ключових переваг WEB-ресурсу є зручність покупки. Клієнти можуть здійснювати замовлення японського чаю онлайн з будь-якого місця, що дозволяє їм ефективно використовувати свій час та енергію, особливо для тих, хто не має можливості відвідувати спеціалізовані магазини в своєму регіоні. WEB-ресурс також пропонує широкий вибір японських чаїв, що задовольнять потреби навіть найвибагливіших клієнтів. Він пропонує різні сорти, включаючи зелений чай, білий чай, оолонг та інші, з різними смаками, ароматами та корисними властивостями. Клієнти мають можливість познайомитися з різноманітністю японського чаю, ознайомитися з їх характеристиками та вибрати той, який найкраще відповідає їхнім уподобанням та потребам. Важливим аспектом є гарантія якості та автентичності продукту. WEB- ресурс співпрацює тільки з надійними постачальниками з Японії, що гарантує якість, свіжість та оригінальність кожного проданого чаю. Клієнти можуть бути впевнені, що отримують аутентичний японський чай, який відповідає вищим стандартам якості. WEB-ресурс з продажу японського чаю має певні переваги в нашому сучасному світі, де люди цінують якість, аутентичність та зручність. Він надає можливість отримати високоякісний японський чай безпосередньо від надійних виробників у Японії, забезпечуючи широкий вибір та гарантію якості. WEB- ресурс допомагає задовольнити потреби шанувальників японського чаю та розширює їх можливості відкривати світ японської культури через чашку ароматного чаю. 1.2 Вимоги до Web-ресурсів WEB-ресурс з продажу японського чаю повинен відповідати певним вимогам для забезпечення успішної та задоволенної покупки користувачами. Нижче наведено загальні вимоги до WEB-ресурсу, які сприяють створенню функціонального та привабливого середовища для покупців. 1. Інтуїтивний та зручний інтерфейс: WEB-ресурс повинен мати простий та зрозумілий інтерфейс, що дозволяє користувачам швидко зорієнтуватися на сайті, знайти потрібні товари та здійснити покупку без зайвих зусиль. 2. Логічна структура та навігація: Сайт повинен мати логічно впорядковану структуру, яка допомагає користувачам швидко знайти потрібну інформацію, категорії товарів та послуги. 3. Інформативність та якість контенту: WEB-ресурс повинен містити вичерпну та актуальну інформацію про продукти, їх властивості, країну походження, процес виробництва та смакові характеристики. Контент повинен бути добре структурований, легко читати та зрозумілий для клієнтів. 4. Функціональність та зручність: Сайт повинен мати всі необхідні функції для зручної покупки, такі як можливість додавання товарів до кошика, швидке оформлення замовлення, розміщення відгуків та рейтингів товарів, а також зручну систему оплати та доставки. 5. Мобільна сумісність: Ресурс повинен бути оптимізований для перегляду на різних пристроях, зокрема на смартфонах та планшетах, забезпечуючи зручний та естетичний вигляд сторінок. 6. Дизайн та візуальний вигляд: WEB-ресурс повинен мати привабливий та естетичний дизайн, який відображає елегантність та якість японського чаю. Колірна гамма, типографіка та використання зображень повинні гармонійно поєднуватися для створення привабливого візуального враження. Враховуючи ці вимоги до користувацької частини сайту, створений WEB- ресурс буде привабливии та функціональним, що задовольнить потреби та очікування клієнтів. Вимоги до дизайну інтернет-магазинів Єдиний фірмовий стиль Грамотно продуманий персональний імідж допоможе зробити бренд впізнаваним і поліпшити репутацію. Наявність фірмового стилю підтверджує надійність, серйозні наміри і довгострокові плани інтернет-магазину в сфері комерції. Хороша якість зображень Ключовий момент, від якого залежить рівень продажів. При оформленні інтернет-магазину потрібно використовувати професійні фотографії високої якості. Вони привертають увагу відвідувачів і допомагають зробити вибір. Продумане юзабіліті При розробці інтернет-магазину на дизайнера покладається величезна відповідальність: він повинен продумати все до дрібниць. Це зрозумілий інтерфейс, поділ асортименту на тематичні розділи, зручне розташування розділів, продумані фільтри й категорії товарів. Кнопки замовлення товарів повинні бути яскравими й помітними. Те ж саме стосується кошика й дизайну карток товарів. Виконання загальних вимог. Під цим мається на увазі використання відповідних шрифтів і читабельність тексту. Також необхідно звертати увагу на сполучуваність кольорів і загальну гамму, яка повинна бути гармонійною й легкої для сприйняття. Тут потрібно відштовхуватися від того, які емоції викликають певні відтінки у відвідувачів. При дотриманні всіх вимог зовнішній вигляд сайту стає тим фактором, який позитивно впливає на продаж.[1] 1.3 Огляд існуючих аналогів і їх порівняння Огляд магазину "Світ чаю" "Світ чаю" - це онлайн-магазин, спеціалізований на продажі різноманітних сортів чаю з усього світу. Завдяки широкому асортименту та високій якості своїх продуктів, цей магазин став популярним серед шанувальників чаю.[2] Перше, що привертає увагу на сайті "Світ чаю", це його зручний інтерфейс, що робить навігацію по сайту легкою та зрозумілою для користувачів. Всі товари розміщені в зручних категоріях, що дозволяє швидко знайти потрібний чай. "Світ чаю" пропонує широкий вибір чаю різних сортів, включаючи зелений, чорний, білий, оолонг, матча та багато інших. Кожен сорт чаю супроводжується детальним описом, який містить інформацію про його походження, смакові характеристики та спосіб приготування. Це дозволяє покупцям зробити обізнаний вибір та знайти саме той чай, який їм підходить. Однією з переваг магазину " Світ чаю " є його висока якість продукції. Всі чаї походять від надійних постачальників, що гарантує свіжість та автентичність продукту. Крім того, магазин забезпечує зручну систему доставки, що дозволяє клієнтам швидко отримати свої замовлення прямо до дверей. Одним із найприємніших моментів при покупках в магазині " Світ чаю " є професійна та уважна підтримка клієнтів. Команда магазину завжди готова відповісти на питання, надати рекомендації щодо вибору чаю або вирішити будь- які проблеми, що виникають у процесі замовлення. Загальною оцінкою, магазин " Світ чаю " є надійним та професійним джерелом якісного чаю. Він пропонує широкий вибір, зручний інтерфейс, високу якість продукції та надійну обслуговування клієнтів. Якщо ви шукаєте якісний чай з усього світу, " Світ чаю " може бути відмінним варіантом для вас. Рисунок 1.1 – Головна сторінка сайту Світ чаю Огляд магазину "The Tea" "The Tea" - це онлайн-магазин, спеціалізований на продажі різноманітних сортів чаю та аксесуарів для чаювання. Завдяки своєму розмаїттю продукції та уважному ставленню до якості, цей магазин став відомим серед шанувальників чаю.[3] Перше, що привертає увагу на сайті "The Tea", це його стильний та елегантний дизайн. Магазин використовує мінімалістичну та привабливу візуальну атмосферу, що створює приємне враження. Навігація по сайту легка та зрозуміла, що дозволяє швидко знайти необхідний чай чи аксесуар. "The Tea" пропонує широкий вибір чаю різних сортів, включаючи зелений, чорний, білий, оолонг, пуер та інші. Кожен сорт чаю супроводжується детальним описом, який містить інформацію про його походження, спосіб вирощування та смакові характеристики. Це дозволяє покупцям зробити обізнаний вибір та знайти чай, який відповідає їхнім смаковим уподобанням. Однією з переваг магазину "The Tea" є його підхід до якості продукції. Всі чаї походять від надійних постачальників, що гарантує свіжість та автентичність продукту. Команда магазину пильно контролює якість чаю, щоб забезпечити задоволення своїх клієнтів. Окрім чаю, "The Tea" пропонує широкий вибір аксесуарів для чаювання, таких як чайники, фільтри, чашки та інші. Це дозволяє покупцям створити повноцінний чайний ритуал та насолодитися процесом чаювання. Загалом, магазин "The Tea" є привабливим місцем для шанувальників чаю. Його розмаїття, якість продукції та привабливий дизайн роблять його привабливим вибором для покупців. Безумовно, він заслуговує уваги тих, хто цінує смак та якість чаю. Рисунок 1.2 – Головна сторінка сайту The Tea Огляд магазину "Tea.ua" Tea.ua - це інтернет-магазин, спеціалізований на продажі високоякісного чаю та чайних аксесуарів. Завдяки своєму широкому асортименту, професійному підходу та зручному інтерфейсу, Tea.ua зарекомендував себе як надійний джерело для шанувальників чаю.[4] Перший враження від відвідування Tea.ua - це сучасний та привабливий дизайн сайту. Чистий та інтуїтивно зрозумілий інтерфейс сприяє легкому пошуку необхідного чаю або аксесуарів. Навігація по сайту є зручною та швидкою, що сприяє приємному досвіду покупки. Tea.ua пропонує широкий вибір чаю різних сортів, включаючи зелений, чорний, білий, оолонг та багато інших. Кожен сорт чаю супроводжується детальним описом, який містить інформацію про його смакові характеристики, походження та спосіб приготування. Це дозволяє клієнтам зробити свідомий вибір та підібрати чай, що задовольнить їхні смакові уподобання. Однією з переваг Tea.ua є уважний підхід до якості продукції. Всі чаї походять від перевірених постачальників, що гарантує свіжість та автентичність продукту. Команда магазину стежить за якістю кожного чаю, щоб забезпечити задоволення своїх клієнтів. Крім чаю, Tea.ua пропонує широкий вибір чайних аксесуарів, таких як чайники, фільтри, чашки та інші. Це дозволяє клієнтам створити повноцінний чайний ритуал та насолодитися процесом чаювання. Оформлення замовлення на Tea.ua - простий та зручний процес. Клієнти мають можливість обрати зручний спосіб доставки та оплати, що додає зручності та гнучкості. У загальному, Tea.ua - це ідеальне місце для шанувальників чаю, які цінують якість, свіжість та розмаїття. Завдяки своєму професіоналізму, якості продукції та зручному інтерфейсу, Tea.ua заслуговує рекомендацій як надійний та високоякісний постачальник чаю. Рисунок 1.3 – Головна сторінка сайту Tea.ua Порівняння аналогів Порівняльна таблиця функціональності та дизайну сайтів-аналогів "Світ чаю", "The Tea" та "Tea.ua" наведена нижче. Критерії оцінювання Світ чаю The Tea Tea.ua Пошук товарів Так Так Так Корзина покупок Так Так Так Система відгуків Так Так Так Соціальні медіа посилання Так Так Так Інтерактивна карта магазинів Так Ні Ні Підтримка онлайн-чату Ні Так Так Можливість створення списків Так Ні Так бажань Система знижок та акцій Ні Так Так Рейтинг найпопулярніших товарів Ні Так Ні При При При отриманні отриманні отриманні Способи оплати замовлення, замовлення, замовлення, банківською банківською банківською карткою, карткою, карткою, через через через платіжні платіжні платіжні системи. системи. системи. 1.4 Висновок до частини 1 У рамках аналітичної частини роботи було проведено дослідження актуальності WEB-ресурсів з продажу японського чаю, вимог до Web-ресурсів та дизайну інтернет-магазинів. Також було здійснено огляд існуючих аналогів сайтів інтернет-магазинів "Світ чаю", "The Tea" та "Tea.ua" і складена таблиця їх порівняння за різними критеріями. Актуальність WEB-ресурсу з продажу японського чаю визначена через зростаючий попит на японський чай серед споживачів, що виявляють інтерес до його якості та різноманітності. Вимоги до Web-ресурсів та дизайну інтернет- магазинів включають функціональність, зручну навігацію, привабливий дизайн, інформативність та інші фактори, які сприяють задоволенню потреб користувачів. Огляд існуючих аналогів сайтів інтернет-магазинів "Світ чаю", "The Tea" та "Tea.ua" дав змогу отримати уявлення про їхню функціональність та дизайн. Порівняльна таблиця дозволила виявити відмінності між ними за такими критеріями, як вигляд інтерфейсу, наявність основних функцій, способи оплати та доставки, асортимент продуктів та інші параметри. Отже, на підставі проведених аналітичних досліджень можна зробити висновок, що розробка нового WEB-ресурсу з продажу японського чаю має актуальність і потенціал привернути увагу споживачів. При цьому слід враховувати вимоги до Web-ресурсів та дизайну інтернет-магазинів, а також врахувати особливості існуючих аналогів для створення конкурентоздатного ресурсу, який задовольнить потреби і очікування користувачів. 2. ПРОЕКТУВАННЯ WEB-РЕСУРСУ 2.1 Програмне забезпечення В цій роботі використані такі програми, як-от Figma та Visual Studio Code. Figma Вибір Figma для розробки дизайну інтернет-магазину може бути обґрунтований кількома факторами. По-перше, Figma є потужним інструментом для дизайну, який пропонує великий набір функцій і можливостей. Він дозволяє створювати високоякісні макети інтерфейсу, прототипи та спільно працювати з командою над проектом. По-друге, Figma є веб-додатком, що означає, що є можливість працювати над дизайном з будь-якого комп'ютера з доступом до Інтернету, без необхідності установки додаткового програмного забезпечення. Це зручно для колективної роботи та спілкування зі всією командою проекту. По-третє, Figma пропонує можливості спільної роботи в реальному часі. Є можливість запрошувати колег до свого проекту, спільно редагувати макети і бачити зміни, що вносяться в режимі реального часу. Це дозволяє ефективно спілкуватися та вирішувати завдання з командою. Крім того, Figma має дружній інтерфейс, що робить його доступним для новачків у галузі дизайну. Він також підтримує імпорт і експорт різних форматів файлів, що полегшує співпрацю з іншими інструментами. Загалом, Figma є потужним і зручним інструментом для розробки дизайну інтернет-магазину японського чаю, який дозволяє ефективно спілкуватися, спільно працювати та створювати якісні макети інтерфейсу. Докладніше про програму Figma — векторний онлайн-сервіс розробки інтерфейсів та прототипування з можливістю організації спільної роботи, що розробляється однойменною компанією.[5] Рисунок 2.1 – Логотип програми Figma Основні особливості Figma включають: 1. Веб-базовий доступ: Figma працює в браузері, що означає, що ви можете створювати і редагувати проекти без необхідності встановлення додаткових програм. 2. Колаборація в реальному часі: Кілька користувачів можуть одночасно працювати над проектом, спостерігати за змінами в реальному часі і вносити свої коментарі та пропозиції. 3. Багатошаровий підхід: Figma дозволяє створювати складні макети з використанням різних шарів, що дозволяє керувати видимістю та організацією елементів. 4. Векторне редагування: Вбудований векторний редактор Figma дозволяє створювати, редагувати та масштабувати векторні елементи, такі як форми, іконки та шрифти. 5. Прототипування: Figma дозволяє створювати інтерактивні прототипи, додавати переходи між сторінками та встановлювати взаємодію з елементами інтерфейсу. Figma – це єдиний графічний редактор, у якому одночасно можуть працювати декілька дизайнерів. Ця функція особливо важлива під час роботи над великим завданням. Програма створює єдине місце для всіх доданих користувачів: - дизайнери малюють деталі продукту всередині єдиного вікна; - верстальники вносять коригування та редагують файл; - менеджер проекту відстежує етапи роботи та звертає увагу на проблеми в режимі онлайн; - розробники вносять виправлення та коригують роботу дизайнера до етапу погодження з клієнтом. Вони можуть оцінити обсяг майбутніх робіт та скоригувати дизайн одразу, щоб уникнути проблем при реалізації. Всі дизайнери мають право залишати коментарі та ставити питання всередині дизайнерського вікна. Одночасна робота спрощує етап узгодження та скорочує час, що витрачається на листування у чатах. Коментарі, залишені в програмі, не губляться — програма зберігає їх в історії файлу.[6] Visual Studio Code Вибір впав саме наVisual Studio Code для розробки користувацької частини інтернет-магазину японського чаю та обґрунтований кількома причинами. По-перше, Visual Studio Code є одним з найпопулярніших редакторів вихідного коду з великою активною спільнотою розробників. Це означає, що є багато ресурсів, плагінів і розширень, які полегшують роботу розробників і розширюють можливості редактора. По-друге, Visual Studio Code має широкий набір функцій, що допомагають під час розробки веб-додатків. Він підтримує багато мов програмування і фреймворків, має вбудовану підтримку для Git і інтегровані інструменти для налагодження коду. Крім того, Visual Studio Code дозволяє налаштовувати його під свої потреби, додавати теми, розширення і налаштовувати редактор під конкретний проект. По-третє, Visual Studio Code має інтуїтивний інтерфейс, що робить його доступним для розробників будь-якого рівня. Він надає зручні можливості для редагування коду, автодоповнення, швидкого переходу між файлами і багато іншого, що полегшує роботу розробників і підвищує продуктивність. Загалом, Visual Studio Code є потужним, гнучким і зручним редактором вихідного коду, який надає розробникам багато можливостей для розробки користувацької частини інтернет-магазину японського чаю. Його активна спільнота, функціональність і налаштовуваність роблять його привабливим вибором для розробки веб-додатків. Рисунок 2.2 – Логотип програми Visual Studio Code Visual Studio Code, який також зазвичай називають VS Code — це редактор вихідного коду, створений Microsoft із Electron Framework для Windows, Linux і macOS. Функції включають підтримку налагодження, підсвічування синтаксису, інтелектуальне завершення коду, фрагменти, рефакторинг коду та вбудований Git. Користувачі можуть змінювати тему, комбінації клавіш, параметри та встановлювати розширення, які додають функціональність. В опитуванні розробників Stack Overflow 2022 серед 71 010 респондентів Visual Studio Code назвали найпопулярнішим інструментом середовища розробника, при цьому 74,48% повідомили, що вони ним користуються. [7] 2.2 HTML та CSS В ході розробки використовувались такі технології, як-от HTML та CSS. HTML HTML - скорочення від "HyperText Mark-up Language" - перекладається як "Мова розмітка гіпертексту" (Гіпертекст - це текст, що не послідовно зв'язаний з іншими документами, тобто є змога з першої сторінки документу перейти на останню). Іншими словами HTML - це мова розмітки, або ще один спосіб зберігання інформації. [8] Рисунок 2.3 – Логотип HTML HTML використовується для визначення структури і семантики контенту на веб-сторінках. HTML складається з різних елементів, які описують різні частини веб-сторінки. Основний підрозділ HTML включає такі елементи: 1. Заголовки (Headings): Використовуються для визначення заголовків на сторінці. Від <h1> (найбільший заголовок) до <h6> (найменший заголовок). 2. Параграфи (Paragraphs): Використовуються для створення текстових блоків абзаців. Відображаються як блоки з відступами вгорі і внизу. 3. Списки (Lists): Можуть бути введені у вигляді впорядкованих списків (<ol>) або невпорядкованих списків (<ul>). Елементи списку вказуються за допомогою елемента <li>. 4. Зображення (Images): Використовуються для вставки зображень на сторінку. Зображення задається за допомогою елемента <img> з атрибутом src, що вказує шлях до зображення. 5. Посилання (Links): Використовуються для створення гіперпосилань на інші сторінки або ресурси в Інтернеті. Посилання задається за допомогою елемента <a> з атрибутом href, що вказує адресу посилання. 6. Таблиці (Tables): Використовуються для створення табличної структури даних. Включають елементи <table> для визначення таблиці, <tr> для рядків і <td> для комірок таблиці. 7. Форми (Forms): Використовуються для створення взаємодії користувача з веб-сторінкою. Елементи форми включають <input>, <textarea>, <select> та інші, які дозволяють вводити дані, вибирати опції або надсилати дані на сервер. Це лише декілька основних елементів HTML, але мова має ще багато інших елементів, атрибутів і можливостей. HTML використовується для створення структури веб-сторінок і визначення їх зовнішнього вигляду та поведінки. Він є фундаментальним інструментом веб-розробки і важливою складовою будь-якого інтернет-магазину. CSS CSS (абревіатура від Cascading Style Sheets, що в перекладі означає каскадні таблиці стилів) - це спеціальна мова (мова стилів), за допомогою якої описують вигляду документів (як і де відображати елементи веб-сторінки), написаних мовами розмітки даних. Найчастіше CSS використовується для документів, котрі розмічені мовою HTML, XHTML та XML.[9] Рисунок 2.4 – Логотип CSS З допомогою CSS можна змінювати кольори, розміри, шрифти, відступи, рамки і багато інших аспектів веб-дизайну. Він дозволяє веб-розробникам керувати зовнішнім виглядом сторінки, забезпечуючи її стиль, привабливість і спосіб відображення. Основні можливості CSS включають: 1. Вибір селекторів: CSS використовує селектори для вибору елементів HTML, до яких будуть застосовуватися стилі. Селектори можуть бути базовими (наприклад, назва тегу) або класами, ідентифікаторами, псевдокласами тощо. 2. Властивості стилів: CSS дозволяє встановлювати різні властивості стилів для вибраних елементів. Це можуть бути кольори, розміри шрифтів, відступи, рамки, фонові зображення, тіні тощо. 3. Каскадність і спадковість: CSS використовує принцип каскаду, коли одному елементу можуть бути застосовані різні стилі залежно від їх пріоритетності. Крім того, стилі можуть спадати з батьківських елементів на дочірні, що дозволяє зберігати єдиний стиль для багатьох елементів. 4. Медіа-запити: CSS дозволяє визначати різні стилі для різних пристроїв і розмірів екранів. За допомогою медіа-запитів можна адаптувати веб- сторінку для мобільних пристроїв, планшетів або десктопних комп'ютерів. 5. Анімації і переходи: CSS дозволяє створювати рухливі ефекти, анімації та плавні переходи між станами елементів. 6. Гнучкий дизайн: CSS дозволяє створювати резинові (fluid) і адаптивні (responsive) макети, які змінюються в залежності від розміру екрану користувача. Це лише кілька основних аспектів CSS, існує багато інших можливостей і властивостей, які дозволяють розробникам створювати красиві і функціональні веб-дизайни. CSS є невід'ємною частиною сучасної веб-розробки і є незамінним інструментом для створення зовнішнього вигляду інтернет-магазину японського чаю. 2.3 Постановка задачі Постановка задачі передбачає наступні основні завдання: 1. Дослідження актуальності WEB-ресурсу з продажу японського чаю, виявлення потреб споживачів та розуміння особливостей ринку чаю. 2. Визначення вимог до WEB-ресурсу з урахуванням функціональних можливостей, ергономіки, безпеки та зручності використання для користувачів. 3. Проектування структури та інтерфейсу користувацької частини WEB- ресурсу. 4. Розробка дизайну WEB-ресурсу з урахуванням естетичних та маркетингових аспектів, створення привабливого інтерфейсу, використання зручних навігаційних елементів. 5. Реалізація frontend-частини WEB-ресурсу з використанням HTML, CSS та інших технологій. 6. Документування розроблених компонентів та функціональності WEB- ресурсу для забезпечення зрозумілості. 2.4 Проектування структури сайту Структура сайту інтернет-магазину японського чаю для користувачів має наступний вигляд: 1. Header: - посилання на сторінку Чай; - посилання на сторінку Кава; - посилання на сторінку Посуд; - посилання на сторінку Добавки; - посилання на сторінку Про нас; - логотип та назва магазину (посилання на головну сторінку); - пошукове поле для швидкого пошуку товарів; - посилання на сторінку Обрані товари; - посилання на сторінку Корзина; - посилання на сторінку Відстеження замовлення; - посилання на сторінку Профіль; - посилання на сторінку Вхід в акаунт. 2. Footer: - посилання на сторінку Чай; - посилання на сторінку Кава; - посилання на сторінку Посуд; - посилання на сторінку Добавки; - посилання на сторінку Про нас; - контакти; - посилання на соціальні мережі; - логотип та назва магазину (посилання на головну сторінку). 3. Головна сторінка: - Header; - навігаційна кнопка переходу на блок категорій товарів «Переглянути»; - блок Наші бестселлери з картками товарів (з можливістю додавання в кошик, додавання в обрані товари, переходу на сторінку товару); - блок Категорії з можливістю переходу на різні категорії товарів; - кнопка «На початок сторінки»; - Footer. 4. Сторінка Чай: - Header; - посилання на сторінку Кава; - посилання на сторінку Посуд; - посилання на сторінку Добавки; - перехід на підкатегорію Зелений чай; - перехід на підкатегорію Матча; - перехід на підкатегорію Оолонг; - перехід на підкатегорію Білий чай; - перехід на підкатегорію Жасминовий чай; - картки товарів (з можливістю додавання в кошик, додавання в обрані товари, переходу на сторінку товару); - кнопка «На початок сторінки»; - Footer. 5. Сторінка Кава: - Header; - посилання на сторінку Чай; - посилання на сторінку Посуд; - посилання на сторінку Добавки; - перехід на підкатегорію Кава мелена; - перехід на підкатегорію Кава в зернах; - картки товарів (з можливістю додавання в кошик, додавання в обрані товари, переходу на сторінку товару); - кнопка «На початок сторінки»; - Footer. 6. Сторінка Посуд: - Header; - посилання на сторінку Чай; - посилання на сторінку Кава; - посилання на сторінку Добавки; - перехід на підкатегорію Чашки; - перехід на підкатегорію Тарілки; - перехід на підкатегорію Ємкості; - картки товарів (з можливістю додавання в кошик, додавання в обрані товари, переходу на сторінку товару); - кнопка «На початок сторінки»; - Footer. 7. Сторінка Добавки: - Header; - посилання на сторінку Чай; - посилання на сторінку Кава; - перехід на підкатегорію Мед; - перехід на підкатегорію Джем; - картки товарів (з можливістю додавання в кошик, додавання в обрані товари, переходу на сторінку товару); - кнопка «На початок сторінки»; - Footer. 8. Сторінка Про нас: - Header; - інформація про магазин; - зображення; - кнопка «На початок сторінки»; - Footer. 9. Сторінка Обрані товари: - Header; - картки з обраними товарами (з можливістю додавання в кошик, видалення з обраних товарів, переходу на сторінку товару); - кнопка «На початок сторінки»; - Footer. 10. Сторінка Корзина: - Header; - таблиця з товарами в корзині з можливістю вибору кількості; - кнопка «Оновити кошик»; - кнопка «Продовжити покупки»; - кнопка «Оформити замовлення»; - кнопка «На початок сторінки»; - Footer. 11. Сторінка Відстеження замовлення: - Header; - поля для введення тексту; - кнопка «Відстежити»; - кнопка «На початок сторінки»; - Footer. 12. Сторінка Профіль: - Header; - персональна інформація; - форма зміни паролю; - кнопка «На початок сторінки»; - Footer. 13. Сторінка Вхід в акаунт: - Header; - поля для введення тексту; - кнопка «Увійти»; - кнопка «Зареєструватись»; - кнопка «На початок сторінки»; - Footer. 14. Сторінка товару: - Header; - зображення товару; - інформація про товар; - форма залишення відгуку з кнопкою «Додати відгук»; - відгуки; - кнопка «На початок сторінки»; - Footer. Ця структура допомагає організувати сайт інтернет-магазину японського чаю зручно і логічно для користувачів, дозволяючи легко знаходити потрібні товари, оформляти замовлення та отримувати інформацію про магазин. Структура сайту інтернет-магазину японського чаю для адміністраторів має наступний вигляд: 1. Header: - логотип та назва магазину (посилання на головну сторінку); - посилання на сторінку Профіль; - посилання на сторінку Вихід з акаунта. 2. Сторінка Вхід в акаунт: - Header; - поля для введення тексту; - кнопка «Увійти»; - Footer. 3. Сторінка Сьогоднішні замовлення: - Header; - навігаційні вкладки переходу на сторінки замовлень, товарів та користувачів; - таблиця інформацією про замовлення, які створені сьогодні. 4. Сторінка Замовлення в обробці: - Header; - навігаційні вкладки переходу на сторінки замовлень, товарів та користувачів; - таблиця інформацією про замовлення, які в обробці. 5. Сторінка Доставлені замовлення: - Header; - навігаційні вкладки переходу на сторінки замовлень, товарів та користувачів; - таблиця інформацією про замовлення, які доставлені. 6. Сторінка Категорії товарів: - Header; - форма створення категорії товару; - таблиця управління категоріями. 7. Сторінка Категорії товарів: - Header; - форма створення категорії товару; - таблиця управління категоріями. 8. Сторінка Підкатегорії товарів: - Header; - форма створення підкатегорії товару; - таблиця управління підкатегоріями. 9. Сторінка Додати товар: - Header; - форма додавання товару з полями для вводу інформації та фото. 10. Сторінка Управління товарами: - Header; - Таблиця з товарами з можливістю редагування та видалення. 11. Сторінка Управління користувачами: - Header; - Таблиця інформацією про користувачів. 12. Сторінка Журнал входу користувачів: - Header; - Таблиця інформацією про вхід користувачів в систему. 2.5 Кольорова гама та шрифти В ході роботи підібрано кольорову гаму та шрифти проекту. Основним кольором для дизайну інтерфейсу web-ресурсу з продажу японського чаю є зелений колір, та його відтінки. Кольорова гама web-ресурсу з продажу японського чаю включає такі відтінки: 1. #FEFFFC: Цей колір можна описати як дуже світлий кремовий або білий. Він створює враження чистоти, свіжості і нейтральності. Використання #FEFFFC може додати простоти та елегантності до дизайну, особливо для фонових елементів або навігаційних панелей. 2. #DEE4CB: Цей колір можна описати як блідий відтінок жовто-зеленого або лимонного кольору. Він викликає відчуття свіжості, природи і спокою. #DEE4CB використовується для створення акцентних елементів, підсилюючи відчуття гармонії та природності. 3. #3E4925: Цей колір можна описати як темний відтінок зеленого або оливкового. Він викликає відчуття стійкості, надійності і природи. Використання #3E4925 додає глибини та контрасту до дизайну, особливо для текстових елементів та акцентних деталей. 4. #3E4925 70%: Цей колір можна описати як середній сіро-зелений відтінок. Він створює враження солідності, стабільності і стриманості. Використання 70% #3E4925 є ефективним для створення фонових елементів або рамок, додаючи в них нейтральності і зберігаючи баланс в дизайні. 5. #81934C: Цей колір можна описати як насичений відтінок зеленого або оливкового. Він викликає відчуття природи, життєрадісності і енергії. Використання #81934C створює яскраві акценти в дизайні, особливо для кнопок, важливих повідомлень або силуетів об'єктів. 6. #293217: Цей колір можна описати як темний відтінок коричневого або шоколадного кольору. Він викликає відчуття теплоти, розкіші і комфорту. Використання #293217 додає глибини і тепла до дизайну, особливо для фонових елементів. 7. #B54522: Цей колір можна описати як насичений відтінок червоного або темно-помаранчевого. Він викликає відчуття енергії, сили і стимулюючого ефекту. Використання #B54522 привертає увагу користувачів до важливих елементів та виражає певний емоційний стан. Рисунок 2.5 – Кольорова гама сайту Використання цих кольорів в кольоровій гамі web-ресурсу з продажу японського чаю додає різноманітності, гармонії та емоційної виразності до дизайну, створюючи приємну та привабливу атмосферу для користувачів. Стилі тексту на web-ресурсі з продажу японського чаю використовують два шрифти - Cormorant і Open Sans. Комбінація цих шрифтів створює гармонійний і естетичний вигляд текстових елементів. Шрифт Open Sans використовується як основний шрифт у дизайні. Він має сучасний і чистий вигляд, що додає простоти і зрозумілості до текстового контенту. Open Sans має чіткість та високу читабельність, що дозволяє легко сприймати інформацію користувачами. Цей шрифт також добре працює на різних екранах і розмірах, що забезпечує зручність використання та навігацію по сайту. Шрифт Cormorant використовується в обмеженому обсязі, зазвичай для підписів кнопок, описів полів, карточок товарів та інших додаткових описів. Він має витончений і елегантний вигляд, що надає додаткового шарму і розкіші до візуального представлення. Використання Cormorant у вищезазначених елементах додає унікальності і підкреслює важливість деталей. Комбінація шрифтів Cormorant і Open Sans створює гармонійний баланс між елегантністю та читабельністю. Вона додає визначеності і стильності до текстового контенту, а також забезпечує зручність сприйняття інформації користувачами. Використання цих шрифтів допомагає створити привабливий та професійний вигляд web-ресурсу з продажу японського чаю, забезпечуючи зручну навігацію та передачу потрібної інформації. 2.6 Висновок до частини 2 В процесі проектування користувацької частини web-ресурсу з продажу японського чаю були використані потужні інструменти програмного забезпечення, зокрема Figma для розробки дизайну та Visual Studio Code для розробки вихідного коду. Використання HTML та CSS дозволило створити функціональні та естетично привабливі сторінки. Постановка задачі чітко визначила цілі та об'єктиви проекту. Проектування структури сайту дозволило створити зручну навігацію та логічну організацію інформації. Крім того було приділено увагу читабельності тексту та використанню відповідних шрифтів, зокрема основного шрифту Open Sans і додаткового шрифту Cormorant, які надають дизайну елегантності та характеру. Загалом, розділ проектування користувацької частини web-ресурсу створив основу для подальшої успішної реалізації проекту з продажу японського чаю. 3 РЕАЛІЗАЦІЯ WEB-РЕСУРСУ Для розробки фронтенду використано сучасні технології, зокрема HTML, CSS. За допомогою HTML була створена структура сторінок, включаючи розміщення елементів та стилізацію. CSS використовувався для задання вигляду та макету, включаючи кольори, шрифти, розташування елементів та анімацію. 3.1 Розробка дизайну Для розробки дизайну використаний потужний редактор Figma, який широкі можливості для творчості та реалізації ідей. Починаючи зі створення візуального концепту, проаналізували цільову аудиторію нашого ресурсу. Головним завданням було створити дизайн, який би відповідав їхнім потребам, відображав японську культуру та створював атмосферу спокою та гармонії. Застосовуючи принципи веб-дизайну, розроблено структуру та розташування елементів на сторінках. Акцент стоїть на зручній навігації, щоб користувачі могли швидко знайти потрібну інформацію та товари. Також приділено особливу увагу важливим елементам, таким як кнопки покупки, форми замовлення та інші елементи, які сприяють взаємодії користувачів з ресурсом. Рисунок 3.1 –Дизайн web-ресурсу Завдяки використанню редактору Figma, я змогла ефективно працювати над дизайном та швидко вносити зміни та вдосконалення. Результатом роботи став привабливий та функціональний дизайн web-ресурсу, який відображає культуру японського чаю та привертає увагу потенційних покупців. Рисунок 3.2 – Фото-наповнення web-ресурсу Рисунок 3.3 – Іконки та кнопки web-ресурсу 3.2 Реалізація фронтенду користувацької частини При реалізації фронтенду користувацької частини WEB-ресурсу, основні сторінки, як-от головна сторінка, сторінка категорій товарів, сторінка товару та сторінка "Про нас" - були розроблені з метою забезпечити зручну навігацію, візуальну привабливість та інформативність. Головна сторінка була спроектована з врахуванням привертання уваги користувачів та швидкого доступу до ключової інформації. На цій сторінці були розміщені привітальний банер, акційні пропозиції, перелік категорій товарів та блок з найбільш популярними товарами. Також була реалізована можливість швидкого пошуку товарів та перехід до конкретної категорії Рисунок 3.4 – Код головної сторінки Рисунок 3.5 – Зовнішній вигляд головної сторінки Сторінка категорій товарів була розроблена з урахуванням логічної структури, яка дозволяє користувачам легко орієнтуватися та знайти потрібні товари. Кожна категорія була представлена з відповідним зображенням та коротким описом. Також була забезпечена можливість сортування товарів за різними критеріями та фільтрація за параметрами. Рисунок 3.6 – Код сторінки Категорії товарів Рисунок 3.7 – Зовнішній вигляд блоку категорій товарів Сторінка товару була реалізована з урахуванням детального опису товару, його характеристик, зображень та ціни. Користувачам надається можливість додати товар до кошика, переглянути його у великому розмірі, а також перейти до оформлення замовлення. Рисунок 3.8 – Код сторінки товару Рисунок 3.9 – Зовнішній вигляд сторінки товару Сторінка "Про нас" містить інформацію про компанію, її цінності, історію та контактні дані. Вона спроектована з метою викликати довіру у користувачів та надати додаткову інформацію про магазин. Рисунок 3.10 – Код сторінки «Про нас» Рисунок 3.11 – Зовнішній вигляд «Про нас» Сторінка "Профіль користувача" надає можливість користувачам переглядати та редагувати свої особисті дані, переглядати історію замовлень, керувати списками бажань та використовувати розширені функціональні можливості, такі як зберігання адрес доставки та редагування налаштувань облікового запису. Рисунок 3.12 – Код сторінки «Профіль користувача» Рисунок 3.13 – Зовнішній вигляд «Профіль користувача» 3.3 Реалізація фронтенду адмінської частини Одні з головних розроблених сторінок для частини адміністратора є сторінки для управління підкатегоріями товарів, додавання товарів, управління користувачами та журналу входу користувачів. Сторінка управління підкатегоріями товарів надає можливість адміністратору додавати нові підкатегорії, редагувати існуючі, видаляти підкатегорії та налаштовувати їх параметри. На цій сторінці розміщена форма створення нової підкатегорії, яка містить поля для введення необхідної інформації. Також на сторінці відображається таблиця з усіма наявними підкатегоріями, яку можна редагувати та видаляти. Рисунок 3.14 – Код сторінки управління підкатегоріями товарів Рисунок 3.15 – Зовнішній вигляд сторінки управління підкатегоріями товарів На сторінці додавання товару розташована форма з полями для вводу інформації про товар, наприклад, назви, опису, ціни тощо. Крім того, на сторінці є можливість додавання трьох фотографій товару. Рисунок 3.16 – Код сторінки додавання товарів Рисунок 3.17 – Зовнішній вигляд сторінки додавання товарів Сторінка управління користувачами надає можливість адміністратору переглядати інформаці. про користувачів, зокрема їх ПІБ, пошту, контактний номер та інші дані. Можливість редагування або видалення користувачів також доступна на цій сторінці. Рисунок 3.18 – Код сторінки управління користувачами Рисунок 3.19 – Зовнішній вигляд сторінки управління користувачами Журнал входу користувачів зберігає інформацію про час та деталі авторизації користувачів для подальшого аналізу та забезпечення безпеки системи. Рисунок 3.20 – Код сторінки сторінки журналу входу користувачів Рисунок 3.21 – Зовнішній вигляд сторінки журналу входу користувачів Всі ці сторінки були розроблені з урахуванням зручності використання, простоти навігації та ефективного управління веб-ресурсом з продажу японського чаю. 3.4 Висновок до частини 3 Розділ "Реалізація WEB-ресурсу" включає розгляд трьох підрозділів: "Розробка дизайну" "Реалізація фронтенду користувацької частини" та "Реалізація фронтенду адмінської частини". Підрозділи націлені на розробку функціональних та естетичних інтерфейсів, які забезпечують зручну навігацію та задоволення потреб користувачів. Розглянуто процес розробки дизайну web-ресурсу з продажу японського чаю за допомогою редактора Figma. Кольорова гама була ретельно підібрана з метою передати естетику японського чаю. Ми використовували зелені відтінки, які символізують природність, свіжість та спокій. Детально описано процес розробки інтерфейсу для користувачів, який включав створення структури сторінок, використання HTML, CSS для забезпечення вигляду. Враховувалися принципи веб-дизайну та UX-дизайну, забезпечуючи зручну навігацію, стильний вигляд та ефективну взаємодію з користувачами. Описано розробку інтерфейсу для адміністраторів, який включав створення панелі управління, форм для додавання та редагування товарів, а також інші функціональні елементи. Забезпечувалася зручна та ефективна робота адміністраторів, спрощення процесу керування товарами та іншими елементами ресурсу. В цілому, розділ "Реалізація фронтенду для WEB-ресурсу з продажу японського чаю" відображає успішну реалізацію функціонального та естетичного фронтенду для користувацької та адмінської частин ресурсу. Результатом є зручний та задоволений досвід взаємодії з веб-ресурсом для всіх його користувачів. ВИСНОВКИ У випускній роботі бакалавра розроблена користувацька частина WEB- ресурсу з продажу японського чаю. Предметом роботи було створення функціонального та привабливого середовища для покупців з метою забезпечення комфортної та задоволеної покупки продуктів японського чаю. У процесі роботи було розглянуто середовище розробки, мова розмітки тексту HTML, каскадна таблиця стилів CSS. У роботі були вирішені такі завдання для досягнення мети: - розглянуто переваги застосування WEB-ресурсу для продажу японського чаю; - проведено огляд вимог до web-ресурсів; - проведено огляд існуючих аналогів та порівняти їх; - обрано програмне забезпечення; - обрано технології; - проведено постановку задач; - спроектовано структуру сайту; - обрано кольорову гаму та шрифти; - розроблено дизайн; - реалізовано фронтенд користувацької частини; - реалізовано фронтенд адмінської частини. Застосування сучасних технологій та розробка функціонального інтерфейсу забезпечили зручну навігацію, швидку обробку замовлень та задоволення вимог користувачів. Результатом роботи є створення функціонального та привабливого середовища для покупців, яке сприятиме зручним та задоволеним досвідом покупок японського чаю. СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 1. https://sysale.ua/uk/trebovaniya-k-vizualnoj-sostavlyayushhej-i-dizajnu-internet- magazinov/ 2. https://svit-chaju.ua/ 3. https://thetea.ua/ 4. https://tea.ua/ 5. https://uk.wikipedia.org/wiki/Figma 6. https://aboutmarketing.info/internet-marketynh/instrumenty/shcho-take-figma-ta- yak-yiyi-vykorystovuvaty-digital-fakhivtsyu/ 7. https://uk.wikipedia.org/wiki/Visual_Studio_Code 8. https://css.in.ua/article/shcho-take-css_3 9. https://css.in.ua/article/shcho-take-html_10 ПРОГРАМНІ ЗАСОБИ 1. Microsoft Office 360 2. Figma 2016-2023 3. Visual Studio Code 2015-2023 4. XAMMP Control panel 2003-2023 ДОДАТОК А 482 ЧДТУ 332229 – 01 «Користувацька частина WEB-ресурсу з продажу японського чаю». Специфікація ДОДАТОК Б 482 ЧДТУ 232229 – 01 12 01 Текст програми