Тренды Веб Дизайна 2020

Содержание

#1. Адаптивный дизайн
#2. Всплывающие уведомления
#3. Motion design
#4. Добавление видео
#5. Чат-боты
#6. Пустое пространство
#7. Интерактивность
#8. Минимализм
#9. Приходящие – уходящие тренды
#10. Уходящие
#11. Приходящие

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

Инновации расширяют возможности. А потому влияют на то, какие сайты мы захотим видеть. Так формируются новые тренды. Можно создавать довольно уникальные страницы. Но если хоть немного не следовать тенденциям, человека признают немодным, а сайт неинтересным.

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

Адаптивный дизайн

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

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

Кроме текста и медиаконтента, любые элементы могут пропадать с экрана при изменении его размера. Но некоторые из них должны обретать другой вид, становясь легкодоступными. Так, ключевая составляющая веб-страницы на телефоне – кнопка «Меню», которая позволит перейти к:

• личному аккаунту;
• корзине (если это магазин);
• информации о тарифах;
• настройкам сайта (если они предусмотрены для пользователя);
• справке;
• главным разделам сайта.

Из личного опыта могу сказать, что 80% неадаптивных сайтов я покидаю моментально, поскольку с ними неудобно работать. Исключения – наличие необходимой мне информации. В таком случае я вынужден приспособится. Но впереди 2020. Задача разработчиков – избавить пользователей от сложностей.

Всплывающие уведомления

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

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

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

Motion design

Темпы 21 века сделали нас очень нетерпеливыми. Это касается и поиска информации в Интернете, даже если времени достаточно. Потому, пользователей оказывается в состоянии «мгновенного удовлетворения», если получается искомую информацию в полном виде на одной веб-странице.

Как это обеспечить? Реализацией «моушн дизайна». Один из самых банальных примеров – добавление GIF-анимаций для ознакомления с основными характеристиками автомобиля. Более сложной может быть анимация HTML5 и Canvas полотно. Это обеспечит гораздо быструю загрузку страницы, анимации и повысит сайт в результатах поиска яндекса и гугла.

Такой способ подачи информации намного эффективнее, нежели текстовый или даже изобразительный. Преимущество gif над видео в более быстрой загрузке, что тоже очень важно при работе с сайтом.

GIF-файлы могут передавать самые сложные идеи за короткий промежуток времени. Более того, они точно заинтересуют пользователя, что заставит его задержаться на сайте. Одно из ключевых преимуществ – они работают в любом браузере и смартфоне, потому будут доступными для всех.

Но также стоит учитывать, что анимации, как правило, недолгие. Считайте, что есть не больше 5 секунд. В этот промежуток необходимо вложить весь посыл. Если не получается, лучше заменить ее видео.

Добавление видео

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

Немного статистики:

• 96% пользователей смотрят видео, чтобы изучить продукт более детально;
• 79% сказали, что именно видео убедило их купить товар;
• 68% предпочитают изучать новые проекты просмотром видео, нежели чтением текстов;
• 94% пиар-менеджеров сказали, что видео помогает пользователям понимать идею проекта;
• 84% менеджера убеждены, что благодаря видео им удалось повысить трафик на сайте.

Информация взята с опроса The State of Video Marketing 2019.

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

Тем не менее, есть небольшой список правил по добавлению этого элемента на свой сайт:

1. Длительность. Не более 5 минут. Основу проекта можно спокойно описать за этот промежуток. Задача видео – привлечь внимание пользователя и заставить его углубиться.
2. Релевантность. Видео должно четко соответствовать странице, на которой он находится. К примеру, не стоит размещать материал «Наша команда» на странице «Почему нужно работать с нами».
3. Простота. Передавайте лишь основной посыл. Если сильно залезть в дебри, пользователю станет скучно, а идею он так и не поймет
4. Минимализм. Польза от видео не означает, что нужно залить много роликов. Часть информации должна быть подана и в текстовом виде.

Чат-боты

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

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

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

Преимущества чат-ботов в том, что они дешевые (дороже, чем раздел FAQ, но значительно дешевле сотрудника поддержки) отвечают мгновенно и доступны 24/7. Недостатки: не понимают саркастических запросов, не могут правильно ответить на вопрос, заданный впервые.

Эксперименты с чат-ботами начались несколько лет. Но пока они запоминались только как глупая программа, неспособная нормально отреагировать на банальный запрос. Сегодня они «научились». Теперь боты могут полностью оформить заказ, помочь с регистрацией или восстановить аккаунт.

Пустое пространство

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

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

Важно также понимать, что вопреки оригинальному названию «white space» пространство не должно быть именно белым. Это может быть любой цвет, текстура или даже картинка заднего фона. Суть пустого пространства в том, что оно не несет никакой смысловой нагрузки.

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

Интерактивность

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

Одной иллюстрацией я не смогу передать всю суть интерактивности, потому предлагаю Вам ознакомиться с Garbage31. Это сайт от украинской команды действительно вывел понятие «взаимодействия с пользователем» на новый уровень. Эту и более сложную анимацию вы можете увидеть в работах агентства Merehead.

Минимализм

Этот тренд очень часто совмещают с пустым пространством. Однако, минимализм – более широкое понятие. Он подразумевает упрощение интерфейса несколькими путями:

• скрытая панель навигации;
• минимум цветов;
• отсутствие дополнительных деталей графического дизайна (тени, разнообразие шрифтов);
• минимум кнопок;
• другие.

Хочу разобрать этот тренд на конкретных примерах. Оба сайта разработаны в минималистичном стиле. Минимум цветов, кнопок, скрытые панели навигации.

Однако, второй вариант значительно уступает в этом плане по следующим причинам:

• несколько шрифтов;
• использование оттенков;
• добавление геометрии.

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

Приходящие – уходящие тренды

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

Уходящие

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

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

Приходящие

3D. Не скажу, что это прям грядущий тренд. Однако, лет через 5 он наберет ход. Сегодня для его полноценной реализации не хватает доступных 3D мониторов. Когда их стоимость упадет, частью веб-дизайна станет представление информации в объемном виде.

VR. Новый уровень интерактивности. Сегодня он, опять-таки, недоступен по финансовым соображениям. Через несколько лет воплотить такую идею будет намного проще. Вполне вероятно, что пользователям не нужна будет мышка для ознакомления сайтом. Достаточно будет лишь моргнуть глазом или кивнуть головой для перехода между страницами.  Так же советуем прочитать нашу статью 10 ТРЕНДОВ ВЕБ-ДИЗАЙНА В 2022 ГОДУ.