Тенденции веб-дизайна на 2018 год

Главный тренд наступающего года — производительность.

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

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

Больше негативного пространства

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

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

Смелая типографика. Болд

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

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

Безвкусные кнопки и кликабельные картинки выходят из моды. Даже портреты геров материала уступают путь яркой, творческой текстовой конструкции. Новый тренд преображает заголовки и пункты меню, написанные «тощим» шрифтом и мелким кеглем — становится понятно, о чём страница. Теперь призыв к действию на странице можно найти сразу — он бросится в глаза первым.

Движущиеся картинки

Синемаграфы — движущиеся картинки — втиснутся между статическим изображением и полномасштабным видео, и станут трендом веб-дизайна в 2018 году. Эти быстрые фрагменты, не такие тяжелые или вялые, как видео, создают динамическое изображение — вспомните магию движущихся фотографий в «Гарри Поттере».

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

Привлекательные синемаграфы увеличивают конверсию — наши разработчики использовали их на нескольких клиентских веб-сайтах с большим успехом. Если вы думаете, как быстро обновить свой сайт в 2018 году, добавьте движущиеся 360-градусные картинки на страницы с вашим продуктом или в меню навигации.

Выразительная анимация при прокрутке страницы

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

Эта анимация стратегична, минималистична, её цель — повысить конверсию сайта. Она заставляет пользователя продолжать скроллить до точки конверсии и одновременно знакомит с продуктом.

Такие анимации делают сайт опрятным: вместо нагромождения кнопок и меню получаем живой сайт.

ДЛЯ ЧЕГО НУЖНЫ UX И UI?

Оба направления решают общую задачу — сделать ваш бизнес процесс удобнее и понятнее для вас как компании и для вашего конечного клиента.

Прогрессивные веб-приложения

На долю приложений приходится 89% времени в мобильной среде. Многие дизайнеры признают популярность мобильных приложений и начали сочетать традиционное поведение приложений с поведением веб-страниц. Этот гибрид называется прогрессивным веб-приложением.

Функциональность веб-сайтов тоже изменится: push-уведомления, заставки, оффлайновый режим и анимированные переходы страниц — этого всего станет больше. Twitter, Washington Post и Medium уже создали прогрессивные веб-приложения, доступные по одному клику.

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

Интеллектуальные чат-боты

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

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

NLP — обработка естественного языка

Обработка естественного языка идёт в ногу с голосовым поиском. Вместо того, чтобы полагаться на ключевые слова и фразы, как современные поисковые системы, интеллектуальный разговорный бот с технологией NLP помогает компьютеру понять, что человек спрашивает на самом деле — на более естественном языке.

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

Микро-взаимодействие

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

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

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

Facebook как площадка

Можно спорить к чему эта тенденция относится больше: к цифровому маркетингу или дизайну, но Facebook становится платформой для любого контента. И такой сдвиг нельзя игнорировать.

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

Во многих случаях потенциальные клиенты могут открыть страницу Facebook ещё до вашего веб-сайта и даже не зайти на него — они просто позвонят или напишут вам.

В 2018 году развитие бизнеса на Facebook станет более важным, чем просто использование соцсети привлечения людей на сайт.

Нижние закреплённые элементы против верхних

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

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

Безопасные веб-страницы и защищённые приложения

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

В 2018 году доверие пользователей станет серьёзной задачей.

Могут ли они доверять вашей системе загрузки файлов? А вашей контактной форме? Защищена ли их электронная почта и другая личная информация? Заразит ли ваш сайт их компьютер? HTTPS для защиты информации в онлайн-банкинге и форме заказов сегодня является стандартом, но скоро пользователи потребуют безопасности и надёжности каждой веб-страницы, которую они посещают.

Вебинар Оксаны Силантьевой
«Мультимедийные пятнашки»

постройте эффективную систему планирования в редакции

осень 2018 года

 Понравилась статья? Вы можете поделиться ей со своими коллегами и друзьями: