26 трендов веб-дизайна, актуальных в 2015 году
1. «Материальный дизайн», новая парадигма Google. Флэту добавляется ровно столько реалистичности, чтобы сделать интерфейс «говорящим», дающим подсказки пользователям, как им действовать. Вся анимация также служит этой миссии.
2. Эффекты «объема» при плоском дизайне. Внешний вид большинства элементов останется «плоским», будет сделан упор на их реалистичной анимации.
3. Морфинг. Один из главных трендов 2015, изменение формы/цвета/размера кнопок, инпутов в зависимости от изменения их назначения. Один из самых первых примеров — «разъезжающееся» поле поиска на сайте Apple. В том же AppStore кнопка загрузки приложения становится прогресс-баром, а потом — кнопкой запуска приложения.
4. Принцип: одно действие — много взаимодействий. Сюда относится, например, навигация по сайту и запуск анимации скроллом. Принципу соответствует прием с морфингом — пользователь по сути кликает в одно и то же место, но получает разные эффекты. Переключатели слайдов «вперед/назад», расположенные рядом, а не в разных концах экрана.
5. Принцип: много действий — одно взаимодействие. Дизайн движется к тому, что старается не навязывать пользователю «правила игры». Всплывающее окно можно закрыть кликом мимо него, кликом на «крестик», нажатием любой клавиши на клавиатуре (кроме стрелок), скроллом мышки и т.д.
6. Авторские иллюстрации. На контрасте с похожими друг на друга «плоскими» иллюстрациями станут популярными работы с уникальным авторским стилем.
7. Авторизация через соцсети. Тренд, прошедший испытание временем.
8. Сторителлинг, сайты-истории. Сайт-история сильнее вступает в коммуникацию с пользователем, нежели «просто сайт», где сухо перечисляют преимущества продукта. Сайт-история — это современная форма промо-сайта, однако требующая серьезной работы с контентом. Тренд получит развитие в будущем.
9. Горизонтальный скроллинг. Смещение акцентов на мобильное пользование вернула на сцену горизонтальный скроллинг, который легко делается свайпом на планшете/смартфоне. Задача дизайнеров в том, чтобы не затруднять пользование с десктопа, дать подсказку пользователям и предложить вариант навигации, адекватный свайпу (скроллинг колеса мыши — не самый удачный вариант для горизонтального скроллинга).
10. Анимированные ховеры. Эффекты, побуждающие пользователя кликать, всегда будут востребованы.
11. Встроенные интерактивные 3D-объекты. Когда пользователь может не только запускать своими действиями «запрограммированную» анимацию, но и вертеть объект, как ему заблагорассудится — это максимальный уровень взаимодействия его с сайтом.
12. Акцент на типографику. Особенно актуально для России, где ситуация с качественными акцидентными шрифтами и не многим лучше, чем 5 лет назад.
13. SVG-графика. Диапазон разрешений разных устройств заставляет делать как можно больше графики в векторном формате (особенно актуально для иконок, логотипов, маскирующих фигур).
14. Фоновое видео, встроенное на HTML5. Отличная альтернатива фотографиям и адекватный способ показать, например, технологический процесс без длинных описаний. Тренд все еще сохраняет свежесть и дает «вау-эффект».
15. Большие фоновые фотографии. Раньше от этого удерживал только слабый интернет-канал у большинства пользователей. Теперь же обратной дороги к крохотным миниатюрам просто нет.
16. Мобильная версия сайта. Вопреки предсказаниям, будет жить наравне с адаптивом — просто потому, что иногда это более предпочтительное решение для бизнеса.
17. Адаптивный сайт. Мобильных устройств всё больше, нужно учитывать интересы их владельцев.
18. Настраиваемая адаптивность. Пользователь не просто выбирает масштаб, он выбирает детализацию. Адекватное решение для тех, кому не нравится, что адаптивная версия сама решает, где какой элемент будет находиться.
19. Анимированные иконки. Тренд, относительно недавно вошедший в моду. Будет жить в 2015-ом
20. Минимализм, сайты в серой гамме. Тренд по-настоящему не дошел до России, у нас по-прежнему считают, что это «дизайнер не поработал». Есть надежда, что качественные примеры таких работ еще появятся.
21. Микровзаимодействия, внимание к мелочам. Коммуникация с пользователем должна быть даже там, где раньше мы ее не ожидали.
22. Проецирование опыта мобильных пользователей на десктопные интерфейсы. Так, например, часто можно видеть слайдер, который листается действием «зажать слайд кнопкой мыши, перетащить в сторону». Действие, типичное для пользователей тачскринов. Направление получит дальнейшее развитие.
23. Эффекты режимов наложения слоев на сайте (как в Photoshop). Тенденция, еще не набравшая популярность в российском веб-продакшне, но довольно перспективная.
24. «Карточный» дизайн (а-ля Pinterest). Что бы ни говорили, а подобная сетка удобная как для пользования с десктопа, так и с планшета. К тому же блочная структура облегчает разработку адаптивного сайта.
25. Персонализированный UX. Так, например, YouTube запоминает, что смотрел пользователь и меняет структуру главной страницы в соответствии с этим. Отражение интересов пользователя — всегда лучше, чем одно универсальное предложение для всех.
26. Анимированная/интерактивная инфографика. Если статичная инфографика подходит, скорее, для печатных носителей, то анимированная инфографика, которая подается по скроллу — вполне хорошая история.