Занятие 5
История
Интерактивные инструменты
Карты для чрезвычайных ситуаций
Ошибки в прошлых работах
Структура повествования
Основной блок должен быть разделён на подразделы (секции, смысловые блоки) с подзаголовками
  • Введение
    • Заходная картинка
    • Заголовок
    • Подзаголовок
    • Ваши имена
    • Дата публикации​
  • Лид
    Один параграф: о чём мы расскажем читателям в этом материале?

    Лид должен визуально отличаться от основного текста.
  • Основной текст
    1. Описание проблемы и общего контекста: что происходит сейчас?

    2. Бэкграунд (в плане структуры этот параграф может быть где угодно): как было раньше?

    3. Графики, созданные по всем правилам визуализации. Графики могут сопровождаться:
    • абзацем-подводкой: почему этот график вообще появляется? к чему он?
    • кратким текстовым описанием ключевого визуального элемента: куда мы должны смотреть? какая точка на графике самая важная? почему
    • анализом и интерпретацией графика + дополнительной информацией из внешних источников: почему так получается? что мы знаем об этом?
    ​4. Цитата, визуально отличающаяся от основного текста:
    • фото спикера
    • имя, должность, страна спикера
    • внутритекстовая ссылка на первоисточник цитаты
    • текст цитаты
  • Выводы
    1. Подзаголовок, например, «Выводы» или «Что мы узнали» и т.д.

    2. Ключевые выводы вашего материала (сухо суммируем то, что уже упоминалось): что вы обнаружили в ходе анализа? почему это важно?

    3. Takeaway message: какую главную идею должен запомнить читатель? какой в ней самый интересный момент, о котором он будет рассказывать друзьям спустя месяцы и годы после прочтения?

Описание графиков

Примеры из статьи "Severe drought threatens honey bees in Chile" by Christine Chan and Dave Sherwood, Reuters Graphics, 2019


  1. Подводка: почему этот график вообще появляется? к чему он?
  2. Краткое текстовое описание ключевого визуального элемента: куда мы должны смотреть? какая точка на графике самая важная? почему?
  3. Анализ и интерпретация графика + дополнительная информация из внешних источников: почему так получается? что мы знаем об этом?
Инструменты интерактивного повествования
Онлайн-карты:
  1. Kepler.gl
  2. Mapbox

Формат Storymaps — всё с VPN:
  1. Knightlab Storymaps.
  2. Cesium Stories.
  3. Flourish Story.

Конструкторы общедоступных карт:
  1. Яндекс Конструктор карт.
  2. Google My Maps.
  3. Datawrapper Locator Map.
Пять стратегий придумывания заголовков
для дата-визуализаций, слайдов
и карточек с инфографикой
  • Показатель как он есть
    «Число лягушек в мире»
  • Наводящий вопрос
    «Растёт ли число лягушек в мире»
  • Конфликт
    «Лягушки VS жабы: кого в мире больше»
  • Тенденция
    «Число лягушек в мире стремительно растёт»
  • Ключевой инсайт
    «Юго-Восточная Азия — лидер по числу лягушек»
Выхватываем важное из инфошума

У слайда должен быть по-хорошему

кликбейтный заголовок.


Кликбейтный = краткий + понятный + интересный + запоминающийся

Какой заголовок вы дадите этому графику?
Карты для чрезвычайных ситуаций
Задача — помочь принять решение в таких чрезвычайных ситуациях, как:

  • отсутствие интернета
  • перебои с водой
  • военные действия / обстрелы
  • климатические катастрофы (жара, наводнение)
  • отключение электричества
  • проблемы с движением транспорта

Карта должна отвечать на 4 вопроса:
  • Где я?
  • Куда идти?
  • Где безопасно?
  • Где ресурсы?
Что нанести на «Карту выживания» района:
  • ориентиры: вокзалы и станции метро (если есть), крупные магистрали и реки
  • бомбоубежища и укрытия
  • точки эвакуации и гуманитарной помощи
  • точки общественного Wi-Fi
  • источники воды
  • туалеты
  • аптеки и медпункты
  • пункты зарядки и обогрева, генераторы энергии
  • зоны риска
  • перекрытые участки
  • безопасные пути с направлением выезда

