Занятие 4
Дизайн
Rawgraphs и Figma
Принципы дизайна слайда
Разбор прошлых работ
Шаблон
  • Raster — jpg, png — Adobe Photoshop, Gimp
  • Vector — svg — Figma

Узнать больше:

Работа в Figma
Сайт: figma.com
Можно использовать как веб-версию, так и десктопное приложение. Это векторный графический редактор.

Необходимые плагины:
  • Iconify — быстрый поиск по иконкам с открытой лицензией.
  • Image tracer — из растрового в векторное изображение.
  • Unsplash — быстрая вставка фотографий с открытой лицензией.
  • Icon8 Background remover — удаляет фон на картинке, детали можно скорректировать с помощью маски.
Ссылки для занятия:
  1. Rawgraphs — для создания векторных графиков.
  2. Pogoda i klimat — архив погоды.


Полезные инструменты:
  1. Freepik — много бесплатных векторных изображений.
  2. EPS to SVG Converter — на Freepik множество файлов представлены не в SVG, который подходит для фигмы, а в другом векторном формате, в EPS. Поэтому перед использованием нам нужно переконвертировать изображение в SVG.
Чтобы изменять изображения из фрипика, нужно их разгруппировать (Ctrl+Shift+G) до базового уровня отдельных элементов.

Полезная статья: Figma Blend Modes
Элементы в Figma
  • Фрейм
  • Группа
  • Маска
  • Мастер-объект
  • Дочерний объект
Как в Rawgraphs отобразить несколько линий
Как стилизовать график из RAWGraphs в Figma
Как инвертировать маску в Figma
Как сделать градиентный переход
в прозрачность в Figma
Пять стратегий придумывания заголовков
для дата-визуализаций, слайдов
и карточек с инфографикой
  • Показатель как он есть
    «Число лягушек в мире»
  • Наводящий вопрос
    «Растёт ли число лягушек в мире»
  • Конфликт
    «Лягушки VS жабы: кого в мире больше»
  • Тенденция
    «Число лягушек в мире стремительно растёт»
  • Ключевой инсайт
    «Юго-Восточная Азия — лидер по числу лягушек»
Выхватываем важное из инфошума

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

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


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

Какой заголовок вы дадите этому графику?
Иконки
ПОЛЕЗНЫЕ СОВЕТЫ
Разделение на части

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

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

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

Нужен воздух

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


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

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

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


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

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

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


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

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

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

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

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

  • Какой шрифт?
  • Какой размер шрифта?
  • Что выделяем жирным?
  • Как стилизуем заголовки и подзаголовки?
  • Какие расстояния между блоками используем?
  • Какие отступы ставим?
  • Какая цветовая гамма у проекта?
  • Где делаем карты?
  • Какие подложки на картах используем?
  • Какие иконки используем — и на картах, и в презентации?
Текст
  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. Тепловая карта.
This site was made on Tilda — a website builder that helps to create a website without any code
Create a website