Веборієнтовна інформаційна система притулку для тварин з  інтерактивними картками об’єктів

Мантула, Андрій Володимирович

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

Title:	Веборієнтовна інформаційна система притулку для тварин з інтерактивними картками об’єктів
Authors:	Підкуйко, Олександр Ігорович Мантула, Андрій Володимирович
Keywords:	web-сайт;Vercel;притулок для тварин;PawHaven Animal Shelter;каталог тварин;пошук;фільтрація;React;Next.js;Tailwind CSS;адаптивний дизайн
Issue Date:	10-Jun-2026
Abstract:	У кваліфікаційній роботі бакалавра розроблено web-сайт PawHaven Animal Shelter для інформаційної підтримки діяльності притулку для тварин. Розроблений ресурс призначений для перегляду доступних для усиновлення тварин, пошуку та фільтрації карток, ознайомлення з місією притулку, процесом усиновлення та контактною інформацією. Як основні інструменти розробки використано сучасні web-технології, зокрема React, Next.js, Tailwind CSS та платформу Vercel для розгортання сайту. Обсяг пояснювальної записки кваліфікаційної роботи бакалавра складає 74 сторінок, у тому числі вступ, 3 розділи, висновки, додатки та список використаних джерел. Робота містить 14 рисунків, 0 таблиць, 30 інформаційних джерел та 1 додаток. Перший розділ кваліфікаційної роботи присвячений аналізу предметної області дослідження. Визначено актуальність і доцільність створення web-сайту притулку для тварин, розглянуто особливості соціально орієнтованих web-ресурсів та їх роль у популяризації усиновлення тварин. Здійснено аналітичний огляд існуючих web-ресурсів для пошуку та усиновлення тварин, зокрема Petfinder, Adopt a Pet, Happy Paw та UAnimals, а також визначено їхні переваги, недоліки та функціональні особливості. Другий розділ присвячений проєктуванню web-сайту PawHaven Animal Shelter. У ньому визначено призначення ресурсу, вимоги до дизайну, структури сторінок, навігації, наповнення та прототипу. Описано основні сторінки сайту: Home, Animals, About і Contact. Особливу увагу приділено каталогу тварин, карткам, пошуку, фільтрації, формі повідомлення та загальній логіці взаємодії користувача з web-ресурсом. У третьому розділі здійснено огляд інструментальних засобів розробки web-сайту, визначено їхні переваги та обґрунтовано доцільність використання React, Next.js, Tailwind CSS, JavaScript, TypeScript, Visual Studio Code, Chrome DevTools та Vercel. Описано процес програмної реалізації основних сторінок сайту, організацію даних, логіку взаємодії сторінок і результати тестування. За результатами перевірки встановлено, що розроблений сайт має зрозумілу структуру, адаптивний дизайн, коректну навігацію, працюючий каталог тварин, пошук, фільтрацію та контактну форму.
URI:	https://er.chdtu.edu.ua/handle/ChSTU/9942
Appears in Collections:	126 Інформаційні системи та технології (Web-технології, web-дизайн)

Files in This Item:

File	Description	Size	Format
РЕП_БАК_Мантула _WEB-2211.pdf Restricted Access		2.54 MB	Adobe PDF	View/Open Request a copy

Show full item record

Extracted text

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ

ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи бакалавра

на тему: Веборієнтовна інформаційна система притулку для тварин з
інтерактивними картками об’єктів

Виконав: здобувач першого
(бакалаврського) рівня вищої освіти
4 курсу, групи WEB-2211
Спеціальності 126 «Інформаційні
системи та технології»
О П «Web-технології, Web-дизайн»
Мантула Андрій Володимирович

Керівник: Підкуйко Олександр
Ігорович, асистент кафедри ІТП,
д октор філософії

Рецензент: Алесін О В

Черкаси – 2026 року

ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ
УНІВЕРСИТЕТ

Факультет інформаційних технологій і систем
(повна назва)
Кафедра інформаційних технологій проектування
(повна назва)
Освітньо-кваліфікаційний рівень бакалавр
(назва)
Спеціальність 126 «Інформаційні системи та технології»
(шифр і назва)

ЗАТВЕРДЖУЮ
Завідувач кафедри ІТП
Тетяна ПРОКОПЕНКО
« » 20 року

З А В Д А Н Н Я
НА КВАЛІФІКАЦІЙНУ РОБОТУ БАКАЛАВРА

Мантули Андрія Володимировича
(прізвище, ім’я, по батькові)
1. Тема роботи Веборієнтовна інформаційна система притулку для тварин з
інтерактивними картками об’єктів

Керівник роботи Підкуйко Олександр Ігорович, асистент кафедри ІТП, доктор
філософії
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
Затверджено наказом Черкаського державного технологічного університету від
«12» Березня 2026 року № 56/03-03

2. Строк подання здобувачем роботи _______

3. Вихідні дані до роботи Методичні рекомендації до кваліфікаційної роботи
бакалавра зі спеціальності 126 «Інформаційні системи та технології», ОП «Web-
технології, Web-дизайн»; матеріали з web-розробки, UX/UI-дизайну, адаптивної
верстки й тестування web-застосунків; офіційна документація React, Next.js,
Tailwind CSS, Vercel, JavaScript і TypeScript; інформаційні матеріали про
діяльність притулків для тварин, процес усиновлення та соціально орієнтовані
web-сервіси; аналіз аналогів Petfinder, Adopt a Pet, Happy Paw та UAnimals.

4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно
розробити)
4.1. Постановка задачі, огляд предметної області web-сайтів притулків для
тварин.
4.2. Аналіз аналогів PawHaven Animal Shelter.
4.3. Обґрунтування технічного завдання.
4.4. Проєктування структури, дизайну, навігації та функціоналу сайту.
4.5. Вибір засобів розробки та платформи розгортання.
4.6. Реалізація основних сторінок, карток тварин, фільтрів і контактної форми.
4.7. Організація даних, пошуку, фільтрації, пагінації та зворотного зв’язку.
4.8. Тестування адаптивності, працездатності, навігації, каталогу та форм.
Висновок.
Додаток А.

5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень,
плакатів)
Навігаційна структура та схема сторінок web-сайту PawHaven Animal Shelter;
схема організації даних і взаємодії сторінок; прототипи та скріншоти основних
сторінок Home, Animals, About, Contact; таблиця порівняння з аналогами; таблиці
й ілюстрації результатів тестування адаптивності, працездатності, навігації,
пошуку, фільтрації та контактної форми.
6. Консультанти розділів роботи

Розділ Прізвище, ініціали та Підпис, дата
посада
консультанта
завдання видав завдання прийняв

7. Дата видачі завдання 18 Лютого 2026 року

КАЛЕНДАРНИЙ ПЛАН

№
Назва етапів кваліфікаційної роботи Строк виконання
з/
бакалавра етапів роботи Примітка
п
1 Видача завдання на кваліфікаційну роботу бакалавра 18.02.2026 Виконано
Аналіз літературних джерел, об’єкта та предмета
2 22.02.2026 Виконано
дослідження
Написання теоретичного розділу кваліфікаційної роботи
3 10.03.2026 Виконано
бакалавра
Написання аналітичного розділу, аналіз існуючих
4 03.04.2026 Виконано
платформ онлайн-навчання програмуванню
5 Проєктування структури та функціоналу web-сайту 18.04.2026 Виконано
6 Практична реалізація web-сайту 02.05.2026 Виконано
7 Тестування web-сайту та підготовка висновків 07.05.2026 Виконано
Передзахист кваліфікаційної роботи бакалавра на
8 22.04.2026 Виконано
засіданні кафедри
9 Подання роботи завідувачу кафедри 27.05.2026 Виконано
10 Захист кваліфікаційної роботи бакалавра 10.06.2026 Виконано

Здобувач вищої освіти

(підпис) (прізвище та ініціали)
Керівник роботи

(підпис) (прізвище та ініціали)

АНОТАЦІЯ

У кваліфікаційній роботі бакалавра розроблено web-сайт PawHaven
Animal Shelter для інформаційної підтримки діяльності притулку для
тварин. Розроблений ресурс призначений для перегляду доступних для
усиновлення тварин, пошуку та фільтрації карток, ознайомлення з місією
притулку, процесом усиновлення та контактною інформацією. Як основні
інструменти розробки використано сучасні web-технології, зокрема React,
Next.js, Tailwind CSS та платформу Vercel для розгортання сайту.
Обсяг пояснювальної записки кваліфікаційної роботи бакалавра
складає 74 сторінок, у тому числі вступ, 3 розділи, висновки, додатки та
список використаних джерел. Робота містить 14 рисунків, 0 таблиць, 30
інформаційних джерел та 1 додаток.
Перший розділ кваліфікаційної роботи присвячений аналізу
предметної області дослідження. Визначено актуальність і доцільність
створення web-сайту притулку для тварин, розглянуто особливості
соціально орієнтованих web-ресурсів та їх роль у популяризації
усиновлення тварин. Здійснено аналітичний огляд існуючих web-ресурсів
для пошуку та усиновлення тварин, зокрема Petfinder, Adopt a Pet, Happy
Paw та UAnimals, а також визначено їхні переваги, недоліки та
функціональні особливості.
Другий розділ присвячений проєктуванню web-сайту PawHaven
Animal Shelter. У ньому визначено призначення ресурсу, вимоги до дизайну,
структури сторінок, навігації, наповнення та прототипу. Описано основні
сторінки сайту: Home, Animals, About і Contact. Особливу увагу приділено
каталогу тварин, карткам, пошуку, фільтрації, формі повідомлення та
загальній логіці взаємодії користувача з web-ресурсом.
У третьому розділі здійснено огляд інструментальних засобів
розробки web-сайту, визначено їхні переваги та обґрунтовано доцільність
використання React, Next.js, Tailwind CSS, JavaScript, TypeScript, Visual
Studio Code, Chrome DevTools та Vercel. Описано процес програмної
реалізації основних сторінок сайту, організацію даних, логіку взаємодії
сторінок і результати тестування. За результатами перевірки встановлено,
що розроблений сайт має зрозумілу структуру, адаптивний дизайн,
коректну навігацію, працюючий каталог тварин, пошук, фільтрацію та
контактну форму.
Ключові слова: web-сайт, притулок для тварин, PawHaven Animal
Shelter, усиновлення тварин, каталог тварин, пошук, фільтрація,
контактна форма, React, Next.js, Tailwind CSS, Vercel, адаптивний дизайн.

SUMMARY

The bachelor’s qualification work presents the development of the
PawHaven Animal Shelter website intended to support the activities of an animal
shelter. The developed resource is designed for viewing animals available for
adoption, searching and filtering animal cards, learning about the shelter’s
mission, the adoption process, and contact information. Modern web
technologies, including React, Next.js, Tailwind CSS, and the Vercel deployment
platform, were used as the main development tools.
The explanatory note of the bachelor’s qualification work consists of 74 pages,
including an introduction, 3 chapters, conclusions, appendices, and a list of
references. The work contains 14 figures, 0 tables, 30 information sources, and 1
appendice.
The first chapter is devoted to the analysis of the subject area. The relevance
and feasibility of creating a website for an animal shelter are determined. The
features of socially oriented web resources and their role in promoting animal
adoption are considered. An analytical review of existing web resources for
animal search and adoption, including Petfinder, Adopt a Pet, Happy Paw, and
UAnimals, is carried out, and their advantages, disadvantages, and functional
features are identified.
The second chapter is devoted to the design of the PawHaven Animal
Shelter website. It defines the purpose of the resource, design requirements, page
structure, navigation, content, and prototype requirements. The main pages of the
website are described: Home, Animals, About, and Contact. Special attention is
paid to the animal catalog, cards, search, filtering, message form, and the general
logic of user interaction with the web resource.
The third chapter provides an overview of the website development tools,
identifies their advantages, and justifies the use of React, Next.js, Tailwind CSS,
JavaScript, TypeScript, Visual Studio Code, Chrome DevTools, and Vercel. The
process of implementing the main website pages, data organization, page
interaction logic, and testing results are described. The testing confirmed that the
developed website has a clear structure, responsive design, correct navigation, a
functional animal catalog, search, filtering, and contact form.
Keywords: website, animal shelter, PawHaven Animal Shelter, animal
adoption, animal catalog, search, filtering, contact form, React, Next.js, Tailwind
CSS, Vercel, responsive design.

ЗМІСТ

ВСТУП ......................................................................................................................... 7
РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ РІШЕНЬ,
АНАЛОГІВ ............................................................................................................... 12
1.1 Опис предметної області ......................................................................... 12
1.2 Доцільність розробки web-сайту PawHaven Animal Shelter ................... 14
1.3. Чинники, які впливають на розробку web-сайту притулку для тварин 16
1.4. Аналітичний огляд існуючих web-ресурсів для усиновлення тварин .. 18
Висновки до розділу 1 ...................................................................................... 25
РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ ........................ 27
2.1. Призначення web-сайту PawHaven Animal Shelter ................................. 27
2.2. Вимоги до дизайну web-сайту PawHaven Animal Shelter ...................... 28
2.3. Структура сторінок web-сайту PawHaven Animal Shelter ...................... 30
2.4. Навігація web-сайту PawHaven Animal Shelter ....................................... 33
2.5. Наповнення сторінок web-сайту PawHaven Animal Shelter ................... 34
2.7. Вимоги до прототипу web-сайту PawHaven Animal Shelter .................. 36
2.8. Техніко-економічне обґрунтування доцільності розробки web-сайту
PawHaven Animal Shelter .................................................................................. 38
Висновки до розділу 2 ...................................................................................... 41
РОЗДІЛ 3. РОЗРОБКА WEB-САЙТУ ................................................................. 44
3.1. Обґрунтування вибору інструментальних засобів розробки ................. 44
3.2. Опис програмної реалізації web-сайту PawHaven Animal Shelter ......... 47
3.3. Організація даних і логіка роботи каталогу тварин ............................... 51
3.4. Логіка сторінкових маршрутів і взаємодії користувача із сайтом ........ 53
3.5. Тестування web-сайту PawHaven Animal Shelter .................................... 56
3.6. Порівняння розробленого web-сайту з аналогами .................................. 59
Висновки до розділу 3 ...................................................................................... 60
ВИСНОВКИ ............................................................................................................. 62
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ............................................................ 66
ДОДАТОК А ............................................................................................................. 69

