Пиши, соблазняй

Управление вниманием, драматургия и подача текста. Для тех, кто освоил информационный стиль

Автономность первого абзаца

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

Вот пример. «Арзамас» присылает рассылку о новом курсе. После логотипа идет обращение «Друзья», дальше связный текст, заголовок и большая иллюстрация. А после большой иллюстрации текст продолжается: «мы сделали его»:

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

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

Сравнение несравнимых долей

Допустим, мы провели исследование по поводу кофейных напитков. Мы задали десяти тысячам человек два вопроса:

Какой кофе вы предпочитаете (черный или с каким-то видом молока)?
Как вы его предпочитаете пить — с сахаром или без?

Мы выяснили, что среди любителей черного кофе 85% пьют его без сахара, а среди любителей кофе с молоком без сахара пьют только 25%. Ну и логично было бы нарисовать какую-то такую картинку, да?

Нет! С этой картинкой куча проблем!

Главная проблема в том, что здесь сравниваются 85% и 75%, 15% и 25% — они ведь стоят рядом и они похожи по размерам. Но это не абсолютные доли людей из опроса, а доли относительно ответивших «черный» и «с молоком». Вот эти 85%, пьющих черный кофе без сахара — это 85% от какого числа?

И выясняется, например:

В нашем опросе из 10 тысяч человек
Черный кофе из них пили только 20%, остальные 80% предпочитали пить с молоком
85% от пьющих черный кофе — это 10000 × 20% × 85% = 10000 × 17%
75% от пьющих кофе с молоком — это 10000 × 80% × 75% = 1000 × 60%

И график, соответственно, будет выглядеть несколько иначе:

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

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

Иллюстрации: теория, фотографии, рисунки

Фрагмент курса «Дизайн текста и визуальное повествование»:

О чем тут

Чем отличаются картинки от иллюстраций
Как подбирать картинки к статьям (никак и вообще это неправильный вопрос)
Обязательно ли иллюстрация должна быть картинкой
Как иллюстрации воздействуют на чувства
Фотографии
Рисунки

Разбор конкурса «Двуцветный квадрат»

Задание

Студенты второй ступени Школы редакторов получили такое конкурсное задание:

У вас есть холст белого цвета 2000 × 2000 пикселей. У вас есть ваша фотография, на которой вы себе нравитесь. У вас есть две краски: черная и любой цвет из веера «Пантон».

У вас есть текст: «Это конкурсное задание в Школе редакторов бюро. Я тренируюсь расставлять изображения и текст на квадратном холсте, учитывая технологические ограничения. Например, здесь у меня есть вот этот готовый текст и всего две краски, которыми я могу печатать. Как вам такая композиция?»

Ваша задача — составить композицию из текста и фотографии с учетом ограничений по цветам. Можно добавить заголовок. Результат — картинка в Фейсбуке со ссылкой на Школу редакторов. Ссылки на публикации в Фейсбуке скидывайте в этот чат с хештегом #опятьквадрат.

Что нужно было сделать

Это задание на композицию и работу с цветом. У него два измерения: аккуратность и выразительность.

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

Сделать выразительно — то есть чтобы фотография была красивая и мощная, чтобы цвет в работе что-то обозначал или был невероятно красивым. Можно было обойтись без цвета.

Общие рекомендации

Просто соблюдайте правила вёрстки: внутреннее и внешнее, якорные объекты, принцип контраста, подбор кегля и интерлиньяжа, шрифтовые пары. Всё это есть в книге Горбунова о типографике и вёрстке.

Выбирайте выразительные, интересные фотографии. Когда что-то делаешь — это лучше, чем когда просто позируешь. Когда ничего не делаешь, то лучше улыбаться, чем нет. Самый кайф — когда фотография рассказывает историю. «Я стою у стены» — это не история. См. информативность фотографии

Старайтесь не обтравливать фотографии, особенно чтобы заменить темный фон на светлый или наоборот. Чем меньше обтравки, тем меньше проблем.

Не используйте цвет для красоты, рассказывайте им историю. Не надо просто так красить текст или фон каким-то цветом См. цвет как информационный слой.

Результаты

Дмитрий Мишейкис. Текст лежит неаккуратно, плашка невыразительная и случайной формы, текст внутри плашки упирается в края. Второй блок текста непропорционально растянут. Сама плашка врезается в голову «почти, но не совсем». Цвет ничем не помогает. Выразительность: 1; аккуратность: 1.
Анна Третьякова. Нарушены требования по размеру изображения. Неаккуратная обтравка фотографии. Не выдержаны поля. Фотография сама по себе хорошая, градиент сверху — норм идея. Аккуратность: 1; выразительность: 2.
Иван Афонченко. С полями почти хорошо, но обтравка слабая, цветной контур невыразительный. Если делать типа грубую обтравку, то контур должен быть выразительным, мощным. А тут обтравили как получилось и добавили обводку просто так. Выбранный синий делает фотографию тусклой. Аккуратность: 2; выразительность: 1.
Галина Хан. Хорошо выбрана и поставлена фотография, но ей не хватило динамического диапазона, то есть контраста. Блики серые, тени чёрные, в целом траурно. В типографике: не соблюдены поля, пережат интерлиньяж, некрасивая форма колонки текста, недостаточно контраста между заголовком и текстом. Цвет так можно делать, если бы он не наехал на белую часть кофты, отчего создалось дребезжание. Аккуратность: 1; выразительность: 2.
Лена Жернова. Интерлиньяж пережат, расстояния между блоками текста случайные, композиция развалилась на пятна. Фотография интересная, но обтравлена с артефактами. Псевдотень ничем не обоснована: не добавляет глубины, просто создаёт дополнительный визуальный дребезг. Аккуратность: 1; выразительность: 2.
Кира Калимулина. Выразительная фотография, грамотная работа с цветом (его нет, и это хорошо). Подвело общее пятно и типографика: интерлиньяж пережат на выворотке, ощущение вёрстки впритык, фотографию объяли жирные заголовки с двух сторон. Нужно было убрать нижний заголовок, сделать кегль мельче и аккуратнее, колонку текста ровнее по форме (можно использовать переносы). Аккуратность: 2; выразительность: 3.
Мария Эл. Мощная, выразительная фотография. Текст развалился: то утыкается почти впритык под грудь, то чуть касается волос, при этом переносы ведут себя непредсказуемо. Аккуратность: 2; выразительность: 3.
Лена Кулачикова. Всё бы хорошо, но подвела форма абзаца — слово «краски» опасно нависло над макушкой. Шутка с квадратом Малевича не вызывает восторга. Фотография тонально не принадлежит пространству «Чёрного квадрата», но обтравлена так, будто принадлежит. Видны артефакты обтравки. Аккуратность: 3; выразительность: 2.
Любовь Верещинская. Смелое решение — разбить квадрат на части и работать с каждой как с отдельным холстом. Решение оправданное. С полями у текста всё хорошо, но выключка вправо вызывает вопросы. Плашка под заголовком создаёт лишнюю декоративность и дребезг. А вот узорчик на фоне создаёт приятное освежающее ощущение, получается приятная такая фактура. Аккуратность: 3; выразительность: 3.
Юлия Занкевич. Идея с двумя столбцами текста — норм, хотя левый столбец без переносов чувствует себя дырявым. Поля и интерлиньяжи на грани. На фото есть эмоция, но нет действия, этого не хватило. Цвет ничего не даёт, но и не портит. Аккуратность: 3; выразительность: 3.
Владимир Тупикин. Отступы на грани, интерлиньяж пережат, цвет не портит, но и не помогает. Фактурка освежает, но физическая природа изображаемой ей тень неубедительная, из-за чего пространство скорее ломается, чем создаётся. На фото сдерживается эмоция, но ничего не происходит. Аккуратность: 4; выразительность: 3.
Наталья Турачёва. Яркая, запоминающаяся композиция, ради которой пришлось пожертвовать читаемостью. Наслоения и пересечения усложняют чтение, а не помогают. Получился дизайн ради дизайна. Аккуратность: 3; выразительность: 4.
Кристина Лунина. С типографикой вроде всё прилично. Серое небо на фото позволило не страдать обтравкой, но оно же и убило выразительность. Фигура мелковатая, лица не видно. Что происходит на фото — неясно. Если Кристина фотографирует текст, то он должен был вписаться в пространство фотографии (он не вписывается). Аккуратность: 4; выразительность: 3.
Алексей Плетнёв. Выразительная фотография. Наконец-то кто-то что-то делает, а не просто сидит и смотрит. Перебор по контрасту в фотографии, пятно довольно дробное. Интерлиньяж на грани, можно чуть больше. Правый край рваный, хорошо бы включить переносы. Поля документы выдержаны хорошо. Шрифтовая пара не нравится. Эмодзи — норм. Аккуратность: 4; выразительность: 4.
Анна Волкова. Несмотря на дополнительное усложнение в виде двойного набора полей композиция читается, есть пространство, приятная графика декоративного шрифта. В обтравке ничего криминального не вижу. Губы можно было не красить. Аккуратность: 5; выразительность: 4.
Андрей Евтеев. Ещё более замороченная конструкция: текст на трёх холстах! На счастье, почти везде отступы работают, форма основного абзаца неплохая. Не хватает контраста между заголовком и основным текстом. Фото невыразительное, но есть эмоция. Цвет ничего не даёт. Аккуратность: 5; выразительность: 4.
Лена Жукович. Выразительная фотография: лицо, причёска, крупный план, фактура, глубина резкости. Нормальная форма столбца текста, нормальный интерлиньяж. Тяжеловато читать часть текста на светло-сером фоне. Аккуратность: 5; выразительность: 5.
Алиса Ястремская. На фото яркая эмоция, и даже артефакты сжатия её не портят. Обтравка не понадобилась благодаря светлому фону. Весело использован цвет. Придирка по типографике — жирность основного текста и форма основной колонки. Можно включить переносы и сделать текст обычной толщины, всё будет нормально читаться. Аккуратность: 5; выразительность: 5.
Вячеслав Лазарев. Выразительная фотография, которая, заметьте, не ломает чётко выстроенный каркас. С полями, интерлиньяжем и контрастом всё хорошо. Цветная надпись хорошо сидит в пространстве. Фотография залезает на текст, но не мешает читаемости. Обтравка без явных проблем. Аккуратность: 5; выразительность: 6.
Марья Янкович. Впервые на фотографии есть не только эмоция и действие, но и история. Наложить текст и заголовок — смелое решение, и оно было бы оправданным если бы цвет был не таким контрастным или текст был пожирнее. Сейчас напряжно читать. Но всё это не проблема, когда есть история. Аккуратность: 4; выразительность: 7.