Что может служить укрытием:
  • станции метро
  • подвалы
  • подземные паркинги
  • подземные переходы
  • открытые цокольные этажи

Исследование о специфике подобных карт.
ПОЛЕЗНЫЕ СОВЕТЫ
Разделение на части

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

Одна вертикаль

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

Нужен воздух

Оставляйте поля по краям слайда, в которых не будет никакой важной информации.


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

Что важнее всего?

Помещайте самую важную информацию в левый верхний угол.


Тексты на кириллице и на латинице люди читают слева направо, сверху вниз.

Инфографика нужна не всегда
Иногда текст выигрышнее. Экспериментируйте с подачей
Эффектный финал

Последний слайд — не «Спасибо за внимание», а краткое перечисление ключевых выводов и контактная информация.

Частые ошибки в композиции визуала
  • недостаточно воздуха
  • недостаточно контраста
  • значимые элементы сливаются с подложкой
  • фото на фоне слишком яркое и мешает воспринимать основной посыл карточки (нужно затемнить или приглушить как-то иначе)
  • элементы непропорциональны друг другу
  • острые элементы, когда в брендбуке предусмотрено скругление углов
  • растр пикселит
  • нарушена перспектива
  • значимые элементы вылезают за обрезаемые поля
  • значимые элементы дальше логотипа
  • нет выравнивания элементов по одной направляющей
Частые ошибки текста в визуале
  • чрезмерно многоуровневый заголовок на карточке
  • непонятные подписи к цифрам
  • неинформативный заголовок (особенно проверить, когда нет сказуемого)
  • слишком маленькие, нечитабельные элементы
  • нет единообразия
  • некорректная типографика (тире с новой строки и т.д.)
  • визуальная близость элементов рождает ненужные ассоциации
Частые ошибки в фото и иллюстрациях
  • персональные данные
  • грязь и мусор
  • сезон на картинке не соответствует сезону за окном (летние фото зимой)
  • непоследовательность в отрисовке персонажей
  • визуализация не соответствует реальности (например, топонимы на карте расположены в случайном порядке)
  • предметы, которые непреднамеренно влезли в кадр, нагнетают атмосферу или могут привести к социальному конфликту (колючая проволока, строительный мусор, автомобили в новости про велосипедную инфраструктуру)
  • ложные обвинения (заголовок: «Наказываем нарушителей», а на фото — случайный добропорядочный человек)
  • зависит от редполитики: люди с татуировками, мужчины с серьгами в ушах, цветные волосы
Что не так?
по версии дизайн-супервижна Московского транспорта
Особенности отрисовки персонажа
на примере Электробусика
Возможные форматы подачи дата-материала
  • карточки
  • видео
  • аудио (подкаст/радиовыпуск)
  • лонгрид
  • физикализация
  • мерч
  • бот
  • приложение
  • интерактив
  • игра
  • наружная реклама
  • стикеры
  • художественная иллюстрация
  • карикатура
  • открытки в вотсапе и т.д.

Ориентируйтесь на целевую аудиторию!
Разбор старых презентаций
Договор дороже денег

Заранее договоритесь с коллегами по проекту о дизайн-системе вашей презентации.

  • Какой шрифт?
  • Какой размер шрифта?
  • Что выделяем жирным?
  • Как стилизуем заголовки и подзаголовки?
  • Какие расстояния между блоками используем?
  • Какие отступы ставим?
  • Какая цветовая гамма у проекта?
  • Где делаем карты?
  • Какие подложки на картах используем?
  • Какие иконки используем — и на картах, и в презентации?
