Допустим, ты хочешь поставить в промостраницу видеоролик, который запускается по клику. Подпиши это видео так, чтобы читателю захотелось его посмотреть. Объясни, что внутри и что там интересного.

Смотреть видео сложнее, чем скроллить страничку. Читатель должен выделить время, надеть наушники, нажать на кнопку — это всё чего-то стоит. Поэтому если превьюшка видео не суперпродающая или читатель не суперзаинтересованный, без подсказки ему не будет повода смотреть это видео.

Да и с подсказкой тоже не всегда. Но с подсказкой лучше, чем без.

Смотрите. Есть коллаж о детских праздниках. Тут фотографии из разных вселенных: из ресторана, на природе, в каком-то актовом зале. И хотя фотографии в коллаже сомасштабные, всё равно смотреть сложно, они спорят меж собой:

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

Теперь я мысленно как бы в одном пространстве, просто смотрю на него с разных сторон. Так гораздо легче.

Окей, а что если у нас реально три вселенных, и нужно как-то через них провести? Тогда каждая фотография должна быть вселенной:

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

В общем, так лучше. Делайте так.

Чисто ради интереса разберите драматургию и метафоры этого клипа — и какие визуальные средства их поддерживают:

Это для видеоредакции «Тинькофф-журнала».

Допустим, вам надо сделать видео по мотивам статьи «Новые ограничения на время ЧМ—2018». Для простоты скажем, что в статье три ограничения: на оружие, алкоголь и митинги.

Обычно мы написали бы статью в такой логике:

Ограничения на ЧМ—2018
Алкоголь
Оружие
Митинги

Это нормальная структура для статьи на экране, но плохая для видеоролика. Разница в том, что статью на экране можно быстро просмотреть по диагонали и понять самое главное. А ролик придется смотреть во всех подробностях от начала и до конца, и с такой же структурой ему будет скучно. Параллельная статья не работает в линейном ролике.

Решение такое, например:

Пес Кристофер приехал в Москву на чемпионат. Он копил на эту поездку весь год и теперь оторвется по полной.

Для начала пес Кристофер пошел купить пивас, и тут опа — триста спецназовцев вяжут его за распитие в неположенном месте. Потому что запрет! Но это нестрашно, его просто досмотрят, оштрафуют и отпустят.

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

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

Первый вариант концовки: В общем, Кристофер теперь сидит в камере и ждет, когда приедет его адвокат. А пока ты сидишь, почитай статью Тинькофф-журнала о запретах на ЧМ—2018. И не бойся, что у тебя лапки — наш новый адаптивный дизайн удобен для всех!

Второй вариант концовки: к счастью, Кристофер читает ТЖ, и у него есть адвокат. Он позвонил ему прямо с задержания, и адвокат доказал спецназовцам, что пес Кристофер — вымышленный персонаж. А ты — нет. Читай ТЖ и не сиди.

Что тут произошло: есть герой, у него есть цель, эта цель обламывается. Потом как будто не обламывается, но снова обламывается. Потом как будто снова нет, но вскоре опять обламывается. И в конце он может спастись, а может и не спасаться, как захотите.

Короче, драматургия.

Студенты первой ступени Школы редакторов сделали плакат-справочник. Задача — помочь себе и другим вспомнить материал школы в нужный момент, держать в голове систему. Ребята попросили прокомментировать плакат и подсказать, как его улучшить.

Исходный вариант:

Тут несколько проблем:

Плакат не хочется вешать на стену, потому что он ничего о тебе не говорит как о владельце. Разве что у тебя есть наставник. Он полезный внутри, но люди вешают на стены не что-то полезное, а то, что говорит о них хорошее — например, что человек принадлежит к какому-то сообществу или что он в чем-то хорош. Этот плакат такого не сообщает.

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

Плакат дает непрошеный совет и обращается на «ты».

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

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

Убрал осьминога и декоративные иконки, заменил шрифт заголовков на ровный геометрический, убрал инструкцию. Вместо абстрактного наставника и непрошенного совета — декларация, что ты бюрошник

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

