В конце декабря мы опубликовали перевод первой части статьи “18 трендов веб-дизайна в 2017 году”. Джон Мур Уильямс, руководитель отдела контент-стратегии Webflow, узнал у специалистов своей команды о том, какие по их мнению тенденции в веб-дизайне ждут нас в уже наступившем году.

Своим мнением делится Нельсон Абалос-младший (Nelson Abalos, Jr.), руководитель службы поддержки клиентов и ведущий воркшопов Webflow.

Nelson Abalos, Jr., Customer Support Hero

11. Flexbox

Если вы еще не знаете ничего о Flexbox, вас ждёт очень интересное знакомство. Это относительно новый CSS-модуль для разметки, который не только даёт массу возможностей касаемо адаптивности, но и невероятно помогает дизайнерам в управлении элементами на холсте при работе, например, в Sketch или Illustrator. Поскольку все современные браузеры (нет, мы не берем в расчет IE11) поддерживают Flexbox, вы просто обязаны погрузиться в его удивительный мир (это не касается тех, у кого основная часть аудитории – пользователи IE).

Конечно, для привыкания к Flexbox может потребоваться некоторое время, если вам очень комфортно работать с другими, совершенно непохожими модулями разметки. Если вам нужно помочь разобраться с “гибкими блоками”, попробуйте поиграть с ними в Flexbox Game.

Мы спросили о тенденциях веб-дизайна у Уолдо Брудрик (Waldo Broodryk) (ответственный за счастье наших клиентов).

Waldo Broodryk, Customer Happiness Hero

12. Сложная разметка CSS Grid

Если вслед за Flexbox продолжать разговор о новых интересных модулях разметки, то нужно сказать о CSS Grid Layout. Крис Хаус пишет в своем руководстве “A Complete Guide to Grid”:

“Grid – это первый CSS-модуль, созданный специально для решения проблем с разметкой, которые постоянно встречаются в разработке веб-сайтов и заставляют каждого из нас придумывать обходные пути.”

Flexbox помогает решить такие серьезные и всем надоевшие проблемы в веб-дизайне, как вертикальное центрирование, но изначально он не был предназначен для разметки целых страниц (хотя его можно для этого использовать). Grid, напротив, был создан для целых страниц. И он, как и Flexbox, позволяет легко менять порядок элементов в зависимости от типа и размера устройства.

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

Если вы хотите поиграться с CSS Grid прямо сейчас, сделайте следующее:

  • В браузере Chrome перейдите на chrome://flags и включите “Экспериментальные функции веб-платформы” ("Experimental web platform features”)
  • В браузере Opera перейдите на opera://flags и включите “Experimental Web Platform features”
  • В браузере Firefox активируйте layout.css.grid.enabled (или установите Firefox Nightly)

13. Дизайн как способ показать контент пользователю, удовлетворить его потребности и получить профит

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

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

  • Демография: Кто он, наш пользователь? (профессиональные и личные качества) Откуда он пришёл?
  • Поведение: Что пользователь сейчас делает? Что он делал на этом сайте раньше?
  • Ситуация: Какое устройство и какой браузер использует пользователь? Каким образом он зашёл на сайт? Пользователь залогинен или нет?

Мы уже видели интересные эксперименты с применением персонализации на некоторых сайтах. Большинство из них – это либо ручная настройка рекомендаций для пользователей, либо рекомендации “также читайте”, либо сложные алгоритмические решения, похожие на те, которые выпускает Facebook.

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

Fubiz

Fubiz's "creativity finder" customization tool

Redshift

Еще один пример – новый блог Redshift от Autodesk, который предлагает выбор пользовательских настроек для отображаемого контента, например:

  • подписка на определенные темы или авторов публикаций
  • настраиваемая лента статей
  • возможность мгновенно отправить комментарий или поделиться в социальных сетях
  • добавление в закладки

Redshift blog's customization options

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

Если вам кажется, что функциональные возможности Redshift вы уже видели где-то еще, то это скорее всего потому, что во многом они скопированы с Medium. Но Medium имеет значительные преимущества перед Redshift: например, у них гораздо более многочисленная база читателей и авторов, а еще они интегрируются с Twitter. Всё это благотворно влияет на алгоритмы для подбора релевантного контента для каждого читателя.

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

А теперь своими догадками по поводу трендов веб-дизайна поделится автор статьи – Джон Мур Уильямс, руководитель отдела контент-стратегии Webflow.

John Moore Williams, Head of Content Strategy at Webflow

14. Общение на человеческом языке (боты и не только)

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

На самом деле, боты – это частный пример воплощения более абстрактной общей идеи: разговор – это интерфейс. И, вероятно, в 2017 году мы увидим много нового, в основе которого лежит именно эта идея. Мы не знаем, что это будет, остается только ждать и наблюдать. Но можно предположить, что послужит толчком для развития в данном направлении:

  • Повышение интереса к “человеческому” языку
  • Расширение возможностей для авторов контента и специалистов контент-стратегий в сфере UX-дизайна и разработки ботов
  • Еще больше вложений в создание пользовательский контент, творческие сообщества, форумы и т.п.
  • Представление информации в диалоговой/языковой форме (если раньше дизайн был основан на визуальных образах, в 2017 ожидается смещение приоритетов к общению и языковому взаимодействию)
  • Стремление сделать так, чтобы раздел комментариев перестал быть выгребной ямой интернета, а превратился в фишку, которая будет привлекать пользователей и подталкивать их к созданию нового интересного контента (Coral Project уже прилагает усилия для достижения подобного результата)

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

15. Борьба с ложными новостями

"I'm sorry, Jeanne, your answer was correct, but Kevin shouted his incorrect answer over yours, so he gets the points."

ПРАВДА НЕ ИМЕЕТ ЗНАЧЕНИЯ!
“Мне очень жаль, Дженни, ваш ответ правильный, но Кевин дал свой неправильный ответ быстрее вас, поэтому баллы получает он.”

Президентские выборы в США в 2016 очень наглядно показали нам, как интернет влияет на общественно-политическую обстановку, и преподали нам главный урок:

Дезинформация – это быстро, легко, дешево и очень выгодно, и она способна серьезно повлиять на мнение общества о кандидате.

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

  • Марк Цукерберг заявил, что процент ложных новостей “относительно невелик”, но в то же время рассказал о 7 способах борьбы Facebook с дезинформацией
  • Группа студентов разработала плагин для Chrome под названием FiB, который отмечает новости как “проверенные” или “непроверенные” прямо в пользовательском интерфейсе Facebook
  • Google и Facebook заявили, что c помощью своих рекламных инструментов будут ограничивать рекламные доходы сайтов-распространителей ложных новостей
  • Популярный Twitter-аккаунт Saved You A Click создал дополнительный аккаунт Saved You A Trick, чтобы вылавливать фейковые новости

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

16. Более глубокое проникновение в дизайн (и контент)

В течение всего 2016 года команды дизайнеров некоторых компаний создавали собственные блоги, чтобы позволить миру вникнуть в их процесс работы и, возможно, в какой-то степени оживить, “очеловечить” бренд.

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

Но в 2016 приоритеты начали смещаться в трех новых направлениях:

  • Бренд
  • Гуманизация
  • Полезность

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

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

Facebook.design

Основные темы: процесс работы и инструменты

Facebook.design homepage

Several People Are Typing

Основные темы: Slack, производительность труда на рабочем месте, контент-планирование

Several People Are Typing homepage

Google Design

Основные темы: Google, процесс работы, инструменты

Google Design homepage

Shopify UX

Основные темы: UX (то есть дизайн, контент, разработка, исследования)

Shopify UX blog homepage

 

17. Размытие границы между созданием дизайна и программной разработкой

В своей новой статье на TechCrunch “Будущее разработки фронтенда – в дизайне” Карсон Миллер (Carson Miller) пишет:

“Написание кода в будущем будет совсем другим. На самом деле граница между программированием и созданием дизайна может вообще исчезнуть.”

В Twitter после выхода статьи разгорелась дискуссия, где Остин Найт (Austin Knight) отметил:

“Многие проектировщики и разработчики, которых я знаю, предпочли бы работать визуально, но пишут код из необходимости.”

Для появления этой тенденции есть много причин, например:

  • Необходимость быстрой и итеративной разработки продукта
  • Желание пользователей максимально приблизить “ожидание и реальность” в разрабатываемом продукте
  • Расширение возможностей дизайнерских инструментов, где не требуется написание кода

18. Виртуальная реальность в сети

Учитывая, что мы и так привыкли говорить об интернете как о виртуальной, альтернативной реальности, то звучит это немного странно. Но всё же нет никаких сомнений, что виртуальная реальность масштабно вторгнется в веб в 2017 году, даже если браузеры еще будут не готовы поддерживать её. Если вы хотите попробовать, добро пожаловать на сайт Web VR.