Кейс: как мы делали лендинг для «Зенита» и случайно придумали новый формат

Привет! Меня зовут Николай Романов, я директор агентства «Инфографика». Мы анализируем и перерабатываем информацию, чтобы сделать её простой и понятной, и расставляем правильные акценты с помощью дизайна. Сегодня я расскажу, как мы работали над проектом к 35-летию первой победы ФК «Зенит».

Краткая предыстория: «Зенит» — культовый футбольный клуб. В Петербурге за него болеют целыми поколениями. Но мало кто знает, особенно среди молодых болельщиков, как «сине-бело-голубые» стали чемпионами в первый раз. Это крутая и вдохновляющая история, которой руководство клуба захотело поделиться с широкой аудиторией.

Задача: интересно рассказать про первую победу «Зенита» на чемпионате 1984 года болельщикам клуба и всем, кто интересуется футболом.

Решение: сделать сторилендинг. Клиенту подход сразу понравился.

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

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

Сценарий

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

История получилась очень киношной, вроде «Легенды №17» или «Движения вверх».

При этом ничего придумывать не пришлось: реальные события золотого сезона выглядели, как сюжет для спортивной драмы. Болельщики возлагали на команду большие надежды, которые в начале не оправдывались — «Зенит» занимал только 10-е место. Потом начались «американские горки»: подъём по турнирной таблице — проигрыши в чемпионате — неожиданная серия побед. И наконец, легендарный матч с «Динамо Тбилиси», где судьба золотых медалей решилась за последние 10 минут.

Раскадровка

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

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

Вот так, например, выглядела одна и та же сцена на разных этапах.

Черновая раскадровка:

Скетч для иллюстратора:

Отрисованный кадр, который был показан клиенту и вошёл в проект:

Иллюстрации

Одновременно с раскадровкой происходил поиск стилистики. Сначала попробовали строгую графичность, как в брендбуке «Зенита», но поняли — не то. А вот ламповая советская эстетика легла, как надо.

Чтобы создать атмосферу советской реальности 80-х, мы уделили особенное внимание деталям. Я тогда находился под большим впечатлением от сериала «Чернобыль» и восхищался тем, как точно им удалось показать быт, но без ощущения пыльного музея. Хотелось сделать так же.

Вот пример того, как иллюстраторы вдохновлялись советскими фотографиями.

Фото:

Иллюстрация:

Матчи у нас транслируются по радиоприёмнику и по телевизору «Радуга», болельщики носят шапки-петушки, усы и модные «лохматые» причёски.

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

Анимация

Мы с самого начала знали, что хотим что-то нестандартное, но с простой механикой. Остановились на скролле — читатель «пролистывает» слайды, никуда нажимать не нужно.

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

Программинг

Из-за того, что мы выбрали нестандартную механику сайта, у нас случилась куча багов. Дело осложнялось тем, что сроки по проекту были ограничены, и приходилось спешить.

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

Итоги

Несмотря на проблемы в самом конце, я считаю, что проект удался. У нас получилось самое главное — красивая цельная история. Мы взяли новый необычный формат, модернизировали его в процессе и сделали что-то совершенно уникальное.

Целиком проект можно увидеть здесь: http://1984.infografika.agency/

Буду рад вопросам и оценкам в комментариях.

0
25 комментариев
Написать комментарий...
Vadim Ts.

У нас было 2 мешка параллакса, 75 старых газет, а так же рисованные картинки всех цветов. Не то, чтобы это всё было нужно, но раз начал делать новый формат, то иди в своём увлечении до конца. Единственное, что беспокоило – это зерно. И я знал, что довольно скоро мы в него окунёмся.

Ответить
Развернуть ветку
Сергей Свинарь
Автор

)) еще подробное описание всех матчей

Ответить
Развернуть ветку
Nick

Красиво, тьма плюсов за старание, но почему не воспользовались конструкторами, readymag, например? Он прям 10 из 10 подходит под вашу историю + не так нужно было заморачиваться с "фронтом".

По делу: скролл очень шустрый, и "баблы" с текстом и сцены проскакивают очень быстро, не успеваешь погрузиться и уловить суть проекта, смещая фокус на поимку "бАблов" и попытки медленно прокрутить чтобы всё рассмотреть.

Ответить
Развернуть ветку
Сергей Свинарь
Автор

Спасибо за добрые слова.
Редимаг и тильда не позволяли в полной мере реализовать задумку (или мы еще не знали, как это сделать).
Косяков много, согласен. Это наш первый проект, к тому же сроки производства были сжатые, так что многое не успели отладить (прежде всего мобильную версию). 
Учли ошибки в новых проектах, о которых расскажем чуть позже.

Ответить
Развернуть ветку
Андрей Новиков

Тема бомжей не раскрыта(((

Ответить
Развернуть ветку
Сергей Свинарь
Автор

сейчас как раз делаем сторилендинг про свиноферму. забрендируем ромбиком ))

Ответить
Развернуть ветку
Гончаров Алексей

Мобильная версия до сих пор в бете?)

Первое - можно было на загрузку повесить "Загружаю историю о том, как зенит чемпионом стал в 1984 году" и проценты,а так я вижу текст внизу, потом лагающая загрузка, потом интерактив с кнопками и текст подцепляет стиль и поднимается вверх.
Далее, движение вниз на мобильном FF скрывает стр оку поиска, которая не растягивает страницу до конца, оставляя полосу (резайз ловим).

Далее после "опустился на 10 место" первая фраза просто пролетает, а дальше перестал тестить) но если делать сторитейлинг, но с зумом на мобильнике, зум на говорящего персонажа, говорит (скруглить блоки "бабла" по краям), зум отъезжает, сдвигается и к другому, снова зум,так ч разы приятнее было бы и привычнее, так же делают в различных исторических программах, мультах и тд

Ответить
Развернуть ветку
Сергей Свинарь
Автор

Готов под каждым словом подписаться, Алексей. Мы сначала сделали десктоп версию, а потом адаптировали ее под мобилку (да, все так плохо).
Но без таких стартовых проектов не бывает совершенства ))
Вот, для примера, ссылка на самую первую работу по инфографике, которую мы сделали 10 лет назад.

Ответить
Развернуть ветку
Гончаров Алексей

кстати, а почему приоритет был не на мобильную версию? Ведь из мобильной сделать десктопную попроще, а бОльший канал сейчас идет именно с мобильных пользователей. И я бы делал полосу внизу, там кнопку "дальше" прямо с текстом и небольшую кнопку "назад" в виде "<" и с помощью этого бы шел рассказ.

Ответить
Развернуть ветку
Сергей Свинарь
Автор

ответ очень простой - неопытность. все же год назад делали, и тогда мы только прощупывали диджитал проекты. а сейчас все начинаем с мобилки, конечно.

Ответить
Развернуть ветку
Алекс Брантон

Палец скролить устал, но за думка гуд. Анимация конечно слишком резко перескакивает.

Ответить
Развернуть ветку
Evgeniy Emelyanov

Культовый футбольный клуб?
Вы серьёзно??? 

Ответить
Развернуть ветку
Сергей Свинарь
Автор

Для меня (болельщик с 1999 года) и большого числа петербуржцев, интересующихся футболом, культовый )

Ответить
Развернуть ветку
Андрей Крамарь

За присоединение к СССР Болгарии и Румынии, Боярский вам шарфик с автографом подгонит. Но это не точно.

В целом - интересно вышло) Ассоциации с комиксами, но мне это больше  напомнило диафильмы тех времен, вы могли бы отсылку такую сделать, зумерки бы ее не уловили, а более старшее поколение оценило бы. 

Ответить
Развернуть ветку
Сергей Свинарь
Автор

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Сергей Свинарь
Автор

Спасибо большое. В среднем на одну иллюстрацию уходил один день.

Ответить
Развернуть ветку
Антон Сейчасов

Сейчас зенит такой сторителинг в Бельгии рассказывает.... Заслушаешься)))

Ответить
Развернуть ветку
Сергей Свинарь
Автор

люби Зенит больше побед )

Ответить
Развернуть ветку
Андрей Гусев

Сторителлинг увы не новый формат. Для подобных сайтов нужно погрузить посетителя в историю, и дать возможность взаимодействия! У вас к сожалению очень длинный скролл и много текста, который местами проскакивает и не успеваешь его прочесть. 

Ответить
Развернуть ветку
Сергей Свинарь
Автор

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

Ответить
Развернуть ветку
Pvp Daily

Не просто поделка, а поделище, которое тормозит на последнем айфоне в сафари. Нужно больше параллаксов, так и рождаются новые форматы. От ковров в СССР перешли к параллаксам на лендосиках.

Ответить
Развернуть ветку
Сергей Свинарь
Автор

Спасибо за мнение

Ответить
Развернуть ветку
Юджин Нубченко

А Румыния и Болгария знают что они были в советским союзе? 
У вас ошибка на карте что висит на стене.

Ответить
Развернуть ветку
Vasek Romanov

Помню, Жирков еще молодой был. 

Ответить
Развернуть ветку
22 комментария
Раскрывать всегда