Что такое карточный дизайн сайта?

Информационная архитектура на базе сетки

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

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

Что такое «Информационная архитектура сайта»?

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

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

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

Ставка на изображения

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


Исследования не раз подтверждали, что картинки усиливают веб-дизайн, а использование фото с человеческими лицами и вовсе повышает конверсию. Неслучайно Pinterest сегодня является 15-ым по популярности сайтом в США (по данным Alexa).


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

Усиление UX

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


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


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

Изначальная адаптация под мобильную среду

В США мобильный интернет уже обогнал десктопный. С телефонов в задающей общемировые тренды Америке сегодня выходит 51% пользователей, в то время как со стационарных компьютеров лишь 42%. Google требует мобильной дружественности современных сайтов во всех странах присутствия. Карточный дизайн - оптимальное решение в сложившемся положении.

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

 

Совместимость с соцсетями

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

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

3 совета по оптимизации сайта с карточным дизайном:

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

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

Для создания карточки используйте простой шрифт и не забывайте оптимизировать картинки для чёткости. Предусмотрите возможность масштабирования изображения в зависимости от размеров дисплея. Убедитесь, что картинка занимает 50-75% пространства карточки.

Помощь в разработке сайтов с карточным дизайном

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

В своей работе, мы придерживаемся комплексного подхода:

  • Узнаем ваши потребности и составляем ТЗ
  • На основе ТЗ составляется макет сайта
  • Пишем текст для сайта
  • Создаем дизайн и выполняем верстку

Подробнее процесс разработки сайта опубликован в этом разделе.

Появились вопросы?

Готовы ответить на них прямо сейчас!