Школа
Вёрстка

Подскажите, как улучшить и изменить, что добавить или убрать в мини‑карточке тура

Добрый день!

Подскажите, как улучшить и изменить, что добавить или убрать в мини‑карточке тура. На мой взгляд, чего‑то не хватает и цена стоит не там, где надо.

Очень жду ответа!

Евгений Евтихов
1 июля 2015
👁 4764   🗩4
Вёрстка

Подскажите, как улучшить и изменить, что добавить или убрать в мини‑карточке тура

Добрый день!

Подскажите, как улучшить и изменить, что добавить или убрать в мини‑карточке тура. На мой взгляд, чего‑то не хватает и цена стоит не там, где надо.

Очень жду ответа!

Евгений Евтихов
1 июля 2015
👁 4764   🗩4
Михаил Нозик
Арт‑директор и автор курса «Типографика и вёрстка»
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

Евгений!

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

Попробуем исправить ситуацию. Карточка живёт на странице в окружении других объектов, поэтому сохраним её пропорции, чтобы потом не переделывать остальную страницу. Первым делом расставим самые важные объекты:

Фотография и кнопка с ценой — якорные объекты. Они должны быть привязаны к углам, чтобы занять стратегические места и задать модулю прямоугольную форму.

Разместим остальную информацию, попутно избавившись от лишних слов и приведя даты к одному формату:

Мы разместили всю информацию с исходной карточки, а места ещё полно. Это хороший повод повысить информативность карточки или сделать её компактнее. Расскажем о питании и номере:

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

Поднимемся на уровень выше, посмотрим на список карточек:

Стали видны проблемы: модули слишком рыхлые, батарея оранжевых кнопок рябит в глазах и слипается в отдельную колонку.

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

Строка с фактоидами и кнопкой соответствует варианту из коллекции швейцарских клише

Строка с фактоидами и кнопкой соответствует варианту из коллекции швейцарских клише

Было
Стало

Фотография крупнее, информации больше, читать проще, разделительные линейки — не нужны.

P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

Типографика в вебеМодульная вёрсткаФормат: иллюстрацияФормат: текстНоситель: сайт
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы