В своей статье на Searchenginewatch.com Крис Лэйк, CEO агентства Empirical Proof, рассказал про тренды веб-дизайна и поделился своими впечатлениями о плохих и хороших тенденциях. Что хорошего можно вынести из предыдущего года и использовать в 2016, а от чего нужно напрочь отказаться? Размышления Криса по этому поводу читайте ниже.

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

Karina | idg.net.ua/blog | 19.01.2016

1. Веб-дизайн под копирку

Если вы читали о дрибблизации веб-дизайна, вы сразу поймете, о чем речь. Победа сайта на конкурсе Awwwards и отметка «Сайт дня» не обязательно зарабатывается за счет какого-нибудь инновационного решения. Довольно часто для победы нужно просто быть в тренде, что не всегда хорошо.

Про повальное копирование дизайна уже было сказано очень много. Задумайтесь: если бы все интернет-магазины работали по одинаковому шаблону, скорее всего, брошенных корзин было бы намного больше. И какой смысл выглядеть так же, как выглядят конкуренты? Если вам кажется это преувеличением, то взгляните на изображение и задумайтесь снова:


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

2. Сначала паттерны

Паттерны — это повторяющиеся элементы, которые помогают решать стандартные дизайнерские проблемы. Паттерны являются так называемой отправной точкой для опытного UI-дизайнера.
UI-Patterns.com

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

На руководство Google Material Design ссылаются практически везде. Тем, кто еще не знаком с ним, Крис Лэйк настоятельно рекомендует познакомиться.

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

3. Анимация

Flash умер, но творить чудеса сегодня можно с помощью HTML5, CSS, jQuery. Проблема в том, что слишком многие дизайнеры не чувствуют меры.

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

  • Каждая анимация должна быть оправдана с точки зрения пользы для пользователя. «Оно выглядит симпатично» — это не оправдание.
  • Длительность анимации не должна превышать 300 мс.
  • Избегайте равномерного движения анимации (linear easing). Из-за этого она выглядит неинтересной и скучной.
  • 99% анимаций должны быть Ease-in или Ease-out.
  • Необычная анимация вроде Bounce и т. п. нужна крайне редко.

4. Перенасыщенные цвета

Вы видели недавний дизайн сайта Bloomberg? Блумберг не стесняется экспериментировать с цветом, используя очень насыщенную и неоновую палитру. Такая смелость определенно заслуживает восхищения, особенно учитывая тему ресурса (в основном, это бизнес и политика):

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

Многие люди терпеть не могут перемен, однако новый логотип Medium теперь лучше виден в панели вкладок:

Spotify также сошел с ума в начале года. «Судя по тысячам твитов, создалось впечатление, что все поголовно возненавидели этот новый ярко-зеленый лого», — говорит Крис:

5. Размытие фоновых картинок

Разработчики Facebook писали о технике размытия и масштабирования, при которой небольшое изображение масштабируется, после чего к нему применяется размытие по Гауссу и картинка загружается постепенно.

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

6. Легкая загрузка страницы

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

У Винса Спилмана есть замечательная статья о 9 правилах дизайна. Очень рекомендуется к прочтению.

7. Дизайн, превращающийся в дурной тон

Крис уверен, что сегодня веб-дизайн переживает примерно то, что было с модой в 80-х годах: нам стало доступно так много новых возможностей и разработок, что все начали сходить с ума и пытаться добавить всё это на свои сайты. И в итоге у нас есть куча мусора, который, как мы думаем, выглядит круто, а по сути — непригодно. Через лет 10 мы вспомним эти сайты и ужаснемся.

Технология — это сила, но стоит напомнить: тот факт, что вы можете что-то сделать, еще не означает, что вы должны это делать.

8. Прелоадеры

В обсуждение про анти-UX можно добавить еще одну тему — прелоадеры. «Это порождение Сатаны, которое существует только для того, чтобы показать пользователям, что вы с удовольствием заставляете их ждать. Не очень хороший знак», — заявил Крис Лэйк.

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

9. Послайдовый скролл

Попадали ли вы на такие сайты, где вам казалось, что мышь ведет себя странно? Если да, то скорее всего, вы столкнулись со скроллджекингом (scrolljacking) — техникой послайдового скролла (когда контент меняется по мере прокручивания колесика мыши). Крис искренне удивлен, что заставляет людей творить подобные сайты, и уверен, что нет никакой логики в том, чтобы привязывать управление к скроллу, лишая пользователя возможности просмотреть сайт без использования мыши либо с других устройств.

10. Пассивно-агрессивные поп-апы

По мнению Лэйка, всплывающие окна (popups) — еще одна большая проблема для UX сегодня. Во-первых, на сайте часто возникают поп-апы, рекламирующие этот же сайт. В сообщениях, как правило, навязчиво просят подписаться на рассылку или что-нибудь купить/скачать. Во-вторых, из-за ужасной манеры подачи создается впечатление, что если пользователь откажется от предложения в поп-апе, то он круглый идиот.

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

11. Прощай, гамбургер

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

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

Google, Apple и Microsoft также избавились от гамбургер-меню. Вскоре и другие последуют этому примеру.

12. Тяжелые страницы

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

Еще десять лет назад мы старались не заходить за пределы 100 Кбайт. Контент страницы, который не вмещался в эти пределы, не индексировался Google. В какой-то момент, несколько лет спустя Google отменил это правило, и понеслось: страницы начали становиться всё более и более увесистыми.

К 2010 году вес средней веб-страницы вырос до 702 Кбайт, а в 2015 вес среднестатистической страницы составил 2219 Кбайт — это более чем в 3 раза выше, чем 5 лет назад. Скорее всего, всему виной низкокачественные скрипты, несжатые изображения, видео и тяжелые шрифты:

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

Некоторые сайты особенно отличаются. Домашняя страница онлайн-газеты Daily Mail весит 8.8 Мбайт.

Впечатляет, не правда ли?

Это были 12 трендов веб-дизайна 2016. Крис Лэйк мог бы продолжать эту беседу еще очень долго, однако краткость — сестра таланта, поэтому на этом его обсуждение заканчивается.