Главное Свежее Вакансии Образование
4 349 13 В избр. Сохранено
Авторизуйтесь
Вход с паролем

18 трендов веб-дизайна в 2017 году – часть 2

Недавно мы опубликовали перевод первой половины статьи о тенденциях в новом году. Еще 8 факторов, повлияющих на веб-дизайн в 2017 по мнению специалистов Webflow - в нашем блоге.

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

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

b_587cc3cd93cc3.jpg

11. Flexbox

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

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

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

b_587cc467cc214.jpg

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

b_587cc49b43d2d.jpg

Redshift

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

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

b_587cc4a45a99c.jpg

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

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

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

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

b_587cc4e3a0527.jpg

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

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

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

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

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

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

b_587cc4fac16c3.jpg

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

Президентские выборы в США в 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

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

b_587cc526cd9c5.jpg

Several People Are Typing

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

b_587cc52e3760e.jpg

Google Design

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

b_587cc535cc287.jpg

Shopify UX

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

b_587cc5492cf0d.jpg

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

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

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

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

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

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

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

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

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

+4
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
DeepCom
PR, SMM, Event
Dina Gubert
интересная статья, но только непонятно, какое отношение к веб-дизайну имеют фейковые новости :)
Ответить
Иван Петрович
Да тут вообще почти все отдаленное отношение имеет к дизайну, статья скорее о трендах в сайтах визитках.
Ответить
TruVisibility
создание и продвижение сайтов
Anna Shabaeva
Автор считает, что веб-дизайн - это нечто большее, чем просто то, что вы видите, когда заходите на сайт. Это еще и контент, и структура, и, конечно, юзабилити. Но даже если вы считаете, что дизайн - это просто внешний вид сайта, то мода не берется из ниоткуда, появление трендов обусловлено некоторыми предпосылками. Именно о них и речь в этой статье)
Ответить
Иван Петрович
Дело в том что я тоже так считаю, но это не отменяет то, что написано мною выше.
Ответить
TruVisibility
создание и продвижение сайтов
Anna Shabaeva
А что заставило вас считать, что приведенные тренды касаются только сайтов визиток?
Ответить
Denis Raslov
Flexbox и CSS Grid — действительно полезные штуки. Намного упрощают вёрстку интерфейса даже при самом замысловатом дизайне.
Ответить
Иван Оракулув
понравилось: "боты – это частный пример воплощения более абстрактной общей идеи: разговор – это интерфейс"
Ответить
Buzzoola
Buzzoola | Баззула - Лидер рынка нативной рекламы
Pavel Shumilov
Спасибо.
Небольшие уточнение про карикатуру -
"но Кевин перекричал ваш правильный ответ своим неправильным".
Тут скорее всего имеется в виду, что победил тот, кто кричал громче и давал меньше фактов)
Ответить
TruVisibility
создание и продвижение сайтов
Anna Shabaeva
Спасибо за уточнение! Вы правы, поправим :)
Ответить
Buzzoola
Buzzoola | Баззула - Лидер рынка нативной рекламы
Pavel Shumilov
Рад помочь)
Ответить
Vladislav Mikhailov
Флексбокс это хорошая вещь, но использовать я ее конечно не буду
Ответить
Юмашев Павел
отличная статья) спасибо
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.