Последние тенденции в мире веб дизайна: знакомьтесь, Карточный Дизайн! Для каждой карточки свой контент. Что такое контейнерный веб-дизайн
Столь же функциональные, сколько и красивые, карточные интерфейсы - не просто тренд. С тех пор как в 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. Технологии
Вскоре карточки могут стать динамичными. По мере роста производительности сайтов появляются возможности поддерживать более сложные мультимедийные ресурсы. Возможно, мы увидим элементы с большим числом деталей, например, самообновляющийся контент, при этом взаимодействие с интерфейсом не будет замедляться.
Итак, в данной статье я объясню вам что такое «карточный дизайн», и как он влияет на веб-дизайн в целом.
Рост мобильных технологий постепенно привел к смене архитектуры веб-сайтов в сторону отзывчивости и адаптивности. Эти два параметра стали обязательными. Данные события поспособствовали большому успеху «карт» — одному из основных направлений веб-дизайна в 2015 году.
Тем не менее, мы можем с уверенностью утверждать, что карты не просто дизайнерская причуда, за ними будущее веб-разработки, так как это лучший способ организации и отображения контента в последовательной форме. Итак, в данной статье я объясню вам что такое «карточный дизайн», и как он влияет на веб-дизайн в целом. Поехали!
Карточный дизайн сквозь века
В то время как карты стали крайне популярны в веб-дизайне совсем недавно, они уже были эффективным средством визуальной коммуникации, по крайней мере, тысячу лет. Впервые представленные, как игра, в императорском Китае 9 века, позднее карты стали полезны и в деловом мире.
И действительно, в 17 веке в Лондоне впервые появились «торговые карточки», с их помощью люди находили работу: это был первый пример современных «визиток».
В настоящее время карта представляет собой обычно форму купона из магазина или супермаркета, люди их собирают, чтобы получить специальные скидки.
Большинству из нас следует только заглянуть в свой кошелек, чтобы увидеть кредитные карты, карты постоянного покупателя, карты магазинов и даже обычное водительское удостоверение. Все эти карты имеют свои стандарты.
В любом случае существует сильная связь между традиционным использованием карт и их применением в веб-дизайне: обычные карты содержат информацию на обеих сторонах, а веб-карты перенаправляют пользователей для просмотра дальнейшего контента.
Что собой представляют карты в интернете?
С точки зрения интернета мы можем определить «карту» как маленький прямоугольник, который ассоциируется с определенной мыслью. Карты полны интерактивных элементов, таких как текст, ссылки или изображения. Но все они служат одной цели – по клику направлять на дальнейший контент.
Основная цель карт обеспечить краткий обзор определенной темы в замкнутом пространстве. И если читатель заинтересовался новостью, он может по одному клику перейти на новую страницу с полным текстом. Веб-сайты Facebook или Twitter пользуются этими преимуществами, они внедрили в свой дизайн шаблон карт, отображая большие объемы контента и сохраняя при этом драгоценное пространство.
Таким образом, самой важной характеристикой карт является идея интерактивного взаимодействия. Во время разработки дизайнеры должны учитывать, что карты служат не только способом отображения новостей, а также они обязаны привлекать внимание читателя. Вот почему на карточках отображаются кнопки лайка, репоста или ссылки на полный текст статьи.
Помимо своей полезности карты являются распространенным выбором в дизайне из-за их совместимости с отзывчивыми фреймворками. С помощью «Разбитой на части» структуры можно создавать привлекательные интерфейсы, а также такая структура является идеальной для разработки на мобильных платформах. Форма карты крайне похожа на форму современного смартфона.
Мы часто говорим о «текучих» макетах. Карты предоставляют нам небольшие кусочки контента, с помощью которых можно «залить» страницу под разные размеры и формы экранов.
Почему следует применять карты?
С тех пор как карты стали универсальными, они могут быть использованы по-разному в зависимости от необходимых функций. Ниже представлено несколько причин, зачем использовать карты:
Это тренд: тенденции по своей природе временное явление, однако, используя карты, вы можете эффективно сделать ваш сайт знаменитым.
Карты вводят порядок: карты внедряют уровни организации контента.
Карты идеальны для отзывчивого дизайна: они легко подходят под веб-сайты и мобильные приложения. Самое важное, что на смартфонах карты могут легко быть сложены вертикально, создавая при этом новостную ленту.
Карты поощряют экономию мыслей: из-за своих размеров карты никогда не смогут хранить большие объемы информации. На первый взгляд это может показаться недостатком, но я считаю, что это отличная вещь! В карточке следует отображать краткий текст от полной статьи, подталкивая заинтересованных читателей пройти по ссылке.
Они социальны: карты идеально подходят к социальным медиа, и не только из-за того, что они используются в социальных сетях, а также потому, что карты упрощают пользователям возможность делиться информацией через различные социальные платформы и по почте.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Выравнивается важность контента: карты помогают справиться с задачей, какую статью лучше всего поместить вверху страницы. При использовании карт блоки с контентом равной важности могут спокойно сожительствовать на одной странице без необходимости их ранжирования. Пользователь сам решает, что ему важно, и что он хочет читать.
Кто применяет карты?
Dribbble
Макет сайта основан на карточках, содержащих изображение и немного информации о каждом дизайне. Чем мне нравится Dribbble, так это тем, что можно кликнуть на карточку и посмотреть все детали относительно дизайна, а также вы можете просто навести курсор мыши на карточку и просмотреть маленькое описание.
Говоря о карточном дизайне, нельзя не упомянуть о Pinterest. На самом деле многие думают, что Pinterest впервые применил карточный дизайн. Pinterest четко демонстрирует «важность всего контента», на сайте нет карточек, которые как-либо визуально выделяются.
Twitter, используя ограничение в 144 символа в одном сообщении, родился со «встроенным карточным макетом». В прошлом году социальная сеть запустила свой собственный продукт под названием «Twitter Cards», приложение, спроектированное помочь вам «картизировать» ваш контент, если вы постите его в системе. Разработчики описывают свое приложение, как возможность:
«прикрепить много фото, видео и другого медиа контента к твитам, что переведет трафик на ваш веб-сайт»
Как результат, домашняя страница Twitter теперь полна карточек с твитами. По клику на один из них, твит разворачивается, показывая дополнительный контент или опции.
The Guardian
Знаменитая Британская газета The Guardian применила карточный дизайн к своему веб-сайту для того, чтобы «думать по-новому и улучшить обнаружение и продвижение контента».
Они смогли создать модульную схему, состоящую из различных карт: каждая связана с заголовком, и по клику вас перенаправляет на полный текст статьи. Сайт вызывает ощущение элегантности и чистоты.
Заключение
Карты представляют собой полезный метод для создания привлекательных веб-сайтов, а также они крайне гибки, с их помощью можно реализовать различные макеты. Все это для того, чтобы пользователь остался доволен сайтом. Все больший рост доли рынка планшетов и смартфонов также надолго закрепит карточный дизайн на вершине веб-дизайна.
Веб-дизайн очень динамичен. Мы постоянно видим, как внешний вид сайтов меняется с появлением новых технологий, методов, направлений и стилей. Так, сегодня лидирующей концепцией является карточный дизайн.
Вы можете увидеть его повсюду: от сайтов агентств по продаже недвижимости до новостных порталов. На самом деле, такие Интернет-гиганты, как Twitter, Facebook и Google, также используют карточный дизайн.
Карточки, в данном случае, это маленькие прямоугольники, заполненные интерактивными изображениями и информацией. Они стали популярными, прежде всего, благодаря своей отзывчивости, эстетичности и практичности.
Хотя, существует много неправильных представлений о том, какой дизайн может считаться карточным, одно можно сказать наверняка: карточки - это не просто прямоугольники на сайтах. Чтобы квалифицировать определенную конструкцию в качестве карточной, она должна иметь функциональные возможности и быть самодостаточной.
Пожалуй, лучшей метафорой для описания карточного дизайна является следующее изречение: «Карточка - плоская, но у нее две стороны». То есть, каждая карточка должна не только содержать какой-то контент, но и предоставлять его потребителям возможность некоего взаимодействия с ним.
Проще говоря, карточки - это не только красивый дизайн, но удобство в использовании.
Различные типы карточного дизайна
Карточный дизайн претерпел значительные изменения с момента своего появления. И теперь он может быть выполнен в следующих стилях.
1. Плоский дизайн
Впервые карточный плоский дизайн был представлен компанией Microsoft в 2006 году и был основан на стиле оформления графического интерфейса Metro, который выглядит довольно солидно и красочно. Правда, в его современной версии более широко применяются градиенты, тени и сквеморфизм.
2. Журнальный стиль
Дизайну в журнальном стиле необходим хороший визуальный баланс. Карточки в данном случае содержат блок с изображением и текстом, которые выполняют роль «тизера», то есть завлекают посетителя к более подробной информации на другой странице или сайте. Как явствует из названия, такой дизайн используется на сайтах журналов и новостных порталах, но также подходит и для других ресурсов, ориентированных на большое количество контента, таких как блоги или портфолио, а также для сайтов, которые регулярно обновляются.
Этот стиль воплощен на сайте социального сервиса Pinterest и стал популярной тенденцией в оформлении тем для платформы WordPress. Изначально карточки содержали только ссылки и некоторое количество определенного типа контента. Теперь они могут содержать больше ссылок и типов контента, включая видео, формы, изображения и инструменты для шаринга в социальных сетях. В некоторых интерфейсах карточки предоставляют возможность мини-взаимодействия, например, включение/отключение уведомлений в Facebook.
Также известный, как стиль «masonry» («масонри», он содержит блоки, соединенные между собой или распределенные по всему макету.
Как эффективно использовать карточный дизайн?
Есть целый ряд причин, почему дизайн в карточном стиле столь популярен. Вот лишь некоторые из них:
- Множество стилей дизайна совместимы с этим форматом, начиная с плоского и заканчивая более сложными разновидностями.
- Он хорошо работает с различными типами контента, а также облегчает его потребление.
- Он хорошо работает с отзывчивыми фреймворками.
- Он придает организованный и структурированный вид большому количеству информации.
Для данного типа дизайна не существует каких-либо фиксированных правил. Тем не менее, в эффективных карточных макетах почти всегда присутствуют два элемента - простота и богатое разнообразие контента. Также существуют приемы, способствующие повышению эстетичности и функциональности карточного дизайна.
Пустое пространство
Общим элементом в карточном дизайне является пустое пространство. Это необходимо, чтобы все элементы были хорошо заметны и понятны. Ведь все, что у вас есть, это область размером 600 пикселей, и нужно сделать так, чтобы заголовок, кнопка с призывом к действию, изображения и текст ссылки были заметными и эффективно выполняли свою функцию.
Большое количество пустого пространства вокруг каждого элемента дает посетителям сайта время на осмысление увиденного, когда они переводят взгляд с одной карточки на другую.
Для каждой карточки свой контент
Четкие изображения
В дизайне на основе карточек критически важны изображения. Они должны быть безупречны, даже будучи размещенными в ограниченном пространстве, чтобы привлекать внимание. Если изображения отсутствуют, используйте художественный шрифт или креативный заголовок, чтобы привлечь внимание посетителей.
Простые шрифты
Шрифт не должен отвлекать внимание от изображения. Для этого, используйте простой шрифт удобного для чтения цвета, то есть, черный и серый. Наиболее популярными, благодаря их нейтральному дизайну и легкой читаемости, являются шрифты без засечек. Кроме того, целесообразно использовать один вид шрифта различных размеров.
Неожиданные детали
Элемент неожиданности творит чудеса. Попробуйте добавить неожиданные детали, наподобие 3D-эффекта или нестандартным образом обработать края изображения, чтобы сделать свой дизайн более оригинальным. Другими методами, доказавшими свою эффективность, являются эффекты, проявляющиеся при наведении указателя мыши, и наложение цвета. Вы также можете применять эффект только к наиболее значимому контенту, чтобы сбалансировать визуальный вес каждой карточки.
Открытая сетка
Насколько важны элементов внутри каждой карточки, настолько же важное значение имеет пространство между ними. Создайте сеточный фреймворк, который придаст некоторый контраст, а также обеспечит равное расстояние между карточками и их элементами. Это становится еще более важным, если учесть расположение точек разрыва в отзывчивом макете.
Юзабилити
Дизайн - это не только эстетика, но и удобство использования. Дизайн должен подстрекать пользователей в действию: кликнуть по кнопке подписки, прочитать статью полностью или купить товар. Конечная цель вашего интерфейса - обеспечение легкого взаимодействия, которое приведет пользователей к совершению нужных вам действий.
Помимо этого, вы также должны проверить, как работает каждый элемент интерфейса, особенно в мобильной версии сайта. То есть, нужно думать не только о том, насколько удобно щелкать по элементам мышью, но и о том, насколько удобно взаимодействовать с ними при помощи таких приемов, как свайп (скольжение пальцем по экрану) и тэп (короткое прикосновение к экрану). Также убедитесь, что кнопки хорошо видны и их легко использовать. Для этого, конечно же, нужно, чтобы между элементами было достаточно места, дабы предотвратить случайное касание не той кнопки или инициацию не того действия.
Сортировка карточек
После того как разработка карточного дизайна закончена, следующим шагом является определение того, какую информацию будут содержать эти карточки. Должен быть контент сгруппирован по типу или тематике? К какой категории отнести тот или иной контент? Лучший способ организовать весь этот контент в удобном для пользователя виде - это сортировка карточек.
Вы можете сделать это, используя ручку и бумагу, или же можете воспользоваться такими сайтами, как ConceptCodify или Optimal Workshop. Каждый способ имеет свои преимущества и недостатки, хотя оффлайновый метод предполагает более индивидуальный подход.
Карточный дизайн является одним из наиболее гибких форматов макета сайта, что позволяет создать отменный пользовательский опыт. Карточки также эстетически приятны для глаз. Пользователи постоянно ищут способы быстрого потребления большого количества информации, ну а карточный дизайн как раз позволяет делать это легко и быстро.
Корпоративного блога с карточным интерфейсом. Контент необычайно важен при проведении маркетинговой кампании, поэтому корпоративному блогу часто отводят ключевую роль. Хорошо оформленный блог компании, в любом случае послужит фундаментом и дело не только в динамическом контенте или наборе SEO характеристик. главная составляющая успеха в Сети. Современные пользовательские ожидания предполагают использование связно сгруппированных материалов, лаконично представляющих суть дела.
Грамотно выбранный стиль оформления блога оставит нужное впечатление от всего веб-ресурса и самой компании. Сегодня актуально создавать ориентированный на посетителя дизайн сайта или блога, когда в центре внимания пользовательский интерфейс. Карточный дизайн с успехом применяется в разнотематических порталах и деловой нише – почти плоский Metro стиль, блоки и плитки хорошо упорядочивают информацию. Замечено, что дизайн с карточками увеличивает глубину просмотра премиум-контента на сайте компании.
Однако, дизайн с карточками может быть как эффективным, так самым неудачным. Далее, 10 примеров хорошего дизайна корпоративных блогов с описаниями выигрышной сути карточного стиля.
1. Help Scout
Пример 3-х колоночного корпоративного блога с броским .
5. Buffer App
В корпоративном блоге американской компании разработавшей сервис постинга в соцсетях, насчитывается более 900 разнотематичных статей.
Разнообразие в применении дизайн-элементов помогает адаптировать контент для задач. Под блоговые посты заведено два типа лейаута: ориентированный на статьи-советы и использующий разметку в магазинном стиле с полноэкранным фотобэкграундом (под ТОПовые записи).