У меня есть сомнения, что наставник тут удачное слово, но уже сейчас видно, что более простая сетка и мощный поток текста создает более приятное впечатление, чем суетливая графика

Теперь, имея под рукой сетку правил, можно добавить центральный формообразующий элемент. Вы хотели осьминога?

Такой плакат будет интересно рассматривать, и в умах и сердцах людей он будет «тем самым плакатом с осьминогом»

По-прежнему есть проблема, что мы пытаемся упаковать в плакат слишком много всего: и про дизайн, и про редактуру, и про переговоры. Для кого этот продукт? Кому он принесет пользу, помимо студентов первой ступени? Можно ли сделать это полезнее?

Идея — сделать несколько плакатов, по одному для каждой дисциплины. Так каждый плакат можно сделать более подробным и полезным, для каждого выбрать централььную визуальную идею, плакаты можно будет коллекционировать, а когда их много — у нас больше охват.

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

Было — стало

Ну вот как-то так. Более подробный разбор и ход мысли — в канале «Смотрю» @ilyahov_smotrit

Если хотите уметь делать классные информационные продукты, в том числе плакаты, — поступайте в Школу редакторов.

Наташ, ты хоть и не спрашивала, но я влезу всё равно. Про наглядность и схемы.

Наглядность — это когда ты с первого раза понимаешь, что происходит на экране или листе. Если продукт наглядный, то человек не задумываясь и не разбираясь понимает, что ты хотела сказать. Например:

Тут даже если не вчитываться в текст, ты понимаешь общую идею: «Сначала ты учишься, потом у тебя три варианта»

Тут без чтения понятно, что слева какая-то пирамида, а справа какие-то ступени

Тут понятно, что мы говорим о каком-то зацикленном, закрытом сам на себя процессе

А есть схемы ненаглядные. Там всё нормально по смыслу, но беглый взгляд на них ничего не объясняет. Нужно разбираться, что и как там устроено, пытаться расшифровать логические связи и, в общем, страдать. Зачем делать схему, если читатель от нее страдает?

Тут была заложена глубокая мысль, но понять ее сложно, потому что схема ненаглядная

Вывод: лучше, когда схема наглядная. Если схема честная и подробная, но с первого взгляда непонятно, как она работает, то, может быть, стоит ее как-то упростить? Если что, Наташа, я не настаиваю — твоя статья, твоя читатель, делай как хочешь :-)

Школа редакторов. Задание «Текст для продающей страницы». Основные проблемы:

По странице непонятно, что она про диджейство. Всё одинаковое на белом фоне, фотографии в прямоугольниках. Не хватает деталей, которые создают настроение. Страницы с тем же успехом могли бы продавать что угодно: хоть лекарства, хоть курсы. Читать об этом: о лайфстайле

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

Заходите на территорию читателя: пишете о его мыслях, чувствах, желаниях. Это неправильно. См. читательские границы

Да-да, я знаю:

сначала открой свою кофейню, потом умничай;
ты ничего не понимаешь в кофе;
ты никогда не работал в реальном бизнесе;
ты о бизнесе знаешь только из рассылок Мегаплана;
а сам-то ты, небось, ни одной чашки кофе не сварил;
да чо ты, нормальный душевный плакат был;
у тебя получилось, как на колхозном рынке, а было душевно и красиво;
люди приходят за эмоциями, а не за кофе;
все дело в лояльности и бренде, а не продукте и упаковке;
такие плакаты делают только в нищебродских кофейнях на вокзале;
у старбакса на логотипе нет чашек кофе;
и вообще с чего ты взял, что люди приходят в кофейню за кофе;
главное — душевность, а не твоя эта тупая прагматика;
да девчонки молодцы, чо ты их гнобишь;
выезжаешь на чужом горе;
лучше бы чем полезным занялся;
потаская кофемашину с наше, потом умничай;
ты просто завидуешь чужому успеху.

Но всё равно.

Что хорошо: принцип объяснен на бумажках, каждая бумажка «звучит». Построено от простого к сложному. Автор не уходит в детали, показывает одно «хорошо» и одно «плохо». Принцип понятен после добавления первого же оператора.

