Переверстка №18. Список ссылок на сайте недвижимости

May 28, 2017 12:52

Алина пишет:

Это информационный блок на сайте о покупке и продаже зарубежной недвижимости. В нем собраны ссылки на самые важные статьи о стране. В данном случае об Испании.

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

Ссылки не должны отвлекать клиента от поиска и просмотра объектов, но должны быть заметны. Вертикальная композиция позволяет безболезненно добавлять и убирать строки. Названия и количество статей могут незначительно различаться в зависимости от страны.



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

Для начала попробуем разделить текст и цифры на две колонки. Я сделаю ссылками «заголовки», потому что они ведут на статьи с похожими названиями:


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


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


Другой способ - разделить не на колонки, а на строки:


Выделим цифры и заголовок:


То же самое по горизонтали. Хочется выровнять колонки по высоте, но текст сопротивляется:


В два столбца:


Мне больше нравится линейный вариант. Было и стало:


Когда конструкция найдена, можно подумать и об оформлении:



Журнал «Секрет фирмы», август 2011



Рассылка MailChimp, 2017

Как попасть в рубрику
Отправьте письмо с макетом, комментарием или вопросом к нему на эл. адрес conversive@mail.ru. В теме письма укажите «Переверстка». Будьте конкретны. По возможности прикрепите исходники.

Описание и правила рубрики

список, процесс, переверстка, веб, знаю как

Previous post Next post
Up