482 ЧДТУ 262214.014 ПЗ
Змн. Арк. № докум. Підпис Дата
Розроб. Мантула А. В... Літ. Арк. Аркушів
Перевір. Підкуйко О. І. Веборієнтовна інформаційна 74
система притулку для тварин з
Рецензент Алесін О В
інтерактивними картками ФІТІС,
Н. контр. Підкуйко О. І.
об’єктів Пояснювальна записка кафедра ІТП, WEB-2211
Затверд. Прокопенко Т.О.

ВСТУП

У сучасних умовах web-технології відіграють важливу роль у розвитку
соціально орієнтованих сервісів, оскільки забезпечують швидкий доступ
користувачів до інформації, спрощують комунікацію між організаціями та
громадськістю, а також створюють зручні інструменти для взаємодії з
цільовою аудиторією. Особливо актуальним є використання web-ресурсів у
сфері діяльності притулків для тварин, де важливими завданнями є
інформування користувачів про доступних для усиновлення тварин,
популяризація відповідального ставлення до домашніх улюбленців,
організація зв’язку з адміністрацією та залучення людей до волонтерської
або благодійної допомоги.
Актуальність теми кваліфікаційної роботи зумовлена потребою у
створенні зручних, доступних та функціональних web-сайтів для притулків,
які допомагають користувачам швидко знаходити інформацію про тварин,
ознайомлюватися з умовами усиновлення, переглядати характеристики
тварин і звертатися до організації без необхідності відвідувати притулок
особисто. За даними ASPCA, у 2024 році в США до нових домівок було
прилаштовано близько 4,2 млн тварин із притулків [1]. Це свідчить про
значну роль систем усиновлення тварин та необхідність розвитку цифрових
інструментів, які можуть спростити пошук майбутнього домашнього
улюбленця й покращити взаємодію між притулками та потенційними
власниками.
Цифрові рішення у сфері допомоги тваринам мають не лише
інформаційне, а й соціальне значення. Сучасний користувач очікує, що сайт
притулку буде не просто візиткою організації, а повноцінним web-ресурсом
із каталогом тварин, пошуком, фільтрами, контактною формою, описом
місії притулку та зрозумілим алгоритмом усиновлення. Дослідження,
присвячені комунікації притулків із громадськістю, зазначають, що
організації часто використовують власні web-сайти та онлайн-бази даних
Арк.
482 ЧДТУ 262214.014 ПЗ
7
Змн. Арк. № Документа Підпис Дата

для представлення тварин, які шукають дім [2]. Отже, якісний web-ресурс
може підвищити доступність інформації, зробити процес вибору тварини
більш прозорим і сприяти збільшенню кількості успішних усиновлень.
На сьогодні існує багато сайтів притулків, платформ для пошуку тварин та
інформаційних ресурсів, присвячених догляду за домашніми улюбленцями.
Проте частина таких ресурсів має перевантажений інтерфейс, недостатньо
зручну навігацію, обмежені можливості фільтрації або не надає
користувачеві повної інформації про тварину, її вік, породу, характер,
статус і особливості догляду. Також не всі ресурси мають логічно
побудовану контактну сторінку, зрозумілий опис процесу усиновлення та
адаптивний дизайн для перегляду зі смартфонів. Це зумовлює доцільність
створення власного web-сайту PawHaven Animal Shelter, який поєднує
інформаційні, навігаційні та комунікаційні можливості в межах єдиної
системи.
Розроблюваний web-сайт PawHaven Animal Shelter призначений для
інформаційної підтримки діяльності притулку для тварин та забезпечення
зручної взаємодії користувачів із його адміністрацією. Сайт містить
головну сторінку з коротким представленням притулку, статистикою,
картками тварин і описом процесу усиновлення; сторінку Animals із
каталогом тварин, пошуком, фільтрами за типом і розміром, картками
тварин та пагінацією; сторінку About з описом місії, цінностей і команди
притулку; сторінку Contact із контактною інформацією, формою
зворотного зв’язку та блоком мапи. Така структура дозволяє користувачам
швидко отримати потрібну інформацію, переглянути доступних тварин і
звернутися до притулку.
Для реалізації web-сайту доцільним є використання сучасних засобів
frontend-розробки. Зокрема, бібліотека React дає змогу створювати
інтерфейси з окремих компонентів, що спрощує розробку повторюваних
елементів, таких як навігаційне меню, картки тварин, форми, блоки
статистики та секції сторінок [3]. Компонентний підхід є зручним для
Арк.
482 ЧДТУ 262214.014 ПЗ
8
Змн. Арк. № Документа Підпис Дата

побудови web-ресурсів із кількома сторінками, оскільки забезпечує
структурованість коду, гнучкість розширення функціоналу та можливість
подальшої підтримки проєкту. Для розміщення сайту використано хмарну
платформу Vercel, яка надає інструменти для розгортання, масштабування
та підтримки сучасних web-додатків [4].
Метою кваліфікаційної роботи є розробка web-сайту PawHaven Animal
Shelter, призначеного для представлення діяльності притулку для тварин,
перегляду доступних для усиновлення тварин, пошуку та фільтрації карток
тварин, ознайомлення з процесом усиновлення, отримання контактної
інформації та надсилання повідомлень адміністрації з використанням
сучасних web-технологій.
Для досягнення поставленої мети необхідно вирішити такі задачі:
– проаналізувати предметну область web-сайтів притулків для тварин
та визначити особливості цифрової підтримки процесу усиновлення;
– дослідити існуючі аналоги сайтів притулків і платформ для пошуку
тварин, визначити їхні переваги, недоліки та можливості
використання окремих рішень у власній розробці;
– сформувати функціональні та нефункціональні вимоги до web-
сайту PawHaven Animal Shelter;
– спроєктувати структуру web-сайту, логіку навігації, основні
сторінки, користувацькі сценарії та елементи інтерфейсу;
– обґрунтувати вибір інструментальних засобів і технологій розробки
web-сайту;
– реалізувати головну сторінку, сторінку каталогу тварин, сторінку
про притулок та сторінку контактів;
– реалізувати функціональні можливості пошуку, фільтрації,
перегляду карток тварин, пагінації та надсилання повідомлення через
контактну форму;
Арк.
482 ЧДТУ 262214.014 ПЗ
9
Змн. Арк. № Документа Підпис Дата

– виконати тестування працездатності, адаптивності, зручності
використання, коректності навігації та відображення сторінок web-
сайту;
– провести порівняння розробленого web-сайту з існуючими
аналогами та визначити його практичні переваги.
Об’єкт дослідження – процес створення web-орієнтованих інформаційних
систем для соціальних організацій, зокрема притулків для тварин.
Предмет дослідження – методи, засоби та технології проєктування і
розробки web-сайту для представлення тварин, організації пошуку,
фільтрації, навігації, комунікації з користувачами та інформаційної
підтримки процесу усиновлення.
Методи дослідження. У процесі виконання кваліфікаційної роботи
використано методи аналізу та узагальнення інформації для дослідження
предметної області; методи порівняльного аналізу для вивчення існуючих
web-ресурсів притулків і сервісів усиновлення тварин; методи
структурного та функціонального проєктування для формування
архітектури сайту; методи моделювання користувацьких сценаріїв для
опису взаємодії користувача з web-ресурсом; методи web-програмування
для реалізації клієнтської частини сайту; методи UI/UX-проєктування для
створення зручного та візуально зрозумілого інтерфейсу; методи
тестування програмного забезпечення для перевірки працездатності,
адаптивності, коректності відображення та зручності використання
розробленого сайту.
Практичне значення одержаних результатів полягає у створенні
функціонального web-сайту PawHaven Animal Shelter, який може бути
використаний для ознайомлення користувачів із діяльністю притулку,
перегляду доступних тварин, пошуку майбутнього домашнього улюбленця,
отримання контактної інформації та надсилання повідомлень адміністрації.
Розроблений ресурс забезпечує централізоване подання інформації про
притулок і тварин, покращує зручність взаємодії користувачів із
Арк.
482 ЧДТУ 262214.014 ПЗ
10
Змн. Арк. № Документа Підпис Дата

організацією та може бути надалі розширений шляхом додавання
особистого кабінету користувача, онлайн-заявки на усиновлення, системи
бронювання зустрічі, адміністративної панелі, інтеграції з базою даних та
модуля благодійних внесків.
Розроблена система має практичну цінність завдяки поєднанню
інформаційного контенту, каталогу тварин, пошукових інструментів,
контактної форми та адаптивного інтерфейсу. Використання сучасного
підходу до побудови web-інтерфейсу дозволяє забезпечити логічну
структуру сторінок, зручність сприйняття інформації та можливість
подальшого масштабування. Завдяки адаптивному дизайну сайт може
використовуватися з різних пристроїв, що є важливим для користувачів, які
переглядають інформацію про тварин зі смартфонів або планшетів.
Структура роботи. Кваліфікаційна робота складається зі вступу, трьох
розділів, висновків, списку використаних джерел та додатків. У першому
розділі розглянуто предметну область web-сайтів притулків для тварин,
проаналізовано сучасні аналоги, визначено їхні переваги та недоліки, а
також сформульовано постановку задачі. У другому розділі обґрунтовано
технічне завдання, визначено функціональні та нефункціональні вимоги до
web-сайту, описано структуру сторінок, користувацькі сценарії, вимоги до
дизайну, навігації, контенту та подальшого адміністрування. У третьому
розділі описано вибір засобів реалізації, процес розробки web-сайту
PawHaven Animal Shelter, реалізацію основних сторінок і функціональних
елементів, тестування системи та порівняння отриманого результату з
існуючими аналогами.

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

РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ РІШЕНЬ,
АНАЛОГІВ

1.1 Опис предметної області

Web-сайти притулків для тварин є важливою складовою сучасного
цифрового середовища, оскільки забезпечують швидкий доступ користувачів
до інформації про тварин, які потребують нового дому, умови усиновлення,
діяльність організації, контактні дані та можливості допомоги. Основне
призначення таких ресурсів полягає у створенні зручного інформаційного
простору, де користувач може переглянути доступних тварин, ознайомитися з
їхніми характеристиками, дізнатися про процес усиновлення та за потреби
зв’язатися з адміністрацією притулку.
У сучасних умовах діяльність соціальних і благодійних організацій
значною мірою залежить від цифрових інструментів. Користувачі дедалі
частіше шукають інформацію про тварин через web-сайти, соціальні мережі,
онлайн-каталоги та спеціалізовані платформи з усиновлення. Це пояснюється
зручністю доступу до інформації, можливістю швидкого перегляду карток
тварин, порівняння параметрів, перегляду фотографій і отримання контактної
інформації без необхідності відвідувати притулок особисто. Відповідно, web-
сайт притулку повинен не лише містити загальну інформацію про організацію,
а й забезпечувати зрозумілу навігацію, адаптивний дизайн, актуальність даних
і можливість взаємодії користувача із системою.
Особливе значення такі web-ресурси мають для підвищення
ефективності процесу усиновлення тварин. За даними Shelter Animals Count, у
2024 році в США кількість усиновлень собак і котів із притулків становила
понад 4,19 млн випадків [5]. Це свідчить про значну роль притулків і сервісів
пошуку тварин у суспільстві. Водночас успішність такого процесу залежить не
лише від роботи самого притулку, а й від того, наскільки зручно потенційний
Арк.
482 ЧДТУ 262214.014 ПЗ
12
Змн. Арк. № Документа Підпис Дата

власник може знайти потрібну інформацію, переглянути доступних тварин і
зробити перший крок до усиновлення.
Web-сайти притулків можуть мати різне функціональне призначення.
Частина ресурсів виконує роль інформаційної сторінки організації, де подано
історію притулку, місію, контакти та загальні відомості про допомогу
тваринам. Інші ресурси мають розширений каталог тварин із пошуком,
фільтрами, картками, статусами, описами, фотографіями та можливістю
подати заявку на усиновлення. Також існують великі платформи, які
об’єднують інформацію з багатьох притулків і рятувальних організацій,
дозволяючи користувачам шукати тварин за місцем розташування, породою,
віком, розміром або іншими параметрами [7], [8].
Сучасний web-сайт притулку для тварин може включати такі основні
компоненти:
– головну сторінку з коротким описом діяльності притулку, перевагами
та закликом до усиновлення;
– каталог тварин із картками, які містять ім’я, фото, тип тварини, породу,
вік, статус і короткий опис;
– систему пошуку та фільтрації тварин за об’єктивними параметрами;
– сторінку з інформацією про місію, цінності та команду притулку;
– опис процесу усиновлення, який пояснює користувачеві основні етапи
взаємодії з організацією;
– контактну сторінку з адресою, телефоном, електронною поштою,
графіком роботи та формою зворотного зв’язку;
– блок мапи або посилання на географічне розташування притулку;
– адміністративну частину для подальшого оновлення інформації про
тварин, контакти та зміст сторінок.

Перевагами web-сайтів притулків є доступність інформації з будь-якого
місця, можливість оперативного оновлення даних, зручне структурування
карток тварин, підтримка візуального представлення інформації та спрощення
Арк.
482 ЧДТУ 262214.014 ПЗ
13
Змн. Арк. № Документа Підпис Дата

комунікації між користувачем і адміністрацією притулку. Такі ресурси
дозволяють користувачеві швидше прийняти рішення щодо вибору тварини, а
працівникам притулку — ефективніше інформувати громадськість про
доступних для усиновлення тварин.
Разом із перевагами існують і певні проблеми, характерні для web-сайтів
притулків. До них можна віднести неповну або застарілу інформацію,
відсутність зручної фільтрації, недостатньо зрозумілий опис процесу
усиновлення, складну навігацію, слабку адаптацію під мобільні пристрої,
перевантаженість інтерфейсу або відсутність контактної форми. Такі недоліки
можуть знижувати ефективність використання web-ресурсу та ускладнювати
взаємодію користувача з організацією.
Отже, web-сайти притулків для тварин є актуальним напрямом розвитку
web-орієнтованих інформаційних систем соціального призначення. Вони
поєднують інформаційне наповнення, зручну навігацію, візуальний контент,
пошукові інструменти та комунікаційні функції. Це створює передумови для
розробки web-сайту PawHaven Animal Shelter, який орієнтований на зручне
подання інформації про притулок, перегляд доступних тварин, фільтрацію,
ознайомлення з процесом усиновлення та зв’язок із адміністрацією.

1.2 Доцільність розробки web-сайту PawHaven Animal Shelter

