Первый экран
Свой WebGL-оттиск, без чужого 3D. Красные и чёрные точки растра на бумаге, круглая печать, крупное слово с красным сдвигом. Номер оттиска — сегодняшнее число, под ним событие дня.
Сайт культурного центра
ЦСИ Винзавод
Новый сайт ЦСИ Винзавод собирает в одном месте то, чем центр живёт каждую неделю: программу, галереи, резидентов, новости, магазин и визит. Первый экран — не баннер, а живой оттиск: красный растр на бумаге, круглая печать, крупное слово и сегодняшняя дата. Дальше редакция сама ведёт афишу, а заказы, заявки и правки резидентов падают в админку.
NEXT.JS
TYPESCRIPT
WEBGL
PWA
ЗАДАЧА
У центра был большой старый сайт с тысячами страниц событий и новостей и со своими адресами, которые уже стоят в поиске. Программу при этом нужно менять каждую неделю: выставки, открытые студии, тексты резидентов. Нужна публичная часть на русском и английском и рабочий кабинет, куда приходят заказы магазина, заявки на площадку, записи на события и подписка на рассылку. И отдельный сценарий с телефона: поставить сайт на домашний экран и прислать уведомление о событии.
РЕШЕНИЕ
Собрали сайт на Next.js. Русская версия живёт на корневых адресах, английская — на /en. Старые адреса ведут на новые страницы. Архив старого сайта перенесён: 1 647 событий и 210 новостей. Живую программу, новости, проекты, документы, тексты и SEO редакция правит в админке, страница обновляется без выкладки кода. Заказы, заявки, записи и подписка хранятся там же. Резидент входит в кабинет и предлагает правку своей страницы, модератор её публикует. Сайт ставится на телефон как PWA и умеет присылать уведомления.
ФУНКЦИОНАЛ
Дизайн
Палитра центра: красный #BA1334, чёрный и белый. Знак и логотип взяты из макета.
Движение
Плавный скролл, появление блоков, шкала истории. На телефоне фильтры афиши открываются шторой и не ломают список. Если человек просит меньше анимации, движение отключается.
Два языка
Русский на корневых адресах, английский на /en. Переключатель в шапке, у страниц есть пара для поисковика.
Сайт
Публичная часть закрывает визит, программу и территорию, а не только главную.
Афиша и архив
Живая программа: тип, площадка, карточка события, запись. Сейчас в афише 23 события. Архив старого сайта — 1 647 прошедших. Старые адреса открывают новые страницы.
Территория
О центре, история, посетителям со схемой корпусов, проекты, пресса, документы, вакансии, партнёры. Резиденты: 37 площадок, из них 13 галерей. Новости: 210 материалов с фильтром по годам.
Поиск
Один поиск по страницам, событиям, новостям и резидентам.
Магазин, заявки, кабинет
То, что раньше уходило в почту и таблицы, собирается в одном месте.
Магазин
44 позиции, корзина, самовывоз по территории. Заказ сохраняется в админке. На формах стоит ограничение по частоте, чтобы их не заспамили.
Заявки
Аренда площадки, запись на событие, подписка на рассылку. Каждое обращение видно в своём разделе.
Кабинет резидента
Резидент входит и предлагает правку своей страницы: текст, часы, телефон, сайт. Модератор публикует или отклоняет. На сайте остаётся только принятая версия.
Админка и бэкенд
Редакция работает сама. Разработчик не нужен, чтобы поменять выставку или текст на главной.
14 разделов
Сводка, заявки на площадку, заказы магазина, рассылка, записи на события, галереи, афиша, новости, проекты, пресса, документы, тексты и контакты, SEO, уведомления.
Как устроено
Контент лежит в JSON на сервере. Правка сбрасывает кэш страниц, и сайт показывает новую версию. Картинки загружаются из той же панели. Вход по паролю, сессия, без отдельной CMS.
Письма
Заказ и заявка могут дублироваться письмом покупателю и команде, когда подключена почта.
PWA
Сайт ставится на телефон и умеет стучаться уведомлением.
Установка
Иконка, отдельное окно без браузерной рамки, ярлыки на афишу, резидентов и магазин. На Android — системное окно установки. На iPhone — подсказка через «Поделиться».
Уведомления
Человек подписывается на телефоне. Рассылка уходит из раздела «Уведомления» в админке: заголовок, текст, ссылка. Сервис-воркер принимает пуш, даже если вкладка закрыта.
Без навязчивости
Карточка установки не лезет в админку. Если человек закрыл её, она молчит две недели.
ИНТЕРФЕЙС01 / 05
Первый экран. Живой оттиск
1 647Событий в архиве
210Новостей
14Разделов админки
[ ПОХОЖИЕ ПРОЕКТЫ ]
Интерактивная карта
Интерактивная карта Сергиева Посада
Digital-путеводитель по Сергиеву Посаду и Троице-Сергиевой лавре с фильтрами, маршрутами, объектами на карте и новостным блоком.
ПОДРОБНЕЕ
Промышленный сайт
Boilte: промышленный сайт с CMS, 3D-визуализацией и AI-консультантом
Инженерный сайт для производителя промышленных котлов: каталог, JSON-CMS, 3D-просмотр, прайс-лист на 937 позиций и AI-консультант для подбора оборудования.
ПОДРОБНЕЕ
Веб-платформа
Трекер задач
Корпоративный таск-трекер нового поколения для команд, которым важен результат, а не бюрократия.
ПОДРОБНЕЕ