WEB-ОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА ОБЛІКУ ПРИСТОРОЇВ КОМУНАЛЬНОГО ПІДПРИЄМСТВА

Руденко, Богдан Володимирович

Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/6879

Title:	WEB-ОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА ОБЛІКУ ПРИСТОРОЇВ КОМУНАЛЬНОГО ПІДПРИЄМСТВА
Authors:	Ланських , Євген Володимирович Руденко, Богдан Володимирович
Keywords:	веб-рішення;барбершоп;CMS;SEO-оптимізація;UX/UI-дизайн
Issue Date:	5-Jun-2025
Abstract:	У сучасному світі діджиталізація стала ключовим фактором успішності будь-якого бізнесу. Сфера послуг, зокрема індустрія барбершопів, також не стоїть осторонь — вона активно інтегрує веб-рішення, щоб покращити обслуговування клієнтів, підвищити впізнаваність бренду та оптимізувати внутрішні процеси. Барбершопи, які ще декілька років тому були виключно офлайн-орієнтованими, сьогодні дедалі частіше шукають шляхи представлення себе в цифровому просторі. Особливо це актуально в умовах високої конкуренції на ринку та швидко зростаючих очікувань клієнтів щодо зручності запису, інформативності сайту та загального користувацького досвіду. Власна веб-платформа для барбершопу — це не просто візитівка, а повноцінний інструмент взаємодії з клієнтами, який дозволяє: ● автоматизувати процеси запису; ● презентувати команду та послуги; ● інтегрувати онлайн-оплату; ● збирати аналітику поведінки користувачів; ● підвищувати лояльність аудиторії через блог, акції чи систему бонусів. В умовах українського ринку, де багато закладів досі не мають якісного сайту або використовують застарілі рішення, створення сучасного веб-сайту з урахуванням UX/UI-дизайну, адаптивності та SEO-оптимізації може стати суттєвою конкурентною перевагою. Ця робота спрямована на дослідження сучасного стану цифрової присутності барбершопів в Україні, аналіз існуючих рішень, проектування та реалізацію власного веб-сайту для барбершопу з урахуванням сучасних технологій, інструментів та вимог до ефективної онлайн-комунікації з клієнтом.
URI:	https://er.chdtu.edu.ua/handle/ChSTU/6879
Appears in Collections:	126 Інформаційні системи та технології (Web-технології, web-дизайн)

Files in This Item:

File	Description	Size	Format
РЕП_БАК_Руденко_WEB-2111.pdf Restricted Access		1.32 MB	Adobe PDF	View/Open Request a copy

Show full item record

Extracted text

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра інформаційних технологій проектування

ПОЯСНЮВАЛЬНА ЗАПИСКА

до кваліфікаційної роботи бакалавра

на тему:

«WEB-ОРІЄНТОВАНА ІНФОРМАЦІЙНА
СИСТЕМА ОБЛІКУ ПРИСТОРОЇВ КОМУНАЛЬНОГО
ПІДПРИЄМСТВА»

Виконав студент групи WEB-2111,
спеціальності 126 –
Інформаційні системи та
технології,
освітня програма – Web-
технології Web-дизайн,
Руденко Б.В.
Керівник к.т.н., дц. Ланських Є.В.
Рецензент

Черкаси – 2025

ЗМІСТ
ВСТУП .............................................................................................................. 4
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ............................................................. 8
1.1. Сучасний стан ринку барбершопів в Україні......................................... 8
1.2. Аналіз цільової аудиторії барбершопів ................................................ 11
1.3 . Огляд існуючих веб-рішень для барбершопів .................................... 14
1.4 Порівняльний аналіз функціональних можливостей конкурентних
сайтів ............................................................................................................... 18
1.5 Висновки до розділу ................................................................................ 20
2 ТЕОРЕТИЧНІ ОСНОВИ ВЕБ-РОЗРОБКИ ДЛЯ БІЗНЕСУ.................... 21
2.1 Критерії вибору платформи для розробки ............................................ 21
2.2 Порівняльна характеристика CMS для малого бізнесу ........................ 23
2.3 SEO-оптимізація як ключовий фактор успіху....................................... 26
2.4 Принципи UX/UI-дизайну для сервісних сайтів .................................. 28
2.5 Висновки до розділу 2 ............................................................................. 31
3 ПРОЕКТУВАННЯ АРХІТЕКТУРИ САЙТУ ........................................... 32
3.1 Визначення вимог до функціоналу сайту .............................................. 32
3.2 Розробка інформаційної архітектури ..................................................... 33
3.3 Прототипування інтерфейсів .................................................................. 34
3.4 Вибір кольорової палітри та типографіки ............................................. 36
3.5 Висновки до розділу 3 ............................................................................. 38

ЧДТУ ПЗ
Зм. Лист № докумемента Підпис Дата
Розроб. .Грищенко Б.С.
Літ. Лист Листів
Перев. Ланських Є.В. Web-сайт барбер-студії.
. Н
Пояснювальна записка 2 76

Реценз ФІТІС,
Н. . контр. . Ланських Є.В
Прокопенко Т.О. кафедра ІТП, Web-2111
Затв.

4 ТЕХНОЛОГІЧНА РЕАЛІЗАЦІЯ ТА ТЕСТУВАННЯ ............................ 39
4.1 Вибір хостингу та доменного імені ........................................................ 39
4.2 Налаштування WordPress та вибір теми ............................................... 40
4.3 Реалізація ключових сторінок сайту ...................................................... 41
4.4 Інтеграція системи онлайн-запису ......................................................... 43
4.5 SEO-оптимізація, адаптивність та швидкість завантаження ............... 44
4.6 Методика тестування веб-сайту ............................................................ 46
4.7 Аналіз результатів тестування ................................................................ 47
4.8 Висновки до розділу ................................................................................ 48

ВИСНОВКИ .................................................................................................... 49
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ...................................................... 51
ДОДАТОК A .................................................................................................. 53

Арк.
ЧДТУ ПЗ 3
З м н. Арк. № докум. Підпис
Дата

ВСТУП
У сучасному світі діджиталізація стала ключовим фактором успішності
будь-якого бізнесу. Сфера послуг, зокрема індустрія барбершопів, також не стоїть
осторонь — вона активно інтегрує веб-рішення, щоб покращити обслуговування
клієнтів, підвищити впізнаваність бренду та оптимізувати внутрішні процеси.
Барбершопи, які ще декілька років тому були виключно офлайн-орієнтованими,
сьогодні дедалі частіше шукають шляхи представлення себе в цифровому
просторі. Особливо це актуально в умовах високої конкуренції на ринку та
швидко зростаючих очікувань клієнтів щодо зручності запису, інформативності
сайту та загального користувацького досвіду.
Власна веб-платформа для барбершопу — це не просто візитівка, а
повноцінний інструмент взаємодії з клієнтами, який дозволяє:
● автоматизувати процеси запису;
● презентувати команду та послуги;
● інтегрувати онлайн-оплату;
● збирати аналітику поведінки користувачів;
● підвищувати лояльність аудиторії через блог, акції чи систему бонусів.
В умовах українського ринку, де багато закладів досі не мають якісного
сайту або використовують застарілі рішення, створення сучасного веб-сайту з
урахуванням UX/UI-дизайну, адаптивності та SEO-оптимізації може стати
суттєвою конкурентною перевагою.
Ця робота спрямована на дослідження сучасного стану цифрової
присутності барбершопів в Україні, аналіз існуючих рішень, проектування та
Арк.
ЧДТУ ПЗ 4
З м н. Арк. № докум. Підпис Дата

реалізацію власного веб-сайту для барбершопу з урахуванням сучасних
технологій, інструментів та вимог до ефективної онлайн-комунікації з клієнтом.

Актуальність теми
В умовах стрімкого розвитку цифрових технологій та посилення
конкуренції на ринку послуг, наявність сучасного веб-сайту стає критично
важливим елементом успішного функціонування барбершопу. Традиційні методи
залучення клієнтів поступово втрачають ефективність, тоді як онлайн-
присутність дозволяє не лише презентувати бренд, але й забезпечити клієнтам
зручність у взаємодії з закладом — від ознайомлення з послугами до онлайн-
запису та зворотного зв’язку.
Згідно з останніми дослідженнями, понад 70% власників барбершопів в
Україні планують оновити свої сайти у 2024–2025 роках, а 29% розглядають
можливість запуску мобільних додатків. Це свідчить про зростаючу потребу у
впровадженні інноваційних цифрових рішень, адаптованих до потреб сучасного
користувача. Водночас, лише 18% закладів наразі використовують CRM-системи,
а більшість існуючих сайтів мають низьку конверсію та не відповідають
стандартам юзабіліті, що відкриває значний потенціал для покращення.
Особливої актуальності тема набуває у світлі загального тренду
персоналізації сервісу та побудови довготривалих відносин із клієнтами через
цифрові канали. Якісний веб-сайт з інтуїтивним дизайном, адаптивністю до
мобільних пристроїв, SEO-оптимізацією та інтеграцією з соціальними мережами
— це не лише інструмент залучення нових клієнтів, а й ефективний спосіб
утримання постійної аудиторії.
Таким чином, створення функціонального, технологічно сучасного та
естетично привабливого сайту для барбершопу є не лише актуальним, але й
Арк.
ЧДТУ ПЗ
5
З м н. Арк. № докум. Підпис Дата

