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

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

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

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

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

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

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

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

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

C фоновым изображением. Поверх картинки, которая занимает все поле, располагается текст. Такие карточки могут быть интерактивными: если навести курсор — фоновая картинка чуть-чуть увеличивается или становится ярче. Можно не добавлять текст поверх фотографии, а сделать элемент появления — при наведении курсора появляется текст.

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

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

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

Чем значимее элемент, тем крупнее карточка.

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

Оптимальный размер изображений зависит от количества карточек и заданной высоты.


Пример:

Блок TE100. Если оставить высоту по умолчанию, то оптимальный размер изображений будет:

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

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

Легкая тень по периметру карточки визуально выделяет ее на экране и дает понять, что вся карточка — это одна большая кнопка. Добавить тень можно в блоке TE600.

Если фоном служит изображение, рекомендуется применить к нему фильтры — это приглушит детали изображения и текст будет читаться лучше. Укажите в настройках цвет «в начале» (он будет наложен на верхнюю часть картинки) и цвет «в конце» (для нижней части). При наведении курсора фильтры будут осветляться, слегка «раскрывая» изображение.

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

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

Карточка — часто (но не всегда) сама по себе кнопка: нажал на нее, перешел на страницу. Можно ввести одну кнопку СТА (call-to-action — «призыв к действию»), которая дает пользователю «подсказку». Например, надпись «узнать больше» приглашает кликнуть.

Поскольку карточка — тоже ссылка, подумайте об использовании Rel nofollow.

Поисковые системы учитывают при ранжировании в том числе ссылки на сайт, которые размещены на других сайтах. Чем больше ссылок, тем выше рейтинг. Если вы ссылаетесь на сторонний ресурс, но не хотите передавать вес странице (например, это платная ссылка), поставьте в настройках галочку Rel nofollow — это сообщит поисковым системам, что ссылку не нужно учитывать при индексировании.

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

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

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

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

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

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