Карточные макеты в веб-дизайне. Секреты веб-дизайна в стиле карточек

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

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

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

1. Help Scout

Пример 3-х колоночного корпоративного блога с броским .

5. Buffer App

В корпоративном блоге американской компании разработавшей сервис постинга в соцсетях, насчитывается более 900 разнотематичных статей.

Разнообразие в применении дизайн-элементов помогает адаптировать контент для задач. Под блоговые посты заведено два типа лейаута: ориентированный на статьи-советы и использующий разметку в магазинном стиле с полноэкранным фотобэкграундом (под ТОПовые записи).

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

Вы можете увидеть его повсюду: от сайтов агентств по продаже недвижимости до новостных порталов. На самом деле, такие Интернет-гиганты, как Twitter, Facebook и Google, также используют карточный дизайн.

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

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

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

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

Различные типы карточного дизайна

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

1. Плоский дизайн

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

2. Журнальный стиль

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

Этот стиль воплощен на сайте социального сервиса Pinterest и стал популярной тенденцией в оформлении тем для платформы WordPress. Изначально карточки содержали только ссылки и некоторое количество определенного типа контента. Теперь они могут содержать больше ссылок и типов контента, включая видео, формы, изображения и инструменты для шаринга в социальных сетях. В некоторых интерфейсах карточки предоставляют возможность мини-взаимодействия, например, включение/отключение уведомлений в Facebook.

Также известный, как стиль «masonry» («масонри», он содержит блоки, соединенные между собой или распределенные по всему макету.

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

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

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

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

Пустое пространство

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

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

Для каждой карточки свой контент

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

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

Простые шрифты

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

Неожиданные детали

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

Открытая сетка

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

Юзабилити

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

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

Сортировка карточек

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

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

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

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

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

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

В использовании такого подхода к дизайну на вашем собственном сайте есть множество преимуществ.

Грид- подход к информационной архитектуре

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

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

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

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

Сильная зависимость от изображений

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

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

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

Глядя на результаты Pinterest, после того как мы набрали в поисковике слово «еда», можно увидеть, что изображения - это первое, что привлекают глаз, когда вы находитесь на сайте. Вам все равно, что написано под фотографиями, по крайней мере, не дело первой важности. Высокое качество, ослепительные картины, привлекающие ваше внимание, и только потом, приняв решение, вы хотите узнать больше (но уже с подачи этой картинки), для чего вы в итоге и читаете описание.

Улучшенный пользовательский опыт

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

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

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

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

Сайт, подобный Dribbble позволяет посетителям найти нужное место супер-удобным способом. Это воплощение большого опыта пользователя!

Идеален для мобильного дизайна

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

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

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

Это не просто очередная причуда

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

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

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

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

В 2014 году интернетом на мобильных устройствах впервые стали пользоваться чаще, чем на компьютерах. Поэтому сегодня веб-дизайн благоволит маленьким экранам, а адаптивный дизайн становится обязательным. Что уж говорить про 2018, когда по статитстике информационного агентства RNS уже 54% россиян используют мобильный интернет. В результате в простые стили интерфейса, такие как новый плоский дизайн, минимализм и, особенно, карточки, сейчас популярны как никогда.

Пригодность карточного UI-паттерна – это больше, чем малое время загрузки и приспособляемость к различным размерам экранов. Ограниченный в размерах контент соответствует объему внимания большинства веб-пользователей (особенно на мобильных устройствах). Взращенный Pinterest , а затем популяризованный такими соцсетями, как Facebook и Twitter, карточный шаблон сегодня можно найти на веб-сайтах всех отраслей.

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

Что такое контейнерный веб-дизайн?

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

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

Практичный и привлекательный: преимущества карточного UI-паттерна в двух словах.

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

Интересны ? Читайте свежую статью с подборкой ТОП 18 трендов 2018 года.

Карточный UI-паттерн на мобильном устройстве и адаптивный дизайн.

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

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

Сравните скриншот сайта The Verge наверху с его мобильной версией внизу:

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

Область просмотра мобильной версии:

Область просмотра полноэкранной версии:

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

Карточки и материальный дизайн

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

Web разработка сайтов. Будущее карточного дизайна.

Так как карточный UI-паттерн постоянно меняет свою форму, чтобы соответствовать новым требованиям, он, вероятно, наиболее сильно повлияет на адаптивный дизайн и дизайн приложений. Это изменение частично основано на «постраничном» влиянии, которое материальный дизайн оказывает на приложения Android.

1. Технология

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

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

2. Углубление взаимодействия

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

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

3. Размер

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

HOW Arkitekter (наверху) в навигации смешивает карточки большого и среднего размеров. Некоторые карточки являются ссылками, а некоторые – просто представляют статичную информацию. Широкие промежутки разделяют карточки, что делает дизайн воздушным.

4. Носимые устройства

Благодаря Google Glass, карточки сегодня стали основным элементом UI-дизайна носимых устройств.

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

Web разработка сайтов 2016-2018. Вывод

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

Читайте статью про другой - duotone или дуплекс.

26.12.2016

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

Грамотно реализованный карточный дизайн может улучшить UX (User Experience) вашего приложения. В этой статье я опишу 5 полезных техник для реализации карточного дизайна и приведу несколько занимательных примеров.

• Читайте также:

1. Следуйте правилу “Одна карточка - один концепт”

2. Вся поверхность карточки должна быть кликабельной

Следуйте Правилу Фита (Fitts’s Law) и позвольте пользователям кликать/нажимать на любую часть карточки, а не только на текстовые ссылки или картинки. Большая зона соприкосновения существенно улучшает юзабилити как на тачскринах (Touchscreen), так и на девайсах, использующих мышь.

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

3. Делайте карточки привлекательными

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

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

Изображения

Упор на изображения - это сила карточного дизайна. Исследования подтверждают , что изображения “поднимают” дизайн. Таким образом, акцент на использовании изображений делает дизайн карточного интерфейса более привлекательным для пользователей.

Тени и градиенты

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

Типографика

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

• Используйте простые шрифты и цветовые палитры (текст наиболее хорошо читается на контрастирующем фоне).
• Старайтесь использовать минимальное количество шрифтов. Для карточного дизайна одного шрифта более чем достаточно.

Совет : шрифт sans-serif с обычным начертанием отлично подходит для карточек.

• Читайте также:

4. Ограничивайте содержимое карточки

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

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

5. Используйте примущества анимации и движения

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

Визуальные подсказки

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

Визуальный фидбэк

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

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