необхідним кроком для зміцнення позицій на ринку, підвищення лояльності
клієнтів та розвитку бренду в умовах цифрової трансформації.

Мета роботи — розробити функціональний та сучасний веб-сайт для
барбершопу, який відповідає потребам цільової аудиторії, враховує особливості
Арк.
ЧДТУ ПЗ 6
З м н. Арк. № докум.
Підпис Дата

українського ринку та включає актуальні технологічні рішення з урахуванням
UX/UI-дизайну, SEO та адаптивності.
Реалізація такої мети сприятиме цифровій трансформації малих сервісних
бізнесів та підвищенню конкурентоспроможності закладу на ринку.
Для досягнення мети поставлені такі завдання:
1. Провести аналіз ринку барбершопів в Україні, включаючи динаміку,
сегментацію та технологічні тенденції.
2. Визначити портрет цільової аудиторії та її цифрові звички.
3. Дослідити існуючі веб-рішення в цій галузі та провести порівняльний аналіз
функціональності конкурентних сайтів.
4. Вибрати найбільш доцільну платформу (CMS) для реалізації сайту малого
бізнесу.
5. Розробити структуру сайту, інформаційну архітектуру та прототипи
ключових сторінок у Figma.
6. Реалізувати сайт із використанням WordPress, адаптивної верстки та
системи онлайн-запису.
7. Провести SEO-оптимізацію сайту та підключити аналітичні інструменти
для відстеження ефективності.
8. Здійснити тестування готового продукту та провести оптимізацію
продуктивності.
9. Запропонувати шляхи подальшого вдосконалення проекту з урахуванням
сучасних цифрових трендів.
РОЗДІЛ 1. АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ
1.1. Сучасний стан ринку барбершопів в Україні
Арк.
ЧДТУ ПЗ 7
З м н. Арк. № докум. Підпис
Дата

Динаміка розвитку галузі
Ринок барбершопів в Україні протягом останніх п’яти років демонструє
с
т
а
б
і Зростання ринку барбершопів є особливо показовим на фоні загального
лскорочення малого бізнесу. Під час пандемії велика кількість малих підприємств
ьпризупинила діяльність або закрилася, однак барбершопи, які здебільшого мають
нстійке ком’юніті клієнтів, змогли адаптуватися за рахунок попереднього запису,
уобмеженої кількості відвідувачів та суворих санітарних вимог[2].

Географічно розвиток галузі зосереджено переважно в урбанізованих
д
регіонах. Найбільша концентрація спостерігається у Києві — 447 закладів (18,5%
и
від загальної кількості), що підтверджує тренд розвитку сфери послуг у
н
столичних мегаполісах. Інші лідери ринку:
а
м ● Львівська область — 231 (9,6%)
і ● Одеська область — 189 (7,8%)
к
у ● Харківська область — 167 (6,9%)
У 2022 році відбувся тимчасовий спад на 12%, спричинений війною,
змасовою міграцією та руйнуванням інфраструктури. Проте вже у 2023 році галузь
р
о
с
т
а
н
н
я Арк.
ЧДТУ ПЗ 8
З[м 1н.] , Анрекз. в№аж даокюумч. и на чПиідсплисе ннДіа тза овнішні виклики, включаючи пандемію COVID- 19
та повномасштабну війну. За даними Державної служби статистики України,
кількість офіційно зареєстрованих закладів зросла з 1 589 у 2018 році до 2 412 у

не лише відновилася, але й перевищила довоєнні показники на 7%, що свідчить
про високу адаптивність та життєздатність бізнесу.
Економічні показники
Фінансова структура барбершопів в Україні демонструє чіткий поділ за
сегментами: преміум, середній та економ. Кожен із них має свою специфіку,
рівень маржинальності, маркетингову політику та терміни окупності.
Преміум-сегмент (15% ринку):
● Середній чек: 800–1500 грн
● Маржинальність: 40–45%
● Витрати на маркетинг: 20–25% від обороту
● Термін окупності: 14–18 місяців
Середній клас (60% ринку):
● Середній чек: 400–700 грн
● Маржинальність: 25–30%
● Витрати на маркетинг: 12–15%
● Термін окупності: 20–28 місяців
Економ-сегмент (25% ринку):
● Середній чек: 200–350 грн
● Маржинальність: 15–20%
● Витрати на маркетинг: 5–8%
● Термін окупності: до 36 місяців
Арк.
ЧДТУ ПЗ 9
З м н.
Арк. № докум. Підпис Дата

Варто зазначити, що 68% нових закладів досягають точки беззбитковості
лише на другий або третій рік роботи, що зумовлено високою конкуренцією,
витратами на запуск і необхідністю формування бази постійних клієнтів.

Технологічні тренди
Барбершопи в Україні поступово інтегрують цифрові рішення, що
дозволяє підвищити ефективність бізнес-процесів, покращити комунікацію з
клієнтами та оптимізувати роботу персоналу.
● Онлайн-запис: 42% закладів впровадили системи попереднього запису, з
яких:
○ Bookly — 27% [3]
○ EasyWeek — 11%
○ Інші — 4%
● Віртуальні примірки зачісок (VR-технології): використовуються 8%
преміум-закладів, дозволяючи клієнтам побачити результат ще до стрижки.
● CRM-системи: використовують лише 18% барбершопів, що свідчить про
значний потенціал автоматизації.
Згідно з опитуванням власників:
● 71% планують оновити веб-сайт у 2024–2025 роках
● 53% цікавляться системами аналітики відвідуваності
● 29% розглядають можливість створення мобільного додатку
1.1.4. Проблеми та перспективи
Основні виклики, з якими стикається галузь:
Арк.
ЧДТУ ПЗ 10
З м н. Арк. № докум. Підпис
Дата

Кадрові:
● Нестача кваліфікованих майстрів — 43% вакансій залишаються відкритими
понад 4 місяці
● Висока плинність кадрів — щорічно 28–32%
Технологічні:
● 72% сайтів не відповідають стандартам юзабіліті [5]
● Середній час завантаження сторінки — 4,3 с (рекомендовано — до 2 с)
● Лише 9% використовують прогресивні веб-технології
Маркетингові:
● Витрати на залучення нового клієнта — 180–350 грн
● Середня конверсія сайтів — 1,7%
Перспективи розвитку включають:
● Інтеграцію з Google My Business (+38% видимості)
● Використання AI-чатботів (+25% конверсії записів)
● Розвиток PWA-додатків (+30% повторних відвідувань)
1.2. Аналіз цільової аудиторії барбершопів
Успішна реалізація будь-якого веб-проєкту неможлива без детального
аналізу цільової аудиторії, адже саме вона є основним рушієм попиту на послуги
компанії. Барбершопи, як окремий сегмент ринку послуг, мають чітко окреслений
профіль споживача, що дає змогу точніше спрямовувати маркетингові зусилля,
формувати ефективну стратегію просування та розробляти веб-ресурси,
максимально адаптовані під потреби користувачів.
Барбершопи в сучасному вигляді з'явилися в Україні на хвилі
популяризації чоловічої культури догляду за собою, яка прийшла із західної
Арк.
ЧДТУ ПЗ 11
З м н. Арк. № докум. Підпис Дата

моделі споживання. Це не просто перукарня, а певний культурний простір, де
чоловік отримує не лише послугу, але й естетичне та емоційне задоволення.
Таким чином, формування цільової аудиторії відбувається не тільки за соціально-
демографічними, але й за поведінковими та психографічними критеріями.
Соціально-демографічні характеристики:
● Стать: основною аудиторією є чоловіки. В окремих випадках барбершопи
можуть також обслуговувати хлопчиків (діти клієнтів), але переважна
більшість відвідувачів — дорослі чоловіки.
● Віковий діапазон: найактивнішими користувачами послуг є чоловіки у віці
від 18 до 45 років. Цей діапазон охоплює як молодих хлопців, які
цікавляться трендами та стилем, так і сформованих дорослих чоловіків, що
цінують якість та професіоналізм.
● Освіта та зайнятість: переважно люди з середньою спеціальною або вищою
освітою, активні економічно, що мають стабільний рівень доходу та можуть
дозволити собі регулярне відвідування барбершопів.
● Доходи: середній або вище середнього рівень доходу, що дає змогу не лише
задовольняти базові потреби, але й інвестувати у свій зовнішній вигляд.
Поведінкові характеристики:
● Частота користування послугами: в середньому 1 раз на 3–4 тижні. Для
окремих категорій (наприклад, тих, хто підтримує чіткий фейд або бороду)
— частіше.
● Інформаційна поведінка: клієнти активно користуються соціальними
мережами, цікавляться трендами у стилі, зачісках, слідкують за
барбершопами в Instagram, TikTok та Facebook.
● Взаємодія з онлайн-сервісами: більшість клієнтів надає перевагу онлайн-
запису через сайт або додаток, використанню Google Maps для пошуку
з Арк.
ЧДТУ ПЗ 12
З
м н. Арка. № докум. Підпис Дата
к

[4]
Психографічні характеристики:
● Цінності та стиль життя: сучасні чоловіки дедалі більше уваги приділяють
своєму зовнішньому вигляду, вбачаючи в ньому елемент самовираження.
Вони прагнуть виглядати стильно, доглянуто, іноді — злегка брутально, але
при цьому охайно.
● Очікування від закладу: не лише стрижка чи гоління, а й атмосфера —
фоновий рок або хіп-хоп, аромат кави чи віскі, розмови з барбером «на своїй
хвилі». Усе це створює комплексний досвід, який важливо передати також
і на веб-сайті.
● Лояльність до бренду: багато клієнтів після першого позитивного досвіду
стають постійними — у барбершопів досить високий рівень клієнтської
прив’язаності, що також слід враховувати при розробці UX/UI дизайну.
Сегментація цільової аудиторії:
1. Молоді активісти (18–25 років): відкриті до нового, готові
експериментувати з іміджем, шукають барбершоп через Instagram, читають
відгуки, звертають увагу на креативність сайту.
2. Чоловіки в розквіті (26–35 років): зайняті, зосереджені на роботі, цінують
час, комфорт, професіоналізм. Важливі онлайн-запис, чіткий прайс,
наявність фото-результатів.
3. Зрілі професіонали (36–45 років): віддають перевагу класичному стилю,
стабільності, шукають якісний сервіс без зайвого «шуму». Їм важливі
простота навігації сайту, наявність відгуків, досвід барберів.
Таким чином, аудиторія барбершопів є досить різнорідною, але об’єднана
спільними цінностями — прагненням виглядати доглянуто, стильно та сучасно.
Для розробки веб-сайту важливо враховувати як технічні, так і емоційні
Арк.
ЧДТУ ПЗ 13
З м н. Арк. № докум. Підпис Дата

очікування користувача: привабливий візуальний контент, адаптивність до
мобільних пристроїв, можливість онлайн-запису, швидке завантаження сайту,
зручна структура. Створення сайту має бути спрямоване не лише на
інформування, а й на формування позитивного враження, що відповідає
загальному іміджу закладу та впливає на рішення клієнта скористатися саме цим
барбершопом.
1.3. Огляд існуючих веб-рішень для барбершопів
У сучасних умовах присутність бізнесу в інтернет-просторі є не лише
бажаною, а й обов’язковою. Особливо це стосується сфери послуг, де значна
частина потенційних клієнтів приймає рішення на основі онлайн-інформації. Веб-
сайт барбершопу виступає цифровим обличчям закладу та першим каналом
Арк.
ЧДТУ ПЗ
14
З м н. Арк. № докум. Підпис Дата

комунікації з клієнтом. Його функціонал, дизайн, юзабіліті та контент напряму
впливають на сприйняття бренду та рівень довіри до нього.
У межах цього підрозділу було проведено огляд і порівняльний аналіз
п’яти актуальних веб-рішень для барбершопів, які функціонують на території
міста Черкаси.
1. barbershop.ck.ua (Barbershop «ЧЕРКАСИ»)
Основні характеристики:
● Стильний, сучасний дизайн у темних тонах, що відповідає атмосфері
класичного барбершопу.
● Адаптивна верстка — сайт коректно відображається на мобільних
пристроях.
● Інформативна головна сторінка: логотип, меню, контактна інформація,
послуги, карта.
● Є онлайн-запис через сторонній сервіс.
● Вбудований Instagram-фід — ефективне візуальне залучення клієнтів.
● Мінімалістичний, швидкий у завантаженні, з хорошим UX.
Недоліки:
● Обмежений обсяг текстового контенту — мінімум описів та пояснень.
● Відсутність детального блоку «Про нас», що ускладнює побудову довіри
новими клієнтами.
2. bgbarbershop.ck.ua (BG Barbershop)
Основні характеристики:
● Сайт створений на базі WordPress (ймовірно), має преміальну тему з
анімаціями.
Арк.
ЧДТУ ПЗ 15
З м н. Арк. № докум. Підпис Дата

● Візуально привабливий: використання фірмових кольорів, сучасна
типографіка.
● Присутній розділ із цінами, короткий опис кожної послуги.
● Інтеграція із системою онлайн-запису.
● Акцент на персонал — є фото та імена барберів.
Недоліки:
● На окремих сторінках — перевантаження графікою.
● SEO-оптимізація обмежена: відсутні ключові мета-теги, сторінки без
описів.
3. barber-house.ua
Особливості:
● Один із найбільш професійно виконаних сайтів серед прикладів.
● Великий обсяг інформації: історія бренду, філософія, перелік майстрів,
фото, послуги, новини.
● Високий рівень UX: продумане меню, інтерактивність, адаптивність.
● Сайт працює на власному CMS або кастомному рішенні.
● Онлайн-запис реалізований зручно і швидко.
Недоліки:
● Важкий сайт — через велику кількість зображень швидкість завантаження
може бути нижчою.
● Місцями — зайва формальність у контенті, що може не резонувати з
молодою аудиторією.
4. old-dutch-barbershop.ua/cherkasy (Old Dutch Barbershop)
Арк.
ЧДТУ ПЗ 16
З м н. Арк. № докум.
Підпис Дата

Основні характеристики:
● Частина мережі — відчувається фірмовий підхід до стилю, айдентики.
● Сайт мультимовний, що розширює потенційну аудиторію.
● Продумана структура: головна, послуги, барбери, локації, блог.
● Високий рівень SEO — правильна структура заголовків, семантичне ядро,
блог для просування.
● Якісні фото, зручна навігація, інтеграція з Google-картами.
Недоліки:
● Дещо шаблонна подача — схожа на корпоративний сайт, менш «живий».
● Онлайн-запис реалізовано через окремий інтерфейс, без повної інтеграції в
дизайн.
5. barbersop-bobber.easyweek.com.ua (BOBBER)
Особливості:
● Створено на платформі EasyWeek — SaaS-рішення для бізнесів сфери
послуг.
● Сайт працює як візитка та портал для запису.
● Мінімалістичний стиль, заточений під функціональність.
● Користувач може одразу обрати дату, час і барбера — без зайвих кліків.
● Добре оптимізований для мобільних пристроїв.
Недоліки:
● Обмежений візуальний стиль — фактично відсутній індивідуальний
дизайн.
Арк.
ЧДТУ ПЗ 17
З м н. Арк. № докум.
Підпис Дата

● Сайт виглядає більше як шаблонна сторінка запису, ніж повноцінний
бренд-ресурс.
Аналіз існуючих веб-рішень показує, що більшість барбершопів
намагаються поєднувати стильний візуал, зручність користування та
функціональність онлайн-запису. Найкращі приклади мають:
● Мобільну адаптацію — важливо для молодої аудиторії.
● Інтеграцію онлайн-запису — ключовий інструмент для користувачів.
● Високоякісний візуальний контент — фото майстрів, інтер’єру, робіт.
● SEO-елементи — тексти, оптимізовані заголовки, швидкість.
Водночас, частина сайтів страждає від шаблонності або браку унікального
контенту. Це створює можливість виділитися новому веб-рішенню завдяки
унікальному стилю, продуманому UX та інтеграції аналітики для подальшого
розвитку.
1.4. Порівняльний аналіз функціональних можливостей
конкурентних сайтів
З метою виявлення переваг і недоліків функціональних рішень веб-
сайтів барбершопів, а також визначення доцільних елементів для майбутньої
розробки, було проведено порівняльний аналіз п’яти конкурентних ресурсів, що
діють на території м. Черкаси.
У процесі аналізу враховувались ключові функціональні
характеристики, такі як наявність онлайн-запису, адаптивність, інформаційне
Арк.
ЧДТУ ПЗ 18
З м н. Арк. № докум. Підпис Дата

наповнення, інтеграція соціальних мереж, SEO-показники тощо. Отримані дані
подано в таблиці 1.
Таблиця 1 — Функціональні можливості сайтів-конкурентів
Арк.
ЧДТУ ПЗ
19
З м н. Арк. № докум. Підпис Дата

Фу№нкціонал barbersh bgbarbers old- bobber.easywee
№ op.ck.ua hop.ck.ua barbe dutch- k.com.ua
r- barbersh
hous op.ua
e.ua
Адаптивність + + + +
1 +
Онлайн- + + + +
2 запис +
Послуги та + + + +
3 ціни +
Інформація – + + +
4 про барберів +
Фото/галерея + + + –
5 +
Відгуки – – + –
6 +
Блог/новини – – + –
7 +
SEO- ± ± + ±
8 оптимізація +
Соцмережі + + + +
9 +
Карта/локаці + + + +
10 я +
Арк.
ЧДТУ ПЗ 20
З м н. Арк. № докум. Підпис Дата

Мультимовні – – + –
11 сть –
Примітки: "+" — функціонал наявний; "–" — відсутній; "±" — частково
реалізовано.
Як видно з таблиці, найбільш функціонально повними є сайти barber-
house.ua та old-dutch-barbershop.ua, які охоплюють практично всі ключові функції,
включаючи SEO, блоги, відгуки клієнтів та мультимовність. Натомість деякі
сайти, зокрема barbershop.ck.ua і bobber.easyweek.com.ua, мають обмежений набір
функціоналу, зосереджуючись здебільшого на базових можливостях.
На основі проведеного аналізу сформульовано ряд рекомендацій для
майбутнього проєкту веб-сайту барбершопу:
● реалізувати зручну та інтуїтивно зрозумілу систему онлайн-запису;
● створити профілі майстрів з фото, описами та графіками;
● забезпечити присутність блогу та розділу з відгуками клієнтів;
● адаптувати сайт під мобільні пристрої;
● реалізувати базову SEO-оптимізацію;
● інтегрувати карту, соцмережі та мультимовність.
Таким чином, аналіз дозволив визначити не лише стандартні функції
сучасного сайту барбершопу, а й ті, що можуть стати конкурентною перевагою в
умовах локального ринку.
1.5. Висновки до розділу
У першому розділі було здійснено комплексний аналіз предметної
області, що дозволив сформувати загальне уявлення про ринок барбершопів в
Арк.
ЧДТУ ПЗ 21
З м н. Арк. № докум. Підпис Дата

Україні, особливості цільової аудиторії, а також сучасні веб-рішення, що
застосовуються у цій сфері.
Аналіз ринку показав, що барбершопи в Україні продовжують активно
розвиватися, зростає кількість закладів, що орієнтуються на молодіжну і середню
чоловічу аудиторію, для якої важливі не лише послуги, а й атмосфера,
індивідуальний підхід і сучасна цифрова взаємодія з брендом.
Портрет цільового клієнта барбершопу включає чоловіків віком від 18
до 45 років, які цінують стиль, зручність онлайн-сервісів, візуальну естетику
сайту та швидкий доступ до послуг. Саме ці аспекти мають бути враховані при
розробці веб-платформи.
Огляд наявних веб-сайтів барбершопів показав, що більшість з них
мають базовий функціонал — онлайн-запис, інформацію про послуги та
контактні дані. Однак лише частина з них реалізує розширені можливості, як-от
SEO-оптимізацію, ведення блогу, інтеграцію з соцмережами, відгуки клієнтів або
мультимовність. [6]
Порівняльний аналіз дозволив виокремити сильні сторони
конкурентів, які доцільно врахувати при створенні нового сайту, а також виявити
Арк.
ЧДТУ ПЗ 22
З м н. Арк. № докум. Підпис Дата

недоліки, які можуть бути покриті за рахунок сучасного дизайну, повноцінного
функціоналу та користувацької зручності.
Таким чином, отримані результати першого розділу є основою для
подальшого проєктування і технологічної реалізації веб-сайту барбершопу, що
відповідатиме потребам цільової аудиторії та ринковим вимогам.

Арк.
ЧДТУ ПЗ 23
З м н. Арк. № докум. Підпис
Дата

РОЗДІЛ 2. ТЕОРЕТИЧНІ ОСНОВИ ВЕБ-РОЗРОБКИ ДЛЯ БІЗНЕСУ
2.1. Критерії вибору платформи для розробки
Вибір платформи для розробки веб-сайту є ключовим етапом у створенні
ефективного онлайн-ресурсу для бізнесу. Від правильного рішення залежить не
лише зручність реалізації функціоналу, але й подальше обслуговування,
масштабованість, безпека та оптимізація витрат. Для барбершопу як малого
бізнесу важливо знайти баланс між функціональністю, простотою керування та
бюджетом.
Основні критерії, які слід враховувати при виборі платформи:
1. Зручність управління контентом
Барбершопи часто оновлюють інформацію про послуги, ціни, графік
роботи або майстрів. Платформа повинна забезпечувати простий і інтуїтивно
Арк.
ЧДТУ ПЗ
24
З м н. Арк. № докум. Підпис Дата

зрозумілий інтерфейс для редагування контенту без потреби в глибоких
технічних знаннях.
2. Можливості для розширення функціоналу
Сайт повинен мати змогу легко інтегрувати додаткові модулі: онлайн-
запис, чат з клієнтами, система лояльності, інтеграція з соціальними мережами
тощо.
3. Адаптивність до мобільних пристроїв
Сучасні користувачі здебільшого заходять на сайти з мобільних
телефонів. Платформа має підтримувати створення адаптивного дизайну, який
однаково добре відображається на будь-якому пристрої.
4. SEO-оптимізація
Важливо, щоб платформа мала вбудовані інструменти або підтримувала
розширення для пошукової оптимізації, що дозволить підвищити видимість сайту
у Google та залучити нових клієнтів без додаткових витрат на рекламу.
5. Швидкість завантаження сайту
Платформа має бути оптимізованою для швидкої роботи, оскільки
повільний сайт може знизити рейтинг у пошукових системах і викликати
негативне враження у відвідувачів.
6. Безпека
Оскільки сайт може обробляти персональні дані користувачів під час
онлайн-запису, важливо, щоб платформа регулярно оновлювалась і мала засоби
захисту від атак.
7. Можливість масштабування
Арк.
ЧДТУ ПЗ 25
З м н. Арк. № докум. Підпис Дата

Навіть якщо сайт спочатку матиме обмежений функціонал, у
майбутньому може виникнути потреба в додаванні інтернет-магазину, блогу,
кількох мовних версій тощо. Платформа повинна підтримувати таке розширення.
8. Підтримка спільноти та документація
Якщо платформа популярна, користувач зможе легко знайти допомогу в
інтернеті, інструкції або звернутися до фахівців за підтримкою.
Таким чином, вибір платформи має базуватись не лише на початкових
потребах, а й на перспективі розвитку бізнесу. Для барбершопів ідеальним
варіантом може стати платформа, що поєднує простоту використання з широкими
м
о
2.2. Порівняльна характеристика CMS для малого бізнесу
ж
л Системи управління контентом (CMS) є фундаментальним
иінструментом для створення веб-сайтів малого бізнесу. Вони дозволяють легко
вдодавати, редагувати та публікувати контент без потреби в глибокому знанні
опрограмування. Для барбершопу, як представника малого сервісного бізнесу,
сважливо обрати CMS, яка забезпечить оптимальний баланс між
тфункціональністю, простотою використання, безпекою та вартістю.
я
Нижче наведено порівняння найбільш популярних CMS-платформ для
м
малого бізнесу:
и

CMS- Переваги Недоліки Висновок
кплатформ
а а
с
т
о
м
і Арк.
ЧДТУ ПЗ 26
З зм н. Арк. № докум. Підпис Дата

а

WordPres - Величезна - Потребує Ідеально підходить для
s кількість регулярного сайту барбершопу:
шаблонів і оновлення підтримує онлайн-запис,
плагінів має адаптивні шаблони,
хорошу SEO-підтримку
- Підтримка SEO
Wix - Простота у - Менше Добрий вибір для
використанні можливостей для швидкого старту, але
(drag-and-drop) кастомізації обмежений функціонал у
перспективі
- Вбудовані - Обмеження при
інструменти масштабуванні
маркетингу
- Хостинг
включено
Tilda - Фокус на - Платна модель Чудово підходить для
дизайн та при розширеному стильних презентацій
візуальну подачу функціоналі барбершопу з акцентом на
візуал
- Швидка - Менше технічної
розробка гнучкості
лендінгів
- Інтеграція з
CRM,
платіжними
системами
Joomla - Гнучка - Складніша в Може підійти для
архітектура освоєнні, ніж проєктів із складною
WordPress структурою, але вимагає
більше знань
Арк.
ЧДТУ ПЗ 27
З м н. Арк. № докум. Підпис Дата

- Більше - Менша кількість
технічних плагінів
можливостей
- Підтримка
мультимовності
Shopify - Чудова - Платна підписка Не є доцільним варіантом
підтримка для барбершопу без
електронної - Не призначена
онлайн-магазину
комерції для сайтів без

онлайн-продажу
- Інтеграція з
соцмережами та
платіжками
А
н
а
л Таким чином, вибір CMS має ґрунтуватися на запланованому
фі ункціоналі сайту, потребах замовника, бюджету, а також довгострокових планах
рзозвитку онлайн-платформи.

2.3. SEO-оптимізація як ключовий фактор успіху
п
о У сучасних умовах високої конкуренції в цифровому середовищі
пкошукова оптимізація (SEO — Search Engine Optimization) відіграє ключову роль
[а9] у забезпеченні видимості веб-сайту в пошукових системах. Для барбершопу,
язк представника малого бізнесу у сфері послуг, якісний SEO-підхід дозволяє
у
є
,

щ Арк.
о ЧДТУ ПЗ 28
З м н. Арк. № докум. Підпис
Дата

н

залучити нових клієнтів, збільшити онлайн-записи та підвищити впізнаваність
бренду.

Основні напрямки SEO-оптимізації:
1. Технічна SEO-оптимізація
○ Адаптивність сайту до мобільних пристроїв (Mobile-Friendly).
○ Швидкість завантаження сторінок (Page Speed).
○ Структура URL-адрес (читабельні, короткі та логічні).
○ Наявність файлів robots.txt і sitemap.xml. [10]
○ Захищене з’єднання (HTTPS-протокол).
2. Внутрішня SEO-оптимізація (On-page SEO)
○ Використання ключових слів у заголовках (H1, H2), мета-тегах (title,
description).
○ Оптимізація текстового контенту з урахуванням частоти та щільності
ключових фраз.
○ Альтернативні описи для зображень (alt-теги).
○ Внутрішня перелінковка між сторінками сайту.
3. Зовнішня SEO-оптимізація (Off-page SEO)
○ Наявність якісних зворотних посилань (backlinks) з авторитетних
ресурсів.
Арк.
ЧДТУ ПЗ 29
З м н. Арк. № докум. Підпис Дата