Редактура таблицы

Хьюстон, у нас таблица. В целом Нормальная, но много мелочей, которые хочется исправить.

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

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

Во втором и третьем столбце повторяются «до». Всё, что повторяется, — кандидаты на вынос в заголовок таблицы.

Остались мелочи: выровнять текст в ячейках по верху и вернуть заголовок на место.

Кинофильм:

Топология и форма схемы

Перед вами три схемы с одинаковой топологией, но разной формой связей. Оцените, как меняется ощущение от схемы в зависимости от формы:

2019   схема

Краткое введение в фотографию: пятно

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

У человека два глаза: левый и правый. Когда они работают вместе, мозг соединяет два изображения от глаз и создает у нас иллюзию объемной картинки. Главное преимущество объемной картинки в том, что мы понимаем, где фигура, а где фон; где главное, а где — второстепенное.

Допустим, бежевый человек стоит на фоне песчаных дюн.

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

Мозг проигнорировал даже полоску неба, потому что для него тут главное — фигура другого человека.

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

Мужчина, вы бы прикрылись

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

Человека почти не видно, потому что его пятно перебило дерево и его тень

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

Но всё равно: если на фоне бежевого песочка встанет контрастная фигура (например, арабского шейха), то заметить его нам будет гораздо легче.

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

Общее правило: чтобы предмет хорошо читался на фотографии, он должен быть хорошо считываемым и не слишком пёстрым пятном.

Теперь к студентам Школы редакторов. Вот вы делаете страницу об агентстве праздников и выбираете, допустим, вот такую фотографию. Какое у неё пятно? Листаните:

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

Теперь проблема, что шары совершенно не дружат с остальной фотографией, и надо бы их вообще убрать. Но это проблема, с которой будут работать дизайнеры. Редактору достаточно сказать «ПЯТНО!».

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

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

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

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

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

А то и вовсе исправить фон:

Короче, котаны, думайте о пятне.

Я баклан

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

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

Операция «Конфетти». Краткий мастер-класс Фотошопа

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

Задача: сделать фотографию более эффектной, чтобы серый фон уходил в белое пространство страницы.

Первый шаг: откусываем фотографию в отдельный слой и двигаем в ней кривые так, чтобы серый фон стал белым. Скажу сразу: это варварский способ, потому что он на хрен выжигает все настоящие света этой фотографии и убивает пятно. Нормальные пацаны в такой ситуации берут инструмент «Осветлитель» и вручную светлят фон. Но я устал, я хочу пельменей, поэтому кривые. Результат: серый фон стал белым, вся фотография стала светлее.

