18 трендов веб-дизайна в 2017 году – часть 2
В конце декабря мы опубликовали перевод первой части статьи “18 трендов веб-дизайна в 2017 году”. Джон Мур Уильямс, руководитель отдела контент-стратегии Webflow, узнал у специалистов своей команды о том, какие по их мнению тенденции в веб-дизайне ждут нас в уже наступившем году.
Своим мнением делится Нельсон Абалос-младший (Nelson Abalos, Jr.), руководитель службы поддержки клиентов и ведущий воркшопов Webflow.
11. Flexbox
Если вы еще не знаете ничего о Flexbox, вас ждёт очень интересное знакомство. Это относительно новый CSS-модуль для разметки, который не только даёт массу возможностей касаемо адаптивности, но и невероятно помогает дизайнерам в управлении элементами на холсте при работе, например, в Sketch или Illustrator. Поскольку все современные браузеры (нет, мы не берем в расчет IE11) поддерживают Flexbox, вы просто обязаны погрузиться в его удивительный мир (это не касается тех, у кого основная часть аудитории – пользователи IE).
Конечно, для привыкания к Flexbox может потребоваться некоторое время, если вам очень комфортно работать с другими, совершенно непохожими модулями разметки. Если вам нужно помочь разобраться с “гибкими блоками”, попробуйте поиграть с ними в Flexbox Game.
Мы спросили о тенденциях веб-дизайна у Уолдо Брудрик (Waldo Broodryk) (ответственный за счастье наших клиентов).
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
Redshift
Еще один пример – новый блог Redshift от Autodesk, который предлагает выбор пользовательских настроек для отображаемого контента, например:
- подписка на определенные темы или авторов публикаций
- настраиваемая лента статей
- возможность мгновенно отправить комментарий или поделиться в социальных сетях
- добавление в закладки
Конечно, большинство из этих вещей сообразительный читатель сможет сделать самостоятельно, но Redshift значительно упрощает эти функции. А еще такая забота о пользователях заставляет смотреть на блог серьезнее – как на солидное образовательное издание.
Если вам кажется, что функциональные возможности Redshift вы уже видели где-то еще, то это скорее всего потому, что во многом они скопированы с Medium. Но Medium имеет значительные преимущества перед Redshift: например, у них гораздо более многочисленная база читателей и авторов, а еще они интегрируются с Twitter. Всё это благотворно влияет на алгоритмы для подбора релевантного контента для каждого читателя.
Все эти способы персонализации контента говорят о том, что дизайн рассматривается как пересечение между потребностями клиента и потребностями бизнеса. Читатели хотят сохранять контент, делиться им и подгонять его под себя, а компании в свою очередь могут удовлетворить эти потребности и пустить их в нужное русло. Получается двойной выигрыш – эти методы выгодны обеим сторонам.
А теперь своими догадками по поводу трендов веб-дизайна поделится автор статьи – Джон Мур Уильямс, руководитель отдела контент-стратегии Webflow.
14. Общение на человеческом языке (боты и не только)
2016 год можно назвать годом ботов, но пока неизвестно, было ли это изобретение началом эпохи ботов или это всего лишь недолгий подъем, вызвавший много шума. Тем не менее, ожидайте, что в 2017 году вы будете встречать ботов в своей жизни гораздо чаще, чем сейчас.
На самом деле, боты – это частный пример воплощения более абстрактной общей идеи: разговор – это интерфейс. И, вероятно, в 2017 году мы увидим много нового, в основе которого лежит именно эта идея. Мы не знаем, что это будет, остается только ждать и наблюдать. Но можно предположить, что послужит толчком для развития в данном направлении:
- Повышение интереса к “человеческому” языку
- Расширение возможностей для авторов контента и специалистов контент-стратегий в сфере UX-дизайна и разработки ботов
- Еще больше вложений в создание пользовательский контент, творческие сообщества, форумы и т.п.
- Представление информации в диалоговой/языковой форме (если раньше дизайн был основан на визуальных образах, в 2017 ожидается смещение приоритетов к общению и языковому взаимодействию)
- Стремление сделать так, чтобы раздел комментариев перестал быть выгребной ямой интернета, а превратился в фишку, которая будет привлекать пользователей и подталкивать их к созданию нового интересного контента (Coral Project уже прилагает усилия для достижения подобного результата)
Будем надеяться, что повышенный интерес к ботам и другим автоматизированным системам поможет добиться лучшего взаимодействия между пользователями и создателями контента.
15. Борьба с ложными новостями
ПРАВДА НЕ ИМЕЕТ ЗНАЧЕНИЯ!“Мне очень жаль, Дженни, ваш ответ правильный, но Кевин крикнул свой неправильный ответ громче вас, поэтому баллы получает он.”
Президентские выборы в США в 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
Основные темы: процесс работы и инструменты
Several People Are Typing
Основные темы: Slack, производительность труда на рабочем месте, контент-планирование
Google Design
Основные темы: Google, процесс работы, инструменты
Shopify UX
Основные темы: UX (то есть дизайн, контент, разработка, исследования)
17. Размытие границы между созданием дизайна и программной разработкой
В своей новой статье на TechCrunch “Будущее разработки фронтенда – в дизайне” Карсон Миллер (Carson Miller) пишет:
“Написание кода в будущем будет совсем другим. На самом деле граница между программированием и созданием дизайна может вообще исчезнуть.”
В Twitter после выхода статьи разгорелась дискуссия, где Остин Найт (Austin Knight) отметил:
“Многие проектировщики и разработчики, которых я знаю, предпочли бы работать визуально, но пишут код из необходимости.”
Для появления этой тенденции есть много причин, например:
- Необходимость быстрой и итеративной разработки продукта
- Желание пользователей максимально приблизить “ожидание и реальность” в разрабатываемом продукте
- Расширение возможностей дизайнерских инструментов, где не требуется написание кода
18. Виртуальная реальность в сети
Учитывая, что мы и так привыкли говорить об интернете как о виртуальной, альтернативной реальности, то звучит это немного странно. Но всё же нет никаких сомнений, что виртуальная реальность масштабно вторгнется в веб в 2017 году, даже если браузеры еще будут не готовы поддерживать её. Если вы хотите попробовать, добро пожаловать на сайт Web VR.