Настройка Wi-Fi

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

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

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

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

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

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

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

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

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

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

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



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

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

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


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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Юзабилити

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

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

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

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

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

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


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

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

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


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

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

Анимация



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

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


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

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

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

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


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

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


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

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


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

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

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

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

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

1. Help Scout

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

5. Buffer App

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

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

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

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

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

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

Пример карточки. Источник: 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: смахивая карты справа налево, вы находите все больше новых людей, которые соответствуют вашим вкусам.

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

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

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