Итак, в данной статье я объясню вам что такое «карточный дизайн», и как он влияет на веб-дизайн в целом.

Рост мобильных технологий постепенно привел к смене архитектуры веб-сайтов в сторону отзывчивости и адаптивности. Эти два параметра стали обязательными. Данные события поспособствовали большому успеху «карт» — одному из основных направлений веб-дизайна в 2015 году.

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

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

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

И действительно, в 17 веке в Лондоне впервые появились «торговые карточки», с их помощью люди находили работу: это был первый пример современных «визиток».

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

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

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

Что собой представляют карты в интернете?

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

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

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

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

Почему следует применять карты?

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

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

Карты вводят порядок: карты внедряют уровни организации контента.

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

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

Кто применяет карты?

Dribbble

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

Pinterest

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

Twitter, используя ограничение в 144 символа в одном сообщении, родился со «встроенным карточным макетом». В прошлом году социальная сеть запустила свой собственный продукт под названием «Twitter Cards», приложение, спроектированное помочь вам «картизировать» ваш контент, если вы постите его в системе. Разработчики описывают свое приложение, как возможность:

«прикрепить много фото, видео и другого медиа контента к твитам, что переведет трафик на ваш веб-сайт»

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

The Guardian

Знаменитая Британская газета The Guardian применила карточный дизайн к своему веб-сайту для того, чтобы «думать по-новому и улучшить обнаружение и продвижение контента».

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

Заключение

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

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 эффект позволяет пользователям менять цвета, отвечать на сообщения, отправлять их или удалять.

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

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

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

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

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

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

Начните с чёрно-белого каркаса

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

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

Попробуйте думать как конечный пользователь:

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

Используйте увеличенные отступы

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

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

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

Используйте базовые принципы и законы физики чтобы представить и задизайнить каждую карту, как если бы вы держали их перед собой в руках:

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

Создавайте простые слои

Теперь, когда вы уже заморочились над физикой, сделайте унифицированную карточку для всех частей интерфейса. Не знаете, с чего начать? Инструкции Google по Matherial Design - отличная отправная точка.

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

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

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

Придерживайтесь простых интерфейсов

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

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

Уменьшите количество элементов UI

Повторите: одна карточка - одно действие .

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

Вывод

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