Текст
  1. Сокращаем сплошной текст до буллет-поинтов (маркированного списка с краткими тезисами).
  2. Убираем воду: предложения для красоты, канцелярские слова «данный», «так называемый» и т.д., безликие глаголы («осуществляется», «ведётся», «проводится», «обеспечивается», «имеется»).
  3. Что можно сократить за счёт специальных знаков и цифр — сокращаем. Не «около тридцати пяти квадратных километров», а «≈35 км²».
  4. Выравнивание текста — по левому краю. Не по ширине и не по центру.
  5. Между частями предложения — длинные тире, а не дефисы. Вокруг тире нужно только по одному пробелу. Вокруг дефисов (мышка-норушка) и коротких тире (2020–2026) пробелы не нужны в принципе (кроме случаев, когда месяц и год стоят вместе: апрель 2020 – май 2026).
  6. Кавычки — «ёлочки», а не "лапки".
  7. Текст должен быть контрастным и читабельным, он не должен сливаться с фоном.
  8. Шрифт должен быть достаточно большим, чтобы его видели с последних рядов в физической аудитории.
  9. Не нужно весь текст делать жирным.
  10. После буллет-поинта и эмодзи нужен пробел.
  11. После двоеточия в буллет-поинтах в русскоязычных текстах идёт маленькая буква.
  12. Расшифровываем аббревиатуры.
  13. Убираем висячие предлоги и союзы.
  14. Не начинаем новую строку с тире.
дизайн
  1. После выгрузки файла обязательно проверяем, не слетела ли вёрстка.
  2. Сортировка в графиках и таблицах — либо от большего к меньшему, либо от меньшего к большему, либо по алфавиту.
  3. Выравниваем элементы по направляющим. Равнопорядковые элементы должны быть на одном уровне.
  4. Не залезаем на вылетные поля и логотип. Не врезаемся в рамки.
  5. Не перегружаем визуал излишними украшательствами, особенно если они залезают на важные элементы слайда.
  6. Следим за ассоциациями с цветовой гаммой: если доступность поликлиник — это хорошо, то стоит ли её рисовать красным цветом?
Карты
  1. На карте должно быть всё видно! Не стоит добавлять мелкие карты по логике «просто, чтобы была». Если не получается вместить карту на текущий слайд в читабельном размере, перенесите её на следующий слайд.
  2. Подробные легенды к картам. Всё должно быть понятно, что чем кодируется и что это значит.
  3. Связь между картами и текстом на слайде должна быть очевидна. Например, в тексте иконка 🌳 с объяснением, что это парк, — и на карте такая же иконка 🌳. В тексте под номером 1 Большой театр — и на карте кружок с цифрой 1 в нужном месте.
  4. Шрифт должен быть достаточно большим и читабельным.
  5. Плохо, когда иконки массово наседают друг на друга. Лучше придумать какой-то способ их агрегации.
  6. Призумливайте карту к непосредственной зоне, где что-то есть. Не стоит оставлять много пустой территории без данных.
  7. Используйте плашки, чтобы сделать описание точек более заметным на фоне подложки.
  8. Не используйте блёклые цвета для текста. Текст должен быть высококонтрастным, заметным.
Как можно агрегировать точки
На примере дашборда ЦОДД о ДТП в Москве.
  1. Исходные точки.
  2. Шарики (кластеры) с цифрой посередине.
  3. Тепловая карта.
Как сделать интерактивную карту с точками (Locator Map) в DataWrapper
Как добавить линии в Locator Map в DataWrapper
Домашнее задание
Дедлайн 17 апреля, пятница, 18:00
Критерии оценивания
На любой из рассмотренных платформ (Knightlab, Cesium, Flourish, DataWrapper, Яндекс Конструктор Карт, Гугл Мои карты и т.д. — см. блок Инструменты интерактивного повествования) создайте интерактивную онлайн-карту с элементом сторителлинга.

Требования:
  • Заголовок, отражающий тему карты
  • Карта с минимум пятью точками
  • Точки должны быть подписаны​
  • У точек желательны тематически подходящие иконки
  • У точек должно быть описание, которое поможет раскрыть тему карты

Возможные темы карт:
  • мой любимый город
  • музеи города A
  • по следам писателя B
  • карта эвакуации из города C
  • ... и так далее

Создайте текстовый документ с названием в формате Фамилия_Карта и вставьте туда ссылку на вашу карту (ссылку, не эмбеддинговый код).

Туториалы, как оформлять csv для загрузки в locator map в DataWrapper:
This site was made on Tilda — a website builder that helps to create a website without any code
Create a website