Второй шаг: масштабируем фотографию, чтобы она занимала нужное нам пространство. Для этого используем CMD+T, то есть «свободную трансформацию», зажимаем Shift для сохранения пропорций. Сразу скажу: пиксели поговняются, но — пельмешки! Слою с большой картинкой ставим режим Multiply, чтобы сквозь нее просвечивался фон:

Видите пацана в клетчатой рубашке справа? Я — нет. Это какой-то артефакт хренового фотографа. Берем белую кисть и замазываем это недоразумение. Заодно берем кисти в цвет локтя пацана слева и дорисовываем бедолаге локоть. Кто отрезает людям руки на фотографиях, самому надо руки отрезать:

Последний штрих: нужно добавить классных конфетти. Находим кусок с более-менее чистыми конфетти, выделяем, нажимаем CMD + J и создаем таким образом копию куска слоя. Я повыделял кучу кусков, чтобы конфетти были разнообразными:

Теперь с помощью Free Transform и копирования слоя раскидываем большие и маленькие копии этого конфетти под разными углами. Самые большие можно будет потом размыть с помощью Lens Blur, если пельмешки не всплывут раньше. Вот так выглядят слои с новым склонированным конфетти, если выключить все нижние слои:

Теперь всем этим слоям с конфетти ставим режим Multiply или Darken. Лишнее чистим маской или ластиком (в случае пельменей — ластиком):

Масло, сметана, второй сезон «Лютера».

Визуализация процесса

Распространенная ошибка в работах студентов второй ступени Школы редакторов — неинформативное изображение процесса.

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

Она упаковала? Получила? Подменила? Изготовила?

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

Пошаговая схема упаковки — показывает процесс

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

Взрыв-схема упаковки — показывает состав

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

P. S. Школа редакторов — единственное место в России, где учат подаче текста, иллюстрированию и управлению вниманием. Выпускники школы на две головы выше многих людей с опытом в профессии. Все остальные школы редактуры и копирайтинга стеснительно мнутся в стороне.

Вот еще примеры вещей, которым учат в Школе редакторов:

Создание промостраниц
Создание страниц о компании
Организация редпроцесса
Информативность фотографий и подписей к ним
Принцип «Экраном на читателя»
Сомасштабность и связность коллажей
Создание плаката

Ближайший набор в Школу редакторов начнется весной: bureau.ru/school/editors/

Бессмысленный фактоид

Иногда в работах студентов встречаю на полях фактоиды типа таких:

10 самых популярных программ праздников сняли на видео
300 популярных товаров всегда на складе
136 источников проанализировано в исследовании

Это бессмысленные фактоиды, потому что само число не важно и ни о чём не говорит. Что было бы, если бы популярных программ было 15? Да пофигу, хоть 20, ведь мне нужна только одна программа. Что если мы храним не 300, а 350 товаров? Да плевать, всё равно я не понимаю, храните вы нужный мне товар или нет. Какая разница, там 136 источников, 100 или 150? Да просто ради понта написали, ясно же.

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

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

3 часа на срочный выезд: если нужно срочно провести праздник, мы готовы приехать сегодня же
48 дней на обмен и возврат
Один врач сопровождает вас на всём пути лечения и в курсе всех тонкостей лечения

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

Сфоткай типа стою

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

На разных съездах и конференциях постоянно этим промышляют: в конце собирают всех участников и делают общий снимок. Обязательно нужно, чтобы все держали нечитаемые дипломы, а две трети кадра занимал либо пол, либо потолок:

Бывает, фотографируют сидящих людей со спины. Все сутулятся, лиц не видно:

Еще хуже — когда люди не просто стоят, а специально позируют. Так обычно делают в фотосессиях, когда нужно развивать личный бренд: «Сфоткай типа стою такая задумчивая». «Сфоткай типа пирожок нашла и удивляюсь, но чтобы попу было хорошо видно».

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

В съезде принимали участие рукодитель парткома Ростовской области Иван Георгиевич Матвеев, руководитель парткома Челябинской области Семён Захарович Иванов, председатель парткома и герой труда Виктор Михайлович Калинин... (повторять 20 раз)... и секретарь московского областного парткома Станислав Петрович Сахаров.

Вот настолько унылые эти фотографии.

Есть отдельные случаи, когда фотография жанра «типа стою» полезна. Например, когда вам нужно показать число участников. Вот, мол, целый огромный зал любителей системы управления Рона Хаббарда:

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

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

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

См. также: информативность фотографии

Лекция о музыке

В 2018 году я прочитал в школе Антона Маскелиаде о музыке:

