Евгений!
В вашей карточке важные элементы — цена, дата вылета и название отеля — смешаны со второстепенными, а самое ценное после фотографии место занимает неинформативная бледная кнопка «Подробнее». В результате, усвоить информацию тяжело, карточка не кликабельна на вид, а цену приходится выделять ярким лейблом, что вносит в вёрстку ещё больше хаоса.
Попробуем исправить ситуацию. Карточка живёт на странице в окружении других объектов, поэтому сохраним её пропорции, чтобы потом не переделывать остальную страницу. Первым делом расставим самые важные объекты:
Фотография и кнопка с ценой — якорные объекты. Они должны быть привязаны к углам, чтобы занять стратегические места и задать модулю прямоугольную форму.
Разместим остальную информацию, попутно избавившись от лишних слов и приведя даты к одному формату:
Мы разместили всю информацию с исходной карточки, а места ещё полно. Это хороший повод повысить информативность карточки или сделать её компактнее. Расскажем о питании и номере:
Для лучшей читаемости превратим дату вылета, информацию о питании и продолжительность тура в фактоиды. Кажется более логичным сделать заголовком модуля название отеля, ведь именно он показан на фотографии, а страна наверняка будет в заголовке страницы. Его же сделаем ссылкой на подробности о туре:
Поднимемся на уровень выше, посмотрим на список карточек:
Стали видны проблемы: модули слишком рыхлые, батарея оранжевых кнопок рябит в глазах и слипается в отдельную колонку.
Чтобы вылечить слипание, можно было бы вернуть разделительные линейки, но это не путь самурая. Вместо этого уплотним модули: уменьшим фотографии и кегль, описание вытянем в строчку, которая будет накрывать весь модуль и не даст отвалиться кнопкам. Кнопки облегчим и будем подсвечивать оранжевым при наведении:
Строка с фактоидами и кнопкой соответствует варианту из коллекции швейцарских клише
Строка с фактоидами и кнопкой соответствует варианту из коллекции швейцарских клише
Фотография крупнее, информации больше, читать проще, разделительные линейки — не нужны.
P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.