Театр «ДГУ» — сайт театру з репертуаром, новинами

Розробив сучасний сайт для театру «ДГУ» у Дніпрі — з акцентом на преміальний візуал, зручну навігацію, швидкий доступ до репертуару, новин, інформації про театр та творчої команди. Проєкт поєднує естетику театрального простору з практичною структурою сайту, який легко адмініструвати та масштабувати.

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

Етапи роботи
1. UI/UX та дизайн у Figma
На першому етапі була створена дизайн-концепція у Figma: структура головної сторінки, візуальна система, сітка, типографіка, картки вистав, новинні блоки, секція «Про театр», команда та футер.
-
Окрему увагу приділено атмосфері сайту: світлий мінімалістичний фон, великі театральні фото, стримана кольорова палітра, тонка типографіка та достатньо «повітря» між блоками.

2. Прототипування через Figma Make
Для прискорення роботи та перевірки структури сторінок використовувався Figma Make. Це допомогло швидко перевести дизайн-ідею у робочий прототип, протестувати композицію блоків і підготувати основу для подальшої верстки.

3. Верстка та фронтенд
Після затвердження дизайну була виконана адаптивна верстка сторінок. Сайт коректно працює на desktop, tablet і mobile, зберігаючи якість композиції та зручність користування.

Особливий акцент зроблено на:
- акуратній адаптації великих фото;
- читабельності текстів;
- зручних картках репертуару;
- швидких переходах до деталей;
- чистій HTML/CSS-структурі;
- оптимізації інтерфейсу без зайвих візуальних перевантажень.

4. GitHub та контроль версій
Розробка велася через GitHub, що дозволило контролювати зміни, безпечно вносити правки, зберігати історію розробки та підтримувати структурований робочий процес.

5. Інтеграція з WordPress
Фінальна реалізація була перенесена на WordPress. Сайт отримав зручну адміністративну частину, де можна керувати репертуаром, новинами, сторінками, фото та основним контентом без залучення розробника до кожної зміни.
-
Для проєкту була підготовлена структура, яку можна масштабувати: додавати нові вистави, сторінки, категорії новин, культурні події та інші розділи.

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

Також виконана оптимізація продуктивності:
- оптимізація зображень;
- мінімізація зайвих скриптів;
- чиста структура сторінок;
- швидке завантаження ключових секцій;
- адаптація під PageSpeed-показники.

У результаті сайт досягає 90+ балів швидкодії за PageSpeed Insights, що важливо як для SEO, так і для зручності користувачів.

Технології
Design / UI: Figma, Figma Make
Frontend: HTML, CSS, JavaScript, адаптивна верстка
CMS: WordPress, ACF
Version Control: Git, GitHub
Optimization: SEO-оптимізація, PageSpeed, оптимізація зображень, технічна оптимізація продуктивності

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

#WordPress #Figma #FigmaMake #WebDesign #Frontend #UIUX #TheatreWebsite #SEO #PageSpeed #GitHub #ResponsiveDesign #WordPressDevelopment #Portfolio #WebDevelopment