Меню
ГлавнаяИнструкции

Последние тенденции в мире веб дизайна: знакомьтесь, Карточный Дизайн! Карточный UI-паттерн на мобильном устройстве и адаптивный дизайн. Карточный дизайн сквозь века

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

В 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 или дуплекс.

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

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

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

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

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

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

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

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

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



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

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

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


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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Юзабилити

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

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

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

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

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

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

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

Сегодня карточный дизайн можно встретить на таких известных ресурсах, как Twitter, Pinterest, Google и других.

Особенности карточного стиля

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

  • Адаптивность. Дизайн корректно отображается на любых устройствах.
  • Минималистичность, отсутствие отвлекающих элементов. Все внимание - функциональным карточкам.
  • Современный и эстетичный внешний вид, широкая палитра используемых цветов.
  • Применение легкочитаемых шрифтов (Segoe), четких тематических изображений.
  • Доступность, интуитивное понимание функционала для пользователя.
  • Динамичность. Использование анимационных эффектов.
  • Присутствие рисованных элементов: иконок, объемных кнопок, инфографики, которые облегчают восприятие и стимулируют к целевым действиям.

Для каких сайтов подходит Metro стиль в дизайне

Лаконичный и современный карточный дизайн используется на сайтах различной тематики: портфолио, блоги, корпоративные сайты, сайты-визитки, интернет-магазины, и даже лендинг пейдж. Например, сайт Microsoft до сих выглядит именно в стиле метро (https://www.microsoft.com/uk-ua): на главной странице расположены крупные табы с продуктами компании и ссылкой на страницы с детальной информацией о них. Между ними расположены карточки стандартного вида с кратким описанием и гиперссылками на контент. Присутствуют эффекты анимации - при наведении курсора подсвечиваются изображения, кнопки, подчеркиваются ссылки. Отсутствуют посторонние элементы.

Столь же функциональные, сколько и красивые, карточные интерфейсы - не просто тренд. С тех пор как в 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. Технологии
Вскоре карточки могут стать динамичными. По мере роста производительности сайтов появляются возможности поддерживать более сложные мультимедийные ресурсы. Возможно, мы увидим элементы с большим числом деталей, например, самообновляющийся контент, при этом взаимодействие с интерфейсом не будет замедляться.


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

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

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


Материальный дизайн

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

Анимация



Призрачные кнопки

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


Сторителлинг

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

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

Более гибкая и демократичная версия так называемого «плиточного дизайна», о котором мир впервые узнал в 2010 году благодаря сервису Pinterest. Карточки сейчас используются в качестве отправной точки для движения по сайту: это анонс того материала, который откроется при клике. В наступившем году карточный дизайн будет развиваться дальше, появятся новые стили и интерактивные опции. Если вы хотите сделать такой сайт, то рекомендуем взять за основу .


Видео в качестве фона

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


Скроллинг вместо кликов

Хороший пример того, как мобильные интерфейсы повлияли на веб-дизайн. Распространенность тач-устройств изменила способ взаимодействия со страницами: теперь действие привычное, а «кликанье» - менее интуитивный и естественный способ навигации. Сейчас принято размещать контент на отдельной вертикальной странице и делить его не на разделы, а на «экраны». Сайт Madsschou , сделанный на Wix, отлично эту мысль иллюстрирует.


Микровзаимодействия

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