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

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

Разбор конкурса «Двуцветный квадрат»
Задание
Студенты второй ступени Школы редакторов получили такое конкурсное задание:
У вас есть холст белого цвета 2000 × 2000 пикселей. У вас есть ваша фотография, на которой вы себе нравитесь. У вас есть две краски: черная и любой цвет из веера «Пантон».
У вас есть текст: «Это конкурсное задание в Школе редакторов бюро. Я тренируюсь расставлять изображения и текст на квадратном холсте, учитывая технологические ограничения. Например, здесь у меня есть вот этот готовый текст и всего две краски, которыми я могу печатать. Как вам такая композиция?»
Ваша задача — составить композицию из текста и фотографии с учетом ограничений по цветам. Можно добавить заголовок. Результат — картинка в Фейсбуке со ссылкой на Школу редакторов. Ссылки на публикации в Фейсбуке скидывайте в этот чат с хештегом #опятьквадрат.
Что нужно было сделать
Это задание на композицию и работу с цветом. У него два измерения: аккуратность и выразительность.
Сделать аккуратно — то есть выдержать поля, подобрать хорошую шрифтовую пару, прилично обтравить фотографии или избежать обтравки, не налепить лишнего.
Сделать выразительно — то есть чтобы фотография была красивая и мощная, чтобы цвет в работе что-то обозначал или был невероятно красивым. Можно было обойтись без цвета.
Общие рекомендации
Просто соблюдайте правила вёрстки: внутреннее и внешнее, якорные объекты, принцип контраста, подбор кегля и интерлиньяжа, шрифтовые пары. Всё это есть в книге Горбунова о типографике и вёрстке.
Выбирайте выразительные, интересные фотографии. Когда что-то делаешь — это лучше, чем когда просто позируешь. Когда ничего не делаешь, то лучше улыбаться, чем нет. Самый кайф — когда фотография рассказывает историю. «Я стою у стены» — это не история. См. информативность фотографии
Старайтесь не обтравливать фотографии, особенно чтобы заменить темный фон на светлый или наоборот. Чем меньше обтравки, тем меньше проблем.
Не используйте цвет для красоты, рассказывайте им историю. Не надо просто так красить текст или фон каким-то цветом См. цвет как информационный слой.
Результаты



Иван Афонченко. С полями почти хорошо, но обтравка слабая, цветной контур невыразительный. Если делать типа грубую обтравку, то контур должен быть выразительным, мощным. А тут обтравили как получилось и добавили обводку просто так. Выбранный синий делает фотографию тусклой. Аккуратность: 2; выразительность: 1.

















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

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

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

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

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

Кинофильм:

Результаты конкурса «Возвращение квадрата»
27 июня я предложил студентам второй ступени Школы редакторов (и всем сочувствующим) поучаствовать в конкурсе «Возвращение квадрата в тихом лесу». Условия:
У вас есть квадрат 1000 × 1000 пикселей. У вас есть одна шрифтоваая гарнитура и два её начертания. У вас есть ваша любимая фотография с вами на природе. Обязательное условие: на этой фотографии есть зелёная листва. У вас есть текст «Я мог бы поехать на природу, но вместо этого я делаю шрифтовую композицию в квадрате 1000 × 1000 пикселей. Спасибо, Школа редакторов!» У вас есть какие-то другие слова по вкусу.
Соберите из этого композицию, выложите ее в Фейсбук и пришлите в чат ссылку на публикацию с хештегом #опятьквадрат. Срок — 30 июня, 23:59
Кажется простым, но есть несколько хитростей:
Очень трудно поставить текст на изображение листвы, цветов и любого другого неоднородного фона. Об этом писал Бирман в статье «Текст поверх фотографии» и я в статьях «Не ставьте текст на фотографию» и «Семён, не тули»
У всех есть фотографии с собой, но не все могут отобрать из них какую-то симпатичную, с хорошей компоновкой, мягким светом, приятными цветами и без визуального мусора. Это одна из областей, в которых должен разбираться редактор: делать визуально приятно, красиво.
Закомпоновать текст в квадрат вроде могут все, но попробовали бы вы это сделать, когда в уравнении есть еще и фотография с непредсказуемой геометрией.
Спустя месяц я наконец-то добрался до разбора результатов. Я пропылесосил чат по хештегу «опятьквадрат», сохранил картинки и распределил работы по трем категориям: бронза, серебро и золото:
Бронза





Серебро








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




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

Смешай комки в вёрстке
Например, пишем длинную статью в Т—Ж. И там нужно прямо по тексту поставить большие фотографии и врезки. Но если разбивать текст слишком часто, читателю придется постоянно переключаться от картинки к тексту и обратно к картинке, документ будет выглядеть хаотично, читать будет неудобно.
Чтобы было удобно, нужно «смешать комки»: поставить текст к тексту, картинки к картинкам, плашки — в конец или начале раздела. Задача — избежать слишком мелких кусочков текста, которыми пересыпаны какие-то другие элементы. При необходимости текст отредактировать
Это особенно важно в статьях, где у вас много-много иллюстраций, вещдоков и сканов документов, которые появляются по ходу рассказа. Авторы иногда делают так: три строки текста — огромный скриншот — три строки текста — скрин — две строки — скрин — пять строк — скрин... Это читать невозможно, потому что нужно постоянно переключать внимание. Правильно так: сначала всю историю рассказал текстом, потом выложил для ознакомления все нужные скрины.
На иллюстрации ниже слева комки не смешаны: в конце раздела остается три строки текста, а потом начинается новый раздел. Справа комки смешаны: плашки и иллюстрации встали в конец раздела, текст перенесся. Подпись к иллюстрации относится к иллюстрации, поэтому ее не трогаем.

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

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

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

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

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







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

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


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

Допустим, мы что-то выделили внутри, оно обращает на себя внимание:

Теперь я хочу что-нибудь на поля:

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

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

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

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

Мораль такая:
Не надо добавлять цвета в текст ради красоты. Только если вам нужно с чем-то текст связать.
Вот примеры, где это нормально работает:



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