Три мысли для студентов Школы редакторов (и других школ).

Первая: не ставьте основной текст возле картинки справа или слева. Не засовывайте картинку в подмышку к тексту. У вас получится и нечиатемый текст (слишком узкая колонка), и нечитаемвая картинка (слишком мелкие детали).

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

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

Еще читайте: о многоколоночности

5 мес верстка

Разбор визуальных рассказов о компании

Школа редакторов, вторая ступень, июнь 2021

2021 верстка Школа редакторов

Не выделяйте текст в середине

Вот Тула пишет о своих достижениях:

В Туле реализуется концепция социально-экономического развития

Выполнены работы по капитальному ремонту и реконструкции 18,9 км участков трех магистральных водоводов Медвенско-Осетровского, Обидимо-Упкинского, Маслово-Месоченского водозаборов.

Установили станцию обезжелезивания в п. Ленинский и отремонтировали водонапорную башню в д. Малахово.

Окончен ремонт 8,5 км водопроводных сетей в п. Барсуки, Ленинский, Новомедведенский.

Начато строительство станции обезжелезивания в Алёшне.

И дальше ещё пяток таких слайдов.

Когда вы что-то подсвечиваете внутри текста, вы не даёте читателю возможности прочитать только эту часть. Я читаю «18,9 км» — а что за километры? Что вы имели в виду? Надо читать всё предложение. Вы хотели обратить моё внимание на какой-то важный факт в тексте, но вместо этого заставили меня читать весь текст.

Чтобы текст было удобно читать, выделяйте только ключевые слова и только в начале текста. Так читатель быстро поймёт, что имеется в виду в каждом пункте, и выберет то, что ему интересно:

Реконструкция и ремонт водной инфраструктуры. Отремонтированы и реконструированы водоводы Медвенско-Осетровский, Обидимо-Упкинский и Маслово-Месоченский водозаборов. Также отремонтировали 8,5 км водопроводных сетей в п. Барсуки, Ленинский, Новомедведенский.

Новая станция обезжелезивания в п. Ленинский. Начато строительство станции в Алёшне.

Выделяйте текст только в начале абзаца.

2020 управление вниманием

Неслучайные коллажи

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

А тут те же объекты собраны: черные пятна сбалансированы, объекты смотрят логично, крупное в центре, мелкое по бокам:

2020 верстка

Не прячь за клик

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

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

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

За клик можно прятать только что-то дополнительное, менее важное. Например:

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

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

Промостраница курса о работе с клиентом. Показаны три самых боевых письма, для особо заинтересованных за кликом есть еще несколько.

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

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

2020 верстка интерфейс

Сэндвичная верстка

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

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

Если так случилось, есть два варианта решения:

короткий промежуточный текст смешайте с основным, а иллюстрации поставьте рядом. По смыслу докрутите так, чтобы иллюстрации прочитались отдельно от текста;

короткий промежуточный текст расширьте так, чтобы он по объему был не менее иллюстрации.

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

2020 верстка иллюстрация

В две колонки (или в три)

По умолчанию любая информация на веб-странице, в приложении или на листе бумаги должна идти в одну колонку, а не в две и не в три.

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

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

Вот пример из работы студентки в Школе редакторов — просто две карты рядом. На картах — пункты самовывоза. Но в жизни не бывает ситуации, когда нам нужно сопоставлять две карты пунктов самовывоза.

Но можно придумтаь, например, сравнение популярности кальянных в Петербурге и Москве. Сравнить популярность — это и есть «сопоставить». Тогда две карты рядом очень уместны: