x
 
Константин
29 октября 2012

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

Мне не совсем нравится то, что получилось. Выглядит как-то криво: где-то буков больше, где-то меньше.



На первый взгляд:

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

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

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

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

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

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

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

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

Гораздо удачнее расположение вертикальных новостей в соседних колонках по горизонтали:

Для разнообразия и большей информативности заменим одну правую новость на пять в духе сайта Би-би-си:

Перейдём к надсистеме — выводу нескольких рубрик.

Я не рекомендовал бы размножать по вертикали однообразную конструкцию. Повторение рисунка вёрстки сразу бросится в глаза:


Эффект не так заметен для двухэтажных рубрик а-ля «Газета.ру»:


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

Или, наоборот, «смешать комки», максимально упростив и унифицировав вид каждой рубрики:


Если смешаем комки до предела и покажем все новости одинаково, то получим ещё один, довольно скучноватый, способ варьировать рубрики:

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

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

Комментарии

Кирилл Морозов
29 октября 2012

Вертикальные колонки новостей смотрятся аккуратно и отлично держат сетку. Это хорошее решение, когда ширина контентной части сайта постоянна (как на сайте bbc).

Но когда речь идет о резине, все становится немного сложнее. Никто, конечно, не запрещает масштабировать ширину за счет «скачущих блоков» (текст + фото) со строки на строку. Мне самому такой подход ближе. Но он сложнее в реализации и не все, к сожалению, считают такое решение «красивым».

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


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

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

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

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

2 3 3 Делаю визитку для хозяина автомастерской. Вторая часть 6




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

Как вы проверяете соответствие вёрстки макету 2 Как понять, что наступил момент назвать цену? 3 7 Как попросить клиента помочь с дебагом? 1