nobelfaik


Блог Игоря Штанга

Доктор, мой макет не дышит!


Previous Entry Поделиться Next Entry
Переверстка №18. Список ссылок на сайте недвижимости
nobelfaik
Алина пишет:

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

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

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



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

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



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



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



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



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



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



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



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



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


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



Рассылка MailChimp, 2017

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

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

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

Записи из этого журнала по тегу «переверстка»


  • 1
(Анонимно)
Ссылки в «Стало» превратились в заголовки. В них никто не нажмет.

Стало хуже.

Предлагаю такой вариант: https://yadi.sk/i/vj1Iem5B3Jbsri

Предположения и соображения по ходу перевёрстки:

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

2. Заголовок сокращаю. Меняю шрифт с PT Sans на PT Sans Caption. Смешиваю комки: заголовок делаю ссылкой на все публикации. Количество статей в рубрике ставлю рядом с заголовком. В наш век болезни красных точек поберегу читателя и покрашу фон индикатора в цвет ссылок.

3. Список с числами несет двойную функцию: 1) ссылки на статьи и 2) таблица основных параметров о недвижимости в стране. Ключевое и вариативное здесь цифры и именно они должны быть ссылками, как и в исходном примере. Отсюда: делаем таблицу параметров, где значения — ссылки на пруф-статьи. Строчки таблицы поддерживаем многоточием.

4. Список названий параметров неоднороден. Избавляемся от глаголов и длинных словосочетаний. Сокращаем, делая скидку на контекст использования и содержания. Значения параметров тоже сокращаем без потери смысла. Главная задача: дать основные цифры, детали — по ссылке.

5. Не знаю, подчеркнуты ли ссылки на сайте, но я бы подчеркнул.

Преимущества:
+ очевидная структура
+ компактность

Недостатки:
– редактура параметров и их значений перед публикацией

Егор, прикрепи, пожалуйста, картинку прямо к комментарию.

«Вы не можете изменить этот комментарий, поскольку на него уже ответили».
Простите, тут я бессилен.

Я бы сразу прикрепил картинку, но тут в форме комментария почему-то нет такой функции. В следующий раз попробую тегами.

Тест:






Хорошо получилось. Я остановился на одноколоночном варианте, потому что он меньше зависит от текста.

полезно, не очень

так то все по делу написано, но вот стало/было практически никакой разницы не заметно, имхо, хороший пример горизонтальный, пользователю удобно изучать заголовки слева на право, находит интересующий его и смотрит его значение, практически тоже самое что пользоваться таблицей! от таблиц все в восторге

картинки верните однако

  • 1
?

Log in

No account? Create an account