10 Web Design Trends For 2016

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

  1. Подход Mobile First. Помните времена, когда веб-дизайн и дизайн мобильных приложений были различными и самостоятельными областями знаний? Что ж, приходится признать, что эти времена давно прошли. Сегодня пользователи мобильных устройств – самая драгоценная аудитория, гораздо важнее пользователей с планшетами и настольными компьютерами. Учитывая то, что даже Google поддерживает этот тренд, отдавая преимущество в поисковой выдаче сайтам с мобильной версией, если с вашим сайтом удобно работать только мышкой на большом мониторе, то уже пора не только крепко задуматься, но и срочно начать работать в формате mobile first.
  2. UI-паттерны. Все мы знакомы с «гамбургером», формой регистрации и другими UI-паттернами, используемыми сегодня буквально на каждом мобильном сайте. И, похоже, дизайнеры не собираются отказываться от использования UI-паттернов в своих работах и в будущем году – такой подход позволяет разрабатывать удобные интерфейсы, с которыми все уже знакомы (вам не нужно объяснять, зачем эти полоски в левом верхнем углу). С другой стороны, конечно, все веб-сайты медленно, но верно становятся похожими один на другого, что вряд ли порадует тех, кто любит оригинальные решения.
  3. Анимации. Сюда входят как огромные, шириной во весь экран с эффектом параллакс-скроллинга, «гифки» на вашем сайте-визитке и маленькие анимированные прогресс-бары, строки состояния, и т.п. Конечно, разрабатывая анимацию, стоит отдавать предпочтение плоскому дизайну и минимализму (обсудим это ниже), но, при прочих равных, в 2016 эти эффекты будут отлично смотреться на практически любом сайте-визитке и портфолио. И даже больше – в той или иной степени, этим пользуются даже такие гиганты как Facebook и Google.
  4. Микровзаимодействия. Микровзаимодействие в UI – это выполнение пользователем маленьких задач одна за другой, которые помогают научиться работать с приложением и сайтом, а также выполнять более крупные задачи – просто и по чуть-чуть. Так взаимодействие с сайтом или приложением становится более «человеческим» и пользователям хочется возвращаться к ним снова и снова.
  5. Материальный дизайн. Тренд на материальный дизайн в стиле приложений Google, скорее всего будет развиваться и в 2016 году с упором на визуальные «подсказки» вместо реального изображения предмета, фундаментальные понятия в теории дизайна и анимации, передающие смысл.  Material Design Lite от Google, анонсированный в июле 2015 как автономный open-source проект, скорее всего, будет развивать идеи плоского дизайна. Дизайнеры, которым больше нравится использовать тени – пойдут по дороге материального дизайна, те, кто любит минимализм – продолжат развивать плоский дизайн (см. следующий пункт).
  6. Эволюция плоского дизайна. Конечно, в 2016 плоский дизайн никуда не денется, как и общая любовь к минимализму. Однако очевидно, они будут эволюционировать. Плоский дизайн останется простым и интуитивно понятным, свежим и лаконичным, но станет более красочным, с перенасыщенными и даже неоновыми цветами, небольшими тенями (заимствованными из скевоморфизма) и элементами, комбинирующими классический плоский дизайн с фотографией. Типографика останется простой и легкой, однако иконки, похоже, станут больше и детализированнее. Хотелось бы, конечно, чтобы новая версия плоского дизайна осталась ориентированной в первую очередь на контент, без лишних декораций, а не стала просто мешаниной из существующих стилей. Кстати, одну из таких комбинаций можно предсказать с легкостью уже сейчас: плоский + материальный дизайны. Некоторые элементы останутся минималистичными, однако анимации и параллакс позволят по-новому посмотреть на знакомые элементы.
  7. Дизайн ради дизайна. Этот тренд полная противоположность разработке микровзаимодействий и, в целом «очеловечиванию» интерфейсов с акцентом на удобство. Здесь пользователь и его потребности не берутся в расчет, а дизайн разрабатывается только для успеха на профильных порталах, побед на конкурсах дизайнеров и положительных отзывов «диванных экспертов» с Dribble. К сожалению, красивых веб-сайтов, которыми совершенно невозможно пользоваться все еще поразительно много. Отключение прокрутки страниц, поддержка одной версии браузера и типа мыши, игнорирование принципов адаптивного дизайна, только чтобы поразить друзей-дизайнеров – вряд ли всё это исчезнет из интернета в 2016. Не стоит забывать, если что-то выглядит круто или очень трендово – это еще не означает, что этим удобно пользоваться. Нужды пользователей и бизнеса всегда должны быть на первом месте, если вы хотите разработать хороший продукт – это все еще касается и веб-дизайна.
  8. Назойливые всплывающие окна. Всплывающие окна, заставляющие пользователей делать то, что они не собирались или не хотят, должны исчезнуть. Мы все сталкивались с этими назойливыми «Да, подпишите меня на рассылку» окошками. Они заставляют нас чувствовать себя полнейшим неандертальцами, когда мы нажимаем на «Нет, спасибо» («Нет, мне неинтересно увеличить ROI», «Нет, меня не волнует, что думают мои клиенты»). Пользователей уже воротит от этого и, надеюсь, в 2016 году мы полностью избавимся от этих всплывающих окон.
  9. «Тяжелые» сайты. Сайты с каждым годом становятся все «тяжелее», будто они на фаст-фуд диете. Десять лет назад Google очень пристально следил за размером ваших веб-страниц, однако, как только это прекратилось, дизайнеры начали позволять себе вольности (средний размер страницы в 2010 был 700 KB, сегодня эта цифра выросла до 2.220 KB). Некоторые веб-сайты сейчас размером более 6 MB и, похоже, тренд на использование изображений и видео ситуацию не улучшит. Сейчас скорость работы сайта можно увеличить на 30% используя технологию размытия изображения перед загрузкой.
  10. CSS3 слои. Этот тренд больше касается технической части веб-разработки и сильно повлияет на верстальщиков и веб-разработчиков, сильно упростив им жизнь. Наконец-то все современные версии браузеров поддерживают CSS3, а значит разработчики могут применять слои в CSS3 без оглядки на совместимость. Слои в CSS3 не столько про «внешность» вашей веб-страницы, сколько про скорость загрузки, стоимость, сложность поддержки и безопасность – всё то, что пользователи обычно не замечают с первого взгляда, но что делает хороший сайт таковым.

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

И кстати, даже когда вы доберетесь-таки до многострадальных кнопок – проявляйте изобретательность. Ведь если все будут следовать трендам, как по учебнику, то кто будет создавать новые?