Занятие 5
Дата-журналистская
статья
статья
Структура дата-журналистской статьи
Подготовка визуализаций для веба и соцсетей
Типографика и иконки
Подготовка визуализаций для веба и соцсетей
Типографика и иконки
Дата-журналистская статья
После того, как вы завершили все предыдущие этапы работы над статьёй, можно, наконец, собрать всё воедино. Например, на Tilda.
Проекты на Tilda можно самостоятельно добавить в выдачу гугл-поиска с помощью Google Search Console.
Проекты на Tilda можно самостоятельно добавить в выдачу гугл-поиска с помощью Google Search Console.
Структура статьи
Это структура статьи, которую вам нужно подготовить в рамках финального группового проекта. Вы также можете просмотреть требования вот тут.
Основной блок должен быть разделён на подразделы (секции, смысловые блоки) с подзаголовками
Основной блок должен быть разделён на подразделы (секции, смысловые блоки) с подзаголовками
- Введение
- Заходная картинка
- Заголовок
- Подзаголовок
- Ваши имена
- Дата публикации
- ЛидОдин параграф: о чём мы расскажем читателям в этой статье?
Лид должен визуально отличаться от основного текста. - Основной текст1. Описание проблемы и общего контекста: что происходит сейчас?
2. Бэкграунд (в плане структуры этот параграф может быть где угодно): как было раньше?
3. 5 графиков, созданных по всем правилам визуализации. Каждый из них должен сопровождаться:- абзацем-подводкой: почему этот график вообще появляется? к чему он?
- кратким текстовым описанием ключевого визуального элемента: куда мы должны смотреть? какая точка на графике самая важная? почему
- анализом и интерпретацией графика + дополнительной информацией из внешних источников: почему так получается? что мы знаем об этом?
- фото спикера
- имя, должность, страна спикера
- внутритекстовая ссылка на первоисточник цитаты
- текст цитаты
- Выводы1. Подзаголовок, например, «Выводы» или «Что мы узнали» и т.д.
2. Ключевые выводы вашей статьи (сухо суммируем то, что уже упоминалось выше в основном тексте статьи): что вы обнаружили в ходе анализа? почему это важно?
3. Takeaway message: какую главную идею должен запомнить читатель из вашей статьи? какой в ней самый интересный момент, о котором он будет рассказывать друзьям спустя месяцы и годы после прочтения?
Ссылки для занятия
- Pogodaiklimat — архив погоды в Москве, выбираем показатель Te.
- Rawgraphs — инструмент для создания графиков в формате SVG.
- Figma — векторный редактор.
- Internet Movie Database — крупнейшая база данных о мировом кинематографе.
- Color Palette Generator by Big Huge Labs — определяет ключевые цвета по картинке и оформляет в виде милой палитры.
- Datawrapper — можно создавать интерактивные графики и таблички и эмбеддить их в сайты, но нельзя скачивать в SVG.
Описание графиков
Примеры из статьи "Severe drought threatens honey bees in Chile" by Christine Chan and Dave Sherwood, Reuters Graphics, 2019
Слова вместо цифр
50 % — половина
30–35 % — треть
25 % — каждый четвёртый
25/100 : 5 = 5/20 : 5 = 1/4
20 % — каждый пятый
10 % — один из десяти, каждый десятый
В английском:
- one in ten — доля
- one out of ten — всего 10 (максимум), один из 10
Работа в Figma
Сайт: figma.com
Можно использовать как веб-версию, так и десктопное приложение. Это векторный графический редактор.
Необходимые плагины:
Можно использовать как веб-версию, так и десктопное приложение. Это векторный графический редактор.
Необходимые плагины:
- Iconify — быстрый поиск по иконкам с открытой лицензией.
- Image tracer — из растрового в векторное изображение.
- Unsplash — быстрая вставка фотографий с открытой лицензией.
- Icon8 Background remover — удаляет фон на картинке, детали можно скорректировать с помощью маски.
Полезные инструменты:
- Freepik — много бесплатных векторных изображений.
- EPS to SVG Converter — на Freepik множество файлов представлены не в SVG, который подходит для фигмы, а в другом векторном формате, в EPS. Поэтому перед использованием нам нужно переконвертировать изображение в SVG.
Полезная статья: Figma Blend Modes
Элементы в Figma
- Фрейм
- Группа
- Маска
- Мастер-объект
- Дочерний объект
Типографика
- Между числом и % иногда ставится неразрывный пробел — это зависит от редполитики.
- Между числом и указанием разряда, например, тыс. или млн, также ставится неразрывный пробел.
- То же касается и наименований валют, например, ₽ или $.
- На Windows он вводится Alt 255, а на Mac нужно зажать Shift Option Пробел. В Тильде это # nbsp; (уберите пробел после хештега)
Иконки
Шрифты
Как в Rawgraphs отобразить несколько линий
Как стилизовать график из RAWGraphs в Figma
Как инвертировать маску в Figma
Как сделать градиентный переход
в прозрачность в Figma
в прозрачность в Figma
Tilda Basics
на английском
