Евгений!

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

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

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

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

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

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

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

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

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

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