Да. Ниже предлагаю разобрать только первую страницу — главную
/ как полноценный дизайн/контент-сценарий, а не
просто sitemap.
При этом я беру за основу новую стратегическую формулировку:
«Стихи и Танцы» — авторский культурно-социальный проект из
Санкт-Петербурга с ежегодным флагманским событием и развивающимися
вокруг него направлениями. Старую коммуникацию про «состояние»,
«вернуться к себе», «из вечера — в сообщество» на главной не
используем.
В материалах проекта уже есть сильные опорные элементы: авторская
режиссура, Петербург, поэзия, танец, благотворительность, работа с
артистами и первые коллаборации с бизнесом.
fileciteturn5file13L1-L18 fileciteturn5file9L1-L20
01. ГЛАВНАЯ
Общий сценарий страницы
Главная должна ощущаться не как лендинг мероприятия и не как
корпоративный сайт, а как вход в уже существующий культурный
мир.
Сценарий движения:
Узнать → увидеть масштаб → понять идею → увидеть развитие →
понять, что вокруг события существует система → выбрать свою точку входа
→ познакомиться с авторами → перейти к действию.
Важный принцип:
Не объяснять проект слишком быстро. Сначала дать его увидеть,
затем — понять.
Поэтому первая половина страницы преимущественно визуальная и
образная, вторая — более рациональная.
БЛОК 01 — HERO
Задача
С первого экрана должно быть понятно:
- что это;
- откуда это;
- что это не просто один вечер;
- что у проекта есть авторская позиция.
Текст
СТИХИ И ТАНЦЫ
Авторский культурный проект
из Санкт-Петербурга
Небольшая дополнительная строка:
Искусство, авторская режиссура, Петербург и социальная миссия.
Кнопки:
Смотреть ближайшее событие
О проекте
Но я бы не перегружал Hero большим описанием.
Визуал
Не фотография «людей на мероприятии».
Нужен кинематографический образ, который сразу
создает собственную эстетику проекта:
- человек / силуэт;
- архитектурный Петербург;
- фрагмент пространства;
- ткань;
- движение;
- лицо;
- рука;
- свет;
- деталь интерьера.
Причём изображение может быть частично скрыто тенью или
туманом.
Важно: визуал не должен выглядеть как историческая реконструкция
Петербурга. В материалах прямо зафиксировано: не винтаж, не
костюмированный бал, не театрализованное шоу.
fileciteturn5file16L1-L15
Композиция
Я бы сделал очень много воздуха.
Логотип/название — крупное.
Под ним:
Авторский культурный проект
из Санкт-Петербурга
Справа или на фоне — крупная фотографическая композиция.
Внизу экрана:
SCROLL ↓
Анимация
При загрузке:
- фон появляется не сразу, а через мягкое проявление;
- название выходит с небольшим вертикальным смещением;
- подзаголовок появляется позже;
- фотография медленно проявляется из затемнения;
- очень лёгкое движение изображения при скролле.
Переход в следующий блок
Не обычный резкий scroll.
Можно сделать эффект «занавеса»:
при прокрутке нижняя часть Hero как будто продолжает изображение
следующего блока.
Но именно абстрактный современный переход, не
театральный занавес.
Ощущение
«Это что-то настоящее, авторское и уже существующее. Хочется
посмотреть дальше».
Не роскошь.
Не элитарность.
Не «вечеринка для своих».
БЛОК 02 — БЛИЖАЙШЕЕ /
ФЛАГМАНСКОЕ СОБЫТИЕ
Это первый коммерческий блок.
После создания интриги мы должны быстро дать человеку возможность
понять:
что происходит сейчас.
Заголовок
Ближайшее событие
или сильнее:
Флагман проекта
Основной текст
Например:
Каждый год 21 марта, в День поэзии, «Стихи и Танцы» собирает гостей,
артистов и авторов вокруг нового художественного замысла.
Это центральное событие проекта — с собственной темой, драматургией,
программой и визуальным языком.
Для 2026:
ЧУВСТВУЙ
21 марта 2026
Но поскольку сейчас проект развивается дальше, архитектурно этот блок
должен быть динамическим.
В будущем здесь автоматически:
СОЗЕРЦАЙ
21 марта 2027
и т. д.
Визуал
Большая фотография или композиция:
- сцена;
- человек в свете;
- движение;
- деталь;
- архитектура.
Рядом:
21 МАРТА
САНКТ-ПЕТЕРБУРГ
И статус:
БИЛЕТЫ В ПРОДАЖЕ
CTA
Подробнее о событии
Если продажи открыты:
Купить билет
Анимация
Здесь уже можно сделать более динамичную механику.
Например:
при наведении на карточку события:
- фотография слегка увеличивается;
- дата остаётся неподвижной;
- поверх появляется тонкая бронзовая линия;
- название темы слегка смещается.
На мобильном — без hover, через tap/scroll.
Ощущение
«У проекта есть центр. Это не абстрактное движение — есть
конкретное событие, в которое можно войти».
БЛОК 03 — ЧТО ТАКОЕ «СТИХИ И
ТАНЦЫ»
Здесь нужно впервые объяснить сущность проекта.
И вот здесь особенно важно не возвращаться к старой формуле
«не событие, а состояние».
Заголовок
Что такое «Стихи и Танцы»
И крупная фраза:
Авторский культурный проект, который соединяет искусство,
людей и Петербург.
Текст
Предлагаю сделать коротко:
«Стихи и Танцы» выросли из ежегодного благотворительного поэтического
вечера и сегодня развиваются как самостоятельный культурный проект.
В его основе — авторская режиссура, поэзия, музыка, танец, живое
взаимодействие людей и Петербург как культурная среда.
Вокруг флагманского события постепенно возникают новые культурные,
исследовательские, социальные и партнёрские направления.
Визуальная часть
Не одна фотография.
Сделать редакционный коллаж из 3–4 кадров:
- лицо;
- сцена;
- Петербург;
- рука / книга / текст;
- движение ткани;
- люди за столом.
Изображения могут пересекаться.
Анимация
При скролле:
- изображения появляются последовательно;
- каждое имеет небольшой собственный offset;
- текст появляется между ними.
Можно использовать эффект:
фотография → текст → фотография → текст
То есть страница начинает напоминать цифровой журнал /
культурное издание.
Ощущение
«Теперь я понимаю, что это не просто
мероприятие».
БЛОК 04 — ТРИ ГОДА /
АВТОРСКАЯ ДРАМАТУРГИЯ
Это один из самых важных блоков всей главной.
Он визуально доказывает новую стратегию: проект развивается
не количественно, а содержательно.
Заголовок
Одна линия. Три главы.
или:
Авторская драматургия проекта
Основной визуальный элемент
Горизонтальная линия:
2026
ЧУВСТВУЙ
→
2027
СОЗЕРЦАЙ
→
2028
СОЗДАВАЙ
Это не три отдельных мероприятия.
Нужно прямо сказать:
Три года — три последовательные главы одной авторской линии.
Визуал
У каждого года собственная фотографическая/графическая атмосфера.
Например:
ЧУВСТВУЙ
человек / тело / движение / свет
СОЗЕРЦАЙ
архитектура / взгляд / тишина / пространство
СОЗДАВАЙ
руки / работа / взаимодействие / материал
Но это пока арт-дирекционный принцип, а не готовые
фотографии.
Анимация
Здесь можно сделать очень красивый scroll interaction.
Пользователь скроллит:
2026 →
остальные годы находятся немного в перспективе.
При достижении блока:
2026 становится активным.
Затем при горизонтальном движении/скролле:
2027 выходит вперёд.
Затем:
2028.
На мобильном — вертикальная последовательность.
Переход
Линия из предыдущего блока может продолжиться здесь.
Например:
тонкая бронзовая линия проходит через страницу и становится временной
шкалой.
Это может стать одним из повторяющихся графических мотивов
сайта.
Ощущение
«У проекта есть замысел и будущее».
Это принципиально важно для нового позиционирования.
БЛОК 05 — ЭКОСИСТЕМА ПРОЕКТА
Теперь нужно показать, что вокруг флагмана развивается система.
Заголовок
Проект развивается в нескольких направлениях
И под ним:
Флагманское событие — центр проекта. Вокруг него появляются
культурные инициативы, исследования, социальные программы и проекты для
бизнеса и территорий.
Четыре направления
Я бы визуально сделал не обычные четыре карточки.
А 4 крупных поля, например:
01
Культурные проекты
События, специальные форматы, коллаборации.
02
Исследования
Петербург, культура, люди, художественные практики.
03
Бизнес и территории
Культурные решения для брендов, компаний и городских пространств.
04
Социальное направление
Культурные программы и поддержка людей, которым особенно нужна такая
среда.
Важный нюанс
Не писать сейчас длинные описания.
Главная должна показать карту, а не рассказать все
подробности.
Визуал
Очень графичный блок.
Например:
в центре:
СТИХИ
И ТАНЦЫ
от него расходятся четыре линии.
Получается своеобразная карта проекта.
Это может стать очень сильным фирменным визуальным элементом.
Анимация
При наведении:
- выбранное направление увеличивается;
- остальные слегка приглушаются;
- линия от центра до него становится активной;
- появляется короткое описание.
Например:
БИЗНЕС И ТЕРРИТОРИИ
→
Культурные решения для компаний, брендов и пространств.
На мобильном
Вертикальный список с раскрытием.
Ощущение
«Здесь есть структура, но она не корпоративная».
БЛОК 06 — СОБЫТИЯ / ИСТОРИЯ
Теперь пользователь уже понимает проект и его развитие.
Можно показать историю.
Заголовок
События проекта
Подзаголовок:
Каждый вечер остаётся частью общей истории проекта.
Структура
Не просто сетка фотографий.
Лучше хронология.
Например:
2026 — ЧУВСТВУЙ
2025 — ...
2024 — ...
2023 — ...
Каждое событие:
- год;
- название;
- одна сильная фотография;
- короткое описание.
Визуал
Очень крупные изображения.
Можно сделать эффект:
при наведении курсора фотография занимает больше
пространства, соседние элементы сжимаются.
Это соответствует прежней идее интерактивных карточек, но здесь нужно
сделать её более редакционной.
Анимация
Scroll:
- события появляются не одновременно;
- сначала год;
- потом название;
- потом фотография.
Фотография может иметь небольшой blur → focus.
CTA
Смотреть все события
Ощущение
«У проекта есть история. Это не идея, которую придумали
вчера».
БЛОК 07 — СТАТЬ ЧАСТЬЮ
ПРОЕКТА
Вот здесь мы возвращаемся к прежней логике выбора роли, но уже без
идеи «сообщества/клуба».
Заголовок
Как вы можете участвовать в проекте
или сильнее:
Выберите свою роль
Три направления
ГОСТЬ
Посетить флагманское событие и стать частью его программы и
атмосферы.
CTA:
На событие
АРТИСТ
Создавать художественную программу вместе с проектом.
Здесь можно использовать подтверждённые преимущества из материалов:
помощь с подготовкой, светом и звуком, стилистикой, профессиональной
записью выступления и т. д. fileciteturn5file3L1-L17
CTA:
Стать артистом
ПАРТНЁР
Поддерживать развитие проекта и участвовать в создании новых
культурных инициатив.
CTA:
Стать партнёром
ВАЖНО
Бизнес сюда не помещаем.
Потому что B2B — отдельное направление проекта.
Это принципиальная разница новой архитектуры.
Визуал
Три вертикальные панели.
Каждая — отдельная фотография.
При наведении:
изображение становится светлее / контрастнее;
появляется текст;
название роли становится крупнее.
Анимация
Можно сделать очень красивый cursor-driven
effect:
курсор двигается по трём колонкам → изображение каждой панели немного
реагирует.
На мобильном — карточки раскрываются при попадании в viewport.
Ощущение
«Я могу не просто посмотреть — у меня есть понятная точка
входа».
БЛОК 08 — АВТОР + КОМАНДА
Это переход от продукта к людям.
Заголовок
Проект создают люди
Композиция
Не делать классический блок:
Яна Леонтьева
основатель проекта
[фото]
Это слишком сильно возвращает проект в модель «личный бренд одного
человека».
Лучше:
крупная фотография Яны + рядом короткий авторский манифест.
Основной текст
Здесь можно использовать сильную исходную авторскую фразу:
«Я не организатор мероприятий. Я создаю
пространства». fileciteturn5file4L1-L9
Но не оставлять её в старом контексте.
Продолжение:
Яна Леонтьева — автор и создатель проекта «Стихи и Танцы».
Проект вырос из личной инициативы в самостоятельную культурную
практику, которая сегодня развивается вместе с командой, артистами,
партнёрами и участниками.
Команда
Ниже:
Команда проекта
Можно показать 3–5 человек.
Пока даже если команда небольшая.
Визуал
Фотографии не должны быть корпоративными headshots.
Лучше:
- портрет;
- рабочий момент;
- монтаж;
- обсуждение;
- сцена;
- подготовка.
То есть показать людей в процессе создания
культуры.
Анимация
Большой портрет Яны может слегка двигаться при скролле.
Командные фотографии появляются каскадом.
Ощущение
«За этим стоит человек с авторским взглядом, но проект уже
больше одного человека».
БЛОК 09 — СОЦИАЛЬНОЕ
НАПРАВЛЕНИЕ
Я бы не делал благотворительность просто маленьким блоком «10%
выручки».
Это обесценивает её.
Материалы проекта показывают, что социальная составляющая исторически
встроена в проект: средства направлялись на поддержку женщин в сложных
жизненных обстоятельствах, а отдельные культурные программы уже
проводились. fileciteturn5file11L1-L17
fileciteturn5file14L1-L15
Заголовок
Культура может быть действием
Текст
Социальное направление — часть проекта с самого начала.
Мы создаём культурные программы и поддерживаем инициативы,
направленные на помощь женщинам, оказавшимся в сложных жизненных
обстоятельствах.
Если есть конкретные цифры/результаты — здесь должны появиться
они.
Например:
4 программы
120 участников
… ₽ направлено
Но только реальные подтверждённые цифры.
Визуал
Очень спокойный.
Не фотографии болезни, больниц и страдания.
Только:
- люди;
- руки;
- творчество;
- пространство;
- искусство.
Анимация
Минимальная.
Никаких эффектов ради эффекта.
Ощущение
«Это не маркетинговая приставка к мероприятию. Это реальная
часть проекта».
БЛОК 10 — ДРУЗЬЯ ПРОЕКТА
Поскольку «друзья проекта» пока не являются отдельным продуктом, блок
должен быть очень компактным.
Заголовок
Друзья проекта
Под ним — логотипы.
Если есть хорошие партнёры/коллаборации:
[logo] [logo] [logo] [logo]
Визуал
Не стандартный скучный логотип-бар.
Лучше горизонтальная лента на тёмном фоне.
Логотипы появляются по одному.
Анимация
Очень медленный horizontal marquee допустим.
Но не бесконечная автоматическая бегущая строка,
если логотипов мало.
Лучше:
hover → логотип становится активным → появляется название/ссылка.
Ощущение
«Проект существует внутри культурной среды и уже связан с
другими людьми и организациями».
БЛОК 11 — ФИНАЛЬНЫЙ CTA
Финал должен возвращать пользователя к действию.
Но действие зависит от текущего состояния проекта.
Если идёт продажа билетов
Крупно:
Следующая встреча — 21 марта
Стихи и Танцы. Чувствуй
21.03.2026 · Санкт-Петербург
Купить билет →
Если продажи закрыты
Следующее событие уже готовится.
Следить за проектом →
Если пользователь
пришёл не за событием
Дополнительные ссылки:
Стать артистом
Стать партнёром
Визуал
Здесь можно вернуть визуальный мотив Hero.
Но теперь пользователь уже знает, что за ним
стоит.
Например, тот же человек/пространство, которое было в первом экране,
но теперь снято с другого ракурса.
Это создаёт эффект:
начало → путешествие → возвращение.
Анимация
Медленное движение изображения.
Название события фиксируется.
Кнопка появляется последней.
Ощущение
«Я хочу войти в этот проект».
Минималистичный.
Левая часть
СТИХИ
И ТАНЦЫ
Авторский культурный проект
из Санкт-Петербурга.
Навигация
Проект
События
Направления
Стать частью проекта
Отдельно
Telegram
VK
Instagram
Контакты
Для:
- артистов;
- партнёров;
- бизнеса.
Юридическое
Политика конфиденциальности
Согласие на обработку персональных данных
Реквизиты / документы
Теперь
самое важное — система анимаций всей страницы
Я бы не делал каждый блок анимированным
отдельно.
Нужна единая грамматика движения.
1. Базовое появление
Все основные элементы:
opacity 0 → 1
translateY 20–30px → 0
Длительность примерно 0.6–0.9 sec.
Без пружин, bounce и подобных эффектов.
2. Изображения
Изображения:
blur → focus
или
clip-path → full image
Это будет выглядеть намного дороже стандартного fade-in.
3. Линия
Одна тонкая линия может стать сквозным визуальным мотивом
сайта.
Она:
- появляется в Hero;
- становится линией временной шкалы;
- связывает направления;
- исчезает в конце.
Это даст ощущение, что все блоки — части одной
системы.
4. Наведение
Hover должен быть преимущественно:
- увеличение изображения
1.03–1.06; - изменение контраста;
- появление текста;
- движение тонкой линии.
Не использовать:
- 3D-карточки;
- сильные вращения;
- bounce;
- неон;
- glassmorphism;
- чрезмерные параллаксы.
Переходы МЕЖДУ блоками
Это отдельный вопрос, и я считаю его очень важным.
Не нужно делать:
блок → белый/чёрный фон → следующий блок.
Страница должна ощущаться как единая визуальная
композиция.
Hero → Event
Изображение Hero может продолжиться вниз и превратиться в изображение
события.
Event → What is it
Дата/линия события превращается в тонкую графическую линию, которая
ведёт пользователя дальше.
What is it → 3 года
Текстовый блок постепенно очищается, остаётся одно слово:
ЧУВСТВУЙ
и из него рождается timeline.
3 года → Ecosystem
Линия timeline превращается в центральную точку.
Из точки расходятся четыре направления.
Это особенно красиво:
одна точка → четыре направления.
Ecosystem → Events
Одна из линий направлений становится вертикальной линией хронологии
событий.
Events → Roles
Фотография события увеличивается на весь экран и через неё происходит
переход к вопросу:
«А кто вы в этом проекте?»
Roles → Author
Карточки ролей постепенно исчезают, остаётся изображение
человека.
И появляется:
«Проект создают люди».
Author → Social
Фотография команды переходит в фотографию социального проекта.
Так визуально показываем:
люди → действие → социальный результат.
Social → Friends
Фотография исчезает, остаётся фактура/фон, поверх которого появляются
партнёры.
Friends → Final CTA
Возвращаемся к эстетике Hero.
Как должна ощущаться
вся первая страница
Если собрать эмоциональную драматургию:
| Этап | Ощущение |
| Hero | Интрига |
| Флагман | Интерес |
| Что такое проект | Понимание |
| 3 года | Масштаб / перспектива |
| Направления | Система |
| История | Доверие |
| Стать частью | Возможность участия |
| Автор + команда | Человеческое доверие |
| Социальное | Смысл / ответственность |
| Друзья | Признание / среда |
| Final CTA | Действие |
И главное:
Пользователь не должен выйти с ощущением «красивый сайт
поэтического вечера».
Он должен выйти с ощущением:
«Это авторский культурный проект из Петербурга, у которого
есть свой художественный язык, история, ежегодный центр, команда,
социальная миссия и понятное будущее. Я могу стать его частью — как
гость, артист или партнёр».
Именно это, на мой взгляд, наиболее точно переводит новую стратегию
Яны в UX.
При этом визуальный код можно строить на том, что уже было
сформулировано в материалах: современная интеллигентность, глубокие
тёмные цвета, патинированная бронза/золото, современная типографика,
документальная fashion-фотография, лица, жесты, текстуры, туман —
без винтажности и театральщины.
fileciteturn5file13L1-L18
В следующем подходе логично так же разобрать страницу №2 —
«Проект»: уже не как общую архитектуру, а буквально по экрану/блоку, с
готовыми текстами, визуалом и переходами.