x
 
Паша Омелёхин
13 мая 2015
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

В продолжение совета о правиле внутреннего и внешнего.

Всё ли хорошо с вертикальными отступами? Для примера, картинка со страницами, на которых многовато элементов с вертикальными отступами.


Паша!

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

На первом скриншоте я насчитал пять почти одинаковых отступов:


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

Чтобы не совершать ошибки, важно различать элементы вёрстки: заголовок, подзаголовок, текст, подпись, ссылки. Уменьшим количество стилей и приведём модуль к эталонному виду — заголовок с текстом. Чем ближе модуль к эталонному, тем проще его воспринимать. Заголовок сделаем составным: дату поставим над ним (получим бирку), а переключалку поставим под ним (вместо подзаголовка). Ссылку на сайт переставим в правую колонку, задачу превратим в первый абзац текста:

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

Составной заголовок с биркой и подзаголовком
Текст

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

О вертикальных отступах

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


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

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

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

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

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

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

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

Как сверстать интерфейс электронного билета на самолёт: фрагмент курса «Типографика и вёрстка» 4 Как сделать крутой плакат, в котором сообщается о скидке на товар в новом дизайне?




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

1 Как правильно писать диапазон дат? 2 3 Что вы думаете о Тайпскрипте? Используете его в продуктах бюро? 3