В компании Econsultancy составили список из 10 основных трендов, которые будут определять развитие веб-дизайна в 2017 году.
1. Меньше опций в меню навигации
В 2016 году многие компании провели редизайн своих сайтов, сократив количество опций навигации. В 2017 году этот тренд продлится.
Меню в хедере страницы, которые раньше включали 5-7 опций,
теперь будут предлагать 3-4 варианта.
Меньшее количество вариантов облегчает пользователю поиск нужной информации и позволяет избежать ситуации «паралича выбора».
Хорошим примером нового подхода является Ikea. На скриншотах ниже вы можете сравнить старую и новую версии сайта компании.
Старая версия:
Новая версия, запущенная в 2016 году:
2. Отказ от гамбургер-меню
Гамбургер-меню не даёт пользователю представления о глубине сайта или приложения.
В итоге он остаётся дезориентированным.
Spotify уже отказался от гамбургер-меню в своём приложении. В 2017 году его примеру последует ещё больше компаний.
3. Дуотоны
В 2017 году ожидается более активное использование дуотонов вместо полноцветных фонов.
Использование дуотонов делает оформление сайта минималистичным и позволяет удержать внимание пользователя на основном сообщении или навигации.
4. Тактильный дизайн
В 2014 году Google представил новую концепцию дизайна Material Design и начал переводить свои ресурсы на новое оформление. С тех пор многие сайты и приложения последовали примеру компании. В 2017 году этот тренд продолжится.
По своей сути Material Desing во многом схож с «плоским дизайном», но в качестве метафоры в нём используется материал. Следовательно, этот подход к дизайну включает использование таких тактильных атрибутов, как поверхности и кромки, а также правильную организацию пространства.
По идее дизайнеров Google, в интерфейсе не должно быть острых углов, карточки должны переключаться между собой плавно и практически незаметно. При этом у пользователя должно быть ощущение, что он работает с реальным объектом, а не плоскостью дисплея.
Цель Material Design – обеспечить одинаковый опыт взаимодействия по всем платформам и устройствам. Он полностью сосредоточен на UX.
5. Отказ от параллакс-прокрутки
Параллакс-скроллинг призван впечатлять, а не обеспечивать удобство. Эффект параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создаёт эффект трехмерного пространства.
Примеры использования данного концепта можно посмотреть на сайтах Firewatchgame.com и AlfredService.com.
Недостатком параллакс-прокрутки является замедление скорости загрузки страницы.
В 2016 году анимация рассматривалась как перспективный тренд. Однако в этом году в центре внимания разработчиков находится производительность. С этой точки зрения параллакс-скроллинг – не самое оптимальное решение.
6. Осмысленное действие
В Google считают, что «действие должно быть осмысленным и целесообразным, служить для привлечения внимания и поддержания непрерывности».
Приложение Tumblr – хороший пример реализации этого принципа. В 2016 году оно выиграло премию Material Design за анимацию.
Одним из основных принципов материального дизайна является «осмысленное действие».
7. Отказ от низкокачественных стоковых изображений
Сайты компаний должны приглашать пользователей к взаимодействию и отражать ценности бизнеса.
На них больше нет места некачественным и скучным стоковым изображениям.
Таким, как это:
8. Меньше приложений, больше PWA
Технология PWA (Progressive Web Apps) позволяет сайту работать по принципу приложения.
В том числе офлайн. Её уже используют такие крупные издания и компании, как The Washington Post, Airberlin и Flipkart. В этом году популярность технологии будет расти.
9. Шрифты Google
Google создал библиотеку шрифтов с открытым исходным кодом в 2010 году. В 2016, продолжая работать над материальным дизайном, компания также улучшила свой сервис Google Fonts.
В результате предпросмотр шрифтов стал более быстрым, а их настройка – проще.
В разделе Featured собраны те шрифты, которые хорошо сочетаются с материальным дизайном.
В 2017 году ещё больше веб-дизайнеров будут работать со шрифтами Google.
10. Минимализм
Этот тренд объединяет в себе многие другие тенденции, упомянутые выше.
В рамках этого подхода важную роль играют типографика, контраст и пространство.
Минимализм означает акцент на производительности (скорость) и юзабилити.
