Это информационный блок на сайте о покупке и продаже зарубежной недвижимости. В нем собраны ссылки на самые важные статьи о стране. В данном случае об Испании.
Статистика показывает, что пользователи лучше реагируют на конкретные цифры, поэтому они вынесены в заголовки. Достаточно просто пробежаться по заголовкам, чтобы увидеть ключевые значения.
Ссылки не должны отвлекать клиента от поиска и просмотра объектов, но должны быть заметны. Вертикальная композиция позволяет безболезненно добавлять и убирать строки. Названия и количество статей могут незначительно различаться в зависимости от страны.
У текста достаточно простая и последовательная структура: элементы примерно одной длины, в каждом есть цифра или диапазон. Проблема в том, что с первого взгляда этой структуры не видно. Блок похож не на список, а на сплошной рыхлый текст с разбросанными ссылками. Наша задача — сделать так, чтобы верстка не размывала структуру, а наоборот, подчеркивала ее.
Для начала попробуем разделить текст и цифры на две колонки. Я сделаю ссылками «заголовки», потому что они ведут на статьи с похожими названиями:
Чтобы усились связь между колонками и закрыть дыру, проведем линейки:
Хорошо бы смотрелся вариант с однострочными элементами и узкой колонкой цифр, но, возможно, текст не получится так отредактировать. Я сократил искусственно:
Другой способ — разделить не на колонки, а на строки:
Выделим цифры и заголовок:
То же самое по горизонтали. Хочется выровнять колонки по высоте, но текст сопротивляется:
В два столбца:
Мне больше нравится линейный вариант. Было и стало:
Когда конструкция найдена, можно подумать и об оформлении:
Журнал «Секрет фирмы», август 2011
Рассылка MailChimp, 2017
Как попасть в рубрику
Отправьте письмо с макетом, комментарием или вопросом к нему на эл. адрес conversive@mail.ru. В теме письма укажите «Переверстка». Будьте конкретны. По возможности прикрепите исходники.Описание и правила рубрики