Игорь Штанг (nobelfaik) wrote,
Игорь Штанг
nobelfaik

Category:

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

Алина пишет:

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

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

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



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

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



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



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



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



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



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



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



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



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


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



Рассылка MailChimp, 2017

Как попасть в рубрику

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

Описание и правила рубрики
Tags: веб, знаю как, переверстка, процесс, список
Subscribe

Posts from This Journal “переверстка” Tag

  • Переверстка №31. Подписка на Cover Commander

    Nail пишет: Посмотрел ваше видео про стирание линеек, полез на ваш сайт и заинтересовался рубрикой «Переверстка». Специального…

  • Мастер-класс по стиранию линеек

    Переверстываю пять макетов в режиме реального времени. 0:01:18 — Вступление 0:03:40 — Таблица «Допустимое рабочее…

  • Переверстка страницы FAQ

    Дизайнер Дженсон Камби рассказал о переделке сайта The New Yorker Festival и в частности о том, как поменялась страница FAQ. Было и стало:…

  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 7 comments