Школа
Вёрстка

Здравствуйте! На ваш взгляд, есть ли проблема в этой выдаче товаров в интернет‑магазине? Кнопка «В корзину» у левого товара находится ближе к нижней картинке, чем к верхней. Хотя она добавляет в корзину верхний товар. Как решать такую проблему при проектировании карточек интернет‑магазинов?

Дмитрий Якушин
9 фев 2022
👁 5548  
Вёрстка

Здравствуйте! На ваш взгляд, есть ли проблема в этой выдаче товаров в интернет‑магазине? Кнопка «В корзину» у левого товара находится ближе к нижней картинке, чем к верхней. Хотя она добавляет в корзину верхний товар. Как решать такую проблему при проектировании карточек интернет‑магазинов?

Дмитрий Якушин
9 фев 2022
👁 5548  
Михаил Нозик
Арт‑директор и автор курса «Типографика и вёрстка»
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

Дмитрий!

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

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

Было
Стало

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

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

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

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

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

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

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