Розробка web-сайту PawHaven Animal Shelter є доцільною у зв’язку з
потребою користувачів у зручному, структурованому та сучасному інструменті
для пошуку інформації про тварин, які потребують дому. Під час вибору
майбутнього домашнього улюбленця користувачеві важливо швидко отримати
відомості про тип тварини, її породу, вік, характер, стан доступності,
особливості поведінки та можливість зв’язку з притулком.
Більшість існуючих ресурсів для усиновлення тварин надають корисну
інформацію, проте не завжди поєднують в одному інтерфейсі всі необхідні
можливості. Наприклад, окремі сайти виконують роль загальної сторінки
Арк.
482 ЧДТУ 262214.014 ПЗ
14
Змн. Арк. № Документа Підпис Дата

організації, інші орієнтовані переважно на благодійну допомогу, а великі
міжнародні платформи можуть містити значний обсяг інформації, який не
завжди зручно сприймається користувачем-початківцем. У результаті
потенційний власник може витрачати більше часу на пошук тварини,
уточнення контактів або розуміння процедури усиновлення.
До основних недоліків частини існуючих web-ресурсів притулків можна
віднести:
– розрізненість інформації про тварин, умови усиновлення, контакти та
допомогу;
– недостатню деталізацію карток тварин;
– відсутність зручної фільтрації за типом, розміром або іншими
параметрами;
– складну або перевантажену структуру інтерфейсу;
– недостатню адаптацію до мобільних пристроїв;
– відсутність зрозумілого опису процесу усиновлення;
– обмежені можливості швидкого зв’язку з адміністрацією притулку.

Розробка web-сайту PawHaven Animal Shelter дозволяє вирішити
зазначені проблеми шляхом створення єдиної системи, яка поєднує
інформаційне наповнення, каталог тварин, пошук, фільтрацію та контактну
форму. Сайт передбачає наявність головної сторінки, сторінки Animals із
картками тварин, сторінки About з інформацією про місію та команду, а також
сторінки Contact із контактними даними, формою повідомлення та блоком
мапи. Така структура забезпечує логічний поділ інформації та спрощує
взаємодію користувача із системою.
Особливо важливим є зручне подання карток тварин. У межах
розроблюваного web-сайту кожна картка містить фото, ім’я, породу, вік,
короткий опис, статус доступності та додаткові характеристики. Це дозволяє
користувачеві швидко порівняти декілька тварин і перейти до подальшої
взаємодії з притулком. Подібний підхід використовується на великих
Арк.
482 ЧДТУ 262214.014 ПЗ
15
Змн. Арк. № Документа Підпис Дата

платформах з усиновлення, де каталог тварин поєднується з фільтрами,
фотографіями та короткими описами [7], [8].
Доцільність розробки також пояснюється необхідністю підвищення
зручності користувача. Наявність пошуку за ім’ям або породою дозволяє
швидко знайти потрібну тварину, а фільтри за типом і розміром допомагають
звузити результати. Сторінка About формує довіру до організації, оскільки
містить опис місії, цінностей і команди притулку. Сторінка Contact забезпечує
швидкий зв’язок із адміністрацією через форму повідомлення, телефон,
електронну пошту та адресу.
Таким чином, створення web-сайту PawHaven Animal Shelter є
актуальним і практично доцільним рішенням, оскільки воно дозволяє
об’єднати інформацію про притулок, каталог тварин, інструменти пошуку,
фільтрації та комунікації в межах однієї web-орієнтованої інформаційної
системи.

1.3. Чинники, які впливають на розробку web-сайту притулку для
тварин

Процес розробки web-сайту притулку для тварин залежить від
сукупності технічних, функціональних, інформаційних, дизайнерських та
організаційних чинників. Їх урахування дозволяє створити систему, яка буде
зрозумілою для користувачів, стабільною в роботі та придатною для
подальшого розвитку.
Одним із головних чинників є визначення цільової аудиторії. Web-сайт
PawHaven Animal Shelter орієнтований на користувачів, які цікавляться
усиновленням тварин, шукають інформацію про собак, котів, кроликів або
птахів, бажають дізнатися більше про притулок чи зв’язатися з адміністрацією.
До потенційної аудиторії належать люди, які планують взяти тварину додому,
волонтери, благодійники, сім’ї, що шукають домашнього улюбленця, а також
користувачі, які хочуть ознайомитися з діяльністю притулку.
Арк.
482 ЧДТУ 262214.014 ПЗ
16
Змн. Арк. № Документа Підпис Дата

Важливим чинником є структура сайту. Вона повинна бути логічною,
зрозумілою та не перевантаженою. Для web-сайту притулку доцільним є поділ
на окремі сторінки: Home, Animals, About, Contact та кнопка швидкої дії Adopt
Now. Така структура дозволяє користувачеві швидко знайти потрібний розділ і
не витрачати зайвий час на пошук інформації.
Наступним чинником є якість користувацького інтерфейсу. Дизайн сайту
притулку повинен викликати довіру, бути візуально приємним і не заважати
сприйняттю інформації. Для PawHaven Animal Shelter використано світлу
мінімалістичну тему з кремовим фоном, темно-зеленими акцентами та
помаранчевими кнопками дії. Така кольорова гама створює спокійне візуальне
середовище, підкреслює природну й соціальну тематику сайту та допомагає
виділити ключові елементи інтерфейсу.
Окрему роль відіграє адаптивність. Оскільки користувачі часто
переглядають сайти зі смартфонів, web-ресурс повинен коректно
відображатися на комп’ютерах, планшетах і мобільних телефонах.
Адаптивність впливає не лише на зручність використання, а й на загальну
якість сайту, оскільки користувач повинен мати можливість переглянути
картки тварин, скористатися фільтрами або надіслати повідомлення незалежно
від типу пристрою.
Важливим технічним чинником є організація інформаційного
наповнення. Для web-сайту притулку необхідно структурувати дані про
тварин, їхні фото, імена, породи, вік, статуси та характеристики. Також
потрібно забезпечити зрозуміле подання контактної інформації, графіка
роботи, адреси, місії притулку та етапів усиновлення. Наявність повної й
актуальної інформації підвищує довіру користувачів до ресурсу.
Безпека також є важливим чинником. Навіть якщо сайт не містить складних
фінансових операцій, він може обробляти повідомлення користувачів через
контактну форму. Тому необхідно забезпечити коректну роботу форм,
перевірку введених даних і захист від некоректного введення. У разі
подальшого розширення функціоналу, наприклад додавання онлайн-заявок або
Арк.
482 ЧДТУ 262214.014 ПЗ
17
Змн. Арк. № Документа Підпис Дата

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

1.4. Аналітичний огляд існуючих web-ресурсів для усиновлення
тварин

Проведення аналітичного огляду існуючих web-ресурсів для
усиновлення тварин дозволяє визначити основні підходи до подання
інформації про тварин, виявити сильні та слабкі сторони аналогів, а також
сформувати вимоги до розроблюваної системи. Для аналізу було обрано
ресурси, які виконують подібні або частково подібні функції до web-сайту
PawHaven Animal Shelter: Petfinder, Adopt a Pet, Happy Paw та UAnimals.
Обрані аналоги відрізняються за масштабом і призначенням. Petfinder є
великою платформою для пошуку тварин із мережі притулків і рятувальних
Арк.
482 ЧДТУ 262214.014 ПЗ
18
Змн. Арк. № Документа Підпис Дата

організацій. Adopt a Pet також орієнтований на пошук тварин для усиновлення
та використовує фільтри, поради й інструменти підтримки користувача. Happy
Paw є українським благодійним фондом, який займається допомогою
безпритульним тваринам, опікою притулків і адопцією. UAnimals є
українською організацією, що займається захистом і порятунком тварин,
підтримкою притулків, евакуацією та допомогою тваринам в Україні [7]–[10].
Такий вибір аналогів дозволяє оцінити як міжнародні, так і українські підходи
до організації web-ресурсів у сфері допомоги тваринам.

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

Petfinder є одним із найбільш відомих міжнародних web-ресурсів для
пошуку тварин. На сайті користувач може переглядати тварин із великої
мережі притулків і рятувальних організацій, а також шукати собак, котів та
інших тварин для усиновлення [7]. Перевагою Petfinder є масштабність, значна
кількість анкет тварин, наявність фільтрів і орієнтація саме на процес пошуку
майбутнього домашнього улюбленця. Водночас через велику кількість
Арк.
482 ЧДТУ 262214.014 ПЗ
19
Змн. Арк. № Документа Підпис Дата

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

Рисунок 1.1 Головна сторінка сайту Petfinder

Adopt a Pet є платформою для пошуку тварин, яка співпрацює з великою
кількістю притулків і рятувальних організацій у США та Канаді. На ресурсі
передбачено пошук тварин, фільтри, повідомлення про нових тварин і поради
щодо усиновлення [8]. Перевагою цього ресурсу є зручна орієнтація на
користувача, який шукає конкретну тварину, а також наявність додаткових
порад для майбутніх власників. Недоліком у контексті розробки PawHaven
Animal Shelter є те, що цей ресурс є великою платформою, а не сайтом
окремого притулку, тому його структура не повністю відповідає задачі
представлення конкретної організації.

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

Рисунок 1.2 Головна сторінка сайту Adopt a pet

Happy Paw є українським благодійним фондом, який займається
допомогою безпритульним котам і собакам, підтримкою притулків, опікою
тварин, адопцією, а також напрямами lost/found [9]. Перевагою ресурсу є
поєднання благодійної, освітньої та адопційної складових. Такий підхід
демонструє, що web-сайт у сфері допомоги тваринам може виконувати не лише
функцію каталогу, а й роль комунікаційної платформи для волонтерів,
благодійників і користувачів, які хочуть допомогти. Водночас сайт має ширше
благодійне спрямування, тоді як PawHaven Animal Shelter зосереджується саме
на представленні притулку, його тварин, команди, контактів і процесу
усиновлення.
Арк.
482 ЧДТУ 262214.014 ПЗ
21
Змн. Арк. № Документа Підпис Дата

Рисунок 1.3 Головна сторінка сайту Happy Paw

UAnimals є українською організацією, яка займається захистом тварин,
евакуацією з небезпечних територій, підтримкою притулків, забезпеченням
кормами, ветеринарними препаратами та реалізацією програм допомоги [10].
Перевагою ресурсу є сильна соціальна спрямованість, актуальність теми
порятунку тварин і чітке представлення напрямів діяльності. Проте UAnimals
не є класичним каталогом тварин конкретного притулку, тому його
функціональність відрізняється від задач, які вирішує PawHaven Animal
Shelter.

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

Рисунок 1.4 Головна сторінка UAnimals

Розроблюваний web-сайт PawHaven Animal Shelter орієнтований на
інформаційну підтримку користувачів, які хочуть знайти тварину для
усиновлення або дізнатися більше про діяльність притулку. На відміну від
великих міжнародних платформ, сайт має простішу структуру та представляє
конкретний притулок. На відміну від широких благодійних ресурсів,
PawHaven Animal Shelter зосереджується на каталозі тварин, картках, пошуку,
фільтрації, описі процесу усиновлення, контактній інформації та формі
повідомлення.
Арк.
482 ЧДТУ 262214.014 ПЗ
23
Змн. Арк. № Документа Підпис Дата

Рисунок 1.5 Таблиця порівняння аналогів

За результатами порівняння встановлено, що всі розглянуті аналоги
мають корисні функціональні можливості для сфери допомоги тваринам.
Petfinder вирізняється великою кількістю анкет тварин, розвиненим пошуком і
фільтрацією. Adopt a Pet має схожу спрямованість і додатково пропонує поради
для майбутніх власників. Happy Paw поєднує адопцію, благодійну допомогу,
опіку над притулками та інформаційні матеріали. UAnimals має сильну
соціальну спрямованість і демонструє важливість підтримки притулків,
евакуації та захисту тварин.
Водночас аналіз показав, що жоден із розглянутих ресурсів повністю не
відповідає структурі web-сайту окремого притулку з простим каталогом
тварин, мінімалістичним дизайном, зрозумілим процесом усиновлення,
сторінкою команди, контактною формою та блоком мапи. Саме тому розробка
PawHaven Animal Shelter є обґрунтованою. Власна система повинна поєднати
сильні сторони аналогів: каталог і фільтрацію Petfinder, зручність пошуку
Арк.
482 ЧДТУ 262214.014 ПЗ
24
Змн. Арк. № Документа Підпис Дата

Adopt a Pet, соціальну складову Happy Paw та орієнтацію на допомогу
тваринам UAnimals. Водночас сайт має уникати перевантаженості інтерфейсу,
надмірної складності та розрізненості інформації.

Висновки до розділу 1

У першому розділі кваліфікаційної роботи було розглянуто предметну
область web-сайтів притулків для тварин і визначено їх основне призначення.
Було встановлено, що такі системи забезпечують користувачам доступ до
інформації про доступних для усиновлення тварин, діяльність притулку,
процес усиновлення, контактні дані та можливості взаємодії з адміністрацією.
Також було обґрунтовано доцільність розробки web-сайту PawHaven Animal
Shelter. Визначено, що потреба у такій системі зумовлена необхідністю
створення зручного цифрового середовища для пошуку тварин, перегляду
карток, використання фільтрів, ознайомлення з притулком і надсилання
повідомлень через контактну форму.
У процесі аналізу було визначено основні чинники, які впливають на розробку
web-сайту притулку для тварин. До них належать цільова аудиторія, структура
сайту, якість користувацького інтерфейсу, адаптивність, швидкодія, безпека,
інформаційне наповнення, зручність навігації та можливість подальшого
розвитку. Було встановлено, що створення такого ресурсу потребує
комплексного підходу, який охоплює технічні, функціональні, дизайнерські та
організаційні аспекти.
У межах аналітичного огляду було досліджено існуючі web-ресурси для
усиновлення та допомоги тваринам: Petfinder, Adopt a Pet, Happy Paw та
UAnimals. Для порівняння було використано об’єктивні критерії, зокрема
наявність каталогу тварин, пошуку, фільтрації, карток, фотографій, опису
процесу усиновлення, контактної форми, інформації про організацію,
адаптивності та простоти структури.
Арк.
482 ЧДТУ 262214.014 ПЗ
25
Змн. Арк. № Документа Підпис Дата

За результатами порівняння встановлено, що кожен із розглянутих
аналогів має власні переваги. Petfinder вирізняється масштабним каталогом
тварин і фільтрами, Adopt a Pet має зручну систему пошуку та поради для
користувачів, Happy Paw поєднує адопцію з благодійною діяльністю, а
UAnimals демонструє соціальну значущість допомоги тваринам і підтримки
притулків. Водночас ці ресурси не повністю поєднують просту структуру
сайту окремого притулку, мінімалістичний інтерфейс, каталог тварин, процес
усиновлення, інформацію про команду, контактну форму та блок мапи.
Отже, результати першого розділу дозволили сформувати основні
напрями подальшої розробки web-сайту PawHaven Animal Shelter. Доцільно
реалізувати головну сторінку, каталог тварин, систему пошуку та фільтрації,
картки тварин, сторінку про притулок, блок місії й цінностей, сторінку
контактів, форму повідомлення та зручну навігацію. Отримані результати є
основою для подальшого обґрунтування технічного завдання та розробки
структури web-сайту.

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

РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ

2.1. Призначення web-сайту PawHaven Animal Shelter

Розробка web-сайту PawHaven Animal Shelter спрямована на створення
сучасного цифрового середовища для інформаційної підтримки діяльності
притулку для тварин, перегляду доступних для усиновлення тварин,
ознайомлення з процесом адопції та забезпечення зручної взаємодії
користувачів із адміністрацією притулку. Такий сайт має надавати
користувачам швидкий доступ до структурованої інформації про тварин, місію
організації, контактні дані та можливості допомоги.
Основне призначення web-сайту PawHaven Animal Shelter полягає у
спрощенні пошуку домашнього улюбленця для потенційних власників. Сайт
орієнтований на користувачів, які хочуть переглянути доступних тварин,
ознайомитися з їхніми характеристиками, відфільтрувати картки за типом або
розміром, дізнатися більше про притулок, переглянути процес усиновлення та
зв’язатися з адміністрацією. Завдяки цьому ресурс виконує не лише
інформаційну, а й комунікаційну функцію.
Актуальність створення такого web-сайту підтверджується загальною
суспільною потребою у цифрових інструментах, які допомагають
організовувати процес усиновлення тварин. За даними Shelter Animals Count,
у 2024 році кількість усиновлень собак і котів із притулків у США становила
понад 4,19 млн випадків [15]. Це свідчить про значний масштаб діяльності
притулків і важливість сервісів, які допомагають людям швидше знаходити
інформацію про тварин, що потребують нової родини.
Особливістю розроблюваного ресурсу є поєднання кількох
інформаційних і функціональних блоків. До них належать головна сторінка,
каталог тварин, сторінка про притулок, контактна сторінка, пошук, фільтрація,
картки тварин, пагінація, блок процесу усиновлення, форма зворотного зв’язку
та футер із контактами. Така структура дозволяє створити не просто
презентаційний сайт, а зручний web-ресурс для користувачів, які зацікавлені в
усиновленні тварини або підтримці притулку.
Арк.
482 ЧДТУ 262214.014 ПЗ
27
Змн. Арк. № Документа Підпис Дата

Web-сайт PawHaven Animal Shelter може бути корисним для
користувачів, які вперше планують взяти тварину з притулку, для людей, які
вже мають досвід догляду за домашніми улюбленцями, а також для волонтерів
і благодійників. Наявність каталогу тварин, пошуку, фільтрів, опису процесу
усиновлення та контактної форми дозволяє зробити взаємодію з притулком
більш зрозумілою, швидкою та організованою.
Цінність web-сайту PawHaven Animal Shelter полягає в таких
можливостях:
– надання доступу до інформації про тварин, які шукають дім;
– перегляд карток тварин із фотографіями, іменами, породами, віком,
статусом і коротким описом;
– пошук тварин за ім’ям або породою;
– фільтрація тварин за типом і розміром;
– перегляд інформації про місію, цінності та команду притулку;
– ознайомлення з етапами процесу усиновлення;
– надсилання повідомлення через контактну форму;
– перегляд адреси, телефону, електронної пошти та графіка роботи;
– перехід до мапи або блоку розташування притулку;
– використання сайту з різних пристроїв завдяки адаптивному
інтерфейсу.

Отже, web-сайт PawHaven Animal Shelter є інструментом для
систематизації інформації про притулок, покращення доступу до карток
тварин і забезпечення зручної взаємодії між користувачами та адміністрацією
організації.

2.2. Вимоги до дизайну web-сайту PawHaven Animal Shelter

Дизайн web-сайту притулку для тварин має важливе значення, оскільки
саме інтерфейс формує перше враження користувача про організацію та
впливає на подальшу взаємодію з ресурсом. Для такої тематики недостатньо
лише привабливого зовнішнього вигляду. Сайт повинен викликати довіру, бути
Арк.
482 ЧДТУ 262214.014 ПЗ
28
Змн. Арк. № Документа Підпис Дата

зрозумілим, логічно структурованим, адаптивним, емоційно теплим і зручним
для швидкого пошуку інформації.
Web-сайт PawHaven Animal Shelter оформлено у світлій мінімалістичній
стилістиці. Основою дизайну є кремовий фон, темно-зелені акценти та
помаранчеві кнопки дії. Така кольорова гама добре відповідає соціальній
тематиці сайту: зелений колір асоціюється з турботою, безпекою та
природністю, кремовий фон створює м’яке візуальне середовище, а
помаранчевий використовується для виділення ключових дій, зокрема кнопки
Adopt Now.
Важливою вимогою до дизайну є компонентність інтерфейсу. Для
розробки сайту доцільно використовувати підхід, за якого інтерфейс
складається з окремих повторюваних елементів: навігаційної панелі, карток
тварин, кнопок, форм, блоків статистики, секцій сторінок і футера. Такий
підхід відповідає принципам React, де інтерфейс створюється з незалежних
компонентів, які можна поєднувати у сторінки й застосунки [11].
Основними вимогами до дизайну web-сайту PawHaven Animal Shelter є:
– зрозуміла структура інтерфейсу, за якої користувач швидко
орієнтується між розділами Home, Animals, About, Contact та кнопкою
Adopt Now;
– єдиний візуальний стиль усіх сторінок, з однаковою логікою
оформлення кнопок, карток, блоків і форм;
– адаптивність, що забезпечує коректне відображення сайту на
комп’ютерах, планшетах і смартфонах;
– читабельність тексту, достатній контраст між фоном і текстовими
елементами;
– помітність ключових дій, зокрема кнопок Adopt a Friend, View all
animals, Send Message, Adopt Now;
– зручність роботи з картками тварин, які мають містити фото, ім’я,
породу, вік, статус, опис і теги;
– використання якісного візуального контенту, що створює позитивне
емоційне враження;

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

– доступність інтерфейсу для різних категорій користувачів;
– мінімізація зайвих елементів, щоб не перевантажувати сторінки;
– логічне розміщення навігації та контактної інформації.
Окрему увагу слід приділити доступності web-інтерфейсу. Згідно з
рекомендаціями WCAG 2.2, доступний web-контент має відповідати
принципам сприйнятності, керованості, зрозумілості та надійності [13]. Для
PawHaven Animal Shelter це означає, що текст має бути читабельним, кнопки
— помітними, форми — зрозумілими, а навігація — послідовною. Такий
підхід робить сайт зручнішим не лише для досвідчених користувачів, а й для
людей, які рідко користуються подібними сервісами.
Таким чином, дизайн web-сайту PawHaven Animal Shelter повинен
забезпечувати не лише естетичну привабливість, а й ефективну взаємодію
користувача з каталогом тварин, фільтрами, інформаційними блоками,
контактною формою та навігацією.

2.3. Структура сторінок web-сайту PawHaven Animal Shelter

Структура web-сайту визначає логіку розміщення сторінок,
інформаційних блоків і функціональних елементів. Для сайту притулку
важливо, щоб користувач міг швидко перейти від загальної інформації до
перегляду тварин, ознайомлення з місією організації або надсилання
повідомлення. Зручна структура скорочує кількість зайвих дій і підвищує
ефективність використання ресурсу.
Основна структура web-сайту PawHaven Animal Shelter включає такі
сторінки: Home, Animals, About, Contact. Також у верхньому меню розміщено
помітну кнопку Adopt Now, яка виконує роль швидкого переходу до дії,
пов’язаної з усиновленням.
Арк.
482 ЧДТУ 262214.014 ПЗ
30
Змн. Арк. № Документа Підпис Дата

Рисунок 2.1 Структура сторінок сайту

Головна сторінка Home виконує ознайомчу та презентаційну функцію.
Вона знайомить користувача з призначенням притулку, містить великий hero-
блок із заголовком “Find Your Perfect Companion”, короткий опис, кнопки Adopt
a Friend та Our Story. На цій сторінці також розміщено блок статистики, картки
тварин, секцію “How Adoption Works”, CTA-блок для користувачів, які поки не
Арк.
482 ЧДТУ 262214.014 ПЗ
31
Змн. Арк. № Документа Підпис Дата

можуть усиновити тварину, але можуть допомогти іншим способом, а також
футер.
Сторінка Animals є одним із головних функціональних розділів сайту.
Вона містить каталог тварин у вигляді карток, пошуковий рядок, фільтри за
типом тварини та розміром, а також пагінацію. Кожна картка містить
фотографію, ім’я тварини, породу, вік, статус доступності, короткий опис і
набір тегів. Така структура дозволяє користувачеві швидко порівнювати
тварин і знаходити варіант, який відповідає його очікуванням.
Сторінка About призначена для представлення притулку як організації.
На ній розміщено hero-блок “About PawHaven”, інформацію про місію, блок
“Our Values” і секцію “Meet Our Team”. Такий зміст допомагає сформувати
довіру до притулку, показати його цінності, принципи роботи та людей, які
беруть участь у догляді за тваринами.
Сторінка Contact забезпечує можливість зв’язку з адміністрацією сайту.
Вона містить заголовок “Get in Touch”, контактні картки з адресою,
телефонами, електронною поштою та графіком роботи, форму “Send us a
Message”, а також блок мапи з адресою. Наявність такої сторінки є важливою
для користувачів, які хочуть уточнити інформацію про тварину, поставити
запитання щодо усиновлення або звернутися до притулку з іншого питання.
Окремим структурним елементом є футер, який повторюється на
основних сторінках. Він містить логотип PawHaven, коротке повідомлення про
притулок, соціальні іконки, швидкі посилання, розділ Find a Pet і контактні
дані. Футер забезпечує додаткову навігацію та дозволяє користувачеві швидко
перейти до важливих розділів навіть після перегляду сторінки до кінця.
Таким чином, структура web-сайту PawHaven Animal Shelter побудована
за принципом поступового ознайомлення: спочатку користувач бачить
загальну інформацію про притулок, потім може перейти до каталогу тварин,
дізнатися більше про організацію або звернутися через контактну форму.

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

2.4. Навігація web-сайту PawHaven Animal Shelter

Навігація є одним із ключових елементів web-сайту, оскільки вона
визначає, наскільки швидко і зручно користувач може знаходити потрібну
інформацію. Для сайту притулку це особливо важливо, адже користувач може
шукати конкретну тварину, переглядати умови усиновлення, дізнаватися про
команду або переходити до контактної форми. Якщо навігація побудована
логічно, користувач швидше переходить до потрібної дії та менше часу
витрачає на пошук.
У web-сайті PawHaven Animal Shelter основна навігація реалізується
через верхнє меню. До нього входять сторінки Home, Animals, About, Contact
та кнопка Adopt Now. Така структура є зрозумілою для користувача, оскільки
кожен пункт меню має конкретне призначення.
Розділ Home дозволяє повернутися до стартової сторінки сайту. Він
використовується для загального ознайомлення з притулком, його місією,
статистикою, доступними тваринами та процесом усиновлення.
Розділ Animals відкриває каталог тварин. На цій сторінці користувач
може переглядати картки, застосовувати пошук, обирати фільтри за типом
тварини та розміром, а також перемикати сторінки каталогу за допомогою
пагінації.
Розділ About призначений для перегляду інформації про організацію. Він
містить опис місії притулку, цінності та команду. Цей розділ важливий для
формування довіри, оскільки користувач може зрозуміти, як працює притулок
і які принципи лежать в основі його діяльності.
Розділ Contact відкриває сторінку зі зворотним зв’язком. Через нього
користувач може переглянути адресу, телефон, електронну пошту, години
роботи та надіслати повідомлення через форму.
Кнопка Adopt Now є елементом швидкої дії. Вона виділена кольором і
розміщена в основному меню, щоб користувач міг легко помітити можливість
переходу до процесу усиновлення або каталогу тварин.

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

Окрім основного меню, на сайті використовуються й інші навігаційні
елементи:
– пошуковий рядок на сторінці Animals, який дозволяє знаходити тварин
за ім’ям або породою;
– фільтри Animal Type та Size, які допомагають звузити результати
пошуку;
– кнопки на головній сторінці, зокрема Adopt a Friend, Our Story та View
all animals;
– пагінація в каталозі тварин;
– швидкі посилання у футері;
– кнопка Open in Google Maps на сторінці Contact;
– кнопка Send Message у формі зворотного зв’язку.
Під час розробки навігації важливо враховувати адаптивність. За
матеріалами MDN Web Docs, media queries є важливою складовою адаптивного
дизайну, оскільки дозволяють змінювати макет сторінки залежно від розміру
вікна перегляду або характеристик пристрою [12]. Для PawHaven Animal
Shelter це означає, що меню, картки тварин, фільтри та контактна форма
повинні зручно відображатися як на широких екранах, так і на мобільних
пристроях.
Грамотно побудована навігація зменшує кількість зайвих дій, покращує
зручність користування ресурсом і дозволяє користувачеві швидко перейти до
вибору тварини, перегляду інформації про притулок або зв’язку з
адміністрацією.

2.5. Наповнення сторінок web-сайту PawHaven Animal Shelter

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

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

На головній сторінці розміщується загальна інформація про PawHaven
Animal Shelter. Ця сторінка має зацікавити користувача й мотивувати його
перейти до перегляду тварин. Доцільним є використання великого візуального
блоку із зображенням тварин, короткого текстового опису, кнопок швидкої дії,
статистичних показників, карток тварин і блоку з поясненням процесу
усиновлення.
Блок статистики на головній сторінці виконує інформаційну та довірчу
функцію. Він містить показники, пов’язані з кількістю прилаштованих тварин,
волонтерськими годинами, успішністю усиновлення та роками роботи. Такі
дані допомагають створити враження активної та стабільної організації.
На сторінці Animals подається каталог доступних тварин. Кожна тварина
представлена у вигляді картки, яка містить:
– фотографію;
– ім’я;
– породу;
– вік;
– статус доступності;
– короткий опис;
– тематичні теги;
– візуальне позначення стану тварини.
Таке наповнення дозволяє користувачеві швидко оцінити тварину та
перейти до подальшої взаємодії з притулком. Наявність пошуку та фільтрів
робить каталог більш зручним, особливо якщо кількість тварин у системі
збільшується.
Сторінка About містить інформаційні матеріали про притулок.
Основними елементами цієї сторінки є опис місії, історія організації, блок
цінностей і секція команди. У межах цієї сторінки користувач може зрозуміти,
що притулок не лише розміщує картки тварин, а й має власну філософію
роботи, спрямовану на турботу, відповідальність і пошук безпечного дому для
тварин.
Сторінка Contact містить контактну інформацію та форму надсилання
повідомлення. Контактні картки дозволяють швидко знайти адресу, телефон,
Арк.
482 ЧДТУ 262214.014 ПЗ
35
Змн. Арк. № Документа Підпис Дата

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

