Комментарии
«Живая» вёрстка, шустрые анимации и Пётр I в проекте для самой масштабной интернет-конференции Северо-Запада
Результат Процесс
Мощный сайт конференции СПИК
Сибирикс
Мощный сайт конференции СПИК
«Живая» вёрстка, шустрые анимации и Пётр I в проекте для самой масштабной интернет-конференции Северо-Запада


СПИК — известная конференция на рынке российского диджитала, которая ежегодно привлекает более 3000 участников и 250+ экспертов в области интернет-маркетинга. В 2018-м в рамках мероприятия мы собрали свою секцию «Agile-маркетинг в digital», где вещали о нейронных связях в маркетинге, сквозной аналитике, причинах и следствиях в развитии диджитал-проектов.
Но в этом году у нас двойная радость: мы не просто выступаем на СПИКе, но ещё и сделали сайт самой конференции: яркий, крутой и мощный — в общем, такой, чтобы каждый хотел попасть 30−31 мая в Петербург и всё увидеть своими глазами!
Задачи
Последние два года у конференции не обновлялся визуал сайта, и чтобы подстегнуть внимание аудитории к мероприятию, требовалось что-то свежее и новое. Нам предстояло полностью переработать подачу материала в проекте, но при этом сохранить узнаваемость, логику, простоту и удобство восприятия информации.
Сайты конференции в 2017-м и 2018-м
Аналитика

Хотели бы посетить СПИК? Неудивительно, ведь здесь собираются все-все-все специалисты из мира интернет-маркетинга: два насыщенных дня, 5 залов, масса секций, гигабайты полезной информации, нетворкинг и пристальные глаза представителей разношерстных СМИ. Среди участников есть люди, которые посещают конференцию не первый год. А есть те, кто давно мечтал попасть сюда, и наконец-то удача ему улыбнулась.

Чтобы угодить новичкам и матёрым участникам, мы предложили переключатель в промо-блоке: здесь две основные группы ЦА найдут ключевую информацию о мероприятии — сходу и без лишних поисков по главной. Следом на странице — ключевые спикеры и темы конференции.
На сайтах мероприятий часто бывает, что на главной всё классно расписано, но о ценах ни слова — пользователь с подогретым интересом должен искать страничку со стоимостью билетов, вникать в варианты оплат: интерес при этом падает. На новом сайте СПИКа по-другому: прочитал о конференции, загорелся темами, узнал про спикеров и тут же увидел ценник — никаких секретов, никаких переходов в другие разделы. Остаётся только кликнуть и зарегистрироваться!
А если всё-таки остались сомнения — ниже появляется блок «Что мне даст СПИК?», фотки с конференции предыдущего года, отзывы гостей, новости, список партнёров.
Дизайн
Из примеров, собранных на мудборде, заказчику понравились варианты с нестандартной сеткой, крупной типографикой и акцентными фотографиями.
В цветовой гамме мы решили уйти от акцентного жёлтого и сосредоточиться на контрастных цветах из логотипа: энергичный флагманский красный в сочетании с монохромными цветами отлично подходит для акцентов. Взяв за основу три цвета, мы предложили смелый геометричный макет с алыми акцентами и черно-белыми фотографиями.

Клиент хотел чего-то мощного, динамичного и даже агрессивного, поэтому макет получился довольно ярким и сильным по подаче. По словам клиента, мы попали точно в цель. Единственное, что немного его смущало — монохромные фото, которые в итоговой версии мы заменили на полноцветные.

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

Марина
Руководитель проекта
Нестандартная вёрстка, крупные шрифтовые акценты и яркие алые плашки наследуются на всех страницах нового сайта, задавая тон и настроение проекта. Темный фон, который так нравится заказчику, смотрится очень стильно в сочетании с контрастами и яркими акцентами на страницах.

Чтобы визуал проекта был гармоничным, мы тщательно продумали графические и композиционные акценты: яркие краски, иллюстрации, геометрические образы цепляют и удивляют. Выразительная типографика позволяет создавать мощные цепляющие макеты. Нестандартная сетка и наложенные друг на друга слои и элементы добавляют глубину и текстуру дизайну. А такие эффекты, как смягчение, плавные переходы и анимация в навигации делает интерфейс более живым и отзывчивым.


А счастливчика, нашедшего 404-ю страницу, ждёт сюрприз :)
Сперва было принято решение сделать простое, статичное изображение страницы ошибки 404, но нам показалось, что это слишком просто, и мы решили дать волю фантазии и поэкспериментировать, после чего получился очень крутой эффект, который нам так сильно понравился, что мы даже забрали его себе … кое-куда :)

