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

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

Добрый день!

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

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

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

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

Добрый день!

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

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

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

Евгений!

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

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

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

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

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

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

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

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

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

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

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

Было
Стало

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

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

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

Комментарии

Здравствуйте, Михаил.

Подробности о туре, которые идут строкой под заголовком, в данном случае ограничены по количеству символов или нет?

Вопрос задан с целью выяснить, что первично ― аккуратная верстка или возможные требования. Например, клиент хочет написать: «Пхукет, Тайланд, бунгало на шесть мест, все номера с санузлами, вид на море с каждого номера, кондиционер в каждой комнате, бассейн, двор огороженный от соседей забором, в радиусе 300 м ― джунгли».

Предположим, это 3 строки. Стоит ли с точки зрения верстки предусмотреть такой вариант и увеличить фотографию, чтобы расширить прямоугольник? Или выход за его рамки текстом не будет проблемой? Или, предусматривая такой вариант, нужно позаботиться о другой компоновке?

Что если не 16 июня, а 1 сентября? «Сентября» длиннее, а единичка будет болтаться. Что если не всё включено — дырка? А если Ultra All Inclusive? Питание обычно ставят рядом со звездочками отеля, а не с датой (можно считать это отраслевым стандартом, бест‑практисом и признаком нормального турсайта).

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

Таиланд повторяется, скорее всего, он уже есть в условиях поиска, и из карточек его можно выкинуть. Если в запросе был Пхукет, то и его можно выкинуть.

Со старой ценой не получилось.

До 11 июля цена была 43 465 рублей, а теперь 33 435? В исходном варианте сразу написано, что цена была 43 465, теперь со скидкой она 33 435, но скидка действует до 11 июля.

Только не «До 11 июня 43 654 ₽», а «После 11 июня 43 654 ₽». И почему тогда цена зачёркнута, непонятно.

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

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