Рисунок 2.2 Прототип головної сторінки
Арк.
482 ЧДТУ 262214.014 ПЗ
36
Змн. Арк. № Документа Підпис Дата

Прототип web-сайту є важливим етапом розробки, оскільки дозволяє
попередньо оцінити структуру, зовнішній вигляд і функціональні можливості
майбутньої системи. Завдяки прототипуванню можна визначити, як користувач
буде взаємодіяти із сайтом, які сторінки є основними, які елементи потребують
покращення та наскільки зручною є загальна логіка роботи ресурсу.
Прототип web-сайту PawHaven Animal Shelter повинен враховувати
інформаційні потреби користувачів і специфіку діяльності притулку. Основна
увага має бути зосереджена на головній сторінці, каталозі тварин, сторінці про
притулок, контактній сторінці, фільтрах, картках тварин і формі повідомлення.
До прототипу web-сайту PawHaven Animal Shelter висуваються такі
вимоги:
– головна сторінка повинна містити основну інформацію про притулок,
hero-блок, статистику, картки тварин, процес усиновлення та CTA-блок;
– каталог Animals має відображати список доступних тварин у вигляді
карток;
– пошук і фільтрація повинні дозволяти користувачеві швидко знаходити
тварин за ім’ям, породою, типом або розміром;
– картка тварини повинна містити фото, ім’я, породу, вік, короткий опис,
статус і теги;
– сторінка About повинна містити інформацію про місію, цінності та
команду притулку;
– сторінка Contact повинна містити контактні картки, форму
повідомлення та блок мапи;
– основне меню повинно бути доступним на всіх ключових сторінках;
– футер повинен містити швидкі посилання, контактні дані та коротку
інформацію про притулок;
– усі сторінки повинні мати єдиний стиль оформлення;
– інтерфейс повинен бути адаптивним і коректно відображатися на
різних типах пристроїв;
– форми повинні бути зрозумілими та мати логічну структуру полів;
– сайт повинен передбачати можливість подальшого розширення
адміністративною панеллю, онлайн-заявкою на усиновлення та базою даних.
Арк.
482 ЧДТУ 262214.014 ПЗ
37
Змн. Арк. № Документа Підпис Дата

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

2.8. Техніко-економічне обґрунтування доцільності розробки web-
сайту PawHaven Animal Shelter

Техніко-економічне обґрунтування є важливим етапом під час розробки
web-орієнтованої інформаційної системи, оскільки дозволяє оцінити
доцільність створення ресурсу з погляду технічної реалізації, трудомісткості,
очікуваної користі, витрат часу та перспектив подальшого розвитку. Для web-
сайту притулку таке обґрунтування має особливе значення, оскільки система
поєднує інформаційний контент, каталог тварин, комунікаційні інструменти та
можливість подальшого адміністрування.
Розробка web-сайту PawHaven Animal Shelter передбачає створення
сучасного ресурсу, який забезпечує користувачам доступ до інформації про
притулок, каталог тварин, пошук, фільтрацію, опис процесу усиновлення,
контактні дані та форму повідомлення. Саме тому під час оцінювання
доцільності розробки необхідно враховувати не лише створення інтерфейсу, а
й реалізацію окремих функціональних блоків, підготовку контенту, адаптацію
до різних пристроїв і тестування.
З технічної точки зору доцільність створення web-сайту полягає в
можливості реалізації зручної інформаційної системи засобами сучасних web-
технологій. Такі технології дозволяють створити адаптивний, швидкий і
візуально привабливий ресурс, який працює у браузері та не потребує
встановлення додаткового програмного забезпечення. Це важливо для
користувачів, які можуть переглядати сайт як з персонального комп’ютера, так
і зі смартфона.
Для реалізації інтерфейсу доцільно використовувати React, оскільки ця
бібліотека дозволяє будувати інтерфейс із незалежних компонентів, таких як
кнопки, картки, форми, навігаційні елементи та сторінкові секції [11]. Такий
Арк.
482 ЧДТУ 262214.014 ПЗ
38
Змн. Арк. № Документа Підпис Дата

підхід спрощує підтримку сайту, полегшує повторне використання елементів і
створює основу для подальшого масштабування.
З економічної точки зору web-сайт може бути корисним завдяки
багаторазовому використанню, можливості оновлення інформації, зменшенню
навантаження на працівників або волонтерів притулку та спрощенню
комунікації з користувачами. Якщо інформація про тварин, контакти та процес
усиновлення розміщена на сайті, користувач може самостійно отримати
основні відповіді без необхідності звертатися до адміністрації з базовими
запитаннями.
Розробка web-сайту PawHaven Animal Shelter виконується послідовно та
охоплює кілька взаємопов’язаних етапів. На першому етапі здійснюється
аналіз предметної області, під час якого визначаються особливості web-сайтів
притулків, потреби потенційних користувачів, основні функції майбутнього
ресурсу та проблеми, які повинна вирішувати система.
Наступним етапом є формування функціональних і нефункціональних
вимог до системи. До функціональних вимог належать перегляд каталогу
тварин, робота з картками, пошук, фільтрація, перегляд інформації про
притулок, перегляд контактів і надсилання повідомлення. До
нефункціональних вимог належать адаптивність, зручність інтерфейсу,
швидкодія, доступність, стабільність роботи та можливість подальшого
розширення.
Після визначення вимог виконується проєктування структури сайту. На
цьому етапі визначаються основні сторінки ресурсу, логіка навігації та
взаємозв’язки між окремими блоками. Для PawHaven Animal Shelter
передбачено такі основні розділи: Home, Animals, About, Contact та кнопка
Adopt Now. Така структура дозволяє логічно розподілити інформацію та
забезпечити зручний доступ до основних функцій сайту.
Окремим етапом є розробка дизайну інтерфейсу. Для сайту притулку
важливо створити візуально приємний вигляд, який відповідає тематиці
турботи про тварин. Під час розробки дизайну враховуються кольорова гама,
типографіка, розміщення карток тварин, вигляд кнопок, форм, навігаційних
Арк.
482 ЧДТУ 262214.014 ПЗ
39
Змн. Арк. № Документа Підпис Дата

елементів і блоків із фотографіями. Важливо, щоб інтерфейс був не лише
естетично привабливим, а й зручним для користувача.
Після підготовки структури та дизайну виконується реалізація
користувацької частини сайту. У межах цього етапу створюються основні
сторінки web-сайту: Home, Animals, About і Contact. Особлива увага
приділяється каталогу тварин, оскільки саме він є одним із ключових
функціональних розділів системи. Картки тварин повинні містити стислий
опис, зображення, основні характеристики та статус.
Після реалізації основних модулів проводиться тестування web-сайту.
Перевіряється коректність роботи сторінок, кнопок, форм, пошуку, фільтрації,
пагінації, навігації та адаптивності. Тестування дозволяє виявити помилки,
оцінити зручність користування сайтом і перевірити відповідність реалізованої
системи поставленим вимогам.
Важливим елементом технічного обґрунтування є визначення маршрутів
web-сайту. У межах користувацької частини web-ресурсу передбачено такі
основні сторінкові маршрути: головна сторінка “/”, сторінка тварин “/animals”,
сторінка про притулок “/about”, контактна сторінка “/contact”. У разі
подальшого розширення можуть бути додані маршрути “/adopt”, “/animals/”,
“/admin”, “/donate” та “/volunteer”.
Для розгортання сайту може використовуватися платформа Vercel, яка
надає можливості для розміщення, розгортання та масштабування сучасних
web-додатків [14]. Використання хмарної платформи спрощує публікацію
сайту, дає змогу швидко оновлювати проєкт і забезпечує доступність ресурсу
для користувачів через браузер.
Окремою перевагою розробленого web-сайту є можливість подальшого
розвитку. У майбутньому PawHaven Animal Shelter можна доповнити
особистим кабінетом користувача, онлайн-заявкою на усиновлення, системою
бронювання зустрічі з твариною, адміністративною панеллю, базою даних,
модулем пожертв, email-сповіщеннями та системою статусів для тварин. Це
дозволяє розглядати проєкт не лише як дипломну розробку, а й як основу для
реального інформаційного ресурсу притулку.
Арк.
482 ЧДТУ 262214.014 ПЗ
40
Змн. Арк. № Документа Підпис Дата

З технічної точки зору web-сайт є придатним до масштабування,
оскільки його структура передбачає окремі сторінки та функціональні блоки:
головна сторінка, каталог тварин, фільтри, картки, сторінка про притулок,
контакти, форма повідомлення та футер. Такий модульний підхід дозволяє
доповнювати систему новими можливостями без повної зміни її архітектури.
З практичної точки зору розроблений ресурс може використовуватися як
демонстраційний сайт притулку для тварин, інформаційна платформа для
популяризації усиновлення або основа для подальшого соціального web-
проєкту. Його використання дозволяє систематизувати інформацію про тварин,
надати користувачам зручні інструменти для пошуку та забезпечити
адміністрації притулку додатковий канал комунікації.
Отже, розробка web-сайту PawHaven Animal Shelter є технічно
можливою, економічно обґрунтованою та практично доцільною. Створений
ресурс може використовуватися для інформаційної підтримки притулку,
перегляду доступних тварин, пошуку, фільтрації, ознайомлення з процесом
усиновлення та зв’язку з адміністрацією. Наявність продуманої структури,
адаптивного дизайну, каталогу тварин і контактної форми забезпечує
функціональну завершеність системи, а можливість подальшого розширення
підвищує її цінність і перспективність.

Висновки до розділу 2

У другому розділі кваліфікаційної роботи було розглянуто призначення
web-сайту PawHaven Animal Shelter, визначено його основні функції та роль у
підтримці діяльності притулку для тварин. Було встановлено, що
розроблюваний ресурс має не лише надавати користувачам доступ до карток
тварин, а й створювати зручне середовище для перегляду інформації про
притулок, ознайомлення з процесом усиновлення, пошуку, фільтрації та
зв’язку з адміністрацією.
У процесі аналізу було сформовано вимоги до дизайну, структури
сторінок, навігації, наповнення, адміністрування та прототипу web-сайту.
Особливу увагу було приділено зручності користувацького інтерфейсу,
Арк.
482 ЧДТУ 262214.014 ПЗ
41
Змн. Арк. № Документа Підпис Дата

оскільки для сайту притулку важливо забезпечити швидкий доступ до каталогу
тварин, контактів, інформації про організацію та форми повідомлення.
Визначено, що дизайн ресурсу має бути сучасним, адаптивним, візуально
приємним і водночас не перевантаженим зайвими елементами.
Під час розробки структури сайту було враховано фактичну реалізацію
PawHaven Animal Shelter, яка включає основні сторінки Home, Animals, About
і Contact. Кожна з цих сторінок виконує окрему функцію в межах
інформаційної системи. Головна сторінка знайомить користувача з притулком,
сторінка Animals забезпечує доступ до каталогу тварин, сторінка About містить
місію, цінності та інформацію про команду, а сторінка Contact забезпечує
зворотний зв’язок.
Також було описано каталог тварин, який містить картки, пошук,
фільтрацію та пагінацію. Наявність таких елементів значно покращує
зручність користування сайтом, оскільки користувач може швидко знайти
тварину відповідно до власних очікувань. Окремо було розглянуто роль карток
тварин, які містять фото, ім’я, породу, вік, статус, опис і теги.
Окрему увагу у другому розділі було приділено можливостям
адміністрування web-сайту. У поточній реалізації основний акцент зроблено
на користувацьку частину, однак структура ресурсу дозволяє надалі додати
адміністративну панель для керування тваринами, контактною інформацією,
повідомленнями, сторінкою команди та іншими матеріалами. Наявність такого
функціоналу є важливою перспективою розвитку системи.
Також було обґрунтовано доцільність створення такого сайту з технічної
та економічної точок зору. З технічної точки зору, реалізація PawHaven Animal
Shelter є доцільною, оскільки сучасні web-технології дозволяють створити
адаптивний, швидкий і зручний ресурс із можливістю подальшого
розширення. З економічної точки зору, розроблений сайт може
використовуватися багаторазово, оновлюватися новими картками тварин і
зменшувати кількість базових інформаційних звернень до адміністрації
притулку.
Проведений аналіз дозволив сформувати основу для подальшої
реалізації web-сайту PawHaven Animal Shelter та визначити ключові напрями
Арк.
482 ЧДТУ 262214.014 ПЗ
42
Змн. Арк. № Документа Підпис Дата

його розвитку. У майбутньому ресурс може бути доповнений онлайн-заявкою
на усиновлення, особистим кабінетом користувача, системою бронювання
зустрічі, адміністративною панеллю, базою даних, модулем благодійних
внесків і email-сповіщеннями. Отже, результати другого розділу створюють
необхідне підґрунтя для подальшої програмної реалізації, тестування та
вдосконалення web-сайту притулку для тварин.
Арк.
482 ЧДТУ 262214.014 ПЗ
43
Змн. Арк. № Документа Підпис Дата

РОЗДІЛ 3. РОЗРОБКА WEB-САЙТУ

3.1. Обґрунтування вибору інструментальних засобів розробки

