29 заметок с тегом

верстка

Отзывы на карточках (прокляты)

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

Даже в рыбе это выглядит плохо. Сейчас объясню, почему.

❌ Плохо виден человек. Портрет зажат текстом и занимает в лучшем случае 20% ширины текстовой колонки. А сама текстовая колонка еще занимает 40-60% ширины экрана. То есть лицо всегда будет маленьким и невыразительным.

❌ Нужно подгонять объем текста. Узкая колонка очень чувствительна к объему текста. Написал лишнее предложение — и у тебя уже две дополнительные строчки, а они растянивают карточку в высоту. Под соседними карточками получается дырка.

❌ Непонятно, сколько их. За кликом в карусели может быть еще одна карточка или еще 100 карточек. Это непонятно издалека, а разбираться в этом не интересно. Люди просто просмотрят то, что есть до стрелки, и пойдут читать дальше.

❌ Карточки слепые. Везде одинаковый мелкий текст, читать неинтересно.

✅ Как надо:

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

Один отзыв под другим, без кликов, галерей и скрывания отзывов за клик.

Фотографию крупнее. Можно все еще держать ее на полях, а можно и в основное поле.

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

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

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

Хорошие примеры — на странице курса Ильи Синельникова:

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

И еще примеры из моего курса про инфостиль:

Большой отзыв с красивым сертификатом в конце
Очень большой отзыв с фотографией в конце
2023   верстка   дизайн   композиция

Текст возле картинки

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

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

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

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

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

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

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

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

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

2020   верстка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Два человека выступают с противоположными мнениями по какому-то вопросу. Вообще любая противоположность может быть показана в две колонки

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

Вы собираете иконостас: много голов или лиц рядом

Еще по теме: текст возле картинки

2020   верстка
2020   верстка

Битва текстов

Вот у студента в работе стоит два столбца с текстом под общим заголовком:

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

Если спора нет, то ставить их друг напротив друга нельзя, нужно ставить один под другим:

2020   верстка

Клипы горой

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

Здесь автор предлагает посмотреть видео в маленьком окне и еще в двух других маленьких. Так сделано типа чтобы эффективнее занять экран по ширине: не ставить же видео на всю ширину?

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

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

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

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

Еще с огромной осторожностью нужно относиться к многоколонникам с фотографиями — есть проблема сомасштабности.

2019   верстка   фотография

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

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

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

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

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

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

Задание

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

У вас есть холст белого цвета 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   верстка   Школа редакторов

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

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

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

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

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

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

Кинофильм:

2019   верстка   таблица

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

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

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

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

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

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

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

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

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

Бронза

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

Серебро

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

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

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

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

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

Смешай комки в вёрстке

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

Чтобы было удобно, нужно «смешать комки»: поставить текст к тексту, картинки к картинкам, плашки — в конец или начале раздела. Задача — избежать слишком мелких кусочков текста, которыми пересыпаны какие-то другие элементы. При необходимости текст отредактировать

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

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

2018   верстка

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

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

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

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

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

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

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

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

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

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

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

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

Семён, не тули

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

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

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

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

Цвет как информационный слой

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

Давайте пошагово. Вот просто текст:

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

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

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

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

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

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

Мораль такая:

Не надо добавлять цвета в текст ради красоты. Только если вам нужно с чем-то текст связать.

Вот примеры, где это нормально работает:

Цветной фон в тексте показывает, к какой части схемы этот текст относится. Картинка из курса Ильи Бирмана «Пользовательский интерфейс и представление информации»
Цвет в заголовке становится легендой к схеме. Из канала «Смотрю»
Фактоид говорит: «Я отношусь к красному графику». Из студенческой работы

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

Ранее Ctrl + ↓