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

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

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


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

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

Анимация



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

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


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

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

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

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


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

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


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

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


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

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

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

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

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

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

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

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

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

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

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

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

В использовании такого подхода к дизайну на вашем собственном сайте есть множество преимуществ.

Грид- подход к информационной архитектуре

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

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

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

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

Сильная зависимость от изображений

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

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

Иными словами, акцент на использовании изображений делает карточный дизайн более привлекательным для посетителей. Это не совпадение, что Pinterest, согласно Alexa, 15-й самый популярный сайт в США

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

Улучшенный пользовательский опыт

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

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

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

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

Сайт, подобный Dribbble позволяет посетителям найти нужное место супер-удобным способом. Это воплощение большого опыта пользователя!

Идеален для мобильного дизайна

Вы, возможно, слышали, что мобильные устройства уже обогнали настольные компьютеры на огромное количество пользователей. Только в 2015 году в США, использование мобильных цифровых средств массовой информации доходит до 51% по сравнению с настольными компьютерами, у которых 42%. Карточный дизайн подходит идеально, поскольку он принимает во внимание эту тенденцию будучи легко совместимым с «отзывчивыми» фреймворками. Потому что карточки предлагают контент «легко усвояемыми кусками», что облегчает отображение на мобильных фреймворках.

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

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

Это не просто очередная причуда

Проблема с некоторыми тенденциями в дизайне состоит в том, что они превращаются в причуды, что делает их недолговечными и незапоминающимися. Хотя, карточный дизайн, возможно, исключение! Из-за большого количества практического применения и преимуществ, которые он предлагает, он станет только более популярным со временем. Это означает, что он «выживет».

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

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

Карточный интерфейс – один из популярнейших трендов последних лет. Он удобен для пользователей и отлично адаптируется к разным видам устройств.

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

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

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

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

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

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

Оставляйте между картами больше пустого пространства

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

Добавление пробелов даст элементам больше места, чтобы дышать; это сделает общую картину более просторной и хорошо повлияет на читаемость.

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

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

Добавьте натуральные цвета и тени

Теперь пришло время подумать о цвете и тенях для дизайна. Держите курс на естественные цвета и имитируйте реальность в стилях дизайна.

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

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

Освещение должно бросать некоторые тени на заднем и нижнем плане;

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

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

На одной карте должно находиться не более одного информационного посыла.

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

Используйте простые слои, и создайте единый стиль карты для всего интерфейса. Не знаете, с чего начать? Руководящие принципы Материального Дизайна от Google могут послужить вам в качестве руководства.

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

Применяйте простые шрифты

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

Что еще важно для читаемости? Не забудьте включить контраст между цветом шрифта и фоном каждой карты.

Ограничьте количество UI-элементов

Одна карта – одно действие. Это аксиома.

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

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

Пожалуй, кнопка – это единственный элемент интерфейса, который вам нужен.

Выводы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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