Подать красиво

Когда мы собрали всю-всю фактуру, нужно придумать, как её подать, чтобы статья не была похожа на огромное полотно текста. Для этого я предлагаю использовать визуальные элементы:

– графики и диаграммы;

– схемы;

– гифки;

– выноски;

– плашки.

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

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

В статьях графики и диаграммы могут выглядеть так:

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

А вот про диаграммы:

1. Удалить фон. График на прозрачном фоне будет смотреться более органично. Подойдёт для изданий с не белым фоном или тёмной темой.

Покрасить график в фирменные цвета. Это можно сделать в гугл-таблице: кликаете на столбец, затем выбираете «Другой цвет» и там вставляете код нужного оттенка.

2. Добавить фирменный шрифт. Нужно скачать график в png, затем удалить в Фотошопе все надписи и продублировать их фирменным шрифтом. Но сначала — попросить этот шрифт у заказчика.

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

В статьях схемы могут выглядеть так:

Как сделать схему. Для примера покажу, как сделать схему с эмоджи и стрелочками:

Как заморочиться: использовать нормальные иллюстрации, а не эмоджи, фирменные цвета и шрифты.

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

Здесь не буду вставлять скрины, потому что на них гифки не видно =) Лучше перейдите по ссылкам и посмотрите в действии:

Как быстро придать квартире праздничный вид — вся статья строится вокруг гифок

Чем красиво закрывать окна — тоже статья из гифок. Здесь я взяла нейтральный интерьер и добавляла к нему разные шторы в Фотошопе, а потом собирала в гифки: картинка без штор — со шторами, а в конце супергифка — 11 вариантов шторы в одной гифке.

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

Для примера покажу, как сделать гифку, из которой станет понятно, как в Телеграме отправлять отложенные сообщения. Чтобы избежать рекурсии, записала видео:

Как заморочиться: сделать гифку в мокапе, чтобы выглядело так, будто оно прям на ноуте или телефоне меняется.

Когда использовать. Выноски нужны, чтобы пояснить строки в документах или табличках. С выноской читателю будет проще понять, куда смотреть, чем с текстовым объяснением, мол, смотри строку номер 5, третий слева столбец.

В статьях это выглядит так:

Как сделать. В программе просмотра или в Фотошопе. Щас покажу:

Как заморочиться: сделать прозрачный фон, как на видео; использовать для выносок фирменный шрифт.

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

В статьях плашки выглядят так:

Как сделать. Попросить верстальщика добавить плашку в вёрстке. А в черновике делают через таблицу: таблицу из одной ячейки заливают цветом и делают её границы прозрачными. И внутрь вставляют текст.

Ещё стоит использовать: заголовки, списки, цитаты, маркеры — это выделение цветом одной фразы, таблицы, видео, если оно у вас есть, и так далее. 

Кроме того, у меня есть гайд по иллюстрациям для статей без дизайнеров.