Секреты веб-дизайна в стиле карточек. Адаптивный и мобильный дизайн

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

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

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

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

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

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

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

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

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

Попробуйте думать как конечный пользователь:

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

Используйте увеличенные отступы

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

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

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

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

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

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

Теперь, когда вы уже заморочились над физикой, сделайте унифицированную карточку для всех частей интерфейса. Не знаете, с чего начать? Инструкции Google по Matherial Design - отличная отправная точка.

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

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

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

Придерживайтесь простых интерфейсов

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

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

Уменьшите количество элементов UI

Повторите: одна карточка - одно действие .

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

Вывод

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

Праздники закончились, а значит, пришла пора взбодриться и подумать про планы на будущее, грядущие проекты и перспективы. Мы в 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 от Google.

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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