x
 
Евгений Евтихов
1 июля 2015
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Добрый день!

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

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


Евгений!

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

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


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

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

О якорных объектах

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


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


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


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

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


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

Было

Стало

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

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

Типографика и вёрстка — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Комментарии

Николай Яковенко
1 июля 2015

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

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

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

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

Сергей Кириенко
1 июля 2015

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

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

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

Саша Гречанный
2 июля 2015

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

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

Дмитрий Шишкин
29 июля 2015

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

1 2 3