Мультимедийный лонгрид — это не просто «статья, которую придётся долго читать», а сложный организм.
Этот жанр возник на стыке традиционной журналистики и веб-дизайна, став ответом на потребность в глубоком, но при этом визуально привлекательном и интерактивном контенте.
Давайте рассмотрим анатомию лонгрида, разобрав его на составные части. Мы изучим, как различные элементы — от заголовка до мультимедийных вставок — работают вместе, создавая единое повествовательное пространство.
Обложка и титульный блок
Первое свидание с вашим контентом, первый боевой контакт. Здесь либо искры полетят, либо читатель сбежит.
- Заголовок должен быть как первый удар в драке — короткий и сильный. Если ваш заголовок не заставляет читателя хотя бы приподнять бровь, вы делаете что-то не так. Сделайте его большим и жирным. Используйте шрифт размером минимум 32pt, а лучше больше.
- Подзаголовок — это ваш шанс объяснить, почему читатель должен потратить следующие 20 минут своей жизни на ваш текст. Не упустите его. Подзаголовок должен быть немного меньше и изящнее, чем заголовок. Используйте хорошо читаемый на экране шрифт.
- Автор, чтобы было, с кого спрашивать. Чтобы за текстом ощущалась авторская субъектность.
- Дата, чтобы читатель знал, насколько устарела информация к тому моменту, как он до неё добрался.
- Изображение или видео, потому что мы знаем: одна картинка стоит тысячи слов. Обязательно высокое качество для титульного образа — если только lo-fi не является сознательно используемым вами приёмом. Используйте оверлей с тончайшим градиентом для улучшения читаемости текста.
- Лид — это не просто вступительный текст, это сжатый до нескольких строк лонгрид.
Хороший лид должен быть достаточно конкретным, чтобы читатель понял, о чём пойдёт речь, но достаточно загадочным, чтобы у него возникло неодолимое желание прочитать дальше.
Помните: ваш лид — это обещание. Обещание интеллектуального приключения, эмоционального путешествия или, по крайней мере, нескольких минут, которые читатель не потратит на просмотр видео с котиками.
Идеальный лид должен быть не длиннее твита и не короче хайку.
Основной текст
Это мясо, это субстрат, это медиум — а medium, как писал Маршалл Маклюэн, is the message.
Параграфы. Держите их короткими. Представьте, что каждый параграф — это твит.
Заголовки второго, третьего (и т. д.) уровней. Это как указатели на долгой дороге: «Эй, ты всё ещё не заблудился!»
Шрифт выбирайте с умом. Очень подробно принципы подбора шрифтов и шрифтовых сочетаний разобраны в наших лекциях.
Размер шрифта — минимум 16pt, а для больших экранов — не меньше 20pt.
Межстрочный интервал — примерно 1.5–1.6. Удобно делать межстрочные интервалы для разных текстовых стилей кратными 8pt.
Длина строки — в районе 60–85 символов (30–40 для мобильной версии). Не бойтесь пустого пространства по бокам на широких экранах. Лучше иметь узкую колонку, чем строку от края до края.
Абзацы. Используйте «швейцарский абзац» — отбивку между абзацами вместо красной строки. Швейцарскую отбивку лучше делать путём установки нижнего маргина параграфа равным межстрочному расстоянию.
Дополнительные элементы
Врезы это как глоток воздуха в духоте текста. Сколько бы вы ни старались «не душнить», некоторую гипоксию (читай: скуку) ваш читатель будет ощущуать всегда. Для фона используйте контрастный цвет или паттерн. Врез должен выделяться. Можно использовать другой шрифт или начертание. Сделайте его заметным, но не кричащим. Это акцент, а не вопль. Размер — как правило, крупнее основного текста, но не настолько, чтобы конкурировать с заголовками. Ключевые мысли выделите так, будто от этого зависит жизнь вашего текста, а текст живёт лишь тогда, когда его читают.
Цитаты. Сделайте цитаты заметными. Большие кавычки, другой шрифт, может быть даже другой цвет фона. Читатель должен отчётливо понять, что «тембр голоса» рассказчика изменился — слово передали кому-то другому. Всегда указывайте источник.
Разделители — это могут быть линии, иконки, цифры, заголовки, маленькие иллюстрации. Что угодно, лишь бы читатель понял, что мы переходим к новой теме. Добавьте достаточно воздуха вокруг разделителя. Это как пауза в разговоре — она нужна, чтобы осмыслить сказанное. Тут важна консистентность. Используйте одинаковые разделители по всему тексту. Не устраивайте читателю визуальный сюрприз на каждом повороте (если такие сюрпризы — это не сознательно используемый вами приём, о котором вы знаете, чем он оправдан).
Карточки — это маленькие, аккуратные порции данных для тех, кто на информационной диете. Делайте их визуально привлекательными. Представьте, что каждая карточка — это мини-постер. Краткость — сестра таланта. Если вы не можете объяснить идею в карточке, может, это не такая уж хорошая идея?
- Фактоиды — это слово, вообще говоря, означает «фактообразный», имеющий вид факта, но фактом не являющийся, то есть «газетная утка», информационный симулякр. Американский писатель Норман Мейлер определил этот термин как «факты, не существовавшие до того, как они появились в журнале или газете». Со временем значение термина расширилось, и в английском языке он также может обозначать незначительный, но интересный факт.
По неведомой нам причине в современной российской практике веб-дизайна этим словом обозначается любой врез или вынос, содержащий крупное число. Людям нравятся числа — всё, что поддаётся точному исчислению, кажется правдой (иногда лучше работают «волшебные числа» вроде 3, 7, 12, 666 — а иногда, наоборот, более сильное впечатление производят числа «неправильные». Например, автор этих строк пережил религиозный опыт, узнав, что, согласно М-теории, в пространстве Калаби-Яу — 11 измерений: это так странно, что не может быть человеческой выдумкой, а только художественным хулиганством Творца).
Фактоиды — это как информационные конфетки: возможно, не очень полезные, но все их любят. Но убедитесь, что они связаны с основным текстом — либо, наоборот, привносят элемент абсурдистской иррелевантности (если в этом ваш приём).
- Иллюстрации. Иногда (а вообще говоря, очень часто, особенно в наше время) картинка действительно стоит тысячи слов. Используйте высокое разрешение и хорошее качество (если lo-fi не является, опять же, вашим сознательным приёмом).
Футер и выходные данные
Даже самое увлекательное путешествие когда-то заканчивается.
Информация об авторе: дайте читателю знать, кто виноват в том, что он только что потратил час своей жизни.
Ссылки на источники: покажите, что вы провели фактчекинг или хотя бы умеете гуглить.
Призыв к действию: предложите читателю что-то сделать. Подписаться на рассылку, прокомментировать, или, может быть, просто задуматься о смысле жизни.
Фон — немного темнее или контрастнее основного фона. Это как занавес в конце спектакля.
Типографика — мельче основного текста, но все ещё читаемая.
Социальные иконки. Если они есть, сделайте их заметными, но не навязчивыми. Ваша визитная карточка должна быть доступна вашему собеседнику, но вы не пытаетесь всучить её каждому встречному.
Механика чтения
Саккады и фиксации
Наши глаза не плавно скользят по тексту, а совершают серию быстрых движений (саккад) и остановок (фиксаций). Это похоже на то, как если бы вы читали книгу во время езды на американских горках — рывок, остановка, рывок, остановка.
Урок для нас: создавайте ритм в вашей типографике. Используйте пробелы, отступы и разбивку на абзацы, чтобы дать глазам естественные точки для фиксации. Это как расставлять указатели на скоростном шоссе — они помогают ориентироваться и не пропустить нужный поворот.
Парафовеальное превью
Наш мозг начинает обрабатывать следующее слово ещё до того, как мы на него посмотрели. Это как если бы у нас в голове был встроенный спойлер-генератор. Пока мы фиксируемся на одном слове, наше периферическое зрение уже сканирует следующие.
Урок для нас: используйте это знание при создании макета. Оставляйте достаточно «воздуха» вокруг текста, чтобы не перегружать периферическое зрение, и чтобы было достаточно пространства для «резонанса».
Располагайте ключевые слова так, чтобы они попадали в поле парафовеального зрения. Это как хороший клиффхэнгер в сериале — вы уже видите начало следующей сцены, и это заставляет вас переходить к новому эпизоду.
Узнавание слов по форме
Мы не читаем буквы по отдельности, а распознаем слова целиком по их форме. Вот почему мы можем читать текст, где буквы перемешаны, но первая и последняя остаются на месте.
