ПИШЕМ, ОБСУЖДАЕМ, ПЕРЕЖИВАЕМ...

Web Design & UX: увеличение конверсии, тренды 2016
19 Марта 2016

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

Что меняет веб-дизайн?

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

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

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

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

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


Адаптивный веб-дизайн (Responsive Web Design; RWD), предполагающий загрузку одного и того же HTML-кода на любые устройства и использование CSS для изменения внешнего вида страницы с учетом специфики конкретного девайса, является популярной технологией, рекомендуемой Google для использования при оптимизации веб-сайтов под мобильные устройства.

Именно поэтому многие тренды из списка ниже отражают подходы к веб-дизайну, которые дополняют RWD.

Сам список тенденций на 2016 год выглядит как-то так:

Минимализм и плоский дизайн 2.0

2.jpg

   В 2015 году минимализм был очень востребован, в 2016 году спрос на эту концепцию так же сохранится. Это идеальный вариант для использования в связке с RWD, так как позволяет избежать путаницы, сосредоточить внимание на наиболее важных элементах и эффективно использовать проект в целом: меньше значит больше. Популярным подходом к веб-дизайну, который сочетается с философией минимализма, является так называемый плоский дизайн (Flat Design). Сейчас наиболее актуальным является его последнее воплощение: Flat 2.0.

   Отличное представление о принципах Flat 2.0 дает Google Material Design : отражение материального мира с интересной игрой теней, света и движения, позволяющее пользователям получить визуальные подсказки относительно взаимодействия с веб-сайтом. Основные компоненты типа сеток, негативного пространства, ярких цветов и потрясающих форм - передают смысл и значения, формируя предпосылки к более глубокому вовлечению пользователя.

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


Винтажный стиль прямиком из 80-х

3.jpg

   Яркая эра громоздких компьютеров и огромных сотовых телефонов, охватившая 80-е и начало 90-х , является основным источником вдохновения для веб-дизайнеров, которые отдают предпочтение тренду на винтажный стиль. Пикселизированные иконки и текст, галактические фоны, интерактивные движущиеся звезды и планеты – все это будет востребовано в индустрии веб-дизайна в 2016 году.

 

Интерактивный и захватывающий опыт

4.png

   Люди по своей природе любят рассказывать и слушать интересные истории. Благодаря магии HTML5-элемента canvas , анимации и переходам CSS3 , современным API JavaScript (вроде WebGL и Greensock), а также силе аппаратного ускорения рассказываемые через интернет истории будут становиться все более захватывающими и интерактивными. Увеличение практики серфинга в интернете с помощью мобильных устройств привело к тому, что пользователи привыкли к продолжительному скроллингу; дизайнеры, умеющие рассказывать отличные истории и вовлекать пользователей в процесс ознакомления с имеющимся контентом, смогут добиться того, что юзеры будут скроллить вплоть до футера.

 

Креативные уникальные иллюстрации и иконография

5.jpg

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

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

 

Шрифты: правильно выбрать - важно

6.jpg

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

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

 

Визуальные элементы с высоким разрешением

7.jpg

   Увеличение пропускной способности сети, использование браузерной поддержки элемента HTML5 video и новые способы избирательной загрузки графических объектов с высоким разрешением на устройства с экранами типа Retina –это все ведет к дальнейшему росту популярности использования качественных фоновых изображений с высоким разрешением и HD-видео на веб-сайтах в 2016 году. Расширение поддержки браузерами свойства background-blend-mode из CSS3 может привести к распространению очень красивых художественных эффектов в изображениях, которые создаются в самом браузере с помощью нескольких строк CSS-кода.

Эффекты из категории «cinemagraph» также используются все более часто: они позволяют создавать статичные изображения с анимированными элементами, которые удерживают внимание посетителей сайта. Эти эффекты не принципиально новые, однако успех «живых фотографий» в последних версиях iPhone и поддержка HTML5-элемента canvas все большим количеством браузером должны способствовать превращению эффектов из категории cinemagraph в один из основных веб-дизайнерских трендов 2016 года.


Более гибкие макеты на основе сетки

8.jpg

   Макеты на основе сетки в духе Pinterest остаются очень популярны сегодня:  минимализм, плоский дизайн и популярные фронтэндовые фреймворки вроде Bootstrap , который упрощает применяющие сеток, - все это способствует росту популярности структурированных веб-макетов на основе сетки. В 2016 году можно ожидать увеличение популярности гибких макетов на основе сетки. Желание веб-дизайнеров повысить вовлеченность пользователей и интерактивность контента двигает их на переход на более гибкие макеты на основе сетки и отказ от классических вариантов.


Вместо заключения

9.jpg

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