Розробка web-сайту PawHaven Animal Shelter потребувала вибору таких
інструментальних засобів, які забезпечують зручну реалізацію
користувацького інтерфейсу, адаптивність, швидку побудову сторінок,
стабільну роботу в браузері та можливість подальшого розширення
функціональності. Оскільки сайт має інформаційно-соціальне призначення та
орієнтований на представлення діяльності притулку для тварин, особливу
увагу було приділено зручності навігації, компонентній структурі, візуальній
цілісності сторінок і простоті розгортання ресурсу в мережі Інтернет.
Під час вибору технологій враховувалися такі критерії: підтримка
компонентного підходу до побудови інтерфейсу, можливість швидкого
створення окремих сторінок, повторне використання елементів, підтримка
адаптивного дизайну, зручність підтримки коду, стабільність роботи в
сучасних браузерах, можливість тестування сторінок і подальшого
розгортання сайту на хостинговій платформі. Також важливо було використати
засоби, які дозволяють реалізувати сайт без складної серверної
інфраструктури, оскільки основна частина проєкту зосереджена на
користувацькому інтерфейсі та поданні інформації.
Основним середовищем розробки було обрано Visual Studio Code. Це
середовище є зручним для створення web-додатків, оскільки підтримує роботу
з HTML, CSS, JavaScript, TypeScript, JSX, сучасними frontend-бібліотеками та
системами керування версіями. Завдяки розширенням Visual Studio Code
спрощується форматування коду, підсвічування синтаксису, пошук помилок,
робота з терміналом, організація структури проєкту та швидке переміщення
між файлами [16]. Для дипломного web-проєкту це є важливим, оскільки сайт
складається з кількох сторінок, повторюваних блоків, карток тварин, форм,
навігаційних елементів і стилів.
Арк.
482 ЧДТУ 262214.014 ПЗ
44
Змн. Арк. № Документа Підпис Дата

Рисунок 3.1 – Структура проєкту PawHaven Animal Shelter у середовищі
Visual Studio Code

Для реалізації користувацького інтерфейсу використано бібліотеку
React. Її перевагою є компонентний підхід, за якого сторінки сайту формуються
з окремих незалежних елементів. У межах PawHaven Animal Shelter такими
компонентами є навігаційне меню, картки тварин, кнопки, блоки статистики,
секції сторінок, фільтри, форма зворотного зв’язку, блок мапи та футер.
Компонентна структура дозволяє повторно використовувати однакові
елементи на різних сторінках і спрощує подальше розширення системи [17].
Для побудови web-застосунку може використовуватися Next.js, який є
React-фреймворком для створення повноцінних web-додатків. Його
застосування є доцільним у проєкті, оскільки він дозволяє організовувати
сторінки, маршрути, компоненти та оптимізовану структуру застосунку. У
Арк.
482 ЧДТУ 262214.014 ПЗ
45
Змн. Арк. № Документа Підпис Дата

межах PawHaven Animal Shelter такий підхід дає змогу логічно розділити
сторінки Home, Animals, About і Contact, а також підготувати основу для
подальшого додавання сторінки конкретної тварини, заявки на усиновлення
або адміністративної панелі [18].
Для стилізації інтерфейсу використано Tailwind CSS. Його перевагою є
можливість швидко створювати адаптивний дизайн за допомогою утилітарних
CSS-класів. У web-сайті PawHaven Animal Shelter Tailwind CSS може
застосовуватися для оформлення світлого фону, темно-зелених акцентів,
помаранчевих кнопок дії, карток тварин, форм, блоків статистики, CTA-блоків
і футера. Такий підхід дозволяє підтримувати єдиний стиль сайту та швидко
змінювати зовнішній вигляд окремих елементів без створення великої
кількості окремих CSS-файлів [19].
Для реалізації логіки роботи інтерфейсу використано JavaScript і
TypeScript. JavaScript є основною мовою програмування для створення
інтерактивних web-сторінок, а TypeScript дає змогу доповнити код системою
типів, що полегшує підтримку проєкту та зменшує ймовірність частини
помилок під час розробки [20]. У межах PawHaven Animal Shelter ці засоби
можуть застосовуватися для роботи зі списком тварин, пошуком, фільтрацією,
пагінацією, обробкою подій користувача, перевіркою полів контактної форми
та відображенням відповідних елементів інтерфейсу.
Для маршрутизації між сторінками може використовуватися вбудована
маршрутизація Next.js або React Router. Такий підхід дозволяє організувати
переходи між головною сторінкою, каталогом тварин, сторінкою про притулок
і контактною сторінкою без ускладнення навігації для користувача [21].
Наявність зрозумілої системи маршрутів є важливою для web-сайту притулку,
оскільки користувач повинен швидко переходити до каталогу тварин,
контактів або інформації про організацію.
Для перевірки роботи сайту використовувалися браузерні інструменти
розробника, зокрема Chrome DevTools. Вони дозволяють переглядати
структуру HTML-елементів, перевіряти CSS-стилі, аналізувати повідомлення
Арк.
482 ЧДТУ 262214.014 ПЗ
46
Змн. Арк. № Документа Підпис Дата

в консолі, тестувати адаптивність, контролювати відображення форм і
перевіряти поведінку сторінок під час взаємодії користувача із сайтом [22]. Для
додаткової оцінки якості сторінок може використовуватися Lighthouse, який
допомагає перевіряти продуктивність, доступність, SEO та відповідність web-
сторінок сучасним практикам [23].
Для розміщення готового сайту в мережі Інтернет використано платформу
Vercel. Вона підтримує розгортання сучасних web-додатків і дозволяє швидко
отримати публічне посилання на ресурс [24]. Це є зручним для дипломного
проєкту, оскільки дає змогу перевіряти роботу сайту не лише локально, а й у
реальному браузерному середовищі з різних пристроїв.
Отже, обраний стек технологій є доцільним для реалізації web-сайту
PawHaven Animal Shelter. Поєднання Visual Studio Code, React, Next.js, Tailwind
CSS, JavaScript, TypeScript, інструментів тестування браузера та Vercel
дозволяє створити адаптивний, сучасний і функціонально завершений web-
ресурс, який демонструє основні можливості сайту притулку для тварин.

3.2. Опис програмної реалізації web-сайту PawHaven Animal Shelter

Web-сайт PawHaven Animal Shelter реалізовано як інформаційний web-
ресурс соціального призначення, який надає користувачам доступ до
відомостей про притулок для тварин, каталог доступних тварин, опис процесу
усиновлення та контактну інформацію. Основна ідея сайту полягає в тому, щоб
об’єднати в одному інтерфейсі зручний перегляд тварин, пошук, фільтрацію,
інформацію про місію притулку та можливість швидкого зв’язку з
адміністрацією.
Користувацький інтерфейс побудований за принципом простої та
зрозумілої навігації. У верхній частині сайту розміщено логотип PawHaven,
посилання на сторінки Home, Animals, About, Contact та помітну кнопку Adopt
Now. Така структура дозволяє швидко перейти до основних розділів і не
перевантажує інтерфейс зайвими пунктами меню. Для сайту притулку це є
Арк.
482 ЧДТУ 262214.014 ПЗ
47
Змн. Арк. № Документа Підпис Дата

важливим, оскільки користувач повинен легко знайти тварин для усиновлення,
прочитати інформацію про організацію або звернутися через контактну форму.
Головна сторінка виконує роль презентаційного розділу web-сайту. На
ній розміщено великий hero-блок із заголовком “Find Your Perfect Companion”,
короткий опис і кнопки швидкої дії. Також сторінка містить статистичні
показники, блок із картками тварин, секцію “How Adoption Works”, CTA-блок
для волонтерства або тимчасової опіки та футер. Завдяки такій структурі
користувач одразу розуміє призначення ресурсу та може перейти до перегляду
тварин.

Рисунок 3.2 – Головна сторінка web-сайту PawHaven Animal Shelter

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

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

Рисунок 3.3 – Каталог тварин на сторінці Animals

Сторінка About призначена для ознайомлення користувача з притулком
як організацією. На ній відображається hero-блок із назвою сторінки, секція
місії, блок цінностей і команда притулку. Така структура допомагає
сформувати довіру до ресурсу, оскільки користувач може дізнатися, яку мету
має притулок, яких принципів дотримується та хто бере участь у догляді за
тваринами.
Сторінка Contact створена для забезпечення зворотного зв’язку між
користувачами та адміністрацією притулку. Вона містить контактні картки з
адресою, телефоном, електронною поштою та графіком роботи. Праворуч
розміщено форму “Send us a Message”, яка містить поля для імені користувача,
Арк.
482 ЧДТУ 262214.014 ПЗ
49
Змн. Арк. № Документа Підпис Дата

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

Рисунок 3.5 – Сторінка Contact із формою зворотного зв’язку

Футер сайту виконує допоміжну навігаційну функцію. Він містить
логотип PawHaven, короткий опис притулку, соціальні іконки, швидкі
посилання, категорії тварин і контактну інформацію. Наявність футера на
основних сторінках надає сайту завершеного вигляду й забезпечує доступ до
важливих розділів навіть після перегляду сторінки до кінця.
Таким чином, розроблений web-сайт має кілька основних частин:
презентаційну, інформаційну, каталогову та комунікаційну. Презентаційна
частина представлена головною сторінкою, каталогова — сторінкою Animals,
Арк.
482 ЧДТУ 262214.014 ПЗ
50
Змн. Арк. № Документа Підпис Дата

інформаційна — сторінкою About, а комунікаційна — сторінкою Contact. Така
структура відповідає типовим сценаріям використання сайтів притулків і
дозволяє продемонструвати основні принципи організації соціального web-
ресурсу.

3.3. Організація даних і логіка роботи каталогу тварин

У web-сайті PawHaven Animal Shelter дані організовано у форматі,
зручному для відображення тварин у каталозі, фільтрації та пошуку. Оскільки
сайт має демонстраційний характер і зосереджений на користувацькому
інтерфейсі, інформація про тварин може бути подана у вигляді локального
набору даних або масиву об’єктів у коді проєкту. Такий підхід є доцільним для
дипломної роботи, оскільки він дозволяє показати логіку роботи каталогу без
ускладнення архітектури повноцінною серверною базою даних.
Основними інформаційними сутностями web-сайту є тварина, категорія,
фільтр, контактне повідомлення та сторінковий блок. Сутність «Тварина»
містить ім’я, тип, породу, вік, розмір, статус, фотографію, короткий опис і теги.
Сутність «Категорія» використовується для групування тварин за типами,
наприклад Dogs, Cats, Rabbits і Birds. Сутність «Фільтр» описує параметри, за
якими користувач може звузити список результатів. Сутність «Контактне
повідомлення» містить ім’я користувача, електронну пошту та текст
звернення. Сутність «Сторінковий блок» описує повторювані елементи сайту,
зокрема hero-блок, статистику, картки, форму, футер і CTA-блок.
Під час відкриття сторінки Animals система відображає список
доступних тварин. Користувач може ввести ключове слово у поле пошуку,
після чого інтерфейс оновлює список відповідно до введеного запиту. Якщо
користувач обирає фільтр за типом, розміром або статусом, каталог показує
лише ті картки, які відповідають вибраним параметрам. Така логіка робить
перегляд тварин більш зручним і дозволяє швидко знайти потрібний варіант.
Арк.
482 ЧДТУ 262214.014 ПЗ
51
Змн. Арк. № Документа Підпис Дата

Пагінація використовується для розподілу карток тварин на окремі сторінки.
Це дозволяє уникнути перевантаження інтерфейсу, якщо кількість тварин у
каталозі збільшується. У демонстраційному варіанті пагінація показує
принцип поділу результатів і може бути розширена під час подальшого
розвитку сайту.

Рисунок 3.6 – Схема організації даних web-сайту PawHaven Animal Shelter

У разі подальшого розвитку сайту локальний набір даних може бути
замінено або доповнено серверною частиною та базою даних. Це дозволить
централізовано зберігати інформацію про тварин, оновлювати статуси,
Арк.
482 ЧДТУ 262214.014 ПЗ
52
Змн. Арк. № Документа Підпис Дата

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

3.4. Логіка сторінкових маршрутів і взаємодії користувача із сайтом

У web-сайті PawHaven Animal Shelter взаємодія користувача із системою
може бути описана через логіку сторінкових маршрутів і переходів між
основними розділами. Оскільки проєкт орієнтований на frontend-реалізацію,
основна логіка роботи виконується на стороні клієнта. Це означає, що
переходи між сторінками, відображення каталогу тварин, робота пошуку,
фільтрів і форми повідомлення організовані через інтерфейс сайту.
У межах користувацької частини web-сайту доцільно виділити такі основні
сторінкові маршрути:
– «/» — головна сторінка сайту;
– «/animals» — каталог тварин;
– «/about» — сторінка інформації про притулок;
– «/contact» — контактна сторінка;
– «/animals/» — потенційна сторінка детального перегляду тварини;
– «/adopt» — потенційна сторінка заявки на усиновлення;
Головна сторінка є стартовою точкою взаємодії користувача із сайтом. З
неї користувач може перейти до каталогу тварин за допомогою кнопки Adopt a
Friend або пункту меню Animals. Також з головної сторінки можна перейти до
сторінки About через кнопку Our Story або скористатися футером для переходу
до контактів.
Арк.
482 ЧДТУ 262214.014 ПЗ
53
Змн. Арк. № Документа Підпис Дата

Маршрут «/animals» відповідає за відображення каталогу тварин. На цій
сторінці користувач може переглядати картки, використовувати пошук,
застосовувати фільтри за типом тварини, розміром і статусом. Якщо в
майбутньому буде додано сторінку детального перегляду тварини, натискання
на картку може переводити користувача на маршрут «/animals/».
Маршрут «/about» використовується для перегляду інформації про
організацію. На цій сторінці користувач ознайомлюється з місією притулку,
його цінностями та командою. Цей розділ важливий для формування довіри,
оскільки користувач бачить, що сайт представляє не лише каталог тварин, а й
конкретну організацію з власними принципами роботи.
Маршрут «/contact» відповідає за контактну сторінку. Тут користувач
може переглянути адресу, телефони, електронну пошту, години роботи та
надіслати повідомлення через форму. У разі подальшої реалізації серверної
частини дані з цієї форми можуть передаватися до бази даних або надсилатися
на електронну пошту адміністрації.
Узагальнено логіку взаємодії можна описати так: користувач відкриває
сайт, переходить до потрібного розділу через верхнє меню або кнопки дії,
переглядає інформацію, застосовує пошук чи фільтри, обирає тварину або
надсилає повідомлення. Після виконання дії інтерфейс оновлюється
відповідно до вибраного сценарію.

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

Рисунок 3.7 – Схема взаємодії сторінок web-сайту PawHaven Animal Shelter

Описана логіка маршрутів робить структуру сайту зрозумілою та
підготовленою до подальшого масштабування. У майбутньому до системи
можна додати окремі сторінки тварин, форму заявки на усиновлення,
адміністративну панель, модуль пожертв, особистий кабінет користувача та
систему статусів для тварин.

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

3.5. Тестування web-сайту PawHaven Animal Shelter