Артём
Разработчик
Разработка
Сайт вовлекает с первого экрана: здесь разместилось динамичное видео с панорамами северной столицы и кадрами, снятыми на конференции. Фишка промо-блока — элементы управления справа в виде квадратов, которые разделяют аудиторию на ту, что уже была на СПИКе (а это пиарщики, маркетологи, аналитики, владельцы бизнеса и журналисты) и ту, которая здесь впервые (для них выводятся ключевые факты о конференции).
Весь сайт буквально живой: он отзывчиво реагирует на ховеры, нажатия кнопок и скролл, шустро меняя контент в слайдерах и подгружая всё новые клёвые блоки. А перед футером триумфально появляется силуэт Петра Первого на коне — одного из главных символов Санкт-Петербурга.
Когда мы увидели макеты сайта, нам сразу захотелось сделать его более подвижным. Мы пробовали различные решения и плагины и в итоге получили живой и плавный сайт. При адаптации под мобильные устройства постарались сохранить легкую анимацию и все основные элементы дизайна, чтобы User Experience был одинаковым

Роман
Разработчик
На главной мы использовали крутой приём с использованием svg-масок для блока «Что мне даст СПИК». C помощью формы, в которую заключен визуальный контент, интерактива и анимации удалось создать компактный информативный блок, который привлекает внимание пользователя.
Для программы конференции мы тоже разработали клевую анимацию, которая работает на юзабилити сайта, выдавая информацию удобными порциями. На блоках с перерывами спрятались удобные попапы с подсказками вкусных мест для перекуса, ссылками на блог и соцсети. А внутри расписания у каждого доклада выводится уровень сложности: какие-то годятся для новичков, какие-то для экспертов, а какие-то — для специалистов.
Мы реализовали один единственный, но очень универсальный шаблон для программных блоков, чтобы можно было задавать различное визуальное оформление и немного уйти от монотонной вёрстки. Меняется всё достаточно просто при добавлении или удалении различных атрибутов на партнерском портале RUNET-ID. Хотите для визуального оформления горизонтальную полосу — пожалуйста! Вертикальную — не проблема! Можно хоть обе сразу, главное, чтобы сочетались с контентом :)

Роман
Разработчик
Даже маленькие детали заслуживают пристального внимания — у каждого доклада есть иконка сердечка, нажав на которую, авторизованный пользователь может добавить его в свою программу. Мы заморочились с анимацией, чтобы лайк стал почти волшебным :)
После просмотра программы и добавления интересных докладов в избранное пользователь можете переключиться во вкладку «моя программа», где будут собраны только интересные ему спикеры и темы.
В личном кабинете собрана вся основная информация по взаимодействию посетителя с мероприятием: здесь можно купить билет для себя и своих коллег, просмотреть памятки с подробной информацией, paperless-материалы (на СПИКе вместо привычных буклетов, блокнотов и программок, которые надо таскать в руках, можно взять их цифровую версию на единственном носителе). Здесь же выводятся избранные спикеры и доклады.
Но самое главное — это возможность назначить встречу с другими участниками конференции в специально предназначенных для этого переговорных комнатах. Если встреча подтвердится или придёт отказ, пользователь увидит статус запроса и сопроводительное сообщение. И всё это в рамках личного кабинета — удобно же!
Еще одна особенность проекта в том, что написан он не на Битриксе, а на Symphony :) Здесь даже админку пришлось создавать вручную.
В сборке для Битрикса у тебя есть множество удобных обёрток для работы, здесь все основные вещи приходилось писать с нуля, вчитываясь в документацию. Даже шаблонизатор Twig мы выбрали не просто так, лишь бы посильнее выйти из зоны комфорта :)

Роман
Разработчик
Когда я только бралась за проект, предполагалось, что это будет простой классный корпоративник, но потом выяснилось, что сайт нужно интегрировать с базой RUNET-ID, где хранится куча информации о мероприятиях рунета плюс учетные записи пользователей, и начался фарш :)

Марина
Руководитель проекта
Вся рабочая информация хранится у RUNET-ID: участники, доклады, билеты. Но чтобы не дергать каждый раз их API (иначе забанят за слишком большое количество обращений), все эти данные мы синхронизировали в нашу базу данных — функции синхронизации предоставил заказчик. Было много путаницы из-за способа использования функционала RUNET-ID: из-за второго билета для участника и из-за неполного понимания, как у них всё реализовано на других проектах. Но мы победили! :)

Андрей
Разработчик
Отзыв заказчика
Сибирикс — это команда, которая получает удовольствие от своей работы. Это видно в каждой мельчайшей детали дизайна, в подходе к общению с заказчиком, в кропотливой разработке. Каждый раз, когда мы проходили опрос удовлетворенности работой над проектом, мы советовали выписать всем премию! Настолько безукоризненно и с душой ребята делают свое дело. Если нас попросят порекомендовать подрядчика по разработке, это точно будет Сибирикс.

Екатерина Леонова
Представитель оргкомитета конференции СПИК
Проект получил признание на awwwards.com — крутейшем ресурсе профессиональных дизайнеров и разработчиков.
И хотя на сайте конференции пока открыты не все разделы (странички выставки, афтепати и другие уже наполняются контентом), вы уже можете рассмотреть его со всех сторон и, конечно, прикупить билетик — в 2019-м мы традиционно выступаем на СПИКе с докладом. До встречи в Петербурге!
Готовый проект