Новий сайт кафедри: як він зроблений і як влаштований
З минулого вівторка відвідувачі сайту могли бачити лаконічне повідомлення про технічні роботи. Вже під кінець тижня на місці заглушки з’явився робочий прототип — і робота продовжилась у прямому ефірі. Студенти і викладачі, які звикли до попередньої світлої версії, почали запитувати, що відбувається. Попри те, що зміни ще тривають і роботи з сайтом ще багато, спробуємо пояснити.
Загалом сайт нашої кафедри існує з 17 листопада 2011 року. Починався він як статичний HTML/CSS-проєкт, невдовзі переїхав на WordPress — і з того часу пережив кілька переосмислень. Нинішня версія — умовно п’ята — стала найамбітнішою переробкою за всю історію ресурсу.
Робота над нею розпочалась весною-літом 2025 року: спочатку концепція, архітектура, прототипи (багато прототипів) дизайну. 20 грудня 2025 розпочалась розробка саме HTML-шаблонів безпосередньо під WordPress — на базі стартового фреймворку. Саме з нього виросла власна тема, яка згодом стала повністю самостійним рішенням. Вже за кілька тижнів з’явилась перша публічна версія, ще два тижні пішло на дообшліфовування: адаптація під різні пристрої, виправлення деталей, наповнення розділів.
Як і попередня версія, що постійно зазнавала змін і уточнень, новий сайт — не фінальна точка, а початок. Він розвиватиметься разом із нами.
В основі сайту — WordPress із власною темою, написаною вручну. Жодних page builder-плагінів на кшталт Elementor чи Divi — лише чистий код, передбачувана структура і повний контроль над кожним елементом. Так було і на попередній версії сайту але викорстовувався інший CSS-фреймворк.
Для стилізації використовується Tailwind CSS, що збирається через npm-скрипти безпосередньо під час розробки. Стилі прив’язані безпосередньо до елементів розмітки — невикористаний код не накопичується. Контентс сайту керується через Advanced Custom Fields: профілі викладачів, опис програм, події — все редагується через зручний інтерфейс без жодного програмування з боку редактора.
Сайт розроблявся локально за допомогою wp-env — інструменту, що розгортає повноцінне WordPress-середовище у Docker-контейнері прямо на робочому комп’ютері. Це дозволяє тестувати зміни миттєво, не зачіпаючи живий сайт. Публікація змін автоматизована через GitHub Actions: після кожного збереження змін у репозиторій скрипт сам завантажує оновлені файли на сервер.
Візуальна мова сайту побудована на свідомому контрасті темного і світлого: секції-герої та навігація — глибокий темно-синій, майже чорний; новини, спеціальності, текстовий контент — чисто білий фон. Цей ритм чергування задає сторінці структуру без зайвих роздільників. Фірмовий синій акцент, золотий — для документів і файлів, напівпрозорі картки з тонкою рамкою. Заголовки — жирні, великими літерами, із щільним трекінгом. Галереї в публікаціях верстаються сіткою: перше фото займає подвійну висоту, решта — рівномірно поруч. При наведенні зображення злегка збільшуються. Ефект простий, але дає відчуття живого матеріалу, а не архівного переліку. Сайт підтримує обидва режими відображення — темний та свілий. Перемикання реалізоване так, що виключає «мерехтіння» при завантаженні — типову проблему більшості готових рішень. Увесь інтерфейс — від навігації до блоків і профілів викладачів — адаптований під мобільні пристрої.
Головний екран сайту зустрічає відвідувача великим анімованим заголовком — двома словами, що змінюють одне одного: перше білим, друге — фірмовим синім. «Творимо сенси», «Мислимо образами», «Втілюємо ідеї», «Будуємо простір», «Плекаємо культуру» — п’ять фраз, що по черзі розкривають характер кафедри. Не опис, а позиція.
Основний шрифт інтерфейсу — e-Ukraine, розроблений дизайнером Дмитром Растворцевим у агенції Fedoriv на замовлення Міністерства цифрової трансформації України. Для заголовків і акцентних блоків — Fixel Display / Fixel Text, гарнітура компанії MacPaw, створена у співпраці з українською студією AlfaBravo. Обидва шрифти — безкоштовні, з повною підтримкою української мови.
Логотип кафедри у свій час розробив Тимошенко Владислав Юрійович. У новій версії сайту він отримав друге життя: спрощена версія логотипу використовується як favicon — маленька іконка, що відображається у вкладці браузера. Цей маленький олівчик — вдячність попередній версії сайту.
Для коректного відображення при поширенні у соцмережах реалізований повний набір Open Graph тегів: заголовок, опис, зображення-превью. Паралельно підключені картки для Twitter/X та структурована розмітка Schema.org — для пошукових систем. Усе це генерується власним кодом теми, без жодних SEO-плагінів. Тема містить окремі стилі для друку: навігація, бічні панелі та зайві елементи приховуються, текст переводиться в чорний на білому тлі, зберігаються адреси посилань, сторінка автоматично налаштовується на формат A4 (але ще не ідеально).
Повністю переписана реалізація календаря навчальних тижнів: система автоматично визначає поточний тиждень семестру відносно заданої дати початку занять і відображає актуальний стан без ручного оновлення.
Як влаштований сайт: розділи і механіки
Головна структурна ідея — сім тематичних хабів, кожен з яких збирає все важливе за своєю темою в одному місці:
- Про кафедру — це перша точка входу для всіх. Це місія, викладацький склад, історія
- Навчання — спеціальності, освітні програми, вступ
- Навчальний процес — розклад, ресурси, практична база
- Наука — дослідження, публікації, наукова діяльність викладачів
- Студентське життя — виставки, наукові публікації, події, ескурсії та досягнення
- Партнерство — співпраця, міжнародні проєкти
- Студентам — окремий модуль елементів зі своєю структурою та наповненням
- Вступникам — інформація лише для майбутніх абітурієнтів.
- Окремий сайт конференції — він зазнав змін, бо минула версія платформи для наукових публікації більше не підтримувала новіші версії програмного забезпечення.
- Ресурси (ще в роботі) — корисне для студентів і викладачів
Кожен хаб — жива точка входу: короткий огляд, актуальні новини за темою, важливі посилання.
Новини самі знаходять своє місце — кожна публікація тегується ключовими словами, і сайт автоматично підтягує потрібні матеріали на відповідні хаб-сторінки. Опублікували репортаж зі студентської виставки — він з’явиться і в загальній стрічці, і в «Студентському житті». Написали про участь у міжнародній конференції — матеріал потрапить і до «Науки», і до «Партнерства». Редактор нічого додатково не робить. На сайті з’явились окремі блоки для анонсів подій, це теж важлива зміна і під них розроблений свій дизайн.
Понад 350 архівних публікацій поступово отримують теги — щоб минулі події теж знайшли своє місце в новій структурі. Кожен викладач тепер має власну сторінку зі структурованою біографією, переліком дисциплін і наукових інтересів, а також посиланнями на профілі у Google Scholar, ORCID, Scopus та Web of Science.
Сайт кафедри — це перше, що бачить абітурієнт, який шукає своє місце в мистецтві. Партнер, що оцінює рівень закладу. Журналіст, що пише про культуру регіону. Враження складається ще до того, як людина прочитала хоч слово. Викладачі кафедри та і студенти, що навчаються бачити і створювати, не може мати сайт «як у всіх». Не через амбіції — через послідовність. Якщо ми говоримо про увагу до форми і думку в кожній лінії, то і цифровий простір кафедри має це відображати. Так працює Всесвіт.
Технології — лише інструмент. Але правильний інструмент дає результат.
