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