Skvot

Mag

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

Дата—код—скролл

Как объяснить сложные данные через красивый web.
card-photo
card-photo
Юля Романенко

Автор в SKVOT

Как устроена Вселенная? Почему радиоактивные вещества светятся? Что такое виртуальная экономика? На пальцах такие вещи не объяснишь — слишком много научных терминов и цифр.

Когда данных много и они сложные, на помощь приходит визуализация. Она позволяет объяснять все наглядно и доступно. Например, через инфографику. Веб-инфографику.

Мы собрали семь приемов веб-инфографики, которые помогают объяснять комплексные вещи с помощью визуальных элементов.

 

Использовать диаграммы

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

Французская диджитал-студия Bright доказала это на примере своего проекта-инфографики, который показывает распространение коронавируса в режиме реального времени — Coronavirus Now.

На сайте есть общая статистика по миру и странам, которые входят в топ-10 по количеству зараженных. Все данные показаны в виде столбчатых диаграмм из шариков разных цветов: розовые (заболевшие), синие (выздоровевшие) и белые (умершие). Один шарик равен 5 тыс. случаев. В конце — линейный график, который показывает динамику заболеваемости и выздоровления:

Разрывать визуальные шаблоны

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

Но в проекте Illuminating Radioactivity украинской дизайн-студии Tubik ничего из этого нет. Зато есть красочные иллюстрации с Марией Кюри, нежно поглаживающей Радий в таблице Менделеева, и нарезанный аккуратными слайсами Гранд-Каньон — древний карьер, где в 1950-х добывали уран.

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

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

Использовать таймлайн

Таймлайн — незаменимый помощник, когда речь заходит об истории. Поэтому, получив заказ на проект в честь 150-летия голландского ритейлера Bijenkorf, в диджитал-агентстве Dept думали недолго.

Команда разработала сайт 150 years of the Bijenkorf, который показывал весь путь бренда: от открытия первого магазина до статуса лидера люксового сегмента.

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

Сайт писали на JavaScript, прокрутка временной шкалы работает при помощи GreenSock. От идеи до запуска проекта прошел всего месяц.

Отталкиваться от темы

Иногда сама тема может стать подсказкой для визуального оформления. Так было с The Virtual Economy — гайдом по виртуальной экономике. Новозеландская диджитал-студия Gladeye сделала его для компании L'Atelier, которая изучает влияние инновационных технологий на общество и рынок.

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

Чтобы донести тему проекта, разработчики Gladeye использовали метафору. С помощью технологии WebGL они создали 3D-пространство, в котором плывут виртуальные геометрические фигуры-символы элементов виртуальной экономики.

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

Играть на масштабе

20 метров — это много или мало? По сравнению с человеческим ростом — прилично. А по сравнению с окружностью Луны — почти ничего. Но к Луне вернемся позже.

Нам проще представить размер предмета, когда есть с чем сравнивать. Японская компания Business Architects Inc. использовала этот прием в проекте для Nikon. Разработчики создали UniverScale — универсальную шкалу, которая показывает связь между самыми разными объектами с точки зрения масштаба.

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

Использовать 3D на полную

Объемными объектами сейчас уже никого не удивишь. Если только ты не National Geographic.

В 2019 году в честь 50-летия высадки человека на Луну они создали The Atlas of Moons — интерактивную карту спутников Солнечной системы. Разработчики смоделировали около 200 спутников, а самые крупные из них показали в виде трехмерных глобусов.

В верхней панели есть меню со списком планет Солнечной системы и их спутников. Кликаешь — и переходишь к 3D-модели с общей информацией: количество спутников, расстояние до Солнца и скорость вращения. По скроллу можно рассмотреть орбиты:

Ниже идут детализированные модели всех спутников, их можно вращать. Там же есть полное описание: окружность, расстояние до планеты, период обращения по орбите, научные характеристики и перечень космических миссий.

Сайт создали с помощью WebGL-технологии и языка JavaScript. Для предварительной обработки изображений и данных разработчики использовали Python.

Не давать заскучать

Исследования — это всегда много информации и цифр. Удерживать внимание читателя в таких проектах очень сложно.

Поисковая фэшн-платформа Lyst, которая объединяет 800+ онлайн-магазинов, нашла способ подать большой объем информации так, чтобы читатель не уснул.

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

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

Кроме исследования вкусов покупателей и списка самых популярных «джинсовых» запросов, на сайте есть раздел о знаковых моментах истории денима. Например, в 2001 году Бритни Спирс и Джастин Тимберлейк устроили на красной дорожке American Music Awards «джинсовое свидание» — пришли с ног до головы в дениме.

Если кратко

Инфографика — хороший способ донести сложную информацию просто и доступно.

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

  1. Рисовать диаграммы на все, что только возможно.
  2. Придумывать свои символы, а не использовать готовые (даже если очень хочется).
  3. Таймлайнить — раскладывать данные по временным отрезкам, если тема разрешает.
  4. Играть на масштабе — на контрасте все нагляднее.
  5. Не давать заскучать читателю.
Поделиться материалом
РАССЫЛКА SKVOT

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