Дмитрий!

Благодаря последовательному порядку чтения (картинка, название, кнопка) и просто привычному формату интернет‑магазина, покупатель разберётся в связях между элементами и так. Но с точки зрения вёрстки, конечно же, есть что улучшить.

Самое простое — уплотнить и тоньше настроить отступы между элементами в соответствии с правилом внутреннего и внешнего, а кнопки прижать к тексту и не выравнивать по невидимому нижнему краю:

Было
Стало

Более сложный и опасный заход — попытаться придумать такую вёрстку, чтобы проблемы отваливающейся или ни с чем не выровненной кнопки вовсе не возникало. Например:

Правда, тут возникла другая проблема: кнопки приклеились к ценникам справа. Починить довольно легко — поставить кнопки слева от ценников:

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

Ну а напоследок хочу рассказать о ещё одном способе организовать карточки. Просто не выкладывайте их такими ровными рядами и внесите больше разнообразия в выдачу. В качестве примера — каталог интернет‑магазина «Лавишустринг»:

Типографика в вебеПравило внутреннего и внешнегоМодульная вёрсткаЧередование ритмаНоситель: сайтДоработка вёрсткиТеория близости
Отправить
Поделиться
Запинить

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