WebValley Studio

WebValley Studio

Дизайн карточек для сайта: как не допустить ошибок при проектировании и оформлении

Карточки на сайте помогают ёмко и информативно отображать контент. Пользователям легче воспринимать информацию, поданную в формате карточек. Но это сработает, только если карточка правильно спроектирована.

РАССЧИТАТЬ СТОИМОСТЬ

Главная
→
Статьи
→
Дизайн карточек для сайта: как не допустить ошибок при проектировании и оформлении

Когда стоит разместить информацию на сайте в карточках

Есть много способов сгруппировать информацию, но в некоторых случаях лучше это сделать с помощью карточек:

Контент содержит много равнозначных элементов

Группировка одинаковых элементов в карточки поможет структурировать контент и создать порядок в интерфейсе. Так пользователю будет удобней считывать информацию, а также сравнивать её между собой для принятия решения.

Карточки с жилыми комплексами на сайте застройщика ГК «Базис». Проект WebValley Studio

В интерфейсе есть интерактивные равнозначные элементы

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

Интернет-магазин цветов в Москве. При наведении на карточку раздела, она переворачивается, и с обратной стороны можно почитать подробный текст, а при клике — перейти в раздел. Такая подача контента компактна и удобна. Проект WebValley Studio

Когда информация просматривается бегло

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

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

Карточки разделов сайта в интернет‑магазине Airmaster

Преимущества карточек в интерфейсе

Карточки удобны как для пользователей веб-ресурсов, так и для разработчиков и дизайнеров. С помощью карточки можно решить не только проблемы восприятия информации, но и сложности с размещением контента на экране, масштабированием.

Универсальность

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

Пример карточек в сложной CRM-системе Bitrix24

Пример карточек в справочном центре онлайн-конструктора сайтов Tilda Publishing

Пример карточек товаров в интернет‑магазине мебели La Redoute

Пример карточек услуг на сайте детского центра нейропсихологии «Город правильного детства»

Пример сложной карточки в полтора экрана для онлайн-школы. Проект WebValley Studio

Понятность и интуитивность

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

Карточки считываются интуитивно быстрее, чем простой список. И выглядят красиво. Сайт производителя детского игрового и спортивного оборудования «Архимет»

Быстрая считываемость

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

Эстетичность

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

Пример оформления контента на сайте: #1 — в виде простого списка текстом, #2 — стандартной плиткой с буллитами, #3 — в виде карточек. Не надо быть дизайнером, чтобы понять, какой вариант привлекательнее

Из примера выше видно, что контент, оформленный в виде списка (#1) выглядит тяжело — все курсы слились в текстовую массу. Во втором примере (#2) — курсы выделили в отдельные группы, которые, в отличие от первого варианта, считываются уже легче. Третий вариант (#3) оформлен в виде отдельных карточек, каждая содержит изображение, теги и продуманный текстовый состав — лишний текст можно почитать уже в подробном описании курса на его странице. В таком варианте блока пользователю будет удобно ориентироваться, и визуально блок выглядит намного приятней.

Адаптивность

Карточки одинаково хорошо выглядят как на больших экранах, так и на маленьких мобильных устройствах. Их удобно верстать, множить и масштабировать.

Пример карточек, адаптированных под разные разрешения экранов. Проект WebValley Studio

Виды карточек на сайтах и примеры их использования

Чаще всего карточки на сайте используют для оформления товаров. Но это не единственное их применение. Они подходят и для других задач.

Карточки товаров на сайте интернет‑магазина

В E-commerce карточки товаров — главный элемент интерфейса. Их основная задача — продать продукт. В таких карточках на первом месте должен быть он — продукт, его привлекательное изображение или видеоролик, название, цена, акции или бонусы, если они есть, и важные для этого продукта параметры.

Карточки продукта в интернет-магазине Tanuki, где помимо названия, цены и фото блюда добавили состав, что важно в данном случае, а также рейтинг по отзывам и пометку, если блюдо острое

Полноэкранная карточка товара с подробным описанием продукта и серией фото в интернет-магазине Huttwisdom

Хорошо оформленная карточка помогает увеличить конверсию и повысить интерес к продукту. Идеальная карточка товара включает:

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

Если специфика товара позволяет показать сценарии использования, то стоит это также включить в карточку товара. Например, детскую шапку продемонстрировать не только на стенде, но и как она будет сидеть на ребёнке. А если это диван, то стоит добавить функционал, чтобы покупатель мог примерить его в интерьере, загрузив фото, и покрутить его со всех сторон в 3D-конструкторе.

Сравните, в каком из трёх вариантов выбирать сумку комфортней?
- В #1, где крупные фото со всех сторон и подклад, плюс на модели, которая ещё и крутится на 360°.
- В #2, где фото только части сумки в руках у модели и в плохом разрешении.
- Или в #3, где фото качественное и сумку видно хорошо, но есть только 2 ракурса.

Сравнение трёх карточек сумок в интернет-магазине по параметрам изображений

Именно эти нюансы могут стать решающими при выборе товара.

Название товара

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

Пример карточек товара в магазине штор «ТомДом» — в заголовке карточки сразу указана высота: «Комплект штор… — 270 см»

Опции товара

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

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

Опции выбора ткани на сайте Диван ру

Описание и характеристики

Описание товара и его характеристики — два важных параметра, которые надо отразить в карточке товара. Не стоит их объединять или пренебрегать одним из них.

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

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

Характеристики товара на сайте Диван ру

Подробнейшее описание товара на сайте ASSORO

Стоимость товара

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

Цена должна быть точной и заметной.

В примере речь о конкретном товаре определённого размера. Цена «от» непонятна: смущает, сколько в итоге, от чего зависит, ведь на картинке конкретный шкаф с заданными параметрами

Цена должна быть указана в той валюте, в которой принято рассчитываться в стране, где продают товар.

Если карточка содержит информацию о скидках, то стоит указать не только % скидки, но и денежный эквивалент этой скидки или итоговую стоимость с учётом скидки.

Если товар весовой, погонажный, штучный, то в карточке важно обозначить, за какой объём указана цена, за метр или упаковку, за 100 гр или целое изделие.

Пример карточки товара, где стоимость товара указана за 1 м³. В такой карточке надо указать все важные для покупателя параметры, чтобы не осталось вопросов сколько надо брать товара и какая по итогу получится цена. Именно так указано в примере: сколько кубов в целом поддоне и сколько блоков в одном кубе

Артикул

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

Артикул может состоять из комбинации букв и цифр, или только из цифр, или только из букв

Комплементарные товары

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

Информация о комплементарных товарах увеличивает продажи и помогает клиентам получить максимальную выгоду от покупок.

заполнение карточек на сайте контентом это

Пример блока с комплементарными товарами в карточке

Кнопка призыва к действию

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

В превью карточки важно отразить кнопки Подробнее или Купить. Если кнопка отсутствует, то интуитивно покупатель воспримет клик по карточке превью как переход в подробную карточку товара, и если его сразу закинет в корзину, будет неожиданно и неприятно.
Отзывы покупателей и рейтинг товара

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

Чтобы отзывы были полезнее, выделите в них ключевую информацию, добавив рейтинг в цифрах, плюсы и минусы отдельной строкой. Так покупатель сможет быстро сформировать мнение о товаре и решить, читать дальше подробный комментарий или нет. Также плюсом к отзыву будут реальные фотографии покупателей.

Пример блока с отзывами в карточке продукта. Отдельными строчками выведены достоинства и недостатки, цифра и звёзды выводят рейтинг. Есть возможность разместить фото. Не отзыв, а настоящая рекомендация. С такими отзывами принять решение о покупке будет проще

Пример рейтинга товара в превью карточки

Наличие товара и его количество

Наличие товара в карточке поможет пользователю принять решение о том, стоит ли решаться на покупку скорее, так как товара осталось мало или есть возможность отложить покупку и подумать. Или есть ли достаточное количество в наличии или нужно искать другой товар. Неприятно, когда выбранный товар уже в корзине вдруг оказался недоступным из-за его отсутствия. Наличие товара можно отразить как в числовом эквиваленте, так и тегами «мало», «много», но первый вариант предпочтительней.

Пример карточки, в которой указано наличие товара

Гарантии, условия доставки и возврата

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

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

Пример раздела о возврате в карточке товара интернет-магазина MAISON de СHARME

Портфолио

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

Карточка в портфолио студии дизайна интерьеров Ingain. Проект WebValley Studio

Портфолио на сайте онлайн-школы по подготовке к ЕГЭ «Обществознание и котики» в виде карточек с результатами студентов до / после и отзывом. Очень грамотное оформление: каждая карточка — компактная, но в ней целая история

Чаще всего основной элемент карточки в портфолио — медиафайл. У дизайнеров — это превью выполненного проекта в виде фото, видео или графически оформленного материала, у фотографа — фотографии, у художника — картины и так далее.

Портфолио на сайте фотостудии Alastair Strong Studio в виде карточек

Портфолио дизайнера Robbin Cenijn, оформленное в виде карточек

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

как создать карточку сотрудника на сайте

Карточка с отзывом о курсе на сайте онлайн-школы. Проект webValley Studio

Карточки с результатами учеников в Московской школе стендапа

Что содержит карточка портфолио:

Медиафайл — изображение, графику, фотографию, видеоролик. Они должны быть качественными, так как являются главным атрибутом карточки;
Автора работы;
Название работы — название проекта, темы или объекта;
Дату публикации или создания работы;
Описание — краткое описание работы или нюансов её создания;
Теги — например, разделы, к которым можно отнести работу;
Кнопку — подробнее ознакомиться с проектом или перейти в галерею;
Иконки шеринга — оценить, поделиться, сохранить в избранное.

Новостные ленты и соцсети

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

Карточки в бренд-медиа Т-Ж

Карточки в новостной ленте социальной сети VK

Блоги

Карточки в блоге — стандарт оформления раздела. С ними удобнее ориентироваться в большом потоке информации. Обязательный элемент карточки блога — заголовок новости или статьи, по которому можно понять, о чём речь, и небольшой анонс.

Карточки в блоге интернет-магазина по изготовлению и продаже неоновых вывесок. Содержат крупную картинку, заголовок, описание, теги и дату. Проект WebValley Studio

Пример ленты с карточками новостного портала РИА-Новости

Второй важный элемент карточки — изображение. Это фото, поддерживающее визуально тематику статьи, или графика в стилистике проекта.

Карточки в блоге WebValley Studio с абстрактной графикой

Иногда изображение может отсутствовать:

Пример новостного блога ВИЗАВИ Консалт, где в карточках отсутствуют изображения

Помимо этих элементов в карточку добавляют превью в виде краткого описания или начало статьи, чтобы сориентировать и заинтересовать читателя.

Новостной блог Е-Офис 24 с превью статей

В новостной карточке ещё могут быть такие атрибуты, как:

Автор публикации или статьи;
Дата публикации;
Кнопка Перейти к чтению;
Время прочтения — актуально для длинных статей;
Количество просмотров;
Рейтинг — обычно это иконки: сердечко, звездочки или палец вверх;
Возможность сохранить, поделиться, оставить или прочесть комментарии.

Приложения для команд, таск-трекеры, CRM

Программы для организации работы команды, такие как Bitrix24, Trello, Miro и подобные, построены по принципу канбан, на системе карточного дизайна. Здесь карточка содержит множество элементов, основными из которых можно выделить задачу, имя ответственного, статусы и сроки.

Пример карточек в командных программах

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

В CRM карточка — это место, где хранится информация по лидам, сделкам, контактам и компаниям. Эта информация помогает эффективно управлять процессами, взаимодействовать с клиентами и анализировать данные для улучшения бизнес-процессов. А карточка в рабочем сервисе содержит всё о том, какая предстоит задача, сроки выполнения, чек-листы, статусы, счётчики, участников работ.

Пример малой части карточки рабочей задачи в Bitrix24

В подобных карточках важно разместить информацию так, чтобы её было комфортно находить, создавать, читать, анализировать. Такие карточки содержат множество разделов, списков и вложенных вкладок, имеют сложный интерактив и функционал. Поэтому, в первую очередь, здесь важно уделить внимание UX-проектировке, чтобы карточка была удобной и понятной. UI второстепенен, хотя с аккуратным эстетичным современным интерфейсом работать намного приятнее.

Дашборды

Дашборды состоят из набора карточек с данными из сервисов аналитики. Они могут выглядеть совершенно по-разному: это и таблицы, графики, диаграммы, текстовые карточки, числовые данные и другие средства визуализации. Важно в таких карточках предусмотреть удобство отображения информации, её размеры и масштабирование. Карточки не должны быть перегруженными.

Пример карточек в сложном сервисе аналитики. Проект WebValley Studio

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

Наиболее частые элементы дашборда:

Текстовые секции;
Графики;
Диаграммы;
Таблицы;
Списки;
Числовые данные;
Индикаторы прогресса;
Кнопки.

Примеры дашбордов

Коллекции

Коллекции — это сервисы с карточками в виде фотографий, такие как Pinterest, Behance, Awwwords и аналогичные. Фото здесь на первом месте, так как пользователь скроллит ленту не читая, а разглядывая картинки, и выбирает, что ему посмотреть или просто вдохновляется визуалом. Поэтому проектировать карточки для коллекций несложно, но важно уделить особое внимание качеству медиафайла. Помимо фотографий, в таких карточках иногда указывают название работы и автора.

Карточки на сайте Pinterest

Карточки на сайте Awwwards

Тарифы

Карточки тарифов могут быть краткими или объёмными, содержать в себе заголовки, тексты, цену, кнопки, картинки.

Блок тарифов с карточками на сайте Школы Доктора Сапият

Тарифы на сайте онлайн-школы НЛП практик

Благодаря карточкам в тарифах, потенциальным клиентам удобно сравнивать предложения, выбирая наиболее подходящее.

Карточка тарифа может включать:

Название тарифа;
Стоимость;
Услуги, входящие в тариф;
Условия предоставления и ограничения;
Условия подписки, например, временные интервалы;
Сравнение с другими тарифными планами, например, зачёркнутые услуги, которые есть на другом тарифе;
Сроки действия;
Специальные предложения и акции;
Кнопки покупки или запроса консультации.

Примеры карточек с тарифами

Карточки тарифов на сайте академии WebValley Academy. Удобно сравнивать разные пакеты. Услуги, не входящие в текущий тариф, выделены светлым цветом и зачёркнуты. Так пользователь может не только понять, что входит в пакет услуг, но и оценить упущенные возможности, если он не возьмёт тариф подороже

Карточки услуг

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

Карточки услуг на сайте гончарной мастерской

Карточки в блоке услуг на сайте Челябинской компании «Восход» по изготовлению металлоконструкций

Карточки в блоке с тезисами результатов после обучения на курсах тату-мастеров на сайте Tribute Tattoo

Карточки с услугами используют на веб-сайтах, в каталогах или в CRM-системах для удобной подачи информации и упрощения процесса продаж.

Карточка услуг может содержать:

Название услуги;
Краткое описание услуги или процессов предоставления;
Стоимость;
Сроки выполнения;
Характеристики, условия предоставления услуги;
Кнопки покупки, заявки или переход к подробному описанию;
Графику — изображения, иконки, векторные иллюстрации, видеоролики.

Карточка услуги на сайте FERROFUSION

Карточки услуг на сайте Образование в Китае

Карточки услуг на сайте Владивостокского морского порта «Первомайский»

Карточки событий

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

В этих карточках задействуют следующие элементы:

Название события;
Описание — краткое содержание, цели и ожидаемые результаты;
Дата и время —информация о том, когда будет проходить событие;
Место проведения — адрес, где пройдет мероприятие;
Изображение — логотип или фотография;
Кнопка — возможность зарегистрироваться, купить билеты или узнать больше;
Организаторы, спикеры, важные медийные участники;
Условия проведения, например, возрастные ограничения, количественные, социальные, дресс-код и другие.

Карточка события на сайте Skillbox

Карточки событий городского портала Нижнего Новгорода

Карточки событий на сайте школы КРОК

Простые контентные карточки

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

Такие карточки содержат текстовую информацию, изображения, видео, иконки, кнопки и ссылки.

Контентные карточки на сайте фитнес-клуба GW. Описывают преимущества компании, заменяя шаблонные буллиты с иконками

Контентные карточки на сайте Citadel удобно отделяют информацию в блоке Для кого подходит продукт

Контентные карточки на сайте ДЕТИ и РАДОСТИ помогли классно совместить галерею и преимущества

Карточный дизайн на сайте SPA THE ELEMENTS в блоке с преимуществами в цифрах

Нестандартные идеи использования карточек на сайте

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

Вопросы и ответы на них

Пример карточек для раздела частых вопросов

Раздел команды

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

Пример блока команды в виде карточек на сайте Cultura Graphica

Вакансии компании

Пример карточек вакансий на сайте Яндекс Доставки

Контакты

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

Карточки в блоке контактов на сайте школы тенниса Victory Tennis

Карточки в блоке контактов на сайте ветклиники LapkiVet

Навигационные элементы

Карточки в меню на сайте Ленинградского мебельного завода, вместо скучного выпадающего списка. Проект WebValley Studio

Отзывы

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

Пример оформления отзывов в карточке компании по информационной безопасности ScanFactory

Типы карточек

По составу карточки можно разделить на несколько групп:

Текстовые карточки

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

Пример текстовой карточки в разделе услуг. Иконка в данном случае поддерживает визуал сайта и не несёт какого-то смысла. Весь фокус на текст. Проект WebValley Studio

Блок с текстовыми карточками на сайте проекта «Волна жизни»

Пример минималистичной текстовой карточки в интернет-магазине одежды Solove. Здесь, кроме заголовка и иконки, отсутствует какой-либо текст

Визуальные карточки

В этих карточках главное место занимает изображение или видео-ролик. Текст может отсутствовать или быть не слишком акцентным. Пользователь считывает контент, ориентируясь на визуал.

Карточки кейсов на сайте дизайнера Артемия Лебедева. Визуал в приоритете, поэтому текст на карточках отсутствует, изображения говорят сами за себя

Карточки товара интернет-магазина дизайнерских сумок Lunier, в которых нет ничего, кроме изображения. Для E-commerce не самое лучшее решение, но в данном случае — речь о премиальном эксклюзивном товаре, поэтому такой минимализм оправдан

Визуальные карточки условно делят на 2 типа:

Только изображение или изображение + текст

Тут фото — самостоятельный элемент. Оно занимает большую часть карточки или её всю.

Карточки с большими изображениями реализованных интерьеров на сайте дизайн‑студии Ingain. Проект Webvalley Studio

Визуальные карточки с превью проектов на площадке дизайн-подборок крутых сайтов Lapa Ninja

Изображение как фон

Изображение в такой карточке выступает в роли фона, поддерживая визуально тематику карточки.

В карточках разделов изображение на фоне показывает тематику услуги салона INSTYLE

Сложносоставные карточки

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

Дашборды,
CRM,
Календари,
Тарифы,
Карточки товаров.

Пример карточки для планирования мероприятия в календаре

Пример карточки календаря в интерфейсе

Из чего состоит карточка в веб‑дизайне

Рассмотрим основные составляющие карточки:

Тело

Это контейнер, в котором размещается весь внутренний контент карточки. Контейнер может быть видимым, например, с залитым фоном или обводкой. А может быть условным, то есть, по факту он есть, но пользователь его не видит.

Тело карточки

Миниатюра

Миниатюра — иконка или небольшое изображение, которое не отвлекает пользователя от основного контента. Это может быть логотип или аватарка.

Миниатюра или аватарка карточки

Заголовок

Крупный текст, как правило, название раздела, статьи, товара, услуги.

Заголовок карточки. Крупнее остальных текстовых элементов, привлекает максимум внимания

Подзаголовок

Это текст меньшего размера, который раскрывает содержание раздела или тип контента.

Подзаголовок карточки

Медиафайл

Изображение, графика или видеоролик, соответствующий тематике раздела или абстрактный, поддерживающий визуал сайта.

Фото, иллюстрация, графика или видео карточки

Дополнительный текст

Текст, который может быть пояснительной подписью, тегом, или перечнем ключевых составляющих раздела.

Дополнительный текст карточки

Кнопки

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

Кнопки или ссылки карточки. Основное конверсионное действие выделяется акцентным цветом, альтернативное — остаётся прозрачным

Иконки

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

Иконки шеринга

Готовы создать сайт прямо сейчас. А вы?

Принципы построения карточек — UX‑проектирование

При создании дизайна карточки важно учитывать не только визуал, но и удобство для пользователя. Поэтому особое внимание уделяется UX-проектированию.

Содержание — единое целое

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

Пример карточки на сайте ЖК. В варианте слева — карточка содержит в себе слишком много информации и два равнозначных целевых действия. Хоть квартиры и кладовки находятся в одном ЖК, лепить их в одну карточку — неверно. Покупатель может растеряться, то ли ему идти квартиры смотреть, то ли кладовки. Карточки нужно разбить на 2 отдельные и поместить их в разных разделах на этой странице. Информацию о кладовках также продублировать на страницу о конкретном ЖК, куда пойдёт пользователь, кликнув на карточку. Проект WebValley Studio

Независимость

Карточка — самостоятельный элемент. Она не зависит от окружающего её контента в интерфейсе, и если её отделить от всего остального, она не потеряет смысла.

Карточка не является самостоятельным отдельным элементом, так как если отделить её от основного контента, то теряется заголовок, и непонятно в целом о чём она, нужно вчитываться в текст. Также теряется целевое действие — кнопка. То есть, предлагается скидка за бронь, но как забронировать — непонятно

Карточка — самостоятельный отдельный элемент, так как если отделить её от другого контента, смысл не теряется. Она по‑прежнему остаётся информативной и содержит целевое действие

Индивидуальность

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

Соблюдение и несоблюдение принципа индивидуальности.

В примере #1 информация одного тарифа разбита на 2 карточки, и если убрать одну из них, то контент теряется, и непонятно, к чему привязана кнопка или состав тарифа.

В примере #2 — обратная ситуация: 2 тарифа объединены в одну карточку, за счёт чего она кажется слишком объёмной и перегруженной. Также в ней 2 равнозначных целевых действия.

В примере #3 карточки разбиты по группам на 2 тарифа, при этом информация о каждом тарифе содержится в одной целой группе в отдельной карточке.

Ориентация

В зависимости от содержания карточки и размера интерфейса, карточка может иметь разную ориентацию: вертикальную или горизонтальную.

При выборе ориентации важно смотреть не только на красоту или тематику, но и помнить об удобстве восприятия контента пользователем.

Разберём на примере. Сайт компании по изготовлению кухонь на заказ. Надо разместить 3 карточки на экране, в каждой из них слайдер.

Пример горизонтальной и вертикальной ориентации карточек

Если поместить карточки в 3 колонки (Вариант 1), то блок выглядит не очень привлекательно. Во-первых, карточки слишком длинные, а большое количество текста не удобно читать в таком узком столбце. Во-вторых, фотографии кухонь чаще всего подразумевают горизонтальный формат, чтобы вся кухня поместилась в кадр, а значит, рассмотреть фото нормально не получится. Ещё и три слайдера в ряд листать придётся! И если вдруг появится 4 карточка, то блок будет выглядеть максимально убого, так как она уже не помещается в строку, и будет одиноко висеть внизу. Вертикальная ориентация в данном примере — нерабочий вариант.

Пример с вертикальными карточками. Вариант 1

А вот если карточки сделать горизонтальными и разместить их друг под другом, как в примере выше (Вариант 2), то закроются сразу все проблемы, которые возникли в первом варианте: и фото можно увеличить, и текст в такой ширине колонки читать комфортнее, слайдеры тоже удобней листать, а ещё можно добавить любое количество карточек, и это не отразится на визуале блока.

Пример с горизонтальными карточками. Вариант 2

Продуманный состав

При проектировании карточек важно учитывать цели и задачи сайта и продукта. Убедитесь, что карточка содержит контент и функционал, необходимый для пользователя, и не содержит лишней, ненужной или неважной информации.

Пример из реального проекта. Слева всё то, что заказчик запланировал разместить в карточку. Справа — то, что действительно необходимо в его случае

В приоритете — целевое действие

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

Пример принципа одного действия в карточке. Слева в карточке есть целевое действие, а ещё есть слайдер. Он здесь лишний, так как человек может начать листать слайдер и вовсе забыть, что он хотел перейти по ссылке.

Поведение карточек

Статичные карточки тоже работают и выполняют свою функцию, но действительно крутая карточка должна быть интерактивной. Если интерфейс отзывается на действия пользователя, с ним приятнее взаимодействовать. Поэтому надо продумать поведение карточки так, чтобы это было удобно, уместно, и реализуемо =))

Вот основные действия, которые могут происходить с карточкой:

Трансформация

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

Пример переворачивающихся при наведении карточек

Пример карточки, где при наведении фото сужается, а снизу — выезжает дополнительная информация о ЖК и кнопки. Крупная картинка вдохновляет пользователя и вызывает эмоции. После этого ему хочется навестись на карточку и узнать об объекте подробнее. Проект WebValley Studio

Вся карточка как кнопка или статична

В этом случае в карточке нет никаких кнопок, и она может быть кликабельной, то есть вся область карточки выполняет роль кнопки. А может быть не кликабельной и не вести никуда, а выполнять информационную функцию.

Пример простой информационной карточки, которая не кликабельна

И вот тут важно, чтобы пользователь не перепутал, потому что, когда нет кнопки, неочевидно, что карточка кликабельна, а не стационарна. Если карточка кликабельна, то для неё надо продумать состояния, так же как и для кнопки, чтобы она реагировала на действия пользователя.

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

Появление дополнительного функционала при взаимодействии

В этом случае карточка содержит одну или несколько кнопок, либо кнопку и кликабельные иконки. Например, в карточке фильма в онлайн-кинотеатре может быть кнопка — Смотреть фильм, и иконки: Сохранить, Поделиться, Добавить в избранное.

Дизайн мобильного приложения онлайн‑кинотеатра. Проект WebValley Studio

Карточка в онлайн кинотеатре Okko при наведении увеличивается и появляются дополнительные элементы

Принципы оформления карточек — UI‑проектирование

Даже грамотно спроектированную карточку легко испортить, если на этапе дизайна проигнорировать такие правила визуального оформления контента, как :

Хороший контраст с фоном

Правило касается как самой карточки и контента в ней, так и фонового пространства вокруг карточки. Недостаточный контраст может сделать карточку блёклой, незаметной, нечитабельной.

Пример плохого и хорошего контраста в оформлении карточек

Баланс шрифтов

Большое количество шрифтов или их начертаний может сделать карточку трудно читаемой или неряшливой. Ограничьтесь одним или двумя шрифтами: так карточка станет аккуратной и комфортной для восприятия информации.

Сравнение карточек с разным количеством начертаний. Не стоит использовать больше 1−2 шрифтов

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

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

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

Слишком мелкий шрифт в левом примере сложно прочесть, особенно на небольшом экране телефона. Справа текст читается лучше

Как правильно выбрать размеры шрифта для различных элементов в карточке:
Для заголовков обычно используется размер от 20−24 рх и до 72−90. Всё зависит от стилистики проекта, габаритов карточки и объёма текстового контента.

Например, для одной и той же карточки размер может выглядеть одинаково хорошо и плохо, если не учесть количество символов.

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

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

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

Пример, когда в основу карточки заложен слишком мелкий размер заголовка. И если заголовок по итогу короткий, выгодней сделать его крупным

Для основного текста шрифт должен быть не менее 16−18 рх в десктопе и 14 рх в мобильной версии. Размер может зависеть от выбранного шрифта: крупный он сам по себе или мелкий и других условий.

Сравнение габаритов двух шрифтов с одинаковым набором параметров. Оба шрифта имеют размер 16, при этом Roboto выглядит в 1,5 раза крупнее, чем Futura

Подписи и текст в кнопках обычно меньше основного шрифта, но важно сохранить читабельность. Не стоит использовать 8−6 рх. Минимум 12.

Слева — текст в тегах и кнопках слишком маленького размера. Эти элементы потерялись на общем фоне и незаметны. Справа — элементы карточки достаточно крупные для комфортного восприятия информации

Ещё один приём — текст можно выделить при помощи цвета. Менее важный текст сделать не таким акцентным, как основной, направив фокус пользователя туда, куда нужно.

В примере слева весь текст оформлен одним цветом: нет иерархии в элементах, и он сливается в единую массу. В примере справа важная информация выделена более тёмным текстом: так пользователь будет считывать сначала её, а потом уже всё остальное

Система отступов

Система отступов — важный элемент при проектировании любого интерфейса, и карточки в том числе. Наилучшим решением будет задать карточке те же параметры, что и для всего проекта.

За единицу чаще всего берётся 4 рх или 8-модульная сетка. Подробнее прочитать о сетках в веб-дизайне можно в нашей статье.

Скриншот из методологии построения интервалов дизайн-системы Google Material Design. В основе этой системы лежит микромодуль размером 4 рх

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

Пример отступов между элементами внутри группы, согласно правилу внешнего и внутреннего. Наружные отступы больше, чем внутренние

Но иногда этим правилом стоит правилом пренебречь. Тут надо логически подумать. Например, если ваш дизайн предполагает много пустого пространства и нестандартные подходы, то отступы в карточке могут быть также большими.

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

А вот ещё один пример, не такой очевидный:

В карточке внутренний отступ между группой текста и картинкой больше, чем внешние отступы

Если следовать правилу внешнего и внутреннего, то отступ нужно уменьшить. Но тогда мы получим вот такой результат:

Уменьшили отступ между текстом и картинкой, чтобы, как по учебнику, соблюсти правило внутреннего и внешнего

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

Внешние и внутренние отступы в карточках равны

Вот тут уже выглядит лучше! Но не так хорошо, как в первоначальном варианте, особенно нижний отступ. Поэтому смело оставляем вариант, где отступ внутри больше, пренебрегая правилом.

Вывод: не стоит упарываться в теорию. Если вы точно понимаете, что делаете и зачем, то почему бы и нет =))

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

Сравнение правильного и не правильного оформления отступов в карточке. Зачем плодить систему из 6 вариантов, если с задачей идеально справляются всего три

В примере выше видно, что не нужно борщить с различными вариантами бессистемных отступов. Они должны быть сведены к необходимому минимуму и подчиняться определённой логике. В правой карточке отступы подчинены правилам внешнего и внутреннего, так как внешняя группа имеет отступ 48 рх, кроме верхнего — он соответствует боковым: картинка в таком варианте получает равные границы. Группы внутри карточки — с отступом в 40 рх, а вложенные группы внутри этих групп — с отступом в 16 рх.

Отступы в карточке по правилу внешнего и внутреннего

Скелетон: состояние загрузки

Скелетон — схематичное отображение элементов интерфейса в момент загрузки. Он чем-то похож на прототип. При прогрузке страницы всегда приятней смотреть на скелетон, чем на пустой экран, поэтому стоит позаботиться о нём и запланировать в проекте.

Скелетон при загрузке программы Figma

Фиксированный размер карточки

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

Пример карточки, в которой контент сокращён до 3 строк, чтобы все подобные карточки в одной группе выглядели красиво и имели одинаковую высоту, а кнопка Читать дальше не скакала по экрану. Вступление длиннее 3-х строк просто обрезается и прячется за троеточием

Но бывает текст, который нельзя просто обрезать. Например, заголовок раздела, как в третьей карточке в примере ниже:

Карточки в разделе каталога на сайте Inflow. Проект WebValley Studio

Как можно решить эту проблему:

1. Уменьшить размер текста:

Пример решения проблемы с высотой карточки с помощью регулировки размера текста

2. Сократить заголовок:

Вариант решения проблемы с высотой карточки с помощью сокращения текста

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

Если важнее выдать полную информацию сразу;
Если это не портит визуал;
В некоторых сервисах и программах: например, в сервисах командной работы карточки разной высоты — стандарт.

Сетка для карточек

Сетка в карточке поможет упорядочить контент. А ещё она важна для разработки отзывчивого дизайна.

Сетка в карточке может быть подчинена общим правилам интерфейса, а может быть самостоятельной — всё зависит от задачи.

стоимость заполнения карточки товара сайта

Пример двухколоночной сетки в карточке. Карточка расположена в интерфейсе с сеткой в 12 колонок. В этом случае сетка в 2 колонки как бы вкладывается в 12-колоночную сетку

Пример самостоятельной сетки в карточке, колонки в которой не совпадают с колонками основной. Почему так? Потому что карточке нужны боковые отступы и увеличенные отступы между колонками текста, чтобы контент не слипался, и его было удобно читать

Шаблонность — возможность использовать карточку под разный объём контента

Карточка чаще используется в группе, то есть, имеет рядом с собой подобные карточки, или вовсе разрабатывается как шаблон, а впоследствии переиспользуется, например, карточка товара в каталоге. Такую карточку надо сразу делать с учётом разного количества контента и разных элементов в составе.

Рассмотрим на примере. Разрабатываем шаблон карточек под услуги. Выглядеть карточка будет так:

Карточки услуг на сайте консалтинговой компании. Проект Web Valley Studio

Так как в карточке текст описания имеет разный объём, и сократить его нельзя, заложили под него достаточную высоту, ориентируясь на карточку с наибольшим количеством текста.

А что если заголовок в карточке поменяется и будет занимать 3 строки? Будет так:

Во второй карточке добавился текст в заголовке

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

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

Текстовая группа выровнена по верхнему краю и не имеет фиксированной высоты

Или можно заложить эти три строки в заголовке и просто задать достаточную высоту текстовой группе, выровняв кнопку по нижней границе текстового контейнера. То есть, от разной высоты текста будет зависеть отступ до кнопки, при этом сама кнопка будет находиться на одном уровне с кнопками в соседних карточках. А вот описание привязано к заголовку и поэтому не совпадает по выравниванию с соседним. Это решение допустимо, если мы точно понимаем, что плюс-минус текста будет столько или меньше, но не больше. Иначе мы опять вернёмся к первоначальной проблеме, когда текст просто наедет на кнопку.

Текстовая группа выровнена по верхнему краю и имеет фиксированную высоту, но увеличен запас этой высоты под больший объём текста

Если заложить высоту заголовка под 3 строки и прежнюю высоту карточки с достаточным запасом, то получился как раз тот вариант, когда и кнопки выровнены по верхней границе в соседних карточках, и текст описания услуги.

Текстовая группа выровнена по верхнему краю и имеет фиксированную высоту, но увеличен запас этой высоты под больший объём текста, а также заложен запас высоты для заголовка

А теперь представим ситуацию вот так: текст заголовков опять поменяли, и в одной карточке — это одна строка, а в другой — четыре. Вот и стала наша красивая карточка опять уродцем =))

Пример карточек с разной длиной текста в заголовке

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

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

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

Пример ситуации, когда текста в карточке много, и он наплывает на кнопку, из-за того, что высота контейнера фиксирована

Состояния карточки и реакция на действия

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

По умолчанию (Default). Состояние, при котором карточка в покое.
Наведение (Hover). Состояние, при котором пользователь навелся на карточку мышкой.
Активное (Active). Состояние, когда уже произвели действие, нажали на карточку.
Фокусировка (Focus). Это состояние необходимо, если пользователь пользуется клавиатурой или голосом для управления элементами.
Выделение (Selected). Когда карточку выбрали при помощи элементов управления, например чекбокса.
Перетаскивание (Dragged). Состояние, которое нужно при перетаскивании карточки. Показывает, когда карточку захватили и готовы переместить.
Просмотрено (Viewed). Иногда это действие необходимо, чтобы помочь отобразить состояние карточки, которую уже просмотрели, например, сделать её более бледной.

Состояния интерактивной карточки

Тени

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

Справа — аккуратная тень, слева — тень, которая делает карточку грязной и некрасивой

Иногда тень действительно нужна. Она помогает визуально выделить карточку и сделать её более акцентной. Тень должна быть аккуратной и не яркой.

Пример, когда лучше добавить тень в карточку, чтобы сделать её более акцентной и контрастной по отношению к фону

Обводка

Обводка карточки, как и тень, может помочь выделить карточку, а может стать лишним мусором. Всё зависит от дизайна и наличия других параметров в оформлении. Например, если у карточки есть заливка фона, то, скорее всего, обводка будет лишней. Но иногда она смотрится неплохо, и если такое решение поддерживает задумку дизайнера, то почему бы и нет.

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

В этом примере обводка явно не к месту

А если нет заливки, то всегда ли нужно добавлять обводку? Нет! Иногда она может спасти визуал, а иногда наоборот — испортить.

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

Всегда ли нужны границы и разделители

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

Пример, когда границы в карточках — лишние

Медиафайлы

Медиафайлы, которые могут быть частью карточки:

Фотографии;
Векторная графика;
Видеоролики;
Анимированные объекты.

Любые медиа в карточке должны быть качественными, чёткими и соответствовать общей стилистике проекта:

Сравните карточки с графическим элементом. Векторное изображение должно иметь формат SVG, чтобы оно оставалось чётким при любом размере. Пиксельная картинка (PNG) смотрится плохо и плывёт при масштабировании

Фотографии должны быть контрастными и правильно откадрированными:

Слева — слабый контраст и плохо откадрированная фотография, справа — идеально

Если изображение выступает в роли фона, позаботьтесь о том, чтобы текст на нём хорошо читался. Для этого можно затемнить или осветлить фон, наложить фильтры или сделать фото монохромным, не размещать текст на слишком шумных частях изображения.

Примеры удачного и неудачного фона карточки

Ошибки при проектировании карточек

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

Какие ошибки нельзя допускать при проектировании карточек:

Перегруженность информацией

Карточка группирует контент в ограниченном пространстве. Если навалить в неё слишком много элементов, она лопнет =)) Вместо порядка и структурирования информации, вы получите зажатый контент, который невозможно прочитать и воспринять.
Отсутствие чёткой иерархии

Прелесть карточек в том, что они легко считываются. Неправильное выделение ключевой информации может затруднить сканирование контента.
Некачественные визуальные элементы

Низкое качество изображений или неподходящие шрифты затрудняют восприятие информации. Да и что уж там: это просто некрасиво =))
Неадаптивный дизайн

Хорошо спроектированные карточки легко адаптируются под разные размеры экранов. Например, на компьютере они могут отображаться по 3 в ряд, на планшете — по 2, а на мобильных — выстраиваться в колонну по одной. Но если карточки не садятся в разные разрешения экрана, значит что-то не так с сеткой.
Игнорирование целевой аудитории

Неправильный тон и стиль оформления карточек может не попасть в ожидания и предпочтения пользователей. Это приводит к негативному восприятию продукта или услуги, снижению уровня доверия и удовлетворенности клиентов, а также к уменьшению вероятности повторных покупок или рекомендаций.

Обсудить проект

Когда карточки не к месту

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

Перебор

Карточки — универсальный способ оформления информации на сайте. Ими можно представить буквально всё, начиная от тарифов, и заканчивая услугами. Но если в карточки запилить весь сайт, засадить их в каждый блок, то выглядеть он будет странно. Поэтому надо адекватно оценивать ситуации, когда карточки нужны, а когда стоит оформить контент другим способом. Карточка на карточке и еще 1000 карточек уместны будут разве что в сложном сервисе или CRM.
Списки

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

Пример, когда вместо карточек разумней организовать аккуратный список. Меньше грязи и визуального шума

Таблицы

Иногда дизайнер пытается впихнуть в карточку кучу элементов одной группы. Карточка получается перегруженной и нечитабельной — какая-то помойка. В таком случае стоит отказаться от карточки в пользу аккуратной таблицы:

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

Подборка классных карточек веб‑дизайне

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

Ловите подборку классных идей для карточек:

Блок навигации в виде карусели карточек

Блок контентных карточек на классном иллюстрированном сайте дизайнеров мерча

Эстетика и минимализм в карточках продукта на сайте монобренда авторских ежедневников (My) Special Planner

Яркий весёлый дизайн карточек курсов IT‑школы в Корее Habsida

Эффектные карточки мастер-классов на сайте художественной школы Cultura Graphica

Пример того, как можно интересно оформить раздел этапов в виде анимированных карточек

Эстетичные минималистичные карточки в приятных тонах на сайте презентации платформы для сопровождения IT-инфраструктуры Clearway integration

Пример оформления карточек с разным объёмом контента в аккуратную сетку на сайте строительной компании «Дом в стиле»

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

Пример, как можно обыграть простые фоточки на сайте и сделать уникальный не шаблонный стиль проекта, просто добавив немного графики

Пример, как минималистично и эстетично может выглядеть обычный блок с преимуществами в цифрах на сайте Five Stone

Ещё один блок с преимуществами в цифрах на сайте компании TecForce. Карточкам добавили нестандартную обводку, сделав дизайн интересным

Стильные яркие карточки на сайте Sense Disc — пример того, как при помощи цвета можно управлять вниманием пользователя

Карточки услуг на сайте стоматологии Сталант. В них вынесли стоимость популярных услуг, при этом сохранив аккуратность и эстетичность. Нестандартная сетка делает блок интересней

Вариант оформления контентных карточек на сайте Sam Yakushev. Сетка добавляет динамики блоку, а полупрозрачный фон делает карточки лёгкими и аккуратными

Пример карточек услуг. За счёт тонких линий, контурных векторных иллюстраций и монохрома карточки выглядят легко и минималистично

Ещё один пример, как небольшие детали в виде графики в обводке и грамотно подобранная палитра делают стильный сайт из обычного интернет-магазина товаров для животных. Проект Алёны Чаплинской, выпускницы академии дизайна сайтов WebValley Academy

Автор статьи

Мария Дрокина

UX/UI-дизайнер

27.01.2025

Доверьте разработку сайта профессионалам!

Оставьте заявку с кратким рассказом о проекте или заполните бриф.

Обсудить проект

Понравилась статья?

Поделись материалом с другими в социальных сетях — сохрани статью себе для быстрого доступа, поддержи нашу студию!

Подпишись, чтобы быть в курсе!

Подпишись на наш новостной дайджест, чтобы первым получать анонсы новых статей, материалов или мероприятий. Без спама, только по факту =). Наши соцсети в конце сайта.

Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.

Смотрите также

Дизайн

Вёрстка макетов дизайна для сайта

Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.

Дизайн

Вёрстка макетов дизайна для сайта

Дизайн

Вёрстка макетов дизайна для сайта

Дизайн карточек для сайта: как не допустить ошибок при проектировании и оформлении

Когда стоит разместить информацию на сайте в карточках

Контент содержит много равнозначных элементов

В интерфейсе есть интерактивные равнозначные элементы

Когда информация просматривается бегло

Преимущества карточек в интерфейсе

Универсальность

Понятность и интуитивность

Быстрая считываемость

Эстетичность

Адаптивность

Виды карточек на сайтах и примеры их использования

Карточки товаров на сайте интернет‑магазина

Изображение товара

Название товара

Опции товара

Описание и характеристики

Стоимость товара

Артикул

Комплементарные товары

Кнопка призыва к действию

Отзывы покупателей и рейтинг товара

Наличие товара и его количество

Гарантии, условия доставки и возврата

Портфолио

Новостные ленты и соцсети

Блоги

Приложения для команд, таск-трекеры, CRM

Дашборды

Коллекции

Тарифы

Карточки услуг

Карточки событий

Простые контентные карточки

Нестандартные идеи использования карточек на сайте

Вопросы и ответы на них

Раздел команды

Вакансии компании

Контакты

Навигационные элементы

Отзывы

Типы карточек

Текстовые карточки

Визуальные карточки

Только изображение или изображение + текст

Изображение как фон

Сложносоставные карточки

Из чего состоит карточка в веб‑дизайне

Тело

Миниатюра

Заголовок

Подзаголовок

Медиафайл

Дополнительный текст

Кнопки

Иконки

Принципы построения карточек — UX‑проектирование

Содержание — единое целое

Независимость

Индивидуальность

Ориентация

Продуманный состав

В приоритете — целевое действие

Поведение карточек

Трансформация

Вся карточка как кнопка или статична

Появление дополнительного функционала при взаимодействии

Рекомендации при проектировании карточек

Прототип нужен обязательно

Иерархия в карточке

Не добавляйте лишние ссылки и действия

Ограничьте контент

Разграничьте действия

Продумайте количество карточек в одном ряду

Принципы оформления карточек — UI‑проектирование

Хороший контраст с фоном

Баланс шрифтов

Система отступов

Скелетон: состояние загрузки

Фиксированный размер карточки