ChSTU repository
ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets
Learn More
Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/7845| Title: | ДИЗАЙН-ПРОЄКТ САЙТУ ЧДТУ (АНГЛІЙСЬКА ВЕРСІЯ) |
| Authors: | Кудревич, Вікторія Валеріївна Руденко, Юрій Володимирович |
| Keywords: | графічний дизайн;дизайн сайту;анімація;графіка |
| Issue Date: | Jun-2024 |
| Abstract: | ДИЗАЙН-ПРОЄКТ САЙТУ ЧДТУ (АНГЛІЙСЬКА ВЕРСІЯ).Актуальність вибраної теми полягає в зручному та функціональному створенні веб сайту, який може допомогти підвищити престиж та репутацію університету та надати легке і зрозуміле користування інтерфейсом для студентів, викладачів, абітурієнтів та інших зацікавлених сторін. Сучасні студенти активно використовують Інтернет для пошуку інформації про університети, їх програми, події та інші аспекти. Гарний веб-сайт може сприяти залученню нових студентів та збільшити конкурентоспроможність університету на ринку освіти. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/7845 |
| Appears in Collections: | 022 Дизайн (Графічний дизайн) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| запискаРуденко2024.pdf Restricted Access | 1.34 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
ЧЕРКАСЬКИЙ CHERCASSУ
ДЕРЖАВНИЙ STATE
ТЕХНОЛОГІЧНИЙ TECHNOLOGICAL
УНІВЕРСИТЕТ UNIVERSITУ
Фaкультeт гуманітарних
тexнoлoгiй
Кaфeдpa дизaйну
Освітня програма – «Графічний дизайн»
Cпeцiaльнicть 022 – Дизaйн
КВAЛIФIКAЦIЙНA POБOТA БAКAЛAВPA
нa тeму: «ДИЗАЙН-ПРОЄКТ САЙТУ ЧДТУ (АНГЛІЙСЬКА ВЕРСІЯ)»
Cтудeнт гpупи ДЗ-01 Юрій РУДЕНКО
Кepiвник виклaдaч Вікторія КУДРЕВИЧ
«Допуск до захисту»
Завідувач кафедри дизайну
Інна ЯКОВЕЦЬ
2024рік
Черкаси 2024
2
Черкаський державний технологічний університет
(назва вузу)
Кафедра дизайну
Факультет гуманітарних технологій
Спеціальність 022 –Дизайн
Освітня програма «Графічний дизайн»
«ЗАТВЕРДЖУЮ»
Завідувач кафедри
дизайну Інна ЯКОВЕЦЬ
„ ” 2024р.
ЗАВДАННЯ
на виконання кваліфікаційної роботи бакалавра
_________________Руденко Юрію Володимировичу __________________
(прізвище, ім’я, по батькові)
1. Тема роботи «Дизайн-проєкт сайту ЧДТУ (Англійська версія)»
затверджена наказом по університету від «_________»_____р. №____________
2. Термін здачі студентом бакалаврату закінченої роботи 03.06.2024
Вихідні дані:
Зміст кваліфікаційної роботи:
ВСТУП. РОЗДІЛ 1.ПEPEДПPOEКТНI ДOCЛIДЖEННЯ САЙТІВ
1.1. Історія винекнення сайтів. Види та класифікація.
1.2. Сучасні тенденції у веб-дизайні.
1.3. Аналіз аналогів та визначення цільової аудиторії.
РОЗДІЛ 2. ОПИС ТА ОБҐРУНТУВАННЯ ДИЗАЙН
ПРОПОЗИЦІЇ САЙТУ ЧДТУ
2.1 Визначення функціональних вимог до сайта.
2.2 Вибір кольорової гами та стилістичних рішень.
2.3 Обґрунтування вибору технологій та інструментів
для створення сайту.
РОЗДІЛ 3. ДИЗАЙНЕРСЬКЕ РІШЕННЯ ПРОЄКТУ САЙТУ ЧДТУ
(АНГЛІЙСЬКА ВЕРСІЯ)
3.1. Аналіз сайту ЧДТУ. Постанова проблематики.
3.2. Розробка концепції дизайн проєкту.
3.3. Створення прототипів основних сторінок сайту.
ВИСНОВОК
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
ДОДАТКИ
Графічна частина дипломного проекту – банер розміром 1590×2300 мм.
3
Консультанти з наукової дипломної роботи із зазначенням розділів, що
їх стосуються
Підпис, дата
Розділ Консультант завдання завдання
видав прийняв
Графічна частина Кудревич В.В.
Пояснювальна записка Кудревич В.В.
Робота в матеріалі Кудревич В.В.
6. Дата видачі завдання______________________________________
КАЛЕНДАРНИЙ ПЛАН
Термін
№ Назва етапів дипломного виконання
Примітка
з/п проекту (роботи) етапів проекту
(роботи)
1. Затвердження теми роботи, 13.02.2024
керівника.
2. Робота з аналогами, збір Лютий 2024
інформації.
3. Заслуховування про виконання Березень 2024
першого етапу роботи.
4. Звіт про перші два розділи Квітень 2024
магістерської роботи.
5. Затвердження ідеї Травень 2024
дизайнерського рішення
проекту
6. Попередній захист 15.05.24
кваліфікаційної
роботи
7. Робота в матеріалі Травень 2024
8. Захист випускної роботи Червень 2024
магістра.
Керівник Вікторія КУДРЕВИЧ
(підпис)
Завдання прийняв до виконання____________
(підпис)
4
ЗМІСТ
ВСТУП ………………………………………………………………………….10
POЗДIЛ 1. ПEPEДПPOEКТНI ДOCЛIДЖEННЯ САЙТІВ
1.1. Історія винекнення сайтів. Види та класифікація…………………….…..10
1.2. Сучасні тенденції у веб-дизайні…………………………………………...10
1.3. Аналіз аналогів та визначення цільової аудиторії …………………..…...10
РОЗДІЛ 2. ОПИС ТА ОБҐРУНТУВАННЯ ДИЗАЙН
ПРОПОЗИЦІЇ САЙТУ ЧДТУ
2.1 Визначення функціональних вимог до сайта………………………..…….10
2.2 Вибір кольорової гами та стилістичних рішень…………………………...10
2.3 Обґрунтування вибору технологій та інструментів
для створення сайту……………………………………………………………..10
РОЗДІЛ 3. ДИЗАЙНЕРСЬКЕ РІШЕННЯ ПРОЄКТУ САЙТУ ЧДТУ
(АНГЛІЙСЬКА ВЕРСІЯ)
3.1. Аналіз та проблематика сайту ЧДТУ……………………………………..10
3.2. Розробка концепції дизайн проєкту……………………………………….10
3.3. Створення прототипів основних сторінок сайту…………………………10
ВИСНОВОК…………………………………………………………………….10
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ…………………………………....10
ДОДАТКИ……………………………………………………….……………...10
5
ВCТУП
У сучасному світі, коли технології розвиваються надзвичайно швидкими
темпами, наявність функціонального та привабливого веб-сайту стає критично
важливою для будь-якої сфери, зокрема і сфера освіти. Важливо, щоб установи
вищої освіти мали власні сучасні та зручні веб-сайти, які дозволяють
забезпечити легкий доступ до інформації про університет, його програми та
послуги.
Актуальність вибраної теми полягає в зручному та функціональному
створенні веб сайту, який може допомогти підвищити престиж та репутацію
університету та надати легке і зрозуміле користування інтерфейсом для
студентів, викладачів, абітурієнтів та інших зацікавлених сторін. Сучасні
студенти активно використовують Інтернет для пошуку інформації про
університети, їх програми, події та інші аспекти. Гарний веб-сайт може
сприяти залученню нових студентів та збільшити конкурентоспроможність
університету на ринку освіти.
Однією з ключових проблем, з якими стикаються користувачі багатьох
освітніх сайтів, є проблематика навігації. ЧДТУ не є винятком. Сучасні
користувачі очікують від веб-сайту не лише естетичної привабливості, але й
інтуїтивно зрозумілої структури, яка дозволить швидко і легко знайти
необхідну інформацію. Недосконала навігація може призводити до втрати
потенційних абітурієнтів, негативного досвіду користувачів та зниження
загальної ефективності сайту.
Мета роботи бакалавра полягає у створенні сучасного, функціонального
та естетично привабливого веб-сайту для Черкаського державного
технологічного університету (ЧДТУ), який би забезпечив високу
функціональність, привабливість та зручність використання для широкої
аудиторії. Дослідження сучасних тенденцій у веб-дизайні показує, що
користувачі надають перевагу мінімалістичним та чистим дизайнам, де
інформація розташована логічно та послідовно. Використання адаптивного
6
дизайну, який дозволяє коректно відображатися на різних пристроях, також є
невід'ємною частиною сучасного веб-дизайну.
Для досягнення поставленої мети необхідно:
- здійснити аналіз аналогів та тенденцій сучасного веб дизайну;
- визначити коло споживачів;
- сформувати концепцію на основі рішень кольористики та
функціональності сайту;
- створити прототипи сторінок сайту.
7
POЗДIЛ 1. ПEPEДПPOEКТНI ДOCЛIДЖEННЯ САЙТІВ
1.1. Історія винекнення сайтів. Види та класифікація.
Батьком першого у світі сайту є фізик Тім Бернерс-Лі, який працював у
Європейській організації ядерних досліджень (CERN) у Женеві. У березні
1989 року він запропонував ідею передачі даних через гіпертекст за
допомогою глобальної мережі Інтернет. Уже в 1990 році він створив перший
сайт з адресою info.cern.ch, де було детально описано абсолютно нову на той
час технологію WWW (World Wide Web). Вона базувалася на інтернет-
адресації URL, протоколі передачі даних HTTP та мові розмітки HTML.
Задовго до створення першого сайту, у 1980 році, Бернерс-Лі розробив
систему Enquire для заснування єдиного інформаційного простору, що
об'єднує Інтернет, комп'ютери користувачів та гіпертекст. Завдяки принципу
випадкових асоціацій ця система дозволяла не лише переглядати інформацію
на web-сторінках, але й зв'язувати їх між собою гіперпосиланнями,
забезпечуючи легкий доступ до даних. Щоб продемонструвати цю новинку,
він запропонував співробітникам CERN розміщувати файли з гіпертекстом,
пов'язані гіперпосиланнями, що надало їм доступ до можливостей Глобальної
мережі та внутрішнього пошуку по документах. Перший сайт, info.cern.ch,
працював на ПК NeXT і став першим веб-сервером у світі. На першій веб-
сторінці було розміщено інформацію про проект інтернет-браузера WWW,
технічні деталі створення інших веб-сторінок, дані про гіпертекст, а також
докладні інструкції щодо пошуку інформації в Інтернеті, інсталяції браузерів
та серверів. Перший сайт став своєрідним Інтернет-каталогом, де Бернерс-Лі
публікував список посилань на нові сайти. З 1991 року веб-сервери почали
поширюватися по іншим європейським установам, а незабаром і в США, де
перший сервер з'явився в Стенфордському центрі лінійного прискорювача
(SLAC). Якщо на кінець 1992 року у світі було лише 26 відомих веб-серверів,
то у жовтні 1993 року їх кількість зросла до 200. ПК NeXT, на якому працював
Бернерс-Лі, був представлений у CERN на виставці Microcosm як перший у
8
світі веб-сервер, веб-редактор та гіпермедіа браузер. Стандарт WWW було
офіційно визнано у Женеві в травні 1991 року, а Тім Бернерс-Лі отримав
почесне звання «батька» ключових веб-технологій: URI/URL, HTTP, HTML.
Хоча Інтернет став широко відомим значно пізніше, його теоретичні основи
були закладені ще у 1940-х роках вченим Ванневаром Бушем, який
запропонував використання технічних пристроїв для розширення
можливостей людської пам'яті та індексації всіх накопичених даних. Теорію
гіпертексту вперше розробили Даг Енгельбарт та Теодор Нельсон, який
створював систему Xanadu для зберігання текстових даних і пошуку по них за
допомогою «вікон» та взаємозв'язків. Нині Тім Бернерс-Лі очолює власний
Консорціум Всесвітньої Павутини (WWW Consortium), що спеціалізується на
розробці та впровадженні нових інтернет-стандартів [2].
Офіційної класифікації сайтів в Інтернеті немає, проте існують основні
характеристики, за якими їх можна розділити. Найпоширенішими типами
сайтів є:
- сайт-візитка - це базовий набір інформації про фірму, який містить
контактні дані та інформацію про діяльність компанії. Він повинен бути
коротким і інформативним, не перевантаженим зайвими деталями, які можуть
бути непотрібними для потенційного клієнта чи партнера.
- корпоративний сайт - це більш розширене представництво компанії в
Інтернеті, яке допомагає формувати позитивний імідж, залучати нових
клієнтів і розширювати ринок збуту. Такий сайт надає інформацію про товари
і послуги в зручному форматі.
- сайт-вітрина - це економічний варіант реклами для компанії, який
ідеально підходить для продажу одного конкретного товару або групи товарів.
Він містить всю необхідну інформацію для зацікавлення клієнта та здійснення
покупки.
- промо-сайт - це ефективний рекламний інструмент для просування
окремого товару, послуги або події. Такий сайт виконує функцію рекламного
9
проспекту і може містити до 10 сторінок з інформацією про компанію, акції,
умови участі та інші деталі.
- інтернет-магазин - на відміну від сайту-вітрини, дозволяє клієнту не
тільки переглядати товари, але й робити замовлення, вибирати варіанти оплати
і доставки. Він повинен бути зручним і функціональним, щоб відвідувач міг
легко знайти потрібний товар, додати його в кошик і оформити покупку.
Також сайти можна класифікувати за доступністю сервісів, фізичним
розташуванням, призначенням і складністю. За доступністю сервісів сайти
поділяють на: відкриті (усі сервіси доступні для будь-яких відвідувачів),
напіввідкриті (для доступа потрібна реєстрація) та закриті (доступні лише для
вузького кола осіб, як-от корпоративні сайти або особисті сайти). За фізичним
розташуванням сайти поділяють на зовнішні (доступні з Інтернету) і
внутрішні (доступні тільки з локальної мережі). Прикладом внутрішнього
сайту може бути корпоративний сайт підприємства або приватний сайт в
локальній мережі провайдера.
За призначенням сайти поділяють на:
- бізнес-сайти (містять інформацію про компанії та їхні послуги,
підтримують електронну торгівлю);
- інформаційні сайти (призначені для поширення новин, тематичних
матеріалів, енциклопедій, словників);
- сайти соціальних мереж (інтерактивні багатокористувацькі сайти, що
дозволяють користувачам спілкуватися і ділитися контентом);
- веб-портали (універсальні сайти, через які можна отримати доступ до
інших ресурсів Інтернету);
- сайти сервісів (сайти пошукових систем, поштові сайти, веб-форуми,
онлайнові сховища даних, сайти для обробки і зберігання фотографій, відео
тощо) [3].
10
1.2. Сучасні тенденції у веб-дизайні
Веб-дизайн є динамічною сферою, яка постійно змінюється під впливом
нових технологій, змін у поведінці користувачів та естетичних тенденцій.
Аналіз сучасних тенденцій у веб-дизайні є важливим етапом передпроектних
досліджень, оскільки дозволяє створити сайт, який не лише відповідає
актуальним вимогам, але й випереджає очікування користувачів [1].
Серед сучасних тенденцій можна виділити:
1. Мінімалізм та простота: Однією з найбільш помітних тенденцій
останніх років є мінімалізм. Простота та чистота дизайну дозволяють
зосередити увагу користувача на основній інформації та покращують
загальний досвід взаємодії з сайтом. Мінімалістичний дизайн включає
використання великої кількості білого простору, простих кольорових палітр,
лаконічних типографічних рішень та відсутність зайвих графічних елементів.
Це сприяє швидкому завантаженню сторінок та знижує когнітивне
навантаження на користувача.
2. Адаптивний дизайн: З розвитком мобільних технологій та зростанням
кількості користувачів, які заходять на сайти з мобільних пристроїв,
адаптивний дизайн став стандартом у веб-розробці. Адаптивний дизайн
забезпечує коректне відображення сайту на будь-яких пристроях, включаючи
смартфони, планшети та комп’ютери. Це важливо не лише з точки зору
користувацького досвіду, але й для пошукової оптимізації, оскільки пошукові
системи надають перевагу сайтам, оптимізованим для мобільних пристроїв.
3. Темний режим: Темний режим став популярним трендом у веб-
дизайні завдяки своїм естетичним та практичним перевагам. Він не лише
виглядає стильно, але й знижує навантаження на очі при тривалому
використанні сайту, особливо в умовах низького освітлення. Темний режим
також допомагає економити енергію на пристроях з OLED-дисплеями.
Важливо надати користувачам можливість вибору між світлим та темним
режимами, що підвищить їх задоволеність використанням сайту.
11
4. Мікровзаємодії: Мікровзаємодії – це невеликі анімаційні ефекти, які
додаються до елементів інтерфейсу для покращення взаємодії користувачів з
сайтом. Вони можуть включати анімацію кнопок при наведенні,
підтвердження дій користувача, плавні переходи між сторінками та інші
ефекти, які роблять використання сайту більш інтуїтивним та приємним.
Мікровзаємодії допомагають покращити користувацький досвід, додаючи
елемент гри та інтерактивності до взаємодії з сайтом.
5. Великий та виразний текст: Типографіка відіграє ключову роль у веб-
дизайні, оскільки текст залишається основним носієм інформації на більшості
сайтів. Сучасні тенденції включають використання великого та виразного
тексту, який привертає увагу користувачів та забезпечує легкість читання.
Чіткі та контрастні шрифти, а також розумне використання заголовків і
підзаголовків допомагають структурувати інформацію та полегшують її
сприйняття.
6. Інтерактивні елементи та анімації: Використання анімацій та
інтерактивних елементів стає все більш популярним у веб-дизайні. Вони
допомагають зробити сайт більш динамічним та привабливим для
користувачів. Анімації можуть бути використані для привернення уваги до
важливих елементів, покращення навігації та створення загальної позитивної
атмосфери. Важливо, щоб анімації були легкими та ненав'язливими, щоб не
відволікати користувачів від основної інформації.
7. Персоналізація контенту: Персоналізація стає важливим елементом
сучасного веб-дизайну. Вона дозволяє адаптувати контент сайту під потреби
та інтереси окремих користувачів, що значно підвищує їх залученість та
задоволеність. Для цього можуть використовуватися різні інструменти, такі як
рекомендаційні системи, персоналізовані повідомлення та динамічний
контент, який змінюється в залежності від поведінки користувача. Отже,
сучасні тенденції у веб-дизайні спрямовані на покращення користувацького
досвіду шляхом використання мінімалістичного підходу, адаптивного
дизайну, інтерактивних елементів та персоналізації контенту. Врахування цих
12
тенденцій при розробці нового сайту ЧДТУ дозволить створити привабливий
та функціональний ресурс, який відповідатиме очікуванням користувачів та
сприятиме підвищенню репутації університету [4].
1.3. Аналіз аналогів та визначення цільової аудиторії
Розробка ефективного та привабливого веб-сайту неможлива без
глибокого розуміння потреб та очікувань його потенційних користувачів. Для
забезпечення максимального задоволення потреб цільової аудиторії сайту
ЧДТУ, необхідно провести детальне дослідження користувацьких вимог та
очікувань. Це дослідження дозволить ідентифікувати основні проблеми, з
якими стикаються користувачі поточного сайту, та визначити шляхи їх
вирішення у новому дизайні.
Методи дослідження.
Для дослідження користувацьких вимог та очікувань можна
використовувати кілька методів, які забезпечать отримання як якісних, так і
кількісних даних:
- Анкетування та опитування.
Анкетування є одним з найефективніших способів збору даних про
користувачів. Створення анкети, яка включатиме питання щодо поточного
використання сайту, задоволеності його функціональністю, навігацією,
дизайном та іншими аспектами, дозволить зібрати цінну інформацію від
великої кількості користувачів. Опитування можна проводити як онлайн,
розміщуючи анкети на сайті університету та в соціальних мережах, так і
офлайн серед студентів та викладачів.
- Фокус-групи.
Фокус-групи дозволяють отримати глибше розуміння поведінки та
очікувань користувачів шляхом безпосередньої взаємодії з ними. Залучення
представників різних категорій користувачів (студенти, викладачі,
адміністративний персонал, абітурієнти) до обговорення проблем поточного
13
сайту та очікувань від нового дизайну допоможе виявити ключові проблеми
та запропонувати шляхи їх вирішення.
- Аналіз поведінкових даних.
Аналіз даних про поведінку користувачів на поточному сайті може дати
багато корисної інформації. Використання інструментів веб-аналітики, таких
як Google Analytics, дозволяє визначити, які сторінки найбільш відвідувані, де
користувачі проводять найбільше часу, на яких етапах вони залишають сайт
тощо. Це допоможе виявити слабкі місця поточного дизайну та структури
сайту.
Ключові аспекти дослідження.
- Зручність навігації.
Однією з найважливіших вимог користувачів до веб-сайту є зручність
навігації. Користувачі повинні мати можливість швидко та легко знаходити
необхідну інформацію. Тому, в рамках дослідження, важливо з’ясувати,
наскільки поточна навігаційна структура сайту задовольняє потреби
користувачів, які розділи та сторінки викликають найбільші труднощі та як
можна покращити навігацію у новому дизайні.
Функціональність та інтерактивність.
Сучасні користувачі очікують від веб-сайтів не лише статичної
інформації, але й інтерактивних елементів, які дозволяють взаємодіяти з
контентом. Це можуть бути онлайн-форми для подачі документів,
інтерактивні карти, калькулятори вартості навчання, чат-боти для
консультацій тощо. Важливо дослідити, які інтерактивні функції є найбільш
затребуваними серед користувачів сайту ЧДТУ.
Доступність та адаптивність.
Доступність веб-сайту для людей з обмеженими можливостями та його
коректне відображення на різних пристроях є важливими аспектами, які
впливають на загальний користувацький досвід. Потрібно дослідити,
наскільки поточний сайт відповідає стандартам доступності (WCAG) та
вимогам адаптивного дизайну, і які покращення необхідні у новій версії сайту.
14
Естетичні уподобання.
Естетика сайту має значний вплив на перше враження користувачів та їх
бажання продовжувати використовувати сайт. Важливо з'ясувати, які
стилістичні рішення (кольорова гама, типографіка, візуальні ефекти)
найбільше приваблюють цільову аудиторію ЧДТУ. Це можна зробити шляхом
тестування різних дизайн-концепцій та збирання зворотного зв’язку від
користувачів.
Результати дослідження
Зібрані дані дозволять створити детальний профіль користувачів сайту
ЧДТУ, визначити їх основні потреби та очікування. Це стане основою для
розробки нового дизайну сайту, який буде максимально орієнтованим на
користувача. Результати дослідження також дозволять визначити пріоритетні
напрямки для покращення функціональності, навігації, естетики та
доступності сайту. Отже, дослідження користувацьких вимог та очікувань є
критичним етапом у процесі розробки веб-сайту. Воно дозволяє не лише
зрозуміти поточні проблеми та потреби користувачів, але й створити такі
рішення, які зроблять сайт ЧДТУ зручним, функціональним та привабливим
для всіх категорій користувачів.
1.3. Огляд конкурентів: аналіз успішних прикладів сайтів ВНЗ.
Аналіз веб-сайтів інших вищих навчальних закладів (ВНЗ) є важливим
етапом передпроектних досліджень, оскільки дозволяє виявити найкращі
практики, визначити конкурентні переваги та знайти натхнення для створення
інноваційного дизайну сайту ЧДТУ. У цьому розділі ми розглянемо успішні
приклади сайтів ВНЗ, які відрізняються високою функціональністю,
привабливим дизайном та зручністю використання.
Методологія аналізу.
Для аналізу конкурентів було обрано кілька провідних університетів, як
українських, так і міжнародних, які мають добре розроблені веб-сайти.
Основна увага приділялася таким аспектам:
15
- Навігація та структура сайту
- Візуальний дизайн та естетика
- Функціональність та інтерактивні елементи
- Адаптивність та доступність
- Зручність користування (UX)
- Пошукова оптимізація (SEO)
Приклад 1: Массачусетський технологічний інститут (MIT) Веб-сайт
MIT (mit.edu) є прикладом високої функціональності та інтуїтивно зрозумілої
навігації (Додаток А. рис.А1).
Основні особливості:
Чітка структура навігації: головне меню містить зрозумілі категорії, такі
як "About", "Education", "Research", "Admissions", що дозволяє користувачам
легко знайти необхідну інформацію.
Адаптивний дизайн: сайт коректно відображається на будь-яких
пристроях, забезпечуючи зручність використання незалежно від типу
пристрою.
Використання мультимедіа: відео та зображення використовуються для
привернення уваги та надання додаткової інформації.
Пошукова оптимізація: сайт оптимізований для пошукових систем, що
підвищує його видимість в інтернеті [5].
Приклад 2: Оксфордський університет Веб-сайт Оксфордського
університету (ox.ac.uk) демонструє успішне поєднання традиційного стилю та
сучасних технологій (Додаток А. рис. А2).
Естетика та брендинг: сайт використовує фірмові кольори та стиль, що
підкреслює його унікальність та престиж.
Функціональність: велика кількість інтерактивних елементів, таких як
віртуальні тури по кампусу, калькулятори вартості навчання та онлайн-форми
для подачі заявок.
Доступність: сайт відповідає стандартам доступності, забезпечуючи
комфортне використання для людей з обмеженими можливостями.
16
Персоналізація: використання персоналізованого контенту на основі
вподобань та поведінки користувачів.
Основні висновки
Аналіз успішних прикладів сайтів ВНЗ дозволив виявити кілька
ключових факторів, які слід враховувати при розробці нового сайту ЧДТУ:
Інтуїтивно зрозуміла навігація:
Користувачі повинні мати можливість легко знаходити потрібну
інформацію без зайвих зусиль.
Адаптивний дизайн: Сайт повинен коректно відображатися на різних
пристроях, забезпечуючи комфортне використання.
Використання мультимедіа: Відео, зображення та інші мультимедійні
елементи роблять сайт більш привабливим та інформативним.
Доступність: Дотримання стандартів доступності забезпечить
комфортне використання для всіх категорій користувачів.
Функціональність: Наявність інтерактивних елементів, таких як онлайн-
форми, калькулятори та інші інструменти, підвищить зручність використання
сайту.
Персоналізація: Надання персоналізованого контенту покращить
користувацький досвід та підвищить залученість користувачів.
Врахування цих факторів допоможе створити конкурентоспроможний
та ефективний веб-сайт ЧДТУ, який відповідатиме сучасним вимогам та
очікуванням користувачів [6].
Одним із ключових етапів передпроектних досліджень є визначення
цільової аудиторії веб-сайту. Це дозволяє зрозуміти, для кого створюється
сайт, які у цих користувачів потреби та очікування, і як найкраще
задовольнити їхні вимоги.
Сайт Черкаського державного технологічного університету (ЧДТУ) має
обслуговувати різноманітні категорії користувачів, кожна з яких має свої
специфічні потреби.
Основні категорії цільової аудиторії
17
1. Абітурієнти
Абітурієнти є однією з головних цільових аудиторій сайту ЧДТУ. Вони
шукають інформацію про навчальні програми, умови вступу, вартість
навчання, можливості для розвитку та перспективи працевлаштування.
Важливо, щоб сайт містив детальну інформацію про кожну спеціальність,
вимоги до вступу, терміни подачі документів, а також можливості для
отримання стипендій та фінансової підтримки.
Потреби та очікування:
зрозуміла та доступна інформація про навчальні програми
Інформація про умови вступу та процес подачі документів Можливості
для отримання фінансової підтримки
Віртуальні тури по університету та кампусу
Контактні дані для консультацій
2. Чинні студенти також є важливою аудиторією сайту.
Вони використовують сайт для отримання інформації про розклад
занять, навчальні матеріали, новини університету, заходи, студентські
організації та інші аспекти студентського життя.
Потреби та очікування:
Доступ до розкладу занять та навчальних матеріалів
Інформація про події та новини університету
Можливості для участі в студентських організаціях та заходах
Інтерактивні інструменти, такі як форуми та чати для спілкування з
одногрупниками та викладачами
Контактна інформація адміністрації та служб підтримки
3. Викладачі та наукові співробітники
Для викладачів та наукових співробітників сайт є важливим ресурсом
для доступу до інформації про навчальні плани, дослідницькі проекти, наукові
публікації та конференції. Крім того, вони можуть використовувати сайт для
комунікації зі студентами та колегами.
Потреби та очікування:
18
Доступ до навчальних планів та матеріалів
Інформація про наукові дослідження та проекти
Платформи для публікації наукових робіт та участі в конференціях
Інструменти для комунікації зі студентами та колегами
Адміністративна інформація та новини університету
4. Адміністративний персонал
Адміністративний персонал використовує сайт для управління різними
аспектами роботи університету, включаючи організацію навчального процесу,
адміністрування подій та заходів, а також комунікацію з іншими категоріями
користувачів.
Потреби та очікування:
Інструменти для управління навчальним процесом Інформація про події
та адміністративні оголошення
Можливості для комунікації з викладачами, студентами та іншими
співробітниками
Доступ до документації та адміністративних ресурсів
5. Інші зацікавлені сторони (партнери, спонсори, громадськість)
До цієї категорії відносяться потенційні партнери, спонсори,
випускники та громадськість, які можуть бути зацікавлені в інформації про
діяльність університету, його досягнення, партнерські програми та
можливості для співпраці.
Потреби та очікування:
Інформація про університет, його місію та досягнення
Можливості для партнерства та спонсорства
Новини та події університету
Контактні дані для запитів та пропозицій співпраці
Висновки: визначення цільової аудиторії сайту ЧДТУ дозволяє чітко
зрозуміти, які категорії користувачів потребують особливої уваги, і які саме
функції та інформаційні блоки повинні бути включені до нового дизайну
сайту. Це допоможе створити веб-сайт, який буде максимально орієнтованим
19
на потреби користувачів, забезпечить високий рівень задоволеності та
підвищить ефективність комунікації між університетом та його аудиторією.
Таким чином, врахування специфічних потреб кожної категорії цільової
аудиторії стане основою для розробки функціонального, зручного та
інформативного веб-сайту ЧДТУ, який сприятиме підвищенню репутації
університету та залученню нових студентів та партнерів [7].
РОЗДІЛ 2. ОПИС ТА ОБҐРУНТУВАННЯ ДИЗАЙН
ПРОПОЗИЦІЇ САЙТУ ЧДТУ
2.1 Визначення функціональних вимог до сайта.
Першим кроком у розробці нового сайту Черкаського державного
технологічного університету (ЧДТУ) є визначення його функціональних
вимог. Цей етап є критично важливим, оскільки визначає основні можливості
та сервіси, які повинен забезпечувати сайт для задоволення потреб його
користувачів.
Функціональні вимоги включають як базові елементи, так і спеціальні
функції, які роблять сайт корисним, зручним та ефективним для всіх категорій
цільової аудиторії.
Основні функціональні вимоги:
1. Навігація:
Навігація є ключовим елементом, який забезпечує легкий доступ до всієї
інформації на сайті. Вона повинна бути інтуїтивно зрозумілою та простою у
використанні для всіх категорій користувачів.
Вимоги: Головне меню з чіткими категоріями (наприклад, "Про
університет", "Абітурієнтам", "Студентам", "Наука", "Контакти").
Багаторівневе меню для доступу до підрозділів та детальної інформації.
Пошукова функція з можливістю фільтрації результатів за категоріями.
2. Інформаційні сторінки:
20
Сайт повинен містити детальні та актуальні інформаційні сторінки про
університет, його підрозділи, навчальні програми, наукові проекти та інші
важливі аспекти.
Вимоги: Сторінка "Про університет" з інформацією про історію, місію,
цінності та досягнення університету. Сторінки факультетів та кафедр з описом
їх діяльності, програм навчання та контактною інформацією. Сторінка
"Абітурієнтам" з детальною інформацією про вступні вимоги, спеціальності,
вартість навчання та процес подачі документів. Сторінка "Студентам" з
інформацією про розклад занять, студентські організації, заходи та ресурси.
3. Інтерактивні сервіси:
Інтерактивні сервіси значно покращують користувацький досвід,
забезпечуючи зручність та функціональність.
Вимоги: Онлайн-форми для подачі заявок на вступ, отримання
консультацій, реєстрації на заходи. Особистий кабінет студента з доступом до
навчальних матеріалів, розкладу занять, оцінок та іншої персональної
інформації. Віртуальні тури по кампусу для потенційних абітурієнтів та
партнерів. Чат-бот для надання оперативних відповідей на запитання
користувачів.
4. Адаптивність:
Сайт повинен бути адаптивним та коректно відображатися на всіх типах
пристроїв (комп’ютери, планшети, смартфони).
Вимоги: Використання адаптивного дизайну для забезпечення зручності
користування на різних пристроях. Тестування сайту на різних браузерах та
пристроях для забезпечення сумісності та відсутності помилок.
5. Доступність:
Сайт повинен бути доступним для всіх категорій користувачів,
включаючи людей з обмеженими можливостями.
Вимоги: Відповідність стандартам доступності для забезпечення
доступу до інформації для людей з інвалідністю. Наявність текстових
альтернатив для мультимедійних елементів (зображення, відео).
21
Використання зручних для читання шрифтів та контрастних кольорів для
покращення читабельності.
Визначення функціональних вимог до сайту ЧДТУ є основою для його
успішної розробки та впровадження. Забезпечення зручної навігації,
інтерактивних сервісів, адаптивності, доступності та високого рівня безпеки
дозволить створити ефективний та привабливий веб-сайт, який відповідатиме
потребам різних категорій користувачів. Реалізація цих вимог сприятиме
покращенню комунікації між університетом та його аудиторією, підвищенню
задоволеності користувачів та зміцненню репутації ЧДТУ в онлайн-
середовищі [7].
2.2 Вибір кольорової гами та стилістичних рішень.
Кольорова гама та стилістичні рішення є важливими елементами
дизайну веб-сайту, які визначають його візуальну привабливість, зручність
сприйняття інформації та загальне враження користувачів [8].
При розробці нового сайту Черкаського державного технологічного
університету (ЧДТУ) необхідно враховувати як корпоративний стиль
університету, так і сучасні тенденції у веб-дизайні, щоб створити гармонійний
та професійний вигляд сайту. Вибір кольорової гами Кольорова гама сайту
повинна відповідати бренду університету та сприяти створенню позитивного
враження у користувачів.
Основні критерії вибору кольорової гами включають:
• Відповідність бренду: Основні кольори повинні відповідати
корпоративним кольорам ЧДТУ, що сприятиме впізнаваності бренду.
• Психологічний вплив: Кольори мають викликати позитивні емоції та
створювати сприятливу атмосферу для навчання та роботи.
• Читабельність та контрастність: Потрібно забезпечити достатній
контраст між текстом та фоном для полегшення читання.
1. Основні кольори:
22
• Синій: Головний колір бренду ЧДТУ, який асоціюється з надійністю,
знаннями та професійністю.
• Білий: Використовується для створення чистого та сучасного
вигляду, а також для поліпшення контрастності.
• Світло-блакитний: Допоміжний колір, який може використовуватися
для акцентів та фонових елементів, забезпечуючи збалансованість
дизайну .
2. Стилістичні рішення:
Вибір стилістичних рішень визначає загальний вигляд та відчуття сайту,
включаючи типографіку, іконографіку та мультимедійні елементи.
Типографіка повинна бути чіткою, читабельною та відповідати загальному
стилю сайту. Вибір шрифтів є ключовим елементом у створенні професійного
та сучасного вигляду. Для дизайну сайту було обрано два види шрифтового
написання, а саме: Montserrat – шрифт який буде використовуватись в
заголовках і не великих масах текстів. SF Pro Display – шрифт який
використовується в великих масах текстів оскільки цей шрифт читабельніший
[9].
Розмір та інтерліньяж: Оптимальні розміри шрифтів та міжрядковий
інтервал для покращення читабельності.
3. Іконографіка:
Використання іконок допомагає візуально структурувати інформацію та
зробити сайт більш зручним для користувачів. Вимоги: сучасні,
мінімалістичні іконки, які відповідають загальному стилю сайту. Розмір та
розташування: Іконки повинні бути достатньо великими для легкого
розпізнавання та розташованими відповідно до інформаційної архітектури
сайту.
Мультимедійні елементи Відео, зображення та графіка відіграють
важливу роль у створенні привабливого та інформативного сайту. Вимоги:
Високоякісні зображення та відео, що підкреслюють престиж університету.
4. Чистий та мінімалістичний дизайн:
23
Використання великої кількості білого простору для створення відчуття
простоти та легкості. Акцент на фотографії та відео: Використання великих
зображень та відео для привернення уваги та створення візуального інтересу.
Карточки та сітки: Використання карточок для організації контенту та
полегшення навігації.
Вибір кольорової гами та стилістичних рішень є важливим аспектом
розробки веб-сайту ЧДТУ. Правильно підібрані кольори, типографіка,
іконографіка та мультимедійні елементи сприятимуть створенню
привабливого, професійного та зручного для користувачів сайту. Врахування
цих аспектів дозволить забезпечити відповідність сайту сучасним тенденціям
у веб-дизайні, підвищити його ефективність та покращити користувацький
досвід.
2.3 Обґрунтування вибору технологій та інструментів
для створення сайту.
Для створення сучасного, зручного та привабливого сайту Черкаського
державного технологічного університету (ЧДТУ) необхідно ретельно
підібрати технології та інструменти. Ці вибори повинні відповідати вимогам
до функціональності, зручності користування та естетичності сайту. Як
дизайнер, я зосереджуюсь на тих інструментах та технологіях, які дозволять
створити візуально привабливий та функціонально насичений сайт.
Основні технології та інструменти:
1. Графічні редактори та дизайн-програми
Важливими інструментами для розробки дизайну сайту є графічні
редактори. Вони дозволяють створити макети, прототипи та інтерфейси
користувача.
Figma: Онлайн-інструмент для спільного дизайну. Figma забезпечує
можливість роботи над проектом у команді в режимі реального часу, що
особливо важливо для великих проектів з багатьма учасниками. Вона також
підтримує інтеграцію з іншими інструментами, що спрощує процес розробки.
24
Інтерактивність: можливість створювати інтерактивні прототипи для
тестування користувацького досвіду.
Співпраця в команді: інструменти дозволяють декільком дизайнерам
працювати над проектом одночасно.
Зручність використання: інтуїтивно зрозумілі інтерфейси та
багатофункціональність [10].
2. Інструменти для створення та редагування графіки
Важливим аспектом дизайну є використання високоякісної графіки, яка
підкреслює візуальну привабливість сайту. Adobe Photoshop: Популярний
редактор для обробки растрової графіки. Photoshop дозволяє створювати та
редагувати зображення, працювати з шарами, додавати ефекти та фільтри.
Adobe Illustrator: Інструмент для створення векторної графіки. Illustrator
використовується для створення логотипів, іконок та інших графічних
елементів, які зберігають свою якість при масштабуванні.
Якість графіки: Здатність створювати високоякісні зображення та
графічні елементи.
Можливості редагування: Широкий спектр інструментів для
редагування та налаштування графіки. Підтримка різних форматів: Підтримка
різних графічних форматів для інтеграції в веб-дизайн [11].
3. Інструменти для створення анімації та інтерактивних елементів
Для підвищення інтерактивності та динамічності сайту необхідно
використовувати інструменти для створення анімації.
Adobe After Effects: програма для створення анімації та відеоефектів.
After Effects дозволяє створювати складні анімації, що можуть бути
використані для банерів, переходів та інших інтерактивних елементів.
Інтерактивність: Створення анімацій, які підвищують взаємодію
користувачів з сайтом.
Естетика: Додавання динамічних елементів, що роблять сайт візуально
привабливішим.
25
Легка інтеграція: Можливість інтеграції анімацій без втрати якості.
Вибір технологій та інструментів для створення сайту ЧДТУ є ключовим для
забезпечення його візуальної привабливості, зручності та функціональності
[12].
Використання сучасних графічних редакторів, інструментів для
створення та редагування графіки, а також інструментів для створення
анімації дозволить створити сайт, який буде не тільки інформативним, але й
привабливим для користувачів. Це сприятиме покращенню взаємодії між
університетом та його аудиторією, підвищенню задоволеності користувачів та
зміцненню репутації ЧДТУ в онлайн-середовищі.
26
РОЗДІЛ 3. ДИЗАЙНЕРСЬКЕ РІШЕННЯ ПРОЄКТУ САЙТУ
ЧДТУ (АНГЛІЙСЬКА ВЕРСІЯ)
3.1. Аналіз сайту ЧДТУ. Постанова проблематики.
Навігація є одним з ключових елементів будь-якого веб-сайту, оскільки
вона визначає, наскільки легко користувачі можуть знайти потрібну
інформацію. Проблеми з навігацією на старому сайті Черкаського державного
технологічного університету (ЧДТУ) значно впливали на користувацький
досвід, що потребувало розробки нових рішень для покращення цього аспекту.
Проблеми навігації на старому сайті
Перш ніж розглядати рішення, необхідно визначити основні проблеми
навігації, з якими стикалися користувачі на старому сайті:
Складна структура меню: Багаторівневе меню з великою кількістю
вкладених пунктів було заплутаним і вимагало багато часу для пошуку
необхідної інформаці (Додаток Б, Рис.Б.1).
Недостатня видимість важливих розділів: Користувачі часто не могли
знайти ключові розділи, такі як інформація про факультети, спеціальності,
новини тощо, через погану організацію меню (Додаток Б, рис.Б.2).
Нестача інтуїтивності: Відсутність логічної структури та підказок
ускладнювала навігацію для нових користувачів.
Недостатня адаптивність: Сайт не був оптимізований для мобільних
пристроїв, що призводило до проблем з навігацією на смартфонах та
планшетах (Додаток Б, рис.Б.3) [7].
Рішення для покращення навігації:
На основі виявлених проблем було розроблено кілька стратегій для
покращення навігації на новому сайті ЧДТУ:
Спрощена структура меню Структура меню була оптимізована для
покращення доступності та зручності користування (рис.3.1.):
27
Рис.3.1 Логічна групація в бургер меню, та спрощений «хедер» сайту
1. Плоска ієрархія: Зменшено кількість рівнів меню до
максимум двох, що спрощує пошук необхідної інформації.
2. Логічна групація: Пункти меню згруповані за логічними
категоріями (наприклад, "Факультети", "Абітурієнтам", "Студентам",
"Наукова діяльність").
3. Використання мегаменю: Застосування мегаменю для
відображення великої кількості підрозділів в одному вікні, що полегшує
навігацію.
Покращена видимість важливих розділів Для покращення видимості
важливих розділів були впроваджені наступні заходи (рис 3.2.):
28
Рис 3.2. Поділення розділів сторінки на блоки
1. Виділені блоки: Створені спеціальні блоки на головній
сторінці для ключових розділів, таких як новини, події, важливі
оголошення.
2. Іконки та візуальні підказки: Використання іконок та
візуальних підказок для швидкої ідентифікації розділів.
3. Фіксоване меню: Впровадження фіксованого меню, яке
завжди залишається на видимій частині екрана при прокрутці сторінки.
Адаптивний дизайн:
Для забезпечення зручної навігації на всіх пристроях сайт був
адаптований до різних розмірів екранів:
29
1. Мобільна, планшетна оптимізація (рис.3.3.): використання
адаптивного дизайну, який автоматично підлаштовується під розміри екрану
мобільних пристроїв.
2. Просте мобільне меню: Створення спрощеного мобільного меню з
використанням "гамбургер-меню", яке легко відкривається і закривається.
3. Тестування на різних пристроях: Регулярне тестування сайту на
різних пристроях та в різних браузерах для забезпечення коректної роботи
навігації.
Рис. 3.3. Мобільна (ліворуч) та планшетна (праворуч) адаптації
Вирішення проблем навігації на новому сайті ЧДТУ було спрямоване на
покращення зручності та ефективності використання сайту. Оптимізована
структура меню, покращена видимість важливих розділів, інтуїтивні підказки
та адаптивний дизайн дозволяють користувачам легко знаходити необхідну
інформацію та отримувати позитивний досвід від взаємодії з сайтом. Це
сприяє підвищенню задоволеності користувачів та покращенню репутації
університету в онлайн-середовищі.
30
3.2. Розробка концепції дизайн проєкту.
Головна сторінка є обличчям веб-сайту, вона створює перше враження у
відвідувачів і повинна бути інформативною, привабливою та зручною для
користувачів.
Розробка концепції та макетів головної сторінки сайту Черкаського
державного технологічного університету (ЧДТУ) включала кілька ключових
етапів: аналіз потреб користувачів, визначення основних елементів сторінки,
створення візуальної концепції та розробка інтерактивних макетів.
1. Аналіз потреб користувачів:
Першим кроком у розробці концепції головної сторінки був детальний
аналіз потреб і очікувань цільової аудиторії. Основні групи користувачів, які
взаємодіють з сайтом ЧДТУ, включають:
- Абітурієнти: шукають інформацію про вступ, спеціальності, умови
навчання.
- Студенти: потребують доступу до розкладу, навчальних матеріалів,
новин університету.
- Викладачі: шукають ресурси для викладання, наукову інформацію,
новини.
- Батьки студентів: цікавляться умовами навчання, безпекою, життям
студентів. Інші зацікавлені сторони: партнери, роботодавці, випускники.
2. Визначення основних елементів головної сторінки:
На основі аналізу потреб користувачів були визначені ключові елементи,
які повинні бути присутніми на головній сторінці:
- Логотип та назва університету: відображають ідентичність ЧДТУ.
- Меню навігації: зручне та інтуїтивно зрозуміле меню, що дозволяє
швидко знайти необхідну інформацію.
- Головний банер: великий банер із зображенням університету або
актуальними подіями.
- Інформаційні блоки: новини, оголошення, події, які швидко
оновлюються.
31
- Посилання на важливі розділи: швидкий доступ до розділів для
абітурієнтів, студентів, викладачів.
- Контактна інформація: швидкий доступ до контактів університету.
- Футер: включає додаткові посилання, копірайт, соціальні мережі.
3. Створення візуальної концепції:
Розробка візуальної концепції включала кілька важливих аспектів:
Кольорова гама – вибір кольорової гами, яка відповідає бренду університету.
Основні кольори – синій, білий та світло-блакитний (рис.3.4.) –
використовуються для створення професійного та сучасного вигляду.
Рис.3.4. Оновлені кольори сайту
Типографіка: використання шрифтів, які забезпечують читабельність та
візуальну привабливість. Основні шрифти повинні бути сучасними, легко
читабельними та відповідати загальному стилю сайту.
Графічні елементи: Використання якісних фотографій, іконок та
графічних елементів, які підкреслюють унікальність та професіоналізм ЧДТУ.
Адаптивний дизайн: Забезпечення коректного відображення та
функціонування головної сторінки на різних пристроях та екранах.
4. Розробка інтерактивних макетів
Наступним етапом було створення інтерактивних макетів головної
сторінки, що дозволило протестувати і вдосконалити концепцію перед її
реалізацією:
Прототипування – використання інструментів для створення прототипів
(Figma) для візуалізації макетів. Прототипи включали всі основні елементи
головної сторінки та їх розташування.
32
Інтерактивність: Додавання інтерактивних елементів, таких як
випадаючі меню, посилання та кнопки для перевірки зручності користування.
Внесення змін: Коригування макетів на основі отриманого зворотного
зв'язку для покращення зручності та функціональності.
Розробка концепції та макетів головної сторінки сайту ЧДТУ була
важливим етапом у створенні сучасного, зручного та привабливого веб-
ресурсу. Врахування потреб користувачів, визначення основних елементів
сторінки, створення візуальної концепції та розробка інтерактивних макетів
забезпечили високий рівень якості та задоволеності користувачів. Це
сприятиме підвищенню ефективності комунікації між університетом та його
аудиторією, а також зміцненню його репутації в цифровому просторі.
3.3. Створення прототипів основних сторінок сайту
Створення прототипів основних сторінок сайту Черкаського державного
технологічного університету (ЧДТУ) є важливим етапом у процесі розробки,
оскільки саме прототипи дозволяють візуалізувати структуру, розташування
елементів та функціональність сайту до його кінцевої реалізації. Прототипи
також слугують інструментом для тестування користувацького досвіду та
внесення необхідних коригувань. В цьому розділі розглядається детальний
опис створення сторінок "Про університет" та "Новини", а також короткий
огляд сторінок факультетів, блогу та профкому (рис.3.5.).
Рис. 3.5. Сторінка «Про університет»
33
Сторінка "Про університет" є однією з найважливіших на сайті, оскільки
вона надає відвідувачам загальну інформацію про ЧДТУ, його історію, місію,
цінності та керівництво.
Основні елементи сторінки "Про університет":
Загальна інформація: Короткий опис університету, його історія, місія та
цінності.
Основні досягнення та нагороди, які підкреслюють значущість ЧДТУ.
Інформація про ректора та проректорів: Фотографії та біографії ректора
та проректорів.
Інформація про їх наукові здобутки, професійний шлях та роль в
університеті.
Структура університету: Схема організаційної структури університету.
Сторінка "Новини" (рис.3.6.)
Рис. 3.6 Сторінка «Новини»
Сторінка "Новини" виконує функцію основного джерела актуальної
інформації для студентів, викладачів та інших зацікавлених осіб.
Основні елементи сторінки "Новини":
34
Список новин: Список останніх новин з коротким описом та посиланням
на повний текст.
Фільтри для пошуку новин за датою, категорією чи ключовими словами.
Категорії новин: Розділення новин на категорії, такі як "Події",
"Оголошення", "Наукові досягнення", "Спортивні новини" тощо.
Можливість перегляду новин за категоріями для полегшення навігації.
Архів новин: Доступ до архіву новин за минулі роки.
Зручний пошук та сортування архівних матеріалів.
Візуальні та функціональні рішення: Чистий та організований дизайн:
Використання сітки для розміщення новин, що забезпечує легкість навігації та
читання.
Мультимедійний контент: Включення зображень, відео та
аудіоматеріалів до новин для підвищення залученості користувачів.
Інші сторінки:
Сторінки факультетів надають детальну інформацію про кожен
факультет університету, їхні програми, викладачів та дослідницьку діяльність.
Основні елементи:
Опис факультету: коротка інформація про факультет, його історія та
спеціальності.
Викладацький склад: Фотографії та біографії викладачів.
Навчальні програми: Опис програм навчання, курси та можливості для
студентів.
Сторінка блогу містить статті, інтерв'ю та інші матеріали, що цікавлять
студентів та викладачів.
Основні елементи:
Список статей: Сортування за датою, автором або темою
Сторінка профкому надає інформацію про діяльність профспілкової
організації університету, її події та ініціативи.
Основні елементи: Опис діяльності: Інформація про місію та цілі
профкому.
35
Створення прототипів основних сторінок сайту ЧДТУ є важливим
етапом у забезпеченні їх функціональності та зручності для користувачів.
Детально розроблені прототипи сторінок "Про університет" та "Новини"
дозволяють забезпечити високий рівень інформативності та взаємодії з
користувачами, тоді як прототипи інших сторінок, таких як сторінки
факультетів, блогу та профкому, підтримують загальну структуру та стиль
сайту, надаючи користувачам необхідну інформацію у зрозумілому та
доступному форматі.
36
ВИСНОВКИ
Проведене дослідження та реалізація дизайн-проекту веб-сайту
Черкаського державного технологічного університету (ЧДТУ) демонструють
важливість сучасного, функціонального та естетично привабливого веб-
ресурсу для освітньої установи. Аналіз аналогів та тенденцій сучасного веб-
дизайну дозволив визначити ключові елементи, необхідні для створення
інтуїтивно зрозумілої та ефективної навігації, яка відповідає очікуванням
сучасних користувачів.
Проектування та реалізація нового сайту ЧДТУ включали визначення
цільової аудиторії, що дозволило розробити контент та функціональні
можливості, орієнтовані на потреби студентів, викладачів, абітурієнтів та
інших зацікавлених осіб. В результаті була створена концепція, яка поєднує
кольористику та функціональність, сприяючи підвищенню престижу та
репутації університету.
Створені прототипи сторінок сайту демонструють гармонійне
поєднання візуальних та функціональних аспектів, забезпечуючи
користувачам легкий доступ до необхідної інформації. Впровадження
запропонованих рішень дозволить зменшити проблематику навігації та
покращити загальний досвід користувачів, що сприятиме залученню нових
студентів та підвищенню конкурентоспроможності університету на
освітньому ринку.
Таким чином, поставлені цілі та завдання роботи були успішно
досягнуті, розроблений веб-сайт стане важливим інструментом для підтримки
комунікації між університетом та його аудиторією, сприяючи подальшому
розвитку та вдосконаленню освітнього процесу в ЧДТУ.
37
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Yuschick D. Smashing Magazine – For Web Designers And
Developers. Smashing Magazine. [Електронний ресурс]: сайт / Режим
доступу: https://www.smashingmagazine.com/ (дата звернення:
26.05.2024).
2. Історія створення першого в світі сайту. Web Building. [Електронний
ресурс]: сайт / Режим доступу: https://webbuilding.pro/ukr/blog/istoriya-
stvorennya-pershogo-saytu (дата звернення: 10.04.2024).
3. Види сайтів та їх особливості. Цільова аудиторія. Освітній проект «На
Урок» для вчителів. [Електронний ресурс]: сайт / Режим доступу:
https://naurok.com.ua/vidi-saytiv-ta-h-osoblivosti-cilova-auditoriya-
322527.html (дата звернення: 10.04.2024).
4. 10 UX writing examples to inspire you in 2024. UX Design Institute.
[Електронний ресурс]: сайт / Режим доступу:
https://www.uxdesigninstitute.com/blog/ux-writing-examples-to-inspire-
you/ (дата звернення: 12.04.2024).
5. The Massachusetts Institute of Technology (MIT). Massachusetts Institute of
Technology. [Електронний ресурс]: сайт / Режим доступу:
https://www.mit.edu/ (дата звернення): 20.04.2024)
6. University of Oxford. University of Oxford. [Електронний ресурс]: сайт /
Режим доступу: https://www.ox.ac.uk/ (дата звернення): 20.04.2024).
7. Черкаський державний технологічний університет (ЧДТУ). Черкаський
державний технологічний університет (ЧДТУ). [Електронний ресурс]:
сайт / Режим доступу: https://chdtu.edu.ua/ (дата звернення: 21.04.2024).
8. Варивода Ю. Як правильно підібрати кольори для сайту. Rocketmen.
[Електронний ресурс]: сайт / Режим доступу:
https://rocketmen.com.ua/ua/article/colour_webdesign. (дата звернення:
23.04.2024)
38
9. Телеграм бот для рекомендації шрифтів. Rentafont – орендувати, купити
шрифти. [Електронний ресурс]: сайт / Режим доступу:
https://rentafont.com.ua/blog/telegram-bot-dlya-rekomendaciyi-shryftiv
(дата звернення: 29.04.2024).
10. Free Education Templates You Can Edit | Figma. Figma. [Електронний
ресурс]: сайт / Режим доступу:
https://www.figma.com/community/category/education (date of access:
16.05.2024).
11. AdobePhotoshop. Adobe. [Електронний ресурс]: сайт / Режим доступу:
https://www.adobe.com/ua/products/photoshop.html (дата звернення:
16.05.2024).
12. Adobe After Effects. Adobe. [Електронний ресурс]: сайт / Режим доступу:
https://www.adobe.com/ua/products/aftereffects.html (дата звернення:
17.05.2024)
39
ДОДАТКИ
Додаток А
Рис.А.1. Веб-сайт Массачусетського технологічного інституту
Рис.А.2. Веб-сайт Оксфордського університету
40
Додаток Б
Додаток Б, Рис.Б.1. Складне багаторівневе меню
Додаток Б, рис.Б.2 Складно знайти «розклад» на сайті
41
Додаток Б, рис.Б.3. Відсутність адаптації для смартфону