Привет!

Тренды веб-дизайна 2017: 11 способов быть на шаг впереди [digital note #35]

Валерия СластенниковаВалерия Сластенникова

Вот и 2016 год уже подходит к концу. Многие начинают его анализировать и формировать выводы. Дизайнеры же продолжают смотреть вперед в ожидании новых трендов 2017 года. О них и поговорим.

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

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

Помните об этом, читая статью.

1. Скрытые/всплывающие меню

Это была долгая и тяжелая борьба со скептиками. Но “гамбургер”-меню в итоге доказали свою необходимость и полезность. Хорошо это или плохо, но в 2017 мы увидим еще больше скрытых меню и всплывающих окон, а значит и гамбургер-иконок.

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

Зачем тратить место на ссылки, по которым не будут переходить абсолютно все. Некоторые критики, например из Nielsen Norman Group, указывают на то, что гамбургер-меню ограничивают понятность и требуют совершения дополнительных действий.

Один из способов решения проблемы - гибридная навигационная система. При этом часть элементов видима, а часть скрыта. В примере выше видны три главные вкладки (Women’s, Men’s, Women’s Booties), вся остальная навигация скрыта под гамбургером. Гибридный подход требует тщательного планирования, поскольку позиции, расположенные в скрытом меню, изначально кажутся менее важными.

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

2. Эра видео

Для тех, кто еще не знал, видео играет очень важную роль для рынка:

  • Видео на лендингах увеличивает конверсию на 80%.
  • Просмотр видео составляет ⅓ всей онлайн-активности.
  • Видео реклама увеличивает намерение приобрести на 97% и узнаваемость бренда на 139%.
  • Добавление видео на главную страницу может увеличить конверсию на 20% и больше.

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

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

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

3. Персонализированный дизайн

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

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

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

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

4. Подход “mobile-first”

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

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

5. Иллюстрации

Иллюстрации вместо фотографий - еще один тренд 2017 года.

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

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

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

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

6. Дизайн, ориентированный на развитие

Был популярным и модным весь 2016 год, и не зря. Если верить слухам, в 2017 дизайн, ориентированный на развитие, будет в центре внимания.

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

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

7. Минималистичные домашние страницы

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

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

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

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

Можно выделить такие черты минимализма:

  • плоский дизайн и текстуры;
  • ограниченная или монохромная цветовая палитра;
  • только существенные элементы и функции;
  • максимизирование негативного пространства;
  • динамическая типографика.

Ничто не вечно и поэтому минимализм проживет еще максимум год.

8. Выход за сетку

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

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

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

Как и видео, это не новый тренд, но в 2017 году мы будет чаще с этим сталкиваться.

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

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

10. Вертикальные визуальные эффекты

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

Более того, это способствует плавному сканированию информации. Хорошо работает и на десктопах.

11. Полу-плоский дизайн

Имеет много названий: “semi-flat,” “almost flat,” “flat 2.0.”

Плоский дизайн возник как альтернатива трехмерному стилю. Он пришел и сказал: “Хватит быть тем, кем мы не являемся. Это же плоский экран. Так давайте работать с ним.”  Появились яркие цвета, простые формы, понятная и читабельная типографика и как следствие высокая скорость загрузки. Но пространство для улучшения оставалось и вот что мы получили с дизайном flat 2.0.:

  • Тени.
  • Юзабилити, основанное на физике. Должна отражаться реальность - эффекты при перетаскивании, наслоение, переходы.
  • Акцент на цвете. В отличие от простого плоского дизайна, в полу-плоском используют тени, особенно для кнопок с призывом к действию, ссылок и даже отдельных слов в тексте.

Следите за трендами и будьте успешными.

Design Trends 2017: 11 Ways to Stay Ahead of the Curve