x
 
Лука Бутомо
19 июля 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Добрый день! В вагонах московского метро висит и режет глаз реклама сервиса доставки малоформатных грузов между станциями и по России. Переверстал. Что можно улучшить? Какие ошибки допустил?

Часть вторая. Разбор ошибок


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

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

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

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

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

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

Было

Стало

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

Чпоньк:

Было

Стало

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

Вёрстка текстовых страниц

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

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

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

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

Якорные объекты

Модульная вёрстка

Было

Стало

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

Вёрстка текстовых страниц

Поля

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

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

Поля и выбор формата

Было

Стало

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

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

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

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

Типографика и вёрстка — дисциплина Школы дизайнеров. Набор открыт до 13 августа или пока есть свободные места.
 

Поделиться
Отправить

Комментарии

Алексей Афанасович
19 июля 2017

Якорь «Также на складе Забытых вещей, м. Котельники» держит модуль, но он же неоднороден с «Отправьте или получите…». Он «однородный член» с красными подзаголовками и/или с названиями станций. Сам по себе он не предложение, а подпункт списка. Выходит, форма победила содержание?

«на mosmetro.ru» стало красным. Да, предлоги прилипают к гиперссылкам, но в браузер же вбивается адрес без предлога. Думаю, это может запутать пользователя, и он напишет hamosmetro.ru. Я бы оставил предлог черным на предыдущей строке, как и выше в «…получите отправление на…».


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

5 Пытаюсь сделать шаблон вёрстки текста для статей про балет. Третья часть 3




Недавно всплыло

Не преступление использовать Бутстрап? 3 2 2 4