Тестування web-сайту є необхідним етапом розробки, оскільки воно
дозволяє перевірити відповідність реалізованої системи поставленим вимогам.
Для PawHaven Animal Shelter тестування було спрямоване на перевірку
коректності роботи сторінок, зручності навігації, відображення карток тварин,
роботи пошуку та фільтрів, функціонування контактної форми, адаптивності,
доступності та стабільності інтерфейсу.
Під час перевірки враховувалися такі напрями: тестування верстки,
функціональне тестування, UX-тестування, адаптивне тестування, перевірка
форми зворотного зв’язку, безпекова оцінка демонстраційної логіки та
тестування продуктивності. Такий підхід дозволяє оцінити не лише технічну
працездатність сайту, а й зручність його використання з погляду звичайного
користувача.
Тестування верстки передбачало перевірку правильності відображення
основних елементів інтерфейсу. Було перевірено наявність логотипу,
верхнього меню, кнопки Adopt Now, hero-блоку, статистики, карток тварин,
фільтрів, сторінки About, контактних карток, форми повідомлення, блоку мапи
та футера. Також оцінювалося коректне розміщення блоків, читабельність
тексту, відповідність кольорів загальному стилю й відсутність візуальних
помилок.
Функціональне тестування було спрямоване на перевірку основних
можливостей сайту. Зокрема, перевірялася робота переходів між сторінками,
відкриття каталогу тварин, пошук за ім’ям або породою, фільтрація за типом і
розміром, перемикання сторінок каталогу, відкриття сторінки About, перехід
до Contact і взаємодія з формою повідомлення.
UX-тестування дозволило оцінити зручність використання сайту. Було
перевірено зрозумілість пунктів меню, логічність структури сторінок,
помітність кнопок, зручність карток тварин, простоту використання фільтрів і
зрозумілість контактної форми. Для сайту притулку це є важливим, оскільки
Арк.
482 ЧДТУ 262214.014 ПЗ
56
Змн. Арк. № Документа Підпис Дата

користувач повинен швидко знайти потрібну тварину або контактну
інформацію без зайвих дій.
Адаптивне тестування передбачало перевірку відображення сайту на
різних пристроях і розмірах екрана. Було оцінено роботу головної сторінки,
каталогу тварин, сторінки About і Contact на екранах комп’ютера, планшета та
смартфона. Особлива увага приділялася коректному відображенню карток
тварин, меню навігації, фільтрів, кнопок, форм і футера. Відсутність
горизонтального прокручування та зручність натискання елементів на
мобільному пристрої є важливими показниками якості адаптивного
інтерфейсу.
Окремо було виконано перевірку контактної форми. Для цього
тестувалося введення імені, електронної пошти та тексту повідомлення. Також
перевірялася логіка натискання кнопки Send Message і правильність
візуального розміщення полів. У разі подальшого розвитку сайту форма може
бути підключена до серверної частини або сервісу електронної пошти.
Безпекова оцінка була спрямована на перевірку того, що контактна форма не
використовується для збереження конфіденційної інформації. Оскільки проєкт
має демонстраційний характер, важливо не позиціонувати таку форму як
повноцінний захищений канал обробки персональних даних без додаткової
серверної логіки. Для реального впровадження системи необхідно було б
реалізувати валідацію на сервері, захист від спаму та безпечне зберігання
звернень.
Тестування продуктивності передбачало перевірку швидкості
завантаження основних сторінок, стабільності роботи фільтрів, реакції
інтерфейсу на дії користувача та відсутності критичних помилок у консолі
браузера. Для цього можуть використовуватися Chrome DevTools і Lighthouse.
Такі інструменти дозволяють оцінити продуктивність сторінки, доступність,
найкращі практики, SEO та загальну якість реалізації web-ресурсу [22; 23].

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

Рисунок 3.8 – Результати тестування web-сайту PawHaven Animal Shelter

За результатами тестування встановлено, що web-сайт PawHaven Animal
Shelter відповідає основним вимогам до демонстраційного інформаційного
ресурсу притулку для тварин. Основні сторінки відображаються коректно,
навігація є зрозумілою, каталог тварин працює відповідно до призначення,
пошук і фільтри спрощують вибір тварини, сторінка About містить інформацію
про організацію, а сторінка Contact забезпечує базову логіку зворотного
зв’язку.
Арк.
482 ЧДТУ 262214.014 ПЗ
58
Змн. Арк. № Документа Підпис Дата

3.6. Порівняння розробленого web-сайту з аналогами

Порівняння розробленого web-сайту з аналогічними рішеннями
дозволяє визначити його переваги та оцінити практичну значущість створеної
системи. У межах дипломної роботи доцільно порівняти PawHaven Animal
Shelter з такими ресурсами, як Petfinder, Adopt a Pet, Happy Paw і UAnimals. Ці
ресурси виконують подібні або частково подібні функції, оскільки надають
інформацію про тварин, підтримують процес усиновлення, містять контактні
дані або допомагають привернути увагу до проблеми безпритульних тварин.
Petfinder має перевагу у вигляді великого каталогу тварин і широкої мережі
притулків. Платформа орієнтована на пошук тварин за різними параметрами,
що робить її корисною для користувачів, які шукають домашнього улюбленця.
Водночас Petfinder є масштабним міжнародним ресурсом, тому його структура
може бути надмірною для користувача, який хоче переглянути сайт
конкретного притулку [25].
Adopt a Pet також має розвинений каталог тварин і зручний пошук.
Перевагою ресурсу є орієнтація на користувача, який хоче знайти тварину за
місцем розташування, породою або іншими параметрами. Проте цей ресурс,
як і Petfinder, є великою платформою, а не сайтом окремого притулку, тому
його функціональність не повністю відповідає задачі представлення
конкретної організації [26].
Happy Paw є українським благодійним фондом, який поєднує допомогу
безпритульним тваринам, опіку над притулками, адопцію та освітню
діяльність. Його перевагою є соціальна спрямованість і робота в українському
контексті. Водночас Happy Paw має ширший благодійний характер, тоді як
PawHaven Animal Shelter зосереджується саме на представленні конкретного
притулку, його тварин, команди, контактів і процесу усиновлення [27].
UAnimals має сильну соціальну та правозахисну спрямованість.
Організація займається допомогою тваринам, підтримкою притулків,
евакуацією та інформаційними кампаніями. Проте цей ресурс не є класичним
Арк.
482 ЧДТУ 262214.014 ПЗ
59
Змн. Арк. № Документа Підпис Дата

каталогом тварин конкретного притулку, тому його функціональність
відрізняється від задач PawHaven Animal Shelter [28].
Перевагою web-сайту PawHaven Animal Shelter є поєднання кількох
функціональних напрямів у межах одного компактного ресурсу. Користувач
може перейти з головної сторінки до каталогу тварин, виконати пошук,
застосувати фільтри, ознайомитися з місією притулку, переглянути команду та
звернутися через контактну форму. Світлий мінімалістичний дизайн із
зеленими й помаранчевими акцентами робить інтерфейс зрозумілим, дружнім
і візуально цілісним.
Водночас необхідно враховувати, що PawHaven Animal Shelter має
демонстраційний характер. На відміну від великих платформ, він не
використовує повноцінну серверну базу даних, реальну систему заявок,
персональний кабінет, оплату пожертв або складну адміністративну панель.
Однак його структура створює основу для подальшого розширення
функціональності.
Отже, розроблений web-сайт не дублює повністю функціональність
великих сервісів з усиновлення тварин, а створює компактне, зрозуміле й
тематично спрямоване середовище для демонстрації діяльності притулку.
Основними перевагами системи є проста структура, адаптивний інтерфейс,
каталог тварин, пошук і фільтрація, сторінка про організацію, контактна форма
та можливість подальшого розвитку.

Висновки до розділу 3

У третьому розділі було розглянуто програмну реалізацію web-сайту
PawHaven Animal Shelter. Було обґрунтовано вибір інструментальних засобів
розробки, зокрема Visual Studio Code, React, Next.js, Tailwind CSS, JavaScript,
TypeScript, інструменти браузерного тестування та Vercel. Обрані технології
дозволили реалізувати адаптивний інтерфейс, організувати компонентну
Арк.
482 ЧДТУ 262214.014 ПЗ
60
Змн. Арк. № Документа Підпис Дата

структуру проєкту, забезпечити зручну навігацію та розгорнути сайт у мережі
Інтернет.
Було описано реалізацію основних сторінок web-сайту: головної
сторінки, каталогу тварин Animals, сторінки About і контактної сторінки
Contact. Кожен розділ виконує окрему функцію та забезпечує логічну
взаємодію користувача із сайтом. Особливу увагу приділено каталогу тварин,
пошуку, фільтрації, карткам, процесу усиновлення, контактній формі та
повторюваним елементам інтерфейсу.
Окремо розглянуто організацію даних і логіку роботи каталогу тварин.
Було визначено основні інформаційні сутності, необхідні для роботи системи:
тварина, категорія, фільтр, контактне повідомлення та сторінковий блок. Така
структура дозволяє реалізувати базові демонстраційні сценарії без
використання повноцінної серверної бази даних.
Також було описано логіку сторінкових маршрутів і взаємодії
користувача із сайтом. Було показано, як користувацькі дії пов’язані з
переходами між сторінками, переглядом каталогу, застосуванням фільтрів і
надсиланням повідомлення. Це дає змогу краще зрозуміти архітектуру
системи та визначити напрями її подальшого масштабування.
У межах розділу було розглянуто тестування web-сайту за кількома
напрямами: перевірка верстки, функціональне тестування, UX-тестування,
адаптивність, перевірка контактної форми, безпекова оцінка демонстраційної
логіки та тестування продуктивності. За результатами тестування встановлено,
що сайт має логічну структуру, коректно відображає основні сторінки,
забезпечує роботу пошуку, фільтрів, каталогу тварин і контактної форми.
Порівняння з аналогами показало, що web-сайт PawHaven Animal Shelter
має практичну цінність завдяки тематичній орієнтації на діяльність притулку,
простому інтерфейсу, каталогу тварин, пошуку, фільтрації, сторінці про
організацію, контактній формі та сучасному світлому дизайну.

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

ВИСНОВКИ

У кваліфікаційній роботі було розроблено web-сайт PawHaven Animal
Shelter, призначений для інформаційної підтримки діяльності притулку для
тварин, перегляду доступних для усиновлення тварин, пошуку та фільтрації
карток, ознайомлення з місією організації, процесом усиновлення та
забезпечення зворотного зв’язку з адміністрацією. Розроблений ресурс
поєднує інформаційні, навігаційні та комунікаційні функції, що дозволяє
використовувати його як сучасний web-сайт соціального призначення.
Під час виконання кваліфікаційної роботи було досягнуто поставленої мети
— спроєктовано та реалізовано web-сайт притулку для тварин PawHaven
Animal Shelter. Для досягнення цієї мети було виконано комплекс
взаємопов’язаних завдань: досліджено предметну область web-ресурсів для
усиновлення тварин, розглянуто особливості роботи сайтів притулків,
виконано аналітичний огляд аналогів, визначено функціональні та
нефункціональні вимоги до сайту, спроєктовано структуру сторінок,
розроблено користувацький інтерфейс, обґрунтовано вибір інструментальних
засобів, реалізовано основні сторінки ресурсу та проведено тестування його
роботи.
У процесі дослідження було встановлено, що web-сайти притулків для
тварин мають важливе значення для організації взаємодії між притулком і
потенційними власниками. Користувачі повинні мати можливість швидко
переглянути доступних тварин, дізнатися їхні основні характеристики,
ознайомитися з умовами усиновлення та звернутися до адміністрації. Саме
тому під час розробки PawHaven Animal Shelter основну увагу було приділено
зрозумілості структури, зручності каталогу тварин, простоті навігації та
наявності контактної форми.
Розроблений web-сайт має логічну та зручну структуру. Основне меню
складається з розділів Home, Animals, About, Contact та кнопки швидкої дії
Adopt Now. Головна сторінка виконує ознайомчу функцію та знайомить
Арк.
482 ЧДТУ 262214.014 ПЗ
62
Змн. Арк. № Документа Підпис Дата

користувача з притулком, його основною ідеєю, статистикою, доступними
тваринами та процесом усиновлення. Сторінка Animals містить каталог
тварин із пошуком, фільтрами, картками та пагінацією. Сторінка About
призначена для представлення місії, цінностей і команди притулку. Сторінка
Contact забезпечує доступ до контактної інформації, форми повідомлення та
блоку мапи.
Особливу увагу було приділено сторінці Animals, оскільки вона є одним із
головних функціональних розділів сайту. Тварини представлені у вигляді
карток, які містять фотографію, ім’я, породу, вік, статус доступності, короткий
опис і тематичні теги. Наявність пошуку за ім’ям або породою, а також
фільтрації за типом тварини та розміром значно покращує зручність
користування каталогом. Завдяки цьому користувач може швидше знайти
тварину, яка відповідає його очікуванням і можливостям догляду.
Важливою складовою сайту є головна сторінка. Вона містить hero-блок із
заголовком “Find Your Perfect Companion”, короткий опис призначення
ресурсу, кнопки швидкої дії, статистичні показники, блок тварин, секцію
“How Adoption Works” та CTA-блок для користувачів, які поки не можуть
усиновити тварину, але можуть допомогти притулку іншим способом. Така
структура дозволяє сформувати позитивне перше враження про ресурс і
швидко зорієнтувати користувача в основних можливостях сайту.
Сторінка About виконує інформаційну та довірчу функцію. У ній подано
місію притулку, опис його діяльності, основні цінності та інформацію про
команду. Це важливо для соціального web-ресурсу, оскільки користувач
повинен не лише переглядати картки тварин, а й розуміти, яку організацію
представляє сайт, які принципи лежать в основі її роботи та хто займається
доглядом за тваринами.
Сторінка Contact забезпечує комунікацію між користувачем і притулком.
Вона містить контактні картки з адресою, телефоном, електронною поштою та
графіком роботи, а також форму “Send us a Message”. Наявність такої форми
дозволяє користувачеві поставити запитання щодо усиновлення,
Арк.
482 ЧДТУ 262214.014 ПЗ
63
Змн. Арк. № Документа Підпис Дата

волонтерства, допомоги або конкретної тварини. Блок мапи доповнює
сторінку та допомагає швидко визначити місце розташування притулку.
Під час проєктування web-сайту було сформовано вимоги до дизайну,
структури сторінок, навігації, наповнення, прототипу та можливостей
подальшого розвитку. Інтерфейс ресурсу виконано у світлому
мінімалістичному стилі з використанням кремового фону, темно-зелених
акцентів і помаранчевих кнопок дії. Така кольорова гама відповідає тематиці
турботи про тварин, створює спокійне візуальне середовище та допомагає
виділити основні елементи взаємодії.
У роботі було обґрунтовано вибір інструментальних засобів розробки. Для
створення сайту використано сучасні web-технології, які дають змогу
реалізувати компонентний підхід, адаптивний дизайн, зручну навігацію та
стабільну роботу сторінок у браузері. Обрані засоби дозволили побудувати
зрозумілу структуру проєкту, реалізувати повторювані елементи інтерфейсу,
такі як навігаційне меню, картки тварин, секції сторінок, кнопки, форми та
футер, а також забезпечити можливість подальшого масштабування ресурсу.
Проведене тестування підтвердило працездатність основних функцій web-
сайту PawHaven Animal Shelter. Було перевірено коректність відображення
головної сторінки, каталогу тварин, сторінок About і Contact, роботу
навігаційного меню, пошуку, фільтрів, пагінації, контактної форми, кнопок і
футера. Також було оцінено адаптивність сайту, зручність використання,
читабельність текстів, помітність основних кнопок і стабільність
відображення сторінок у браузері. Результати тестування показали, що сайт
відповідає поставленим вимогам і може використовуватися як
демонстраційний web-ресурс притулку для тварин.
Порівняння з аналогічними web-ресурсами показало, що розроблений сайт
має низку переваг: просту й зрозумілу структуру, сучасний адаптивний
інтерфейс, каталог тварин із пошуком і фільтрами, сторінку з інформацією про
притулок, контактну форму та візуально цілісний дизайн. На відміну від
великих платформ для пошуку тварин, PawHaven Animal Shelter орієнтований
Арк.
482 ЧДТУ 262214.014 ПЗ
64
Змн. Арк. № Документа Підпис Дата

на представлення конкретного притулку, його мешканців, місії, команди та
контактних можливостей. Це робить ресурс більш компактним, зрозумілим і
зручним для користувача.
Практичне значення одержаних результатів полягає в тому, що розроблений
web-сайт може бути використаний як основа для інформаційної підтримки
діяльності притулку для тварин. Ресурс дозволяє користувачам переглядати
доступних тварин, знаходити потрібні картки за допомогою пошуку та
фільтрів, ознайомлюватися з процесом усиновлення, отримувати контактну
інформацію та надсилати повідомлення адміністрації. Для притулку такий
сайт може стати додатковим каналом комунікації з громадськістю,
потенційними власниками, волонтерами та благодійниками.
У майбутньому web-сайт PawHaven Animal Shelter може бути розширений
за рахунок додавання сторінки детального перегляду тварини, онлайн-заявки
на усиновлення, особистого кабінету користувача, адміністративної панелі,
бази даних, системи бронювання зустрічі, модуля благодійних внесків, email-
сповіщень і системи керування статусами тварин. Таке розширення дозволить
перетворити демонстраційний сайт на повноцінну інформаційну систему для
реальної роботи притулку.
Отже, у результаті виконання кваліфікаційної роботи було створено web-
сайт PawHaven Animal Shelter, який відповідає поставленій меті та основним
вимогам до сучасного web-ресурсу соціального призначення. Розроблений
сайт має зручну структуру, адаптивний дизайн, каталог тварин, пошук,
фільтрацію, сторінку про притулок, контактну форму та блоки для
ознайомлення з процесом усиновлення. Це дає підстави вважати проєкт
функціонально завершеним демонстраційним web-ресурсом, який може бути
використаний як основа для подальшого розвитку інформаційної системи
притулку для тварин.

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

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ

1. Shelter Animals Count. 2024 Statistics. URL:
https://www.shelteranimalscount.org/explore-the-data/statistics-2024/ (дата
звернення: 12.02.2026).
2. ASPCA. U.S. Animal Shelter Statistics. URL:
https://www.aspca.org/helping-shelters-people-pets/us-animal-shelter-
statistics (дата звернення: 12.02.2026).
3. Morrison R. Exploring Factors That Influence Public Engagement of Animal
Shelter Content. URL: https://pmc.ncbi.nlm.nih.gov/articles/PMC11590987/
(дата звернення: 18.02.2026).
4. PawHaven — Animal Shelter. Розроблений web-сайт. URL: https://v0-
animal-shelter-ui.vercel.app/ (дата звернення: 02.06.2026).
5. Petfinder. Find Your New Best Friend and Adopt a Pet. URL:
https://www.petfinder.com/ (дата звернення: 24.02.2026).
6. Adopt a Pet. Adopt a dog or cat today. URL: https://www.adoptapet.com/
(дата звернення: 24.02.2026).
7. Happy Paw. Charity Fund for homeless cats and dogs. URL:
https://happypaw.ua/en (дата звернення: 03.03.2026).
8. UAnimals. Animal rights organisation in Ukraine. URL:
https://uanimals.org/en/ (дата звернення: 03.03.2026).
9. UAnimals. About our Project. URL: https://uanimals.org/en/about-us/ (дата
звернення: 05.03.2026).
10. React Documentation. Describing the UI. URL:
https://react.dev/learn/describing-the-ui (дата звернення: 12.03.2026).
11. React Documentation. Your First Component. URL:
https://react.dev/learn/your-first-component (дата звернення: 12.03.2026).
12. Next.js Documentation. URL: https://nextjs.org/docs (дата звернення:
18.03.2026).
Арк.
482 ЧДТУ 262214.014 ПЗ
66
Змн. Арк. № Документа Підпис Дата

13. Tailwind CSS Documentation. Styling with utility classes. URL:
https://tailwindcss.com/docs/styling-with-utility-classes (дата звернення:
24.03.2026).
14. Tailwind CSS. Rapidly build modern websites without ever leaving your
HTML. URL: https://tailwindcss.com/ (дата звернення: 24.03.2026).
15. JavaScript. MDN Web Docs. URL: https://developer.mozilla.org/en-
US/docs/Web/JavaScript (дата звернення: 01.04.2026).
16. TypeScript Documentation. URL: https://www.typescriptlang.org/docs/
(дата звернення: 01.04.2026).
17. TypeScript: JavaScript With Syntax For Types. URL:
https://www.typescriptlang.org/ (дата звернення: 04.04.2026).
18. Visual Studio Code Documentation. URL: https://code.visualstudio.com/docs
(дата звернення: 09.04.2026).
19. Visual Studio Code. The open source AI code editor. URL:
https://code.visualstudio.com/ (дата звернення: 09.04.2026).
20. Vercel Documentation. URL: https://vercel.com/docs (дата звернення:
16.04.2026).
21. Next.js by Vercel. The React Framework. URL: https://nextjs.org/ (дата
звернення: 18.04.2026).
22. React Router Documentation. URL: https://reactrouter.com/ (дата
звернення: 23.04.2026).
23. Chrome DevTools Documentation. URL:
https://developer.chrome.com/docs/devtools (дата звернення: 30.04.2026).
24. Lighthouse Documentation. Introduction to Lighthouse. URL:
https://developer.chrome.com/docs/lighthouse/overview (дата звернення:
30.04.2026).
25. MDN Web Docs. Media query fundamentals. URL:
https://developer.mozilla.org/en-
US/docs/Learn_web_development/Core/CSS_layout/Media_queries (дата
звернення: 06.05.2026).
Арк.
482 ЧДТУ 262214.014 ПЗ
67
Змн. Арк. № Документа Підпис Дата

26. W3C. Web Content Accessibility Guidelines 2.2. URL:
https://www.w3.org/TR/WCAG22/ (дата звернення: 08.05.2026).
27. MDN Web Docs. Web Storage API. URL: https://developer.mozilla.org/en-
US/docs/Web/API/Web_Storage_API (дата звернення: 13.05.2026).
28. MDN Web Docs. HTML: HyperText Markup Language. URL:
https://developer.mozilla.org/en-US/docs/Web/HTML (дата звернення:
15.05.2026).
29. MDN Web Docs. CSS: Cascading Style Sheets. URL:
https://developer.mozilla.org/en-US/docs/Web/CSS (дата звернення:
15.05.2026).
30. Google Maps Help. Use Google Maps on your computer. URL:
https://support.google.com/maps/answer/144349 (дата звернення:
22.05.2026)

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

ДОДАТОК А
Лістинг програмного коду файлу page.tsx

import Image from 'next/image'
import Link from 'next/link'
import { ArrowRight, Heart, Home, Shield } from 'lucide-react'
import { featuredAnimals } from '@/lib/data'
import AnimalCard from '@/components/animal-card'
import Navbar from '@/components/navbar'
import Footer from '@/components/footer'

const stats = [
{ value: '1,400+', label: 'Animals rehomed' },
{ value: '320+', label: 'Volunteer hours/month' },
{ value: '98%', label: 'Adoption success rate' },
{ value: '16', label: 'Years of service' },
]

const steps = [
{
icon: Heart,
title: 'Browse & Choose',
description: 'Explore our animals, filter by type or size, and find the one who speaks to your
heart.',
},
{
icon: Shield,
title: 'Meet & Greet',
description: 'Schedule a visit to spend time together and make sure it is a perfect match.',
},
{
icon: Home,
title: 'Welcome Home',
Арк.
482 ЧДТУ 262214.014 ПЗ
69
Змн. Арк. № Документа Підпис Дата

description: 'Complete the simple adoption process and give your new companion a loving
forever home.',
},
]

export default function HomePage() {
return (
<div className="min-h-screen bg-background">
<Navbar />

{/* Hero Section */}
<section className="relative min-h-[90vh] flex items-center overflow-hidden">
<div className="absolute inset-0">
<Image
src="/images/hero-animals.jpg"
alt="A golden retriever and tabby cat sitting together in a sunlit garden"
fill
className="object-cover"
priority
/>
<div className="absolute inset-0 bg-foreground/50" />
</div>

<div className="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
<div className="max-w-2xl">
<span className="inline-block bg-accent text-accent-foreground text-xs font-bold
uppercase tracking-widest px-4 py-1.5 rounded-full mb-6">
PawHaven Shelter
</span>
<h1 className="font-serif font-bold text-5xl sm:text-6xl lg:text-7xl text-primary-
foreground leading-tight text-balance mb-6">
Find Your Perfect Companion
</h1>
<p className="text-lg sm:text-xl text-primary-foreground/80 leading-relaxed mb-10
max-w-xl">
Арк.
482 ЧДТУ 262214.014 ПЗ
70
Змн. Арк. № Документа Підпис Дата

Hundreds of loving animals are waiting for a family just like yours. Take the first step
— adopt a friend today.
</p>
<div className="flex flex-wrap items-center gap-4">
<Link
href="/animals"
className="inline-flex items-center gap-2 bg-primary text-primary-foreground px-7
py-3.5 rounded-full font-bold text-base hover:opacity-90 transition-opacity shadow-lg"
>
Adopt a Friend
<ArrowRight className="w-5 h-5" />
</Link>
<Link
href="/about"
className="inline-flex items-center gap-2 bg-primary-foreground/15 backdrop-blur-
sm text-primary-foreground border border-primary-foreground/30 px-7 py-3.5 rounded-full font-
bold text-base hover:bg-primary-foreground/25 transition-colors"
>
Our Story
</Link>
</div>
</div>
</div>
</section>

{/* Stats Bar */}
<section className="bg-primary">
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
{stats.map((stat) => (
<div key={stat.label}>
<div className="font-serif font-bold text-3xl text-primary-
foreground">{stat.value}</div>
<div className="text-sm text-primary-foreground/70 mt-1">{stat.label}</div>
</div>
Арк.
482 ЧДТУ 262214.014 ПЗ
71
Змн. Арк. № Документа Підпис Дата

))}
</div>
</div>
</section>

{/* Featured Animals */}
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto">
<div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-12">
<div>
<span className="text-primary font-bold text-sm uppercase tracking-widest">Meet our
residents</span>
<h2 className="font-serif font-bold text-4xl text-foreground mt-2 text-balance">
Looking for a Home
</h2>
</div>
<Link
href="/animals"
className="inline-flex items-center gap-2 text-primary font-semibold hover:underline
shrink-0"
>
View all animals <ArrowRight className="w-4 h-4" />
</Link>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
{featuredAnimals.map((animal) => (
<AnimalCard key={animal.id} animal={animal} />
))}
</div>
</section>

{/* How it Works */}
<section className="bg-shelter-beige py-20 px-4 sm:px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-14">
Арк.
482 ЧДТУ 262214.014 ПЗ
72
Змн. Арк. № Документа Підпис Дата

<span className="text-primary font-bold text-sm uppercase tracking-widest">Simple
process</span>
<h2 className="font-serif font-bold text-4xl text-foreground mt-2">How Adoption
Works</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{steps.map((step, i) => {
const Icon = step.icon
return (
<div key={step.title} className="bg-card rounded-2xl p-8 shadow-sm border border-
border text-center">
<div className="w-16 h-16 rounded-full bg-shelter-green-light flex items-center
justify-center mx-auto mb-5">
<Icon className="w-7 h-7 text-primary" />
</div>
<div className="text-4xl font-serif font-bold text-primary/20 mb-2">0{i + 1}</div>
<h3 className="font-bold text-lg text-foreground mb-2">{step.title}</h3>
<p className="text-sm text-muted-foreground leading-
relaxed">{step.description}</p>
</div>
)
})}
</div>
</div>
</section>

{/* CTA Banner */}
<section className="py-20 px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto">
<div className="bg-foreground rounded-3xl p-10 sm:p-14 flex flex-col lg:flex-row items-
center justify-between gap-8">
<div className="max-w-xl text-center lg:text-left">
<h2 className="font-serif font-bold text-3xl sm:text-4xl text-primary-foreground text-
balance leading-snug">
Can&apos;t adopt right now? You can still help.
</h2>
Арк.
482 ЧДТУ 262214.014 ПЗ
73
Змн. Арк. № Документа Підпис Дата

<p className="mt-4 text-primary-foreground/70 leading-relaxed">
Volunteer your time, donate supplies, or become a foster carer. Every small act of
kindness changes a life.
</p>
</div>
<div className="flex flex-wrap gap-3 justify-center">
<Link
href="/contact"
className="px-7 py-3.5 bg-accent text-accent-foreground rounded-full font-bold text-
sm hover:opacity-90 transition-opacity shadow-md"
>
Volunteer
</Link>
<Link
href="/contact"
className="px-7 py-3.5 bg-primary-foreground/10 text-primary-foreground border
border-primary-foreground/20 rounded-full font-bold text-sm hover:bg-primary-foreground/20
transition-colors"
>
Foster a Pet
</Link>
</div>
</div>
</section>

<Footer />
</div>
)
}

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

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