Разбор ошибок построю вокруг основных принципов вёрстки, с которыми есть проблемы.

Правило внутреннего и внешнего

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

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

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

Было
Стало

Технически колонки станций равны по ширине. Но заголовок и названия во второй колонке длиннее. Из‑за этого кажется, что станции внутри кольца как‑то связаны с МЦК. Сами колонки повисли между своими заголовками и последней строчкой плаката.

Чпоньк:

Было
Стало

Кстати, над списком можно ставить или заголовок, или обобщающее предложение с двоеточием. Заголовок с двоеточием — мутант.

Модульность и якорные объекты

Якорные объекты — это самые заметные объекты на странице: иллюстрации, заголовки, фактоиды, логотипы и пиктограммы. Якорные объекты располагаются в одном из углов или в визуальном центре своего прямоугольника.

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

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

Было
Стало

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

Поля

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

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

Было
Стало

Напоследок пара мыслей о шрифте.

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

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

P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

Типографика в вебеЧередование ритмаЯкорные объектыФормат: иллюстрацияФормат: текстНоситель: средаНоситель: бумага
Отправить
Поделиться
Запинить

Рекомендуем другие советы