Правильный веб-дизайн: 6 стойких трендов современности

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

Линейные иконки и кнопки призраки

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

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

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

Отсутствие заглавного фонового изображения

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

Сайт Dress Responsively – хороший пример частичного отказа от картинок, ради привлечения внимания к олдскульной типографике.

Moodlerooms ФОКУСируется на ярком цвете и типографике, которые приветствуют клиентов. В дизайне сайта также используются рисованные иконки в стиле бренда. Эта простая комбинация методов помогает сконцентрировать внимание посетителей сайта на текстовом содержании.

Material Design

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

Материальный дизайн разработан Google и сочетает в себе плоскую конструкцию с небольшим количеством анимации, градиентов и 3D-элементов. В Google Material Design описывают, как стиль, основанный на тактильной реальности. Он призван упростить и сделать более удобным пользовательский интерфейс на декстопных и мобильных устройствах.

Такой дизайн часто используются в обновленной мобильной операционке от Google. Еще один пример — дизайн YouTube для Android.

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

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

LinkedIn использует взаимодействия в мобильной версии. При наведении на область содержимого у пользователя появляется дополнительная возможность в виде кнопки «Пропустить».

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

Интерактивная инфографика

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

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

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

Apartments: We live here используют инфографику как способ прилечь внимание клиентов к предлагаемому продукту. Показывая типичное поведение, вроде простой ходьбы, выгуливания собаки или игрой с воздушным змеем, клиента наводят на мысль, что здесь он найдет правильное жилье.

Видео на весь экран

Пока минимализм остается популярным и новым, с противоположной стороны спектра расположились полноэкранные бэкграунды. Недавно ученые из Массачусетского технологического института заявили, что всего за 13 миллисекунд люди могут обрабатывать и сохранять зрительные образы. Это дополнительный аргумент «за» использование больших графических фонов.

Рекламная кампания Apple Watch сопровождалась минимумом текста и сменой нескольких больших изображений. К том же, новый возможности HTML5 позволяют использовать видео по-новому.

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

Недавно на AIN.UA публиковалась также подборка 7 красивых сторителлинговых сайтов, на которых можно зависнуть на несколько часов.