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

Но в этом году у нас двойная радость: мы не просто выступаем на СПИКе, но ещё и сделали сайт самой конференции: яркий, крутой и мощный — в общем, такой, чтобы каждый хотел попасть 30−31 мая в Петербург и всё увидеть своими глазами!

Чтобы угодить новичкам и матёрым участникам, мы предложили переключатель в промо-блоке: здесь две основные группы ЦА найдут ключевую информацию о мероприятии — сходу и без лишних поисков по главной. Следом на странице — ключевые спикеры и темы конференции.

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

А если всё-таки остались сомнения — ниже появляется блок «Что мне даст СПИК?», фотки с конференции предыдущего года, отзывы гостей, новости, список партнёров.

Из примеров, собранных на мудборде, заказчику понравились варианты с нестандартной сеткой, крупной типографикой и акцентными фотографиями.

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

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

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

А счастливчика, нашедшего 404-ю страницу, ждёт сюрприз :)

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

Весь сайт буквально живой: он отзывчиво реагирует на ховеры, нажатия кнопок и скролл, шустро меняя контент в слайдерах и подгружая всё новые клёвые блоки. А перед футером триумфально появляется силуэт Петра Первого на коне — одного из главных символов Санкт-Петербурга.

На главной мы использовали крутой приём с использованием svg-масок для блока «Что мне даст СПИК». C помощью формы, в которую заключен визуальный контент, интерактива и анимации удалось создать компактный информативный блок, который привлекает внимание пользователя.

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

Даже маленькие детали заслуживают пристального внимания — у каждого доклада есть иконка сердечка, нажав на которую, авторизованный пользователь может добавить его в свою программу. Мы заморочились с анимацией, чтобы лайк стал почти волшебным :)

После просмотра программы и добавления интересных докладов в избранное пользователь можете переключиться во вкладку «моя программа», где будут собраны только интересные ему спикеры и темы.

В личном кабинете собрана вся основная информация по взаимодействию посетителя с мероприятием: здесь можно купить билет для себя и своих коллег, просмотреть памятки с подробной информацией, paperless-материалы (на СПИКе вместо привычных буклетов, блокнотов и программок, которые надо таскать в руках, можно взять их цифровую версию на единственном носителе). Здесь же выводятся избранные спикеры и доклады.

Но самое главное — это возможность назначить встречу с другими участниками конференции в специально предназначенных для этого переговорных комнатах. Если встреча подтвердится или придёт отказ, пользователь увидит статус запроса и сопроводительное сообщение. И всё это в рамках личного кабинета — удобно же!

Еще одна особенность проекта в том, что написан он не на Битриксе, а на Symphony :) Здесь даже админку пришлось создавать вручную.

Проект получил признание на awwwards.com — крутейшем ресурсе профессиональных дизайнеров и разработчиков.

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