Если хотите, чтобы иллюстрации не просто украшали ваш текст, а реально помогали понять его суть — эта статья для вас. Рассказываю, почему мемы, фотостоки и векторные картинки неэффективны, и какие варианты иллюстраций работают гораздо лучше.
Привет, меня зовут Егор Некрасов. Я редактор в веб-продакшне Wemakefab и Dprofile, отечественной площадке для дизайнеров. В Dprofile мы регулярно проводим обучающие лектории в разных городах России, чтобы продвигать нашу площадку.
На одном из лекториев я рассказывал молодым дизайнерам, с помощью чего можно иллюстрировать текст в статьях и на сайтах. Эта статья — ресайз моего доклада с лектория.
Рассказываю всё на конкретных примерах.
Что значит «иллюстрация» с точки зрения редактора
Часто, когда я общаюсь с коллегами и говорю слово «иллюстрация» или «иллюстрировать», меня понимают неправильно. Потому что в их представлении иллюстрация — это обязательно какая-то нарисованная картинка.
«Иллюстрация» для редактора — это любой информационный элемент, который помогает читателю лучше понять суть текста. Иллюстрация может демонстрировать, дополнять, раскрывать или доказывать основную мысль автора.
«Иллюстрировать» — подобрать такой информационный элемент, который поможет тексту лучше выполнить свою задачу. И необязательно это будет картинка.
Почему мемы, фотостоки и векторные картинки — плохие иллюстрации
Они не помогают лучше понять основную мысль автора, а просто разбавляют текст статьи или занимают пространство на сайте, чтобы не было пусто.
Подробнее на примерах:
Сайт разработчика софта для брокеров. Картинки с фотостоков пытаются передать мысль, что эта компания — про серьёзный бизнес. Но они ничего не говорят о продуктах и услугах компании.
Статья с полезной подборкой для маркетологов. Картинка с векторным человечком и книгами. Она лишь косвенно связана с темой статьи и не даёт никакой конкретики. Её можно использовать для любой другой статьи про книги.
Статья про эффективную схему продаж. Здесь мем как бы говорит нам, какие эмоции мы должны испытывать от эффективности этой схемы. Но это навязывание. Эмоции должны возникнуть у читателя сами — от тех смыслов, которые закладываются в статью.
Мемы могут быть хорошими иллюстрациями, но для этого нужно их подредактировать под себя.
Статья Паши Молянова о запуске одного из курсов. Здесь ребята поменяли текст мема под свою тему. Так мем дополняет мысль из заголовка и лид-абзаца — ребята сделали крутой курс, предвкушали высокую прибыль, но получили всего 12 продаж.
Плюс мем не говорит нам, какую эмоцию мы должны испытывать, а вызывает её сам.
Ещё раз про мемы:
Плохо — взять мем, никак его не менять, вставить в статью.
Хорошо — взять мем, добавить в него нужные смыслы: отредактировать на нём текст или как-нибудь перерисовать. И после этого вставить в статью.
Хорошие иллюстрации: живые фотографии
Многие думают, что фотографии для статьи или для сайта обязательно должна быть профессиональной. На самом деле, главное — чтобы фотография демонстрировала то, о чём вы говорите в тексте и чтобы читатель верил, что она реальная.
Фотография может быть кривой и нечёткой, но если она отражает реальность, она будет работать. Такое фото вызовет больше доверия у читателя, чем идеальное, но постановочное.
Пример с живой фотографией:
Два варианта иллюстрации к тексту о том, что в онлайн-школе классные преподаватели, которые всегда помогут. Второе фото, пусть и любительское, работает намного лучше. На фотке плохое освещение и завален горизонт, зато на ней показана реальная ситуация, как преподаватель помогает студенту. Читатель скорее доверится второму варианту.
Вторая фотография реально используется на странице курса «Информационный стиль и редактура текста» от «Бюро Горбунова».
Когда стоит применять фотографии:
- Нужно наглядно продемонстрировать что-то материальное: продукт, предмет, интерьер, людей.
Хорошие иллюстрации: скриншоты
Скриншоты — один из самых простых и эффективных видов иллюстраций, когда вы пишете о каких-то программах или сайтах. Если вам нужно показать, как выглядит интерфейс или написать инструкцию, как сделать что-то в программе — скриншоты будет незаменимы.
Также к скриншотам можно отнести фотографии или сканы каких-то печатных документов: сертификаты, бланки, приказы. Если в тексте вы ссылаетесь на документ, будет здорово показать его, а не просто написать название.
Примеры со скриншотами:
Скриншот интерфейса сервиса на сайте Wazzup. Продукт ребят — сервис, который позволяет общаться с клиентами из телеграма и вотсапа прямо в CRM. На скриншоте наглядно показано, как это выглядит.
Если первый пример кажется слишком простым, можно сделать покрасивее, — как сделали в «Тинькофф». Они вставили скриншоты своего торгового терминала в интересные мокапы.
Это скриншот из моей промостраницы про статуэтку котика с камерой «Кото-око». Там я заявляю, что статуэтка прошла сертификацию и сразу доказываю это, показывая сам сертификат. Эта промостраница — домашка для «Школы редакторов», поэтому без ссылки.
Только что я проиллюстрировал раздел про скриншоты скриншотами)
Когда стоит применять скриншоты:
- Нужно показать то, что у вас на экране компьютера или телефона.
- Нужно показать то, что распечатано на бумаге: документы, ну или просто страница книги, журнала.
Хорошие иллюстрации: коллажи
Коллаж — это когда мы собираем на одном изображении несколько разных картинок, фотографий или текстовых блоков.
С помощью коллажа можно показать какой-то процесс, который проходит в несколько этапов. Каждый этап происходит в разных местах, с разными людьми или оборудованием. Объединить всё это в одной фотографии не получится. Но можно сделать несколько фотографий и собрать их в один коллаж.
Коллаж может передать больше информации и смыслов, чем одна картинка. Если поместить на коллаж несколько картинок, можно показать связь между объектами. Или прямо на картинку можно добавить какие-то поясняющие подписи.
Примеры с коллажами:
Это коллажи из моей статьи про очистку овечьей шерсти. Каждый раздел статьи описывает один этап очистки шерсти. На коллажах показываю, с помощью какого оборудования проходит этап и как шерсть выглядит в конце этого этапа. С таким наглядным коллажом тут даже сам текст раздела читать не обязательно — достаточно прочитать заголовок, посмотреть на картинку и сразу всё становится понятно.
Тоже домашка из «Школы редакторов», поэтому без ссылки.
Коллаж с промостраницы какой-то читалки. Показывается сама читалка и рядом прописываются её характеристики и цена. С помощью одного коллажа показали саму читалку и рассказали всё, что нужно о ней знать.
Чья-то домашка из «Школы редакторов». К сожалению, не помню чья, поэтому без ссылки.
Когда стоит применять коллажи:
- Нужно совместить несколько визуальных элементов на одном изображении.
Хорошие иллюстрации: схемы
Схемы — это отличный инструмент проиллюстрировать что-то абстрактное. С помощью схемы можно наглядно показать связи между объектами, причинно-следственные цепочки, алгоритмы, структуру системы.
Важно, чтобы схема была простой. Читатель должен понять её смысл с первого раза, слишком сложная и перегруженная схема только запутает его. Лучше разбить большую схему на несколько маленьких, показывающих отдельные части системы.
Пример со схемами:
Схемы из моего кейса про разработку сайта для одного финансового сервиса. На схемах показано как мы выстроили процесс взаимодействия двух команд — наш проджект напрямую общается с клиентом и сам руководит обеими командами. Также показываем, что если участники команд сами общались друг с другом, то получился бы полный хаос.
Здесь схема помогает быстро уловить смысл и позволяет не читать текст про то, как именно мы синхронизировали работу команд.
Когда стоит применять схемы:
- Нужно продемонстрировать какой-то абстрактный процесс.
- Нужно продемонстрировать связи между объектами.
Хорошие иллюстрации: инфографика
Когда у вас в тексте есть какие-то данные, цифры, статистика, лучший способ их подать — это инфографика. Таблицы, графики, диаграммы — все это помогает структурировать информацию и сделать её нагляднее.
Данные в инфографике должны быть достоверными и проверенными. Если читатель заметит ошибки и неточности, он может поставить под сомнения весь текст, даже если графики красивые.
Примеры с инфографикой:
Таблица из какой-то статьи про ипотеку в «Т—Ж». Все важные данные по льготной ипотеке собраны в аккуратную таблицу, в которой можно легко и быстро разобраться.
График роста пользователей Dprofile в кейсе по разработке площадки. Наглядно показывает, как увеличивалась аудитория каждый месяц — с декабря 2022 по октябрь 2023 года.
Когда стоит применять инфорграфику:
- Нужно упорядочить и структурировать цифры или статистические данные.
- Нужно выделить и обратить внимание на какие-то цифры или статистические данные.
Хорошие иллюстрации: видео
Видео — незаменимая иллюстрация, когда нужно наглядно показать, как что-то работает или происходит в динамике.
Также видео хорошо подходит для инструкций, когда нужно показать пошаговый алгоритм действий. Видеоролик будет нагляднее и понятнее, чем просто текст с описанием процесса.
Пример с видео:
Компания Promobot использует на своём сайте видео, чтобы показать, как работают их роботы.
На видео наглядно видно, как робот-консультант взаимодействует с клиентом: отвечает на вопросы, сканирует документы, печатает талончик с номером очереди. Никакой текст или фото не смогли бы так наглядно передать, как работает робот.
Чтобы сделать качественное видео, конечно, требует больше времени, сил и денег. Но оно того стоит — видео может передать смысл гораздо эффективнее других форматов.
Когда стоит применять видео:
- Нужно продемонстрировать рабочий процесс или алгоритм действий.
- Есть ресурсы на то, чтобы купить или арендовать технику, снять и смонтировать.
Хорошие иллюстрации: аудио
Может показаться, что аудио — это вообще не про иллюстрации. Но как раз это я и имел в виду, когда писал, что иллюстрация — это любой информационный элемент. Аудио может отлично иллюстрировать текст: дополнять, раскрывать или доказывать основную мысль автора.
Только нужно учитывать, что аудио не должно быть слишком длинным. Читатель вряд ли будет готов слушать звуковую дорожку в несколько минут, в отличие от видео. Имеется в виду именно аудио внутри статьи или на сайте, а не трек или подкаст. Думаю, что оптимальная длина аудио до 30 секунд. Максимум минуту.
Примеры с аудио:
На своём сайте компания Adobe использует аудио, чтобы показать возможности их нейросети для очистки звука.
Вместо того чтобы объяснять текстом, какие получаются результаты, они дают послушать аудиодорожку до и после обработки. Так пользователь сразу слышит разницу и понимает ценность продукта.
Отзыв клиентов на сайте компании Wazzup. Здесь аудио помогают повысить доверие к этим отзывам. Когда мы слышим реальный голос человека, его интонации и эмоции, мы больше верим в искренность его слов. Голос передает гораздо больше нюансов, чем печатный текст.
Плюс такие отзывы сложнее подделать, чем текстовые. Можно, но сложнее.
Когда стоит применять аудио:
- Нужно продемонстрировать что-то связанное со звуком.
- Нужно доказать, что кто-то что-то сказал.
Хорошие иллюстрации: текст
Это мой любимый формат иллюстраций, потому что самый простой, действенный и супер неочевидный. Немногие подумают, что текст можно проиллюстрировать другим текстом.
Как это работает: сначала вы описываете что-то обобщёнными словами, а потом прописываете конкретный пример, который поясняет, что вы имели в виду. Такие примеры можно визуально выделять от основного текста, чтобы читатель обращал на него внимание.
Примеры, дополнения и пояснения к основному тексту можно прописывать в виде цитат и это тоже будет иллюстрацией. Главное, чтобы цитата вносила что-то новое, а не просто повторяла основной текст другими словами.
Ещё один приём — текстовые врезки. Это когда вы берёте какую-то ключевую мысль из своего текста и выносите её на отдельную плашку. Как и в цитате, ключевая мысль на плашке не должна повторяться с основным текстом.
Примеры с текстовыми иллюстрациями:
Это часть статьи Максима Ильяхова про читательские границы. Здесь можно увидеть сразу два способа оформления примеров. В первом он просто выделил пример с помощью увеличенного отступа. Во втором он прописал пример и антипример и ставит их друг напротив друга в две колонки, чтобы их было удобно сравнить.
Это раздел кейса по разработке Dprofile. Здесь цитата Head of PR Константина дополняет и поясняет основную мысль раздела. Плюс, из-за того, что этот текст оформлен как цитата, он выделяется от остальных абзацев и обращает на себя внимание.
Это раздел кейса по разработке агрегатора экскурсий. Здесь как ключевую мысль взяли итоги по этому разделу и поставили на плашку. Читателю достаточно прочитать заголовок и текст на плашке — этого будет достаточно, чтобы уловить суть всего раздела.
Когда стоит применять текстовые иллюстрации:
- Когда текста будет достаточно, чтобы проиллюстрировать вашу мысль.
- Когда нет ресурсов на другие иллюстрации.
Подбирая иллюстрации, опирайтесь на свою задачу и ресурсы
Чтобы круто проиллюстрировать свою статью или текст для сайта, определитесь: какую задачу должна выполнить иллюстрация? Она должна показать продукт, продемонстрировать процесс, или доказать высказывание?
Поняв задачу, выберите подходящий формат, учитывая свои ресурсы. Например, вам нужно сделать инструкцию, как настроить какую-то программу. Если есть подходящий софт и навыки монтажа, снимите видео. Если нет — наделайте скриншотов.
Подписывайтесь на мой тг-канал, если вам интересна работа с контентом, в том числе для личного блога. Канал новый, постов пока мало. Планирую писать не просто какие-то советы по редактуре, а истории из личного опыта.