Разработка web-дизайна: тренды 2016

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

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

Всё дело в том, что начиная с 2014 года пользователи в основном выходят в интернет с мобильных устройств. Сегодня вообще веб-дизайн всецело “работает” для маленьких экранов, а адаптивный дизайн становится обязательным. Что уж говорить про 2016 год, когда по статистике информационного агентства RNS уже 54% россиян используют мобильный интернет.

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

Что такое контейнерный веб-дизайн?

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

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

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

Практичный и привлекательный: преимущества карточного UI-паттерна в двух словах

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

Интересны тренды в дизайне 2023? Читайте свежую статью с подборкой ТОП трендов 2023 года.

Карточный UI-паттерн на мобильном устройстве и адаптивный дизайн

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

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

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

Сравните скриншот сайта The Verge наверху с его мобильной версией внизу:

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

Область просмотра мобильной версии:

Область просмотра полноэкранной версии:

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

Карточки и материальный дизайн

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

Web-разработка сайтов. Будущее карточного дизайна

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

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

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

Всё чаще видео будет заменять картинки (идея, с которой некоторые дизайнеры заигрывают годами). Use Your Interface (наверху) использует анимированные GIF-карточки, которые наполняют домашнюю страницу массой информации.

2. Углубление взаимодействия

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

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

3. Размер

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

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

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

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

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

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

Web-разработка сайтов 2016. Заключение

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

Понравилась наша статья, поделитесь с друзьями!

Удачи в бизнесе, ваш mindrepublic.ru