Карточный дизайн

Карточный дизайн
18.10.2015 КОММЕНТАРИИ: 0

Зарождению и процветанию карточного стиля в веб-дизайне способствовала популяризация фотоориентированной соцсети Pinterest. На сегодняшний день контейнерный принцип организации сайтов является нормой. Его используют практически все  онлайн-издания,  интернет-магазины и популярные скидочные сервисы (Групон, Бичип, Хомсбокс).

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

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

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

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

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

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

Карточный дизайн сайта Constantly

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

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

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

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

Основоположник карточного дизайна - Pinterest

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

  1. Усиление UX

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

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

Карточный дизайн на службе UX

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

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

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

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

Адаптивность карточного дизайна

На сайте Feedhop формы и размеры карточек буквально повторяют очертания экранов смартфонов и планшетов.

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

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

Дружественность карточного дизайна к соцсетям

  1. Блестящие перспективы на будущее

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

Пример карточного дизайна на сайте СМИ

И напоследок…

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

  • Постарайтесь сделать каждую карточку максимально кликабельной. Она должна отражать всего одну, но яркую мысль, включать одну цепляющую картинку и не оставляющий простора для сомнений призыв к действию (CTA).
  • Грамотно используйте свободное пространство. Чем больше воздуха между карточками, тем меньше суматохи и путаницы на странице. Пробелы и отступы позволят эффективно разграничить контент и красиво оформить экран.
  • Для создания карточки используйте простой шрифт и не забывайте оптимизировать картинки для чёткости. Предусмотрите возможность масштабирования изображения в зависимости от размеров дисплея. Убедитесь, что картинка занимает 50—75% пространства карточки.

 

Источники:

Webdesignerdepot.com

Designers.hubspot.com

(Ссылки на все исследования, подтверждающие приведённые в статье статистические данные, можно найти на сайтах-первоисточниках.)

 

Добавить комментарий


Защитный код
Обновить