Хотел сохранить здесь эту лекцию, вот почему.

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

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

Есть интерактивная часть: из зала мне подсказывают тональность, Антон советует изменить что-то в аранжировке. Это задействована синхронность: человек пришел, чтобы поучаствовать в лекции, и он участвует.

Есть связность: на протяжении лекции мы выстраиваем один продукт — трек с акапеллой Рианны. Есть смысл смотреть лекцию целиком.

Есть некоторая драматургия и элементы неожиданности.

Лекция норм, посмотрите.

Схема в обратную сторону

Так. Имеем схему действий по типу «Бусины на нитке». Имеем слайд презентации. Задача — уложить одно в другое:

Первое, что приходит на ум, — уложить слева направо, справа налево и снова слева направо. Проблема — на средней линии придется читать в обратном направлении, это хреново:

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

Е-мое... что ж делать-то?.. Погоди-ка, что это такое? ААА ЧТО ТЫ ДЕЛАЕШЬ НЕЕЕТ ЭТО ЖЕ НИТКА СТООЙЙ ААААРРРГХХХ!!

Можно поставить цифры сверху вниз, столбиками. Можно слева направо, строками. Как хотите. Никита, специально для тебя:

Экраном на читателя

Пришел в Школе редакторов студент посоветоваться насчет диплома. Показывает такую картинку и спрашивает, как улучшить в плане подачи:

Подпись к этой фотографии в оригинале: «Такой-то и сякой-то обсуждают инвестиции в такой-то проект»

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

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

То есть не просто «Двое мужиков сидят над ноутом», а «Двое мужиков обсуждают бизнес-модель, смотри, тут EBITDA отрицательная, потому что операционные расходы растут, а торговая наценка съедается курсовой разницей. Давай переходить на отечественных поставщиков...»

Короче, принцип — развернуть фотографию экраном на читателя.

Вот еще пример фотографии из той же работы:

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

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

На полях — второстепенное

Вот текст, и на полях стоит какая-то ссылка. Если она стоит на полях, она как бы второстепенная, её можно проигнорировать.

Но очевидно, что здесь ссылка важна по смыслу. Значит, она должна стоять в основном тексте:

А то и вообще ключевую информацию из материала по ссылке нужно достать в текст. Но это уже по ситуации.

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

Если ссылка важная, ставьте ее в основной текст. Не надо ставить важные ссылки на поля просто потому, что у вас есть поля.

Результаты конкурса «Возвращение квадрата»

27 июня я предложил студентам второй ступени Школы редакторов (и всем сочувствующим) поучаствовать в конкурсе «Возвращение квадрата в тихом лесу». Условия:

У вас есть квадрат 1000 × 1000 пикселей. У вас есть одна шрифтоваая гарнитура и два её начертания. У вас есть ваша любимая фотография с вами на природе. Обязательное условие: на этой фотографии есть зелёная листва. У вас есть текст «Я мог бы поехать на природу, но вместо этого я делаю шрифтовую композицию в квадрате 1000 × 1000 пикселей. Спасибо, Школа редакторов!» У вас есть какие-то другие слова по вкусу.

Соберите из этого композицию, выложите ее в Фейсбук и пришлите в чат ссылку на публикацию с хештегом #опятьквадрат. Срок — 30 июня, 23:59

Кажется простым, но есть несколько хитростей:

Очень трудно поставить текст на изображение листвы, цветов и любого другого неоднородного фона. Об этом писал Бирман в статье «Текст поверх фотографии» и я в статьях «Не ставьте текст на фотографию» и «Семён, не тули»

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

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

Спустя месяц я наконец-то добрался до разбора результатов. Я пропылесосил чат по хештегу «опятьквадрат», сохранил картинки и распределил работы по трем категориям: бронза, серебро и золото:

Бронза

Анастасия Свирид вроде бы ловко вышла из ситуации с пёстрым фоном. Но обтравка очень резкая, и, самое главное, текст подходит слишком близко к лицу. Если сделать заголовок в полтора раза меньше, привязав к правому верхнему углу, было бы не хуже
Владимир Тупикин решил вопрос плашками, но полупрозрачные плашки — это полумеры (см. статью Бирмана). И не успел к дедлайну
Ксения Сергеева подобрала удачную фотографию с точки зрения размещения текста, но у картинки проблема касаний: всё друг друга неприятным образом чуть-чуть касается. Текст чуть-чуть касается головы, голова чуть-чуть вылезает над линией горизонта (?), рука чуть-чуть касается куста. Все эти касания создают неприятное ощущение
Ксения Ткачева радикально решила проблему фона — просто не совмещала фотографию и текст, так нормально. Но композиция на фотографии не отцентрована, а на фоне много мусора, который хочется вычистить. Фон активнее фигуры, вся фотография пестрая, тонально разваливается (хотя по сути она должна быть глубокой). Сравните с цветами Тупикина — там всё плоское, но он и стоит у плоскости с цветами, там это нормально. У текста неприятный рваный правый край.
Петр Рябиков не обратил внимание на левый верхний и левый нижний угол фотографии, из которых виднеется бетонность нашей жизни. Нужно было клон-кистью замазать, создав ощущение сада. И мелкий текст неприкаянный, буквально, в подмышке.

Серебро

Александра Селезнева выбрала безопасную фотографию, где много неба и мало Саши. Фигура и текст слишком близко. В целом квадрат не торкает, потому что Саша стоит к нам спиной. А может быть, это и не Саша вовсе, откуда ж я знаю... А, и в ЛНУ видны следы клон-штампа, грубоватая работа
Дарья Юрченко сделала хорошо и эффектно, но тексту плоховато на листве, а фотография несколько мыльная. Светлому тексту на темном фоне (это называется вывороткой) нужно давать больше кегль и интерлиньяж
Екатерина Сазонова тоже выкрутилась и не поставила текст на фото (это нормально). Подвела типографика заголовка: слишком большой интерлиньяж, текст слишком близко подошел к краю
У Ивана Устякина всё ровно с типографикой, но фотография некачественная, темная и без листвы. Горящая голова — эффектно
У Ирины Ситниковой элегантное решение с полосой сбоку, но оно не выдержало проверку заголовком. Заголовок можно было смело уместить на полоску, было бы хорошо. Недостаточный контраст жирности между заголовком и основным текстом
Мария Митина всё сделала хорошо и ровно, особенно мне нравится текст в две колонки. В идеале бы, конечно, заголовок наверх, но как сейчас — тоже эффектно. Не дотягивает только из-за цвета фотографии
У Ники Лобановой элегантное решение с текстом (кстати, заголовок уместился на узкой полосе). Но освещение на фотографии слишком жесткое. Да, редактор тоже должен думать, с какими фотографиями работает. Фотографию с таким светом не поставишь на сайт или в журнал
У Федора Глумова всё окей, кроме текстовой подмышки и пасмурной фотографии. На лбу заметно, что фотографию тянули кривыми или уровнями, мало диапазона в светах. На гистограмме виден провал в светах

Золото (получают приз)

Алина Мишуренко использовала цитату из Монеточки в последние деньки, когда это еще было модно
У Михайлины Лепкой получилось классное легкое настроение
У Кристины Смагуловой настроение совсем другое, но типографика прочная, фотография эффектная
У Камиллы Газиевой всё совпало: эмоция, свет, цвет и типографика. Единственное, что мне не нравится — что весь текст решён как один длинный абзац. Я б побил на два, а то и на три. Или подсократил. Секрет Камиллы в том, что это фотография хорошего свадебного фотографа, видимо, с ее свадьбы. Тут есть и эмоция, и свет, и цвет

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

Оттачивайте мастерство вёрстки и насмотренность в новом тренажере, написанном в вашу честь

Информативность подписи к иллюстрации

Иногда смотрю студенческие работы и вижу там подписи типа «Такой-то человек делает то-то». Вот пример:

Так может быть, когда очень важно, что на фотографии именно Людмила Сарычева (это не она). Но это иллюстрация в промостранице курса конструирования одежды. Тут важно не кто делает, а что делает, почему и как. Поэтому подпись должна рассказывать именно об этом.

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

Преподаватель показывает, как обметывать пройму. С такой обметкой пройма будет аккуратной, а соединения с подкладой не будет видно. Этот же метод используют конструкторы домов Версаче и Хоюго Босса

Наша ученица шьет свое первое платье. Еще четыре часа назад мы помогли ей снять с себя мерки и построить выкройку

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

Очень многое зависит от ситуации. Например, на промостранице фитнес-клуба могут быть фотографии, как тренер кого-то подстраховывает. И будет написано: «Тренер Сергей Кралин помогает спортсмену на жиме лежа. Такая страховка нужна, чтобы...» — и вот я запомнил его имя и фамилию, пришел в зал и говорю: «Хочу к Сергею Кралину». Тут фамилия и имя нужны.

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

Подписывай видеоролики

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

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

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

Ранее Ctrl + ↓