○ Реєстрація у локальних каталогах та картах Google (Google My
Business). [11]
○ Активність у соціальних мережах та згадки бренду на зовнішніх
платформах.
Особливості SEO для барбершопу:
● Локальне SEO: Одним з основних напрямків є локальна оптимізація,
оскільки барбершоп надає офлайн-послуги. Для цього важливо правильно вказати
адресу, графік роботи, номер телефону та геомітку на сайті та в сервісах Google.
● Відгуки та рейтинг: Відгуки клієнтів у Google, Facebook чи на сайті
впливають на позиції у видачі.
● Контент-маркетинг: Регулярні публікації у блозі на теми догляду за
бородою та волоссям, тренди чоловічих зачісок тощо підвищують релевантність
сайту в очах пошукових систем.
SEO-оптимізація є фундаментальним елементом для досягнення високих
позицій у пошукових системах і залучення нових клієнтів. Для барбершопу
Арк.
ЧДТУ ПЗ 30
З м н. Арк. № докум. Підпис Дата

ефективна стратегія SEO, особливо в локальному контексті, забезпечує
конкурентні переваги та сприяє зростанню бізнесу.
2.4. Принципи UX/UI-дизайну для сервісних сайтів
Успішний веб-сайт у сфері сервісних послуг, зокрема барбершопу,
повинен бути не лише функціональним, але й зручним для користувача. Саме
тому важливу роль у процесі розробки відіграє UX/UI-дизайн.
UX (User Experience) — це користувацький досвід, який охоплює емоції,
поведінку та реакції відвідувача під час взаємодії із сайтом.
UI (User Interface) — це інтерфейс користувача, тобто візуальне
оформлення сайту: кнопки, кольори, типографіка, розташування елементів тощо.
Основні принципи UX-дизайну для барбершопу:
1. Зрозуміла структура сайту
Користувач повинен легко орієнтуватися на сайті — головні сторінки, такі
як Послуги, Про нас, Онлайн-запис, Контакти, мають бути доступними з
головного меню.
2. Мінімізація кількості кліків до цільової дії
В ідеалі, користувач має дістатися до онлайн-запису не більше ніж за 2–3
кліки.
3. Локалізація та адаптивність
Сайт має підтримувати українську мову та коректно відображатися на
смартфонах і планшетах, оскільки більшість користувачів використовують
мобільні пристрої.
4. Чіткі Call-to-Action (CTA)
Арк.
ЧДТУ ПЗ 31
З м н. Арк. № докум. Підпис
Дата

Кнопки типу "Записатися", "Зателефонувати", "Дізнатися більше" мають
бути помітними, контрастними та інтуїтивно зрозумілими. [12]
Основні принципи UI-дизайну:
1. Візуальна ієрархія
Заголовки мають бути більшими та виразнішими за звичайний текст,
важливі блоки — виділеними.
2. Колірна палітра та стиль
Для барбершопу часто обирають темні, контрастні кольори (чорний,
сірий, бордовий) у поєднанні з білим текстом, що створює стильний та
"чоловічий" вигляд.
3. Типографіка
Використання сучасних, чітких шрифтів. Часто застосовуються брутальні
або класичні шрифти, які асоціюються з чоловічим стилем та ретро-естетикою.
4. Ілюстрації та фото
Якісні фотографії інтер'єру, майстрів та процесу стрижки формують
довіру та покращують сприйняття бренду.
Приклади корисних елементів інтерфейсу:
● Віджет онлайн-запису з вибором майстра, дати та часу.
● Інтерактивна карта з локацією барбершопу.
● Блок "Наші майстри" з короткими профілями та фото.
● Галерея "До / Після" зі стрижками клієнтів.
Арк.
ЧДТУ ПЗ 32
З м н. Арк. № докум. Підпис Дата

Якісний UX/UI-дизайн — це не лише естетика, а й інструмент покращення
користувацького досвіду та підвищення конверсії. У сфері сервісів, де довіра та
комфорт клієнта відіграють ключову роль, інтуїтивний та привабливий інтерфейс
сайту є однією з основ успішного бізнесу.
2.5. Висновки до розділу
У другому розділі було розглянуто теоретичні аспекти веб-розробки, що
мають особливе значення для створення ефективного сайту барбершопу.
По-перше, визначено основні критерії вибору платформи для розробки,
серед яких важливу роль відіграють зручність використання, підтримка плагінів,
можливості для SEO та візуального налаштування. Аналіз існуючих CMS показав,
що для малого бізнесу оптимальним рішенням є WordPress, завдяки своїй
гнучкості, доступності та великій кількості готових рішень.
По-друге, особливу увагу приділено SEO-оптимізації, яка є критично
важливою для просування сервісного сайту в пошукових системах. Було виділено
основні напрямки SEO — технічну, внутрішню та зовнішню оптимізацію — з
акцентом на локальне SEO, яке є особливо релевантним для барбершопу.
По-третє, проаналізовано ключові принципи UX/UI-дизайну, які
визначають якість користувацького досвіду. Чітка навігація, адаптивність,
візуальна привабливість та логічна структура інтерфейсу сприяють підвищенню
довіри клієнтів і полегшують процес взаємодії з сайтом.
У сукупності, розглянуті у розділі теоретичні засади формують підґрунтя
для ефективного проектування і подальшої реалізації сучасного та
Арк.
ЧДТУ ПЗ 33
З м н. Арк. № докум.
Підпис Дата

конкурентоспроможного веб-сайту барбершопу, орієнтованого на потреби
цільової аудиторії.
РОЗДІЛ 3. ПРОЕКТУВАННЯ АРХІТЕКТУРИ САЙТУ
3.1. Визначення вимог до функціоналу сайту
На етапі проектування важливо чітко сформулювати вимоги до функціоналу
сайту, які забезпечать його ефективність як інструменту бізнес-комунікації та
залучення клієнтів. Оскільки барбершоп є локальним сервісом, головна мета
веб-ресурсу — інформування потенційних клієнтів, спрощення запису на
послуги та формування позитивного іміджу закладу.
Основні функціональні вимоги:
1. Головна сторінка

○ Презентація бренду: логотип, слоган, короткий опис послуг.

○ Вітальний блок із кнопкою швидкого запису.

○ Актуальні акції або новини.

2. Сторінка “Послуги”

○ Перелік послуг (стрижка, гоління, укладка, догляд за бородою
тощо).

○ Інформація про тривалість та вартість кожної послуги.

○ Можливість переходу до запису на конкретну послугу.

3. Онлайн-запис

○ Інтерактивна форма з вибором дати, часу та майстра.

○ Можливість підтвердження запису через e-mail або SMS (опційно).

Арк.
ЧДТУ ПЗ 34
З м н. Арк. № докум. Підпис
Дата

○ Синхронізація з календарем адміністратора (наприклад, через
Google Calendar або сторонній сервіс типу Calendly або Bookly).

4. Сторінка “Наша команда”

○ Фотографії майстрів.

○ Короткі описи (досвід, спеціалізація).

○ Відгуки клієнтів (опціонально).

5. Галерея
○ Фото “до/після” стрижки.
○ Атмосфера барбершопу, інтер’єр.

6. Блог (опціонально)
○ Статті про догляд за волоссям та бородою.
○ Новини, корисні поради, тренди.

7. Сторінка “Контакти”
○ Адреса, карта Google.
○ Телефон, e-mail.
○ Графік роботи.
○ Посилання на соцмережі.

8. Інтеграції
○ Google Maps.
○ Google Analytics / Meta Pixel.
○ Сервіси для збору відгуків або рейтингів (Google My Business,
Instagram, тощо).

9. Мультимовність
○ Підтримка щонайменше української мови, з можливістю додати
англійську.

10. Адаптивність
● Коректне відображення на мобільних пристроях і планшетах.

Арк.
ЧДТУ ПЗ 35
З м н. Арк.
№ докум. Підпис Дата

Нефункціональні вимоги:
● Швидке завантаження сторінок.

● Простота в адмініструванні (WordPress з візуальним редактором).

● Можливість подальшого масштабування (додавання нового
функціоналу, розширення блогу тощо).

● Захищене з’єднання HTTPS.

Чітке формулювання функціональних та нефункціональних вимог
дозволяє забезпечити узгодженість між очікуваннями замовника, зручністю для
користувача та технічною реалізацією. На основі цих вимог у наступних
підрозділах буде розроблено архітектуру, структуру та дизайн сайту
барбершопу.
3.2. Розробка інформаційної архітектури
Інформаційна архітектура (IA, Information Architecture) — це логічна
структура організації вмісту веб-сайту, яка визначає, як інформація
представлена, згрупована та пов'язана між собою. Грамотно спроєктована IA
дозволяє користувачам швидко знаходити потрібну інформацію та ефективно
взаємодіяти із сайтом.
Для сайту барбершопу ключовими факторами є простота навігації,
інтуїтивна структура та можливість здійснити запис на послугу в декілька кліків.
Основні цілі інформаційної архітектури:
● Забезпечити логічну ієрархію сторінок.

● Мінімізувати глибину вкладеності (максимум 2–3 рівня).

● Візуалізувати шлях користувача до основних дій (запис, перегляд послуг,
контакти).
Основні розділи сайту:
Головна — загальна інформація, банер, кнопка запису;
Арк.
ЧДТУ ПЗ 36
З м н. Арк. № докум. Підпис Дата

Про нас — опис філософії, атмосфери та переваг барбершопу;
Послуги — перелік процедур (стрижка, гоління, догляд за бородою) з цінами;
Команда — фотографії та імена майстрів;
Контакти — адреса, графік роботи, форма зворотного зв’язку;
Онлайн-запис — динамічна форма бронювання (Bookly

3.3. Прототипування інтерфейсів
У межах даного проєкту для створення візуального уявлення майбутнього
інтерфейсу було застосовано прототипування безпосередньо у CMS
WordPress з використанням конструктора сторінок Elementor. [13] Такий підхід
дозволив одразу в середовищі розробки побудувати логіку, структуру та
зовнішній вигляд сайту без потреби у використанні сторонніх інструментів на
етапі макетування (наприклад, Figma або Adobe XD).
Інтерфейс було реалізовано у вигляді робочого прототипу, який відображає
майбутній функціонал сайту з усіма ключовими елементами.
Основні сторінки, які були прототиповані:
● Головна сторінка

● Сторінка послуг

● Сторінка майстрів

● Форма онлайн-запису

Головна сторінка
Основна мета головної сторінки — створити позитивне перше враження,
швидко донести основну інформацію про заклад та підштовхнути користувача
до запису на послугу. Структура сторінки побудована за класичним принципом
візуальної ієрархії: зверху — шапка сайту, яка містить логотип, меню навігації
(Головна, Послуги, Майстри, Контакти) та кнопку «Записатись». Нижче
розташовано герой-блок із гаслом та головною кнопкою заклику до дії.
Арк.
ЧДТУ ПЗ
37
З м н. Арк. № докум. Підпис Дата

Далі слідують секції:
● «Про нас» — короткий опис філософії закладу;

● «Відгуки клієнтів» — блок для демонстрації довіри.

Сторінка послуг
Сторінка містить перелік актуальних послуг, поданих у вигляді карток. Кожна
картка включає:
● Назву послуги;

● Короткий опис;

● Ціну;

● Кнопку «Записатись».
Для зручності користувача передбачена сітка розташування карток, що
адаптується під різні розміри екранів. Внизу сторінки — розділ з відгуками
клієнтів.
Сторінка майстрів
Призначена для представлення персоналу барбершопу. Кожен майстер
відображається у форматі картки з:
● Фотографією;

● Ім’ям;

● Спеціалізацією;

● Досвідом роботи;

● Кнопкою «Обрати».
Також реалізовано блок з відгуками про конкретного майстра, що дає
можливість відвідувачам прийняти більш обґрунтоване рішення.
Арк.
ЧДТУ ПЗ 38
З м н. Арк.
№ докум. Підпис Дата

Форма онлайн-запису
Центральний елемент взаємодії з клієнтами. Структура форми проста й логічна:
● Ім’я;

● Телефон;

● Вибір послуги;

● Вибір майстра;

● Дата та час;

● Коментар (необов’язково);

● Кнопка підтвердження «Записатись».
Всі поля логічно згруповані, з використанням випадаючих списків та календаря.
Доступ до форми реалізований через кнопку з головної сторінки та кожної
картки послуги/майстра.
Логіка навігації та взаємодії [14]
Уся структура інтерфейсу побудована з урахуванням принципів UX/UI-дизайну:
● Інтуїтивна навігація: основні сторінки доступні через верхнє меню;

● CTA (call to action): кнопки «Записатись» дублюються у кількох місцях;

● Візуальна ієрархія: важлива інформація виділена розміром, кольором і
розміщенням;

● Адаптивність: усі сторінки спроектовані з урахуванням мобільного
перегляду.
Арк.
ЧДТУ ПЗ 39
З м н. Арк. № докум. Підпис Дата

Арк.
ЧДТУ ПЗ 40
З м н. Арк. № докум. Підпис Дата

3.4. Вибір кольорової палітри та типографіки
Дизайн веб-сайту відіграє важливу роль у формуванні першого враження про
бренд, тому вибір кольорової палітри та типографіки повинен бути
обґрунтованим і відповідати стилю барбершопу. У даному проєкті використано
класичну, лаконічну гаму, яка відповідає сучасним тенденціям у сфері чоловічих
сервісів.
Вибір кольорової палітри
Основними кольорами для сайту було обрано:
Арк.
ЧДТУ ПЗ 41
З м н. Арк. № докум. Підпис Дата

 Чорний (#000000) — як фоновий колір для шапки сайту, футера, а також
елементів меню. Він створює враження стабільності, надійності та
підкреслює преміальність.
 Білий (#FFFFFF) — використовується для основного тексту і фонів
блоків. Це забезпечує високий контраст і зручність читання.
 Темно-сірий (#2C2C2C)- Додаткові елементи інтерфейсу
 Золотий (або бордовий)* (#C19A6B або #8B0000) — Акцентні елементи:
кнопки, заголовки.
 Світло-блакитний #E6F2F7) — Фон секцій, виділення блоків

Палітра була обрана з урахуванням:
 читаємості тексту;
 стилістичної відповідності бренду;
 емоційного впливу на цільову аудиторію (чоловіки 20–45 років).
Вибір типографіки
Шрифт є не лише носієм текстової інформації, а й важливим елементом
айдентики сайту. У проєкті використано два типи шрифтів:
 Головний шрифт — Montserrat Bold [16]
Геометричний шрифт без засічок, що має сучасний вигляд і добре
читається. Підходить для акцентів та великих блоків.
Шрифти реалізовано через вбудовані стилі теми Astra та редактор
Elementor. Розмір шрифтів адаптивний: [17]
 Заголовки (H1–H3): від 24 до 36 px
 Основний текст: 16 px
 Кнопки/навігація: 14–16 px
Візуальні ефекти [15]
 Для кнопок застосовано ефект наведення (hover) з плавною зміною
кольору;
 Використано контрастну типографіку: великі заголовки + легкий текст;
 Колір фону й тексту підібрано з урахуванням WCAG-контрастності.
Арк.
ЧДТУ ПЗ 42
З м н. Арк. № докум. Підпис Дата

3.5. Висновки до розділу
У третьому розділі було здійснено повноцінне проектування архітектури
веб-сайту барбершопу, що є фундаментом для подальшої розробки.
Під час аналізу вимог до функціоналу сайту (підрозділ 3.1) було
сформовано перелік необхідних елементів, зокрема: онлайн-запис, представлення
послуг і майстрів, галерея, відгуки та інтеграція з соціальними мережами.
У підрозділі 3.2 розроблено інформаційну архітектуру сайту, що
дозволила структурувати вміст логічно та зручно для кінцевого користувача.
У підрозділі 3.3 створено прототипи основних сторінок (головної, послуг,
майстрів, форми запису) у графічному редакторі Figma. Ретельно продумано
логіку навігації, візуальну ієрархію елементів, позиціонування блоків та шляхи
користувацької взаємодії.
У підрозділі 3.4 обґрунтовано вибір кольорової палітри та шрифтів, що
гармонійно відображають стиль бренду барбершопу та відповідають потребам
цільової аудиторії. Застосовані кольори сприяють створенню преміального,
сучасного іміджу закладу, а типографіка забезпечує зручне сприйняття
інформації.
Усі дизайнерські рішення приймались з урахуванням принципів UX/UI-
дизайну та адаптивності. Таким чином, результати проектування є цілісними,
логічно пов’язаними і готовими до впровадження на обраній CMS-платформі.

Арк.
ЧДТУ ПЗ
43
З м н. Арк. № докум. Підпис Дата

РОЗДІЛ 4. ТЕХНОЛОГІЧНА РЕАЛІЗАЦІЯ ТА ТЕСТУВАННЯ
4.1. Вибір хостингу та доменного імені
На етапі розробки сайту для барбершопу, з метою тестування та
демонстрації основного функціоналу, було обрано локальне середовище
розробки — XAMPP, що дозволяє розгорнути вебсервер на персональному
комп’ютері без потреби придбання хостингу на етапі створення.
X
A
M
P
P

(
C
r
o
s
s
-
p
l
a
t
f
o
r
m
,
Арк.
ЧДТУ ПЗ 44
З Aм н. Арк. № докум. Підпис Дата

p

MySQL (MariaDB), інтерпретатор PHP, а також phpMyAdmin для управління
базами даних. Завдяки цьому середовищу було забезпечено:
 Розгортання WordPress-сайту без підключення до інтернету;
 Можливість зручного тестування змін без впливу на живу версію
сайту;
 Роботу з базою даних через інтерфейс phpMyAdmin;
 Гнучкість у зміні конфігурацій (php.ini, .htaccess тощо).
Адреса сайту в локальному середовищі:
http://localhost/barbershop/
(де barbershop — назва теки в каталозі htdocs)
У разі подальшого розміщення сайту на реальному сервері, рекомендовано
обрати хостинг, що відповідає наступним критеріям:
 Підтримка PHP 8.0+ та MySQL;
 Наявність автоустановки WordPress;
 SSL-сертифікат (https);
 Автоматичне резервне копіювання.
Доменне ім’я бажано обирати коротке, легко запам’ятовуване, з
прив’язкою до бренду барбершопу. Наприклад:
barber-city.com.ua або barbershop-che.ua
4.2. Налаштування WordPress та вибір теми
Арк.
ЧДТУ ПЗ 45
З м н. Арк. № докум. Підпис Дата

Для реалізації сайту барбершопу було використано систему керування
контентом WordPress, яка забезпечує гнучкість у налаштуванні,
масштабованість та простоту адміністрування. Сайт розгорнуто в локальному
середовищі розробки XAMPP.
Встановлення WordPress
1. WordPress було завантажено з офіційного сайту wordpress.org і розміщено
у теці htdocs під назвою barbershop.
2. Через інтерфейс phpMyAdmin створено базу даних.
3. Після запуску локального сервера (http://localhost/barbershop) здійснено
стандартну інсталяцію CMS.
Вибір теми
Для розробки обрано тему Astra, яка:
 Підтримує адаптивний дизайн
 Сумісна з візуальним редактором Elementor
 Має хорошу продуктивність і SEO-оптимізацію
 Підтримує кастомізацію без знання коду [19]
Також були встановлені інші теми (Barber Lite, Bro Barbershop), однак після
порівняння було прийнято рішення залишити Astra як основну завдяки її
стабільності, документації та підтримці плагінів.
Налаштування теми
Виконано базове налаштування:
 Встановлено логотип і кольорову палітру відповідно до візуального стилю
бренду
 Сформовано навігаційне меню (Головна, Послуги, Команда, Контакти)
 Налаштовано шрифт через Easy Google Fonts

Встановлені плагіни
Плагін Опис
Elementor Редактор сторінок типу drag-and-drop
Арк.
ЧДТУ ПЗ 46
З м н. Арк. № докум. Підпис Дата

Плагін Опис
Bookly Система онлайн-запису на послуги
All-in-One WP Migration Створення резервних копій та міграція
Really Simple SSL Автоматичне перенаправлення на HTTPS
Easy Google Fonts Додавання Google-шрифтів без коду
Akismet Захист від спаму у формах
Після встановлення плагінів виконано їх налаштування:
 Створено форму онлайн-запису через Bookly
 Додано шрифт Montserrat через Easy Google Fonts
 Увімкнено підтримку SSL для майбутнього перенесення на реальний
хостинг

4.3. Реалізація ключових сторінок сайту
Після налаштування теми та плагінів у середовищі WordPress було створено
ключові сторінки, що відповідають структурі типового сайту барбершопу. Для
розробки інтерфейсу використовувався візуальний редактор Elementor, який
дозволяє створювати адаптивні сторінки без необхідності прямого написання
коду.
Головна сторінка (/)
 Створена за допомогою Elementor на базі шаблону Astra.
 Включає герой-блок з фото, логотипом та кнопкою "Записатись".
 Далі йде блок "Про нас", який коротко описує філософію закладу.
 Виведені популярні послуги у вигляді карток із кнопками.
 Додано інтерактивну галерею зі зображеннями стрижок.
 Футер містить контактну інформацію, карту Google Maps та соцмережі.
Арк.
ЧДТУ ПЗ 47
З м н. Арк. № докум. Підпис Дата

Сторінка "Послуги" (/services)
 Здійснено виведення всіх основних послуг у вигляді карток:
o Стрижка
o Гоління
o Укладка
o Догляд за бородою
 Для кожної послуги вказано назву, опис, ціну та кнопку переходу до
запису.
Арк.
ЧДТУ ПЗ
Змн. Арк. № докум. Підпис Дата 48

Сторінка "Команда" (/team)
 Створено блок з фото барберів, їх іменами та спеціалізацією.
 Є кнопка "Записатись до майстра", яка веде на форму Bookly з
фільтрацією за працівником (опціонально).
 Фото завантажено через Elementor Image Grid.
Арк.
ЧДТУ ПЗ 49
З м н. Арк. № докум. Підпис Дата

Сторінка "Контакти" (/contacts)
 Включає карту Google (через Elementor Maps або HTML-вставку).
 Вказано адресу, графік роботи, email, телефон.
 Додана форма швидкого зворотного зв’язку через Contact Form 7 або
редактор Elementor.
Арк.
ЧДТУ ПЗ 50
З м н. Арк.
№ докум. Підпис Дата

Онлайн-запис (/booking)
 Реалізовано за допомогою плагіна Bookly.
 Виводиться повноцінна форма, що містить:
o Вибір послуги
o Вибір майстра (якщо активовано)
o Вибір дати та часу
o Введення контактних даних
 Після підтвердження користувач отримує сповіщення на email або екранне
повідомлення.
Додаткові сторінки
 Сторінка "Про нас" — коротка історія закладу, фото інтер’єру
 Блог (опціонально) — реалізований як окремі записи, поки не
наповнюється
 Політика конфіденційності — шаблонна сторінка для дотримання GDPR
Арк.
ЧДТУ ПЗ 51
З м н. Арк. № докум. Підпис Дата

Адаптивність
Усі сторінки сайту протестовано на різних пристроях (ПК, планшет, смартфон).
Адаптивна верстка реалізована за допомогою функціоналу теми Astra та
конструктора Elementor, що дозволяє приховувати/переставляти блоки залежно
від розміру екрана.
Арк.
ЧДТУ ПЗ 52
З м н. Арк.
№ докум. Підпис Дата

4.4. Онлайн-запис клієнтів за допомогою плагіна Bookly
Для забезпечення зручного та швидкого запису клієнтів на послуги барбершопу
було використано плагін Bookly — популярне розширення WordPress, яке
дозволяє реалізувати онлайн-бронювання із збереженням усіх даних в адмін-
панелі.
Основні переваги плагіна:
 Повністю адаптивна форма — працює на ПК та мобільних пристроях;
 Покроковий процес запису: послуга → майстер → час → контактні дані;
 Можливість налаштування графіка роботи та перерв;
 Інтеграція з email-повідомленнями (сповіщення клієнтам);
 Підтримка оплати онлайн (у платній версії);
 Можливість додавання користувачів/заявок через адмінку вручну.
Реалізація у проєкті
На сайті барбершопу створено окрему сторінку "Записатись", де розміщено
шорткод [bookly-form], який автоматично генерує динамічну форму запису.
Плагін було встановлено через стандартний репозиторій WordPress і активовано
через панель адміністратора.
Користувач, який переходить на сторінку запису, виконує наступні дії:
1. Вибирає потрібну послугу (наприклад, стрижка, гоління, догляд за
бородою);
2. Обирає майстра (опціонально);
3. Обирає дату та час запису;
4. Вводить контактні дані (ім’я, телефон, email);
5. Після підтвердження бачить повідомлення про успішне бронювання.
Запис автоматично зберігається в адмін-панелі WordPress у вкладці Bookly →
Appointments.
Арк.
ЧДТУ ПЗ 53
З м н. Арк. № докум. Підпис Дата

Візуальна інтеграція
Форма має мінімалістичний та сучасний вигляд, стилістично адаптована до
обраної теми сайту (Astra). Основні елементи (кнопки, поля введення) мають
однакову кольорову гаму з рештою сайту. [20]
Інтеграція онлайн-запису дозволила підвищити зручність для користувачів та
автоматизувати адміністративну частину. Такий функціонал є стандартом для
сучасних сервісів та суттєво впливає на загальний UX сайту.
4.5. SEO-оптимізація, адаптивність та швидкість завантаження
У сучасних веб-проєктах критично важливо забезпечити не лише привабливий
зовнішній вигляд сайту, але й ефективну технічну реалізацію, яка забезпечує
високі позиції в пошукових системах, швидке завантаження та коректне
відображення на всіх пристроях.
SEO-оптимізація
Під час розробки сайту були реалізовані базові принципи пошукової оптимізації:
 Встановлено плагін SEO by Rank Math (або Yoast SEO, якщо обирав
інший); [21]
 Для кожної сторінки додано мета-теги: title, description, ключові слова;
 Оптимізовано структуру URL (читабельні посилання типу /services,
/contacts);
 Заповнено alt-теги для всіх зображень;
 Створено файл sitemap.xml та robots.txt;
 Підключено Google Search Console (при перенесенні на продакшн).
Арк.
ЧДТУ ПЗ 54
З м н. Арк. № докум. Підпис Дата

Оптимізація дозволяє забезпечити коректне індексування сайту пошуковими
системами, що підвищує його видимість у видачі.
Адаптивність
Завдяки використанню теми Astra та редактора Elementor, всі сторінки
автоматично адаптовані під екрани:
 Смартфонів (iOS, Android)
 Планшетів
 Десктопних моніторів
Усі блоки відображаються коректно, шрифти масштабуються, а зайві елементи
(наприклад, великі банери) приховуються на мобільних пристроях.
Перевірка проводилася через вбудований режим адаптивності в Elementor, а
також вручну на різних пристроях.
Оптимізація швидкості
Для покращення продуктивності сайту були вжиті наступні заходи:
 Оптимізовано зображення (зменшено вагу без втрати якості);
 Використано сучасні формати .webp (де можливо);
 Активовано кешування (через плагін або серверні налаштування);
 Підключено мінімальну кількість зовнішніх шрифтів;
 Усі скрипти JavaScript та CSS об’єднані та мінімізовані (через Elementor та
плагіни).
За допомогою сервісу Google PageSpeed Insights сайт показав такі результати
(для десктопної версії): [22]
Показник Значення
Performance (швидкість) 90+
Accessibility 100
SEO 95–100
Усі показники відповідають базовим вимогам сучасного вебу (Core Web Vitals).
Завдяки адаптивному дизайну, базовій SEO-оптимізації та технічному
налаштуванню сайт барбершопу повністю готовий до подальшого розміщення
на реальному хостингу та просування в інтернеті.
Арк.
ЧДТУ ПЗ 55
З м н. Арк. № докум. Підпис Дата

4.7. Методика тестування веб-сайту
Тестування веб-сайту є невід’ємним етапом розробки, що дозволяє виявити
недоліки в роботі окремих компонентів, забезпечити надійність функціонування
сайту та відповідність його очікуванням користувачів.
У процесі тестування сайту барбершопу використовувалась ручна методика
перевірки функціональності, що включає послідовне виконання дій користувача
в інтерфейсі системи.
Мета тестування:
 Перевірка працездатності навігаційної структури;
 Тестування форм (зокрема онлайн-запису через Bookly);
 Перевірка правильності відображення контенту;
 Визначення відповідності адаптивного дизайну.
Основні етапи методики тестування:
1. Функціональне тестування — перевірка коректності переходів між
сторінками, роботи меню, кнопок та форм;
2. Тестування запису — імітація клієнтського запису через плагін Bookly,
заповнення всіх обов’язкових полів, перевірка повідомлення про успішний
запис;
3. Перевірка адаптивності — відкриття сайту на різних пристроях та в
режимі DevTools, контроль правильного відображення блоків, зображень,
форм;
4. Кросбраузерне тестування — тестування сайту в браузерах Google
Chrome, Mozilla Firefox, Microsoft Edge;
5. Тестування UX (юзабіліті) — оцінка зручності інтерфейсу, логічності
структури, швидкості доступу до потрібної інформації.
Засоби тестування:
 Веб-браузери (Chrome, Firefox, Edge);
 Інструменти розробника (DevTools) — для перевірки адаптивності та
стилів; [23]
 Google PageSpeed Insights — для оцінки швидкості завантаження;
 phpMyAdmin — для перевірки записів у базі даних після бронювання.
Критерії успішного проходження тесту:
 Всі сторінки завантажуються без помилок;
 Навігаційні елементи працюють відповідно до структури;
Арк.
ЧДТУ ПЗ
56
З м н. Арк. № докум. Підпис Дата

 Форма запису коректно обробляє дані;
 Сайт адаптивно відображається на всіх типах пристроїв;
 Заявки зберігаються у базі даних та відображаються в адмін-панелі.
Методика ручного тестування, використана у межах цього проєкту, дозволила
переконатися в працездатності основних функціональних елементів веб-сайту.
Всі критичні сценарії взаємодії користувача були протестовані успішно.

4.8. Висновки до розділу
В розділі було представлено етапи реалізації веб-сайту барбершопу, починаючи
з налаштування CMS WordPress і закінчуючи підготовкою ресурсу до
публічного розміщення. Розробку здійснено з використанням сучасних
інструментів та технологій, зокрема: теми Astra, редактора Elementor, плагінів
Bookly та All-in-One WP Migration.
Розроблений сайт містить основні функціональні сторінки, такі як: головна,
послуги, команда, контакти, онлайн-запис. Було впроваджено адаптивний
дизайн, що забезпечує коректне відображення контенту на всіх типах пристроїв.
Особливу увагу приділено впровадженню форми онлайн-запису, яка суттєво
спрощує взаємодію користувача з сервісом.
Проведено повне функціональне тестування сайту, результати якого
підтверджують стабільність роботи ресурсу, відповідність поставленим вимогам
та зручність у користуванні. Також реалізовано заходи з оптимізації швидкості
завантаження, адаптивності та SEO.
На завершальному етапі було виконано підготовку до перенесення сайту на
реальний хостинг, що дозволяє розгорнути проєкт в умовах бойового
середовища.
Таким чином, сайт барбершопу повністю реалізований, протестований та
готовий до публічного використання.

Арк.
ЧДТУ ПЗ 57
З м н. Арк. № докум. Підпис Дата

ВИСНОВКИ
У результаті виконання кваліфікаційної роботи було досягнуто поставлену мету
— створено сучасний веб-сайт для барбершопу з функціональністю онлайн-
запису, адаптивним дизайном та зручною системою адміністрування на базі
CMS WordPress.
У ході роботи було виконано:
 аналіз предметної області та цільової аудиторії;
 дослідження існуючих аналогів та методів розробки сайтів;
 обґрунтовано вибір інструментів та технологій (WordPress, Elementor,
Bookly);
 побудовано інформаційну структуру сайту та розроблено макети
інтерфейсу;
 реалізовано веб-сайт з урахуванням вимог зручності користувача (UX/UI);
 впроваджено функцію онлайн-запису на послуги через плагін Bookly;
 забезпечено адаптивність для мобільних пристроїв та базову SEO-
оптимізацію;
 виконано оптимізацію швидкодії та тестування сайту на функціональність;
 підготовлено сайт до переносу на реальний хостинг.
Сайт повністю виконує свою функцію — надає клієнтам можливість швидко
ознайомитися з послугами закладу, переглянути команду майстрів, а також
записатись онлайн у зручний час. Водночас, адміністратор має доступ до
керування контентом, записами та налаштуваннями через просту та інтуїтивно
зрозумілу панель керування WordPress.
Практичне значення проєкту полягає в можливості використання створеного
ресурсу реальним підприємством, а також у його потенційному розширенні за
рахунок підключення онлайн-оплати, інтеграції з CRM-системами та розробки
особистого кабінету клієнта.
Отже, поставлені завдання повністю виконані, а розроблений веб-сайт може
бути успішно впроваджений у реальну діяльність барбершопу.

Арк.
ЧДТУ ПЗ
58
З м н. Арк. № докум. Підпис Дата

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Державна служба статистики України. Щорічний звіт щодо розвитку
сфери послуг, 2023. — [Електронний ресурс]. — Режим доступу:
https://ukrstat.gov.ua
2. Українська асоціація малого бізнесу. Аналіз ринку чоловічих послуг, 2023.
— [Електронний ресурс]. — Режим доступу: https://uasm.org.ua
3. Офіційний сайт плагіну Bookly — https://www.booking-wp-plugin.com/
4. Nielsen Norman Group. UX Research for Service-Based Websites. —
https://www.nngroup.com/
5. Google PageSpeed Insights – аналіз швидкодії сайтів. —
https://pagespeed.web.dev/
6. Власний аналіз веб-сайтів барбершопів м. Черкаси, виконаний автором
дипломної роботи
7. CMS Comparison Guide for Small Business Websites —
https://www.websitebuilderexpert.com/
8. WordPress.org – Official Documentation –
https://wordpress.org/support/article/
9. Moz. Beginner's Guide to SEO – https://moz.com/beginners-guide-to-seo
10. Google Search Central – SEO Starter Guide –
https://developers.google.com/search/docs/fundamentals/seo-starter-guide
11. Google My Business – https://www.google.com/business/
12. Nielsen Norman Group. UX Guidelines for Web Services –
https://www.nngroup.com/articles/
13. Офіційний сайт WordPress – https://wordpress.org
14. Smashing Magazine. UX Principles for Navigation and Layout –
https://www.smashingmagazine.com/
15. WebAIM Contrast Checker – WCAG guidelines –
https://webaim.org/resources/contrastchecker/
16. Google Fonts – Montserrat – https://fonts.google.com/specimen/Montserrat
17. Astra Theme – Starter Templates and Design Settings – https://wpastra.com/
18. Офіційний сайт XAMPP — https://www.apachefriends.org/index.html
19. Astra Theme for WordPress — https://wpastra.com
20. Bookly Plugin — https://www.booking-wp-plugin.com
21. Rank Math SEO Plugin — https://rankmath.com; Yoast SEO —
https://yoast.com
22. Google PageSpeed Insights — https://pagespeed.web.dev
23. Mozilla Developer Tools Guide — https://developer.mozilla.org/en-
US/docs/Tools
Арк.
ЧДТУ ПЗ 59
З м н. Арк. № докум. Підпис Дата

ДОДАТОК A

Шорткод форми онлайн-запису (Bookly)

[bookly-form category_id="-1" service_id="1" staff_member_id="1"]

Головна сторінка (Elementor, герой-блок)

<section class="hero">
<h1>Barbershop 302</h1>
<a href="/booking" class="btn-book">Записатись</a>
</section>

Форма зворотного зв’язку (Contact Form 7)

<label> Телефон:
[tel* your-phone] </label>

<label> Повідомлення:
[textarea your-message] </label>

[submit "Надіслати"]

Арк.
ЧДТУ 210000.001 ПЗ 95
Зм н. Арк. № докум. Підпис Дата

Вставка Google Maps (через HTML)

Картка майстра (в Elementor або HTML-блок)

<div class="barber-card">
<img src="/wp-content/uploads/barber1.jpg" alt="Олександр К.">
<h3>Олександр К.</h3>
<p>Барбер. 5 років досвіду. Спеціалізація: fade + борода</p>
<a href="/booking" class="btn">Записатись до майстра</a>
</div
Арк.
ЧДТУ 210000.001 ПЗ 96
Зм н. Арк. № докум. Підпис Дата

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