Для сравнения: та же тема, но другой автор. Он уходит в страшные дебри, мало что понятно, куча терминов, очень мало визуальной опоры, а то, что есть — слишком мелкое. Такое на новичке не сработает:

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

Дело в том, что чтобы поставить текст на фотографию, вам нужно либо искать место на фото, где нет деталей, либо стараться как-то замылить, замазать или спрятать детали. Иногда решают ставить на полупрозрачную плашку. Еще иногда забеляют или затемняют фотографию, чтобы текст смотрелся контрастным:

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

Решение очень простое: ставить текст за пределами фотографии:

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

Пример с Алёной

В честь двухлетия этой статьи дополняю её новым примером. Вот прекрасная Алёна, её нужно подружить с дурацким текстом:

Теперь листайте слайдер, чтобы изучить варианты:

Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию. Не ставьте текст на фотографию.

Еще у Бирмана о том же

Сёма! Ты втулил текст в картинку. Втуление — это когда ты ставишь что-то куда-то, исходя из наличия свободного места. Типа «о, тут есть место вставить текст, пожалуй, вставлю». Вот тут ты втулил текст на подставку монитора:

Если тебе нужно совместить текст с картинкой, либо не пересекай их вообще, либо делай вид, что они друг о друге не знают:

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

В Школе редакторов был конкурс на работу с клиентом и сделывание проектов. Я попросил студентов, которые участвовали в конкурсе, сделать отчет о своем участии. Пара примеров:

Команда «Спортполитех»
Команда «Три кота»

В вебинаре разбираю структуру и смысл их работ.

У ваших отчетов могло быть одно из двух полезных действий, которые повлияли бы на структуру:

Развлечь читателя — формат «Реалити-шоу». Для этого нужно было:

Герои (продать, представить, дать возможность сочувствовать)
Драматическая структура: герой сталкивается с трудностью, преодолевает
Акценты: у каждой страницы должна быть темапри
Крючок

Учебник, пособие

У каждой публикации должна быть тема
Теория + примеры
Иллюстрации
Выводы
Интерактив и упражнения

Вот статья «Тиджорнала» о слайдах Путина. Статья рассказывает о проблемах в слайдах и как их исправить. Но если просто смотреть на страницу, непонятно: перед нами улучшенная или старая версия?

В реальности это старая версия слайдов, и если навести и кликнуть — будет улучшенная. Но это неочевидно, и не все читатели это поймут. Но даже если поймут, они должны кликать туда-сюда, чтобы всё посравнивать. Когда я кликал и сравнивал, я заметил только изменения заголовка, а там изменилась еще и подача чисел — я этого не понял в слайдере.

Удобнее сразу показать «было — стало», причем отрезать те части фотографии, на которых ничего не происходит:

Отрезал пустые бока фотографий, чтобы не тулить в узкую колонку две широкие фотографии

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

Есть еще много способов показывать «было — стало»: двумя фотографиями подряд, «шторкой», фейдом по скроллу, обязательным кликом и т. д. Об этих способах как-нибудь потом. Анонсы новых постов — в Телеграме @glvrdru. Подписывайтесь, чтобы не пропустить.

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

Имеем сверстанную в Редимаге страницу:

Что плохо:

1. Всё слишком сжато
2. Неаккуратные невыразительные заголовки
3. Слишком активный фон
4. Фактоид ни о чем
5. Подписи под фото не читаются

Лечим фон. Текст удобнее читать на светлом фоне:

Пробуем какой-нибудь выразительный заголовок. Для этой статьи я сходил на сайт студии Лебедева и взял несколько шрифтов на пробу. Это Дереза:

Так можно, но не очень выразительно. Проблема в том, что заголовку мало места. А когда мало места, не надо искать компромисс, надо всё на хрен ломать. Поставил «Малину»:

Фактоид был дурацкий — про «1—50 участников». На кой черт мне об этом знать? Расскажите мне что-то в моем мире:

Подписи утаскиваем под фотографии, чтобы читать черный текст на белом фоне:

Успокаиваем цвета заголовков, чтобы они не побеждали фотографии:

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

На всё про всё 20 минут.