Кейс: как мы делали лендинг для «Зенита» и случайно придумали новый формат
Привет! Меня зовут Николай Романов, я директор агентства «Инфографика». Мы анализируем и перерабатываем информацию, чтобы сделать её простой и понятной, и расставляем правильные акценты с помощью дизайна. Сегодня я расскажу, как мы работали над проектом к 35-летию первой победы ФК «Зенит».
Краткая предыстория: «Зенит» — культовый футбольный клуб. В Петербурге за него болеют целыми поколениями. Но мало кто знает, особенно среди молодых болельщиков, как «сине-бело-голубые» стали чемпионами в первый раз. Это крутая и вдохновляющая история, которой руководство клуба захотело поделиться с широкой аудиторией.
Задача: интересно рассказать про первую победу «Зенита» на чемпионате 1984 года болельщикам клуба и всем, кто интересуется футболом.
Решение: сделать сторилендинг. Клиенту подход сразу понравился.
Сторилендинг — это лендинг, который погружает пользователя в историю и позволяет с ней взаимодействовать. Слово мы придумали сами, а формат частично подсмотрели и переосмыслили по-своему. Для нас главные ценности сторилендинга — интерактивный сюжет и простота взаимодействия с информацией.
Другие студии называют такие проекты интерактивными сайтами. Мы же считаем, что сторилендинги — отдельное направление, у которого есть огромный маркетинговый потенциал. Это идеальный формат в тех случаях, когда нужен красивый имиджевый проект, а не просто продажи. При этом сторилендинг вмещает больше полезной информации, чем видео, и вызывает больше эмоций, чем статичный текст с картинками.
Сценарий
В нашем распоряжении был интернет и материалы от клиента. Необходимо было собрать и обработать данные о 34 сыгранных матчах, а затем выделить главное — то, что войдёт в сценарий. Мы изучали архивы, читали интервью с бывшими игроками, искали рассказы очевидцев на форумах для болельщиков.
История получилась очень киношной, вроде «Легенды №17» или «Движения вверх».
При этом ничего придумывать не пришлось: реальные события золотого сезона выглядели, как сюжет для спортивной драмы. Болельщики возлагали на команду большие надежды, которые в начале не оправдывались — «Зенит» занимал только 10-е место. Потом начались «американские горки»: подъём по турнирной таблице — проигрыши в чемпионате — неожиданная серия побед. И наконец, легендарный матч с «Динамо Тбилиси», где судьба золотых медалей решилась за последние 10 минут.
Раскадровка
Обычно для лендингов используется обычная схема блоков, но для сторилендинга было решено сделать раскадровку — последовательность кадров, как для анимации. На этом этапе мы визуализировали и доработали текстовый сценарий, продумали каждую сцену.
Итоги раскадровки показали клиентам, чтобы они понимали, в какую сторону движется проект.
Вот так, например, выглядела одна и та же сцена на разных этапах.
Черновая раскадровка:
Скетч для иллюстратора:
Отрисованный кадр, который был показан клиенту и вошёл в проект:
Иллюстрации
Одновременно с раскадровкой происходил поиск стилистики. Сначала попробовали строгую графичность, как в брендбуке «Зенита», но поняли — не то. А вот ламповая советская эстетика легла, как надо.
Чтобы создать атмосферу советской реальности 80-х, мы уделили особенное внимание деталям. Я тогда находился под большим впечатлением от сериала «Чернобыль» и восхищался тем, как точно им удалось показать быт, но без ощущения пыльного музея. Хотелось сделать так же.
Вот пример того, как иллюстраторы вдохновлялись советскими фотографиями.
Фото:
Иллюстрация:
Матчи у нас транслируются по радиоприёмнику и по телевизору «Радуга», болельщики носят шапки-петушки, усы и модные «лохматые» причёски.
Чтобы читатель почувствовал себя на месте событий, мы добавили архивные видео и перерисовали полосы реальных газет того времени.
Анимация
Мы с самого начала знали, что хотим что-то нестандартное, но с простой механикой. Остановились на скролле — читатель «пролистывает» слайды, никуда нажимать не нужно.
Чтобы сделать красивые переходы, отказались от вертикального скроллинга. Получается, что анимация между блоками есть, но сам блок не прокручивается. Переходы между кадрами получились очень киношными — для аниматора это была режиссёрская работа в статичном формате. Необычный опыт.
Программинг
Из-за того, что мы выбрали нестандартную механику сайта, у нас случилась куча багов. Дело осложнялось тем, что сроки по проекту были ограничены, и приходилось спешить.
Самый серьезный баг появился уже под конец, когда тестировали анимацию — перестал работать скролл. Пришлось разделить мобильную и десктопную версии. Десктопную мы отдали клиентам в срок, а мобильную допиливали уже после завершения проекта.
Итоги
Несмотря на проблемы в самом конце, я считаю, что проект удался. У нас получилось самое главное — красивая цельная история. Мы взяли новый необычный формат, модернизировали его в процессе и сделали что-то совершенно уникальное.
Целиком проект можно увидеть здесь: http://1984.infografika.agency/
Буду рад вопросам и оценкам в комментариях.
У нас было 2 мешка параллакса, 75 старых газет, а так же рисованные картинки всех цветов. Не то, чтобы это всё было нужно, но раз начал делать новый формат, то иди в своём увлечении до конца. Единственное, что беспокоило – это зерно. И я знал, что довольно скоро мы в него окунёмся.
)) еще подробное описание всех матчей
Красиво, тьма плюсов за старание, но почему не воспользовались конструкторами, readymag, например? Он прям 10 из 10 подходит под вашу историю + не так нужно было заморачиваться с "фронтом".
По делу: скролл очень шустрый, и "баблы" с текстом и сцены проскакивают очень быстро, не успеваешь погрузиться и уловить суть проекта, смещая фокус на поимку "бАблов" и попытки медленно прокрутить чтобы всё рассмотреть.
Спасибо за добрые слова.
Редимаг и тильда не позволяли в полной мере реализовать задумку (или мы еще не знали, как это сделать).
Косяков много, согласен. Это наш первый проект, к тому же сроки производства были сжатые, так что многое не успели отладить (прежде всего мобильную версию).
Учли ошибки в новых проектах, о которых расскажем чуть позже.
Тема бомжей не раскрыта(((
сейчас как раз делаем сторилендинг про свиноферму. забрендируем ромбиком ))
Мобильная версия до сих пор в бете?)
Первое - можно было на загрузку повесить "Загружаю историю о том, как зенит чемпионом стал в 1984 году" и проценты,а так я вижу текст внизу, потом лагающая загрузка, потом интерактив с кнопками и текст подцепляет стиль и поднимается вверх.
Далее, движение вниз на мобильном FF скрывает стр оку поиска, которая не растягивает страницу до конца, оставляя полосу (резайз ловим).
Далее после "опустился на 10 место" первая фраза просто пролетает, а дальше перестал тестить) но если делать сторитейлинг, но с зумом на мобильнике, зум на говорящего персонажа, говорит (скруглить блоки "бабла" по краям), зум отъезжает, сдвигается и к другому, снова зум,так ч разы приятнее было бы и привычнее, так же делают в различных исторических программах, мультах и тд
Готов под каждым словом подписаться, Алексей. Мы сначала сделали десктоп версию, а потом адаптировали ее под мобилку (да, все так плохо).
Но без таких стартовых проектов не бывает совершенства ))
Вот, для примера, ссылка на самую первую работу по инфографике, которую мы сделали 10 лет назад.
кстати, а почему приоритет был не на мобильную версию? Ведь из мобильной сделать десктопную попроще, а бОльший канал сейчас идет именно с мобильных пользователей. И я бы делал полосу внизу, там кнопку "дальше" прямо с текстом и небольшую кнопку "назад" в виде "<" и с помощью этого бы шел рассказ.
ответ очень простой - неопытность. все же год назад делали, и тогда мы только прощупывали диджитал проекты. а сейчас все начинаем с мобилки, конечно.
Палец скролить устал, но за думка гуд. Анимация конечно слишком резко перескакивает.
Культовый футбольный клуб?
Вы серьёзно???
Для меня (болельщик с 1999 года) и большого числа петербуржцев, интересующихся футболом, культовый )
За присоединение к СССР Болгарии и Румынии, Боярский вам шарфик с автографом подгонит. Но это не точно.
В целом - интересно вышло) Ассоциации с комиксами, но мне это больше напомнило диафильмы тех времен, вы могли бы отсылку такую сделать, зумерки бы ее не уловили, а более старшее поколение оценило бы.
отличная идея для новогоднего подарка )
а диафильмы мы тоже вспоминали, как реф. хотелось такой же ламповости. круто, что вы прочувствовали
Комментарий недоступен
Спасибо большое. В среднем на одну иллюстрацию уходил один день.
Сейчас зенит такой сторителинг в Бельгии рассказывает.... Заслушаешься)))
люби Зенит больше побед )
Сторителлинг увы не новый формат. Для подобных сайтов нужно погрузить посетителя в историю, и дать возможность взаимодействия! У вас к сожалению очень длинный скролл и много текста, который местами проскакивает и не успеваешь его прочесть.
Андрей, спасибо за отзыв, но вы перепутали название. Мы говорим про сториЛендинг. А вариаций для подачи информации очень много, не обязательно взаимодействовать.
В данном случае основной аудиторией были болельщики, поэтому их не нужно было "завлекать". Мы постарались погрузить их в атмосферу того чемпионства. На мой взгляд получилось, но подкачало техническое исполнение.
Не просто поделка, а поделище, которое тормозит на последнем айфоне в сафари. Нужно больше параллаксов, так и рождаются новые форматы. От ковров в СССР перешли к параллаксам на лендосиках.
Спасибо за мнение
А Румыния и Болгария знают что они были в советским союзе?
У вас ошибка на карте что висит на стене.
Помню, Жирков еще молодой был.