Карточки — сильнейший тренд веб-дизайна в 2016 году

Источник: Formerly Yes

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

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

Источник: Trello

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

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

Источник: The Verge
4
Источник: UXPin
6

Карточки и Material Design

Карточки служат одним из основных принципов Material Design, и проведённый Google всесторонний анализ метода внушает доверие. Если вам нужно подробное объяснение, изучите описание карточек в руководстве по материальному дизайну.

Источник: Google

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

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

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

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

Источник: Use Your Interface

2. Более тесное взаимодействие

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

Источник: Google

3. Размер

Для карточек действует правило: больше значит лучше. Это объединяет их с баннерами в верхней части страницы.

Источник: How Arkitekter

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

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

Источник: Google. В данном примере цвет используется для обозначения важности рейса и статуса

Выводы

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

Об авторе

untitled-2

--

--

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
aic blog

aic blog

1.2K Followers

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/