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

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

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

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

1. Help Scout

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

5. Buffer App

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

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

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

Карточный паттерн удобен не только тем, что сокращает время загрузки страниц и упрощает масштабирование интерфейсов под разные экраны. Небольшие кусочки контента соответствуют по своему объёму вниманию веб-пользователей (особенно тех, кто использует мобильные устройства). Вдохновлённые Pinterest и получившие популярность благодаря соцсетям вроде Facebook и Twitter , карточные интерфейсы сегодня можно увидеть на сайтах любой тематики. В этой статье мы рассмотрим карточный UI-паттерн во весь рост: чем он хорош, как он вписывается в концепции адаптивного и material design и чего от него ждать в будущем.

Источник: Formerly Yes

Что такое дизайн по принципу контейнеров?

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

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

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

Карточки в интерфейсах мобильных и адаптивных сайтов

Как я уже писал, карточные интерфейсы отлично сочетаются с адаптивными фреймворками, благодаря чему сам Дес Трейнор (Des Traynor) из Intercom назвал их будущим веба . Этот UI-паттерн отлично транслируется на мобильные устройства по многим причинам - о них мы сейчас и поговорим.

Источник: The Verge

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

Сравните десктопный (выше) и мобильный (ниже) вьюпорты сайта The Verge:

Источник: The Verge (мобильный сайт)

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

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

Мобильный вьюпорт:

Источник: UXPin

Экран с большим разрешением:

Источник: UXPin

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

Будущее карточек

Основанный на карточках UI-паттерн постоянно видоизменяется в соответствии с новыми вызовами, при этом большая часть их коснётся адаптивного дизайна и дизайна приложений. Как мы уже писали в статье «Тренды веб-дизайна 2015-2016 годов» (Web Design Trends 2015 & 2016), эти перемены отчасти связаны с тем, какое влияние Material Design оказывает на приложения под Android.

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

Карточный интерфейс – один из популярнейших трендов последних лет. Он удобен для пользователей и отлично адаптируется к разным видам устройств.

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

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

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

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

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

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

Оставляйте между картами больше пустого пространства

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

Добавление пробелов даст элементам больше места, чтобы дышать; это сделает общую картину более просторной и хорошо повлияет на читаемость.

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

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

Добавьте натуральные цвета и тени

Теперь пришло время подумать о цвете и тенях для дизайна. Держите курс на естественные цвета и имитируйте реальность в стилях дизайна.

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

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

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

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

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

На одной карте должно находиться не более одного информационного посыла.

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

Используйте простые слои, и создайте единый стиль карты для всего интерфейса. Не знаете, с чего начать? Руководящие принципы Материального Дизайна от Google могут послужить вам в качестве руководства.

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

Применяйте простые шрифты

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

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

Ограничьте количество UI-элементов

Одна карта – одно действие. Это аксиома.

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

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

Пожалуй, кнопка – это единственный элемент интерфейса, который вам нужен.

Выводы

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

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

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

Начните с черно-белых контуров

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

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

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

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

Используйте очень много свободного пространства

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

Обилие «воздуха» даст элементам дизайна простор, сделает все карточки визуально просторнее и повысит читабельность.

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

Добавьте натуральные цвета и оттенки

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

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

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

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

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

Теперь, помня о физических свойствах, переходите к следующему шагу — созданию общего стиля карточек для всего интерфейса. Не знаете с чего начать? Отличной точкой старта будет руководство по Material Design от Google.

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

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

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

Выбирайте простые шрифты

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

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

Ограничьте элементы UI

Запомните: одна карточка равняется одному действию.

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

Сохраняйте формы и дизайн простыми — опять же, Material Design отличный вариант - и стремитесь не делать больше одной кнопки.

Кнопки, вероятно, вообще единственный UI-элемент, который вам понадобится. Стремитесь к этому.

Заключение

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

Перевод — Дежурка

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

Что такое карточки?

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

Пример карточки. Источник: Material Design.

Отличная метафора

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

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

Каждая карточка представляет игрока. Источник картинки: liveauctiongroup

Организация контента

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

Пример подборки карточек. Источник: Material Design.

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

Привлекательный внешний вид

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

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

Сайт Dribbble.

Как спроектировать карточку

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

Высота карточки может быть фиксированной или переменной. Источник изображения: Intercom

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

Скругленные уголки и короткая тень. Источник: Material Design.

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

Источник изображения: Behance

Преимущества карточек

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

Легкоусвояемая форма

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

В этой подборке - карточки с разными This card collection contains cards with varied content types. Source: Material Design.

Адаптивный и мобильный дизайн

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

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

Дизайн под большой палец

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

Смахивание вправо. Источник: Dribble

Где использовать?

Лента

Открытие нового

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