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

Привет!

Рассматриваю устройство страницы «Что и как читали на Букмейте в 2016 году», потому что она необычно свёрстана. Хочу разобраться с вашей помощью:

  • Оправдано ли такое количество цветных фонов? Как можно успокоить это разноцветье и надо ли?
  • На странице два одинаково крупных заголовка: «Что и как читали» и «Лучшее за год». Свёрстаны они как h1 и h2, но выглядят одинаково. Когда можно так делать и почему?
  • Заголовки h3 не выровнены по левому краю, а скачут — то по центру, то слева, то с разными отступами. При этом нет ощущения, что страница разваливается. Почему?
  • В разделе «Вдохновляли редакцию» есть две крупные обложки. Интересно, что нижний край этих крупных картинок не попадает на линии сетки. Почему так? Моя версия — крупному объекту нужен больший отступ от других элементов.
  • Какие ещё интересные штучки можно взять на заметку?

Страница на сайте Букмейта


Люба!

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

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

Заголовок «Лучшее за год» благодаря размеру и центровке подразумевает, что всё ниже него подчинено ему. При этом он стоит на одном фоне с этажом «Эти книги вдохновляли редакцию»:

На странице Коворкафе чёрная плашка меню приятно разнообразит и выделяется между двух светлых текстовых этажей:

Но следующий этаж — «Полки года» — стоит на другом фоне:

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

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

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

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

Остальные вопросы — в другой раз.

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

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

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

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

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

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

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

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




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

Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5 Это какие‑то другие пиксели? Как они соотносятся? 2 Как написать хорошее резюме? 7 2