Skvot

Mag

Skvot              Mag Skvot Mag
Курсы по теме:
Scrollytelling Vulgaris

От чего отталкиваться, делая материалы в формате скроллителлинга

card-photo
card-photo
Ира Безкоровайная

Автор SKVOT

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

Чтобы читатели не закрывали длинные истории на первом экране, нужна видимая динамика. Ее дает скроллителлинг — формат, который превращает материал о тележках, мусоре или любой другой нудной или сложной теме в must-watch шоу.

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

 

Лонгриды не работают

В 2018 году на The Guardian вышла статья о том, что теперь аудитория взаимодействует с текстами по-новому. Мы больше не читаем абзацы последовательно, а скользим по ним. Цепляем заголовок и выхватываем отдельные фразы в тексте по траектории F или Z.

В том же 2018 году компания Nielsen Norman Group опубликовала результаты ресерча Scrolling and Attention. Оказалось, на первом экране читатели проводят 57% времени и еще 17% — на втором. Дальше процент резко падает. Десятому и следующим экранам достается только 5% времени.

Чтобы читатель шел дальше, внизу каждого экрана должно возникать ощущение незавершенности. Ему должно казаться, что он смотрит сериал Netflix — только не серия за серией, а блок за блоком. И для этого нужно пойти дальше просто хорошего текста.

Больше, чем сторителлинг

Многие умеют рассказывать истории. Но не у всех получается правильно их упаковать.

В 2012 году The New York Times выпустил нестандартный мультимедийный материал Snow Fall: The Avalanche at Tunnel Creek о снежной лавине в Австралии — и получил за проект Пулитцеровскую премию.

Это был первый в медиа официальный пример скролителлинга — микса скроллинга и сторителлинга (scroll + storytelling).

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

Пример — скролли-статья о Йопе ван Беннекоме и Герте Йонкерсе, двух легендарных издателях из Амстердама.

Они делали гей-зин BUTT, журналы Fantastic Man и The Gentlewoman, а еще первыми стали снимать для своих изданий обычных людей, а не моделей. Ретроспективу их работы сделали в обложках, которые всплывают по прокрутке. Фото, а не текст — основа всей этой истории.


Источник: stories.readymag.com 

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

Приемы скролителлинга

Еще десять лет назад для материала с крутой версткой нужны были строчки кода. Много строчек. Сейчас проще. С помощью Tilda, Readymag, Webflow, Setka, Squarespace, Duda и других платформ можно креативить с версткой в режиме WYSIWYG (what you see is what you get), не влезая в код. Для простых и средних задач этого хватит.

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

Объяснить на простом

Если сказать, что поле занимает 10 тыс. квадратных метров, сходу сложно понять, насколько это много. Зато если сказать, что это примерно 80 тыс. обычных коробок пиццы — станет понятнее.

Проект If the Moon Were Only a Pixel показывает, как далеко друг от друга расположены планеты на самом деле. Скроллишь страницу — и внизу на линейке с указанием расстояния всплывают цифры, а на экране мелькают надписи: «Половина пути до Земли» или «Чтобы добраться сюда, нужно семь месяцев лететь на космическом корабле».


Источник: joshworth.com

Создать героя

Любая история воспринимается лучше, если есть конкретный персонаж, чью историю рассказываем. Сопереживать ноунейму трудно. Если нельзя рассказать о конкретном человеке (например, по причине конфиденциальности), придумай и нарисуй его.

Например, в материале про социальную интеграцию ЛГБТ в Танзании было бы некорректно говорить о конкретных людях. Вместо этого авторы проекта создали персонажей: Манку и Машаку. На их примере они показали, с какими трудностями сталкиваются гомосексуалы в обществе.


Источник: iambinadam.org

Сделать читателя режиссером 

Преврати пользователя из читателя в одного из создателей истории, дай ему влиять на события, которые разворачиваются на экране. Задавай вопросы, уточняй мнение и создавай интерактивные сценарии.

По этому принципу сделан материал в Experience Magazine. Там — восемь персонажей, американских иммигрантов, чью историю можно прожить. Все основано на реальных событиях. В некоторых блоках есть возможность выбирать действие — читатель решает, жениться ли итальянцу Джанни на Софии и получить работу в Нью-Йорке или все-таки подождать настоящую любовь.


Источник: expmag.com

Отталкиваться от дат

Если нужно рассказать растянутую во времени историю и не запутать читателя, используй таймлайн.

Так сделан проект Histography израильской Академии искусств «Бецалель». Он показывает историю человечества от Большого взрыва до 2015 года.

Ключевые события на временной шкале отмечены точками. Здесь и военные подвиги, и первый фотоаппарат, и записи The Beatles, и много чего еще. Массив данных огромный, но в таком виде они смотрятся ни разу не громоздко. Про некоторые события-точки можно почитать детальнее — есть линки на статьи или видео.


Источник: histography.io

С таким же акцентом сделан материал канадской студии Jam3 про испытания ядерного оружия во Французской Полинезии. Он состоит из пяти глав, которые идут хронологически, 360º-панорам, которые можно рассматривать (в обычном формате и VR), архивных фотогалерей, документальных видео и 40 аудиодорожек.

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


Источник: nucleardissent.com

Таким же способом можно рассказать историю бизнеса (например, вот история французского производителя грузовой техники Fenwick) или региона (как в примере с округом Мак-Дауэлл в Северной Каролине).

Использовать географию

Пусть читатель визуализирует, как события развиваются в пространстве.

Например, в материале «География бедности. Путешествие по забытой Америке» можно следить за путешествием фотографа Мэтта Блэка по 70 городам США.


Источник: msnbc.com

Этот же прием использовали авторы материала в The New York Times про восхождение двух американских альпинистов на почти отвесную 900-метровую скалу Эль-Капитан в национальном парке Йосемити. The Dawn Wall — это интерактивный путь скалолазов с детализацией по участкам.

Добавить звук

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

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

Кстати, этот проект получил награду Adobe Cutting Edge и стал сайтом дня по версии FWA.


Источник: sbs.com.au

Рисовать данные

Превращай цифры в изображения — добавляй как можно больше интерактивной инфографики, комиксов и объясняющих картинок.

Сколько мусора в год приходится на одного немца? В 2015 году на одного берлинца было 381 кг, а на одного жителя Гамбурга — 538 кг. Чтобы оживить эти и другие цифры по теме, Der Spiegel показал их с помощью интерактивной региональной карты и рисунков.

Эффект от материала усиливают квизы, рассредоточенные по тексту. Например, в конце статьи читатель выбирает эко-альтернативу пластиковому пакету, одноразовому кофейному стаканчику или пластиковой бутылке.


Источник: spiegel.de

Еще пример — трехмерная инфографика сейсмической активности Земли Moment Zero. Проект сделала канадская дизайн-студия Locomotive с помощью технологий WebGL и Gyroscope. Данные за последние 50 лет можно изучать в двух форматах — 360o и VR, «бродить» среди трехмерных столбиков инфографики.


Источник: moment-zero.com

Анимировать фото

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

Например, проект Glitter in the Dark журнала Pitchfork рассказывает про британскую инди-поп певицу Наташу Хан. По мере скроллинга героиня улыбается, машет руками, корчит рожицы. Сделать такую анимацию не так сложно (главное — иметь достаточное количество фото и заставить их меняться по скроллу), а результат — отличный.

 
Источник: pitchfork.com

Сделать предмет героем

Если лонгрид посвящен предмету, детализируй его не только в тексте, но и визуально — разбирай по частям, показывай все фрагменты отдельно. Соединяй, расширяй, разрывай, переворачивай.

К примеру, недавно Google презентовал новый шрифт Lexend. Он создан на основе исследований и позволяет читать тексты быстрее. Если быть точнее, с Lexend показатель скорочтения увеличивается на 19,8%.

Подробно про шрифт и показатели его эффективности — на сайте автора. Там же сравнивают Lexend с Times New Roman и даже показывают, как латинский Lexend может выглядеть в арабском письме. Надписи можно растягивать, скорость — менять и в режиме реального времени наблюдать, как это влияет на удобство чтения.


Источник: thomasjockin.github.io

Поделиться материалом
РАССЫЛКА SKVOT

Раз в две недели мы отправляем новые публикации и анонсы курсов на почту