Фонд «Тандем»: сайт, на котором танцует каждый блок
Фонд культурных инициатив «Тандем» проводит всероссийские хореографические конкурсы и фестивали. Идея (концепция) и дизайн сайта: студия дизайна и брендинга PAPERPOST. Мы превратили макет в живой сайт на WordPress: анимации по скроллу, страницы конкурсов с приёмом заявок и админку, в которой фонд сам заводит новые фестивали.
Что нужно было сделать
У «Тандема» яркий продукт: сцена, свет, костюмы, сотни детских и взрослых коллективов со всей страны. Сайт должен был передавать это ощущение праздника с первого экрана, а не выглядеть как доска объявлений с расписанием.
Концепцию и дизайн придумала студия дизайна и брендинга PAPERPOST: фиолетово-коралловые градиенты, летящий шёлк, крупная типографика и движение почти в каждом блоке. Студия передала макет в Figma и отдельно разобрала на созвоне, как должен двигаться каждый элемент.
Задача Дома Маркетинга: собрать сайт так, чтобы он выглядел и двигался ровно как в макете, работал на телефоне и при этом управлялся командой фонда без разработчика: новые конкурсы, номинации, жюри, заявки, отзывы и фото.
Как мы подошли
Начали с разбора: записали созвон с дизайнером студии и превратили его в техническое задание по анимациям, где у каждого блока есть свой сценарий, тайм-код обсуждения и уровень сложности. Макет сняли поблочно, чтобы на ширине 1920 пикселей страница совпадала с дизайном точно, а между размерами экрана масштабировалась плавно, без скачков.
Сайт собран на своей теме WordPress без конструкторов. Все тексты, фото и кнопки вынесены в поля бесплатного ACF, а повторяющиеся элементы (мероприятия, жюри, отзывы, фото, вопросы) сделаны отдельными разделами админки. Редактор меняет содержимое, но сломать вёрстку не может.
После главной сделали внутренние страницы по второму макету: список мероприятий, шаблон страницы конкурса с формой заявки, окно «Написать нам», страницы ошибок 404 и 405 и мобильные версии.
Объём работ
Проект в цифрах
Это объём работ, а не результат продвижения. Сайт только запущен, данные по заявкам появятся после первого сезона приёма.
Как это выглядит
Как мы собирали сайт
Дизайн, который нельзя было упростить
Идея (концепция) и дизайн сайта принадлежат студия дизайна и брендинга PAPERPOST. Студия придумала для «Тандема» образ сцены: тёмно-фиолетовый фон, вспышки кораллового и синего света, танцовщицы в летящем шёлке, крупные заголовки. Посмотреть другие работы студии можно в её портфолио на Behance.
Такой дизайн легко испортить при разработке: чуть другой отступ, мыльная картинка, дёрганая анимация, и сцена превращается в обычный шаблон. Поэтому мы не «делали по мотивам», а сверяли каждый блок с макетом на реальной ширине экрана и отдельно проверяли мобильную версию.
Анимации: как сцена ожила
На созвоне студия показала, как должен двигаться каждый блок. Мы расшифровали запись и собрали из неё техническое задание: десять сценариев, у каждого своё поведение на компьютере и на телефоне.
В блоке преимуществ картинка слева стоит на месте, а пункты справа едут, и на каждом пункте фото сменяется. Карточки основателей сначала расходятся по высоте, потом встают на один уровень. Фотогалерея бесконечно движется лентой, а центральное фото разворачивается с подписью. Кнопки притягиваются к курсору.
Закрепление блоков сделано средствами CSS, а не скриптом: так оно не дёргается на телефонах и не ломается, когда меняется высота страницы. Для тех, у кого в системе отключены анимации, сайт показывает спокойную версию.
Страница конкурса: один шаблон на все фестивали
Каждый конкурс «Тандема» живёт на своей странице: описание, номинации, возрастные категории, призы, жюри, стоимость участия, реквизиты и свои вопросы. Навигация по разделам и боковая панель с датами остаются на экране при прокрутке.
Фонд заводит новый конкурс в админке за несколько шагов. Пустой раздел на странице просто не показывается, поэтому на новой странице не останется чужих текстов из прошлого фестиваля.
Заявки без таблиц и переписки
Форма заявки встроена в страницу конкурса. Номинации и возрастные категории в ней берутся из настроек этого конкурса, поэтому участник не может выбрать то, чего в конкурсе нет.
Заявки падают в отдельный раздел админки и приходят письмом. После даты окончания приёма форма закрывается сама: статус меняется на «Приём заявок завершён», кнопки становятся неактивными. Никому не нужно помнить, что пора снять форму с сайта.
Админка для людей, а не для программистов
Мероприятия, жюри, номинации, отзывы, фото и вопросы ведутся как отдельные списки: добавить, поменять порядок перетаскиванием, скрыть. Подписи на кнопках и заголовки разделов меняются в одном месте сразу на всех страницах.
К запуску написали инструкцию со скриншотами и вынесли короткую шпаргалку на главный экран админки. Задача была в том, чтобы команда фонда обращалась к разработчику как можно реже.
Скорость и порядок перед запуском
Исходные фото весили 38 МБ. После перевода в WebP при том же качестве стало 2,8 МБ, а фото, которые фонд загружает сам, сайт пережимает в WebP автоматически. Фирменный шрифт подрезан до нужных символов, библиотеки анимаций лежат на самом сайте: для российского проекта это надёжнее внешних CDN.
Перед запуском подготовили документы (политика, согласия на обработку данных и на рекламу, пользовательское соглашение), плашку cookie, SEO-заголовки и карту сайта, страницы ошибок и мобильные версии всех экранов.
