Главная › Новости

9 трендов в веб-дизайне на 2017 год

Опубликовано: 01.09.2018

5 трендов в дизайне логотипов в 2016 году

Что 2017-й год вносит нового в Веб? Каких главных направлений и трендов в веб-дизайне, стоит ожидать? Сейчас все выясним – в формате емкого обзора самых ярких тенденций, на примерах TRENDY сайтов.

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

Тренды дизайна 2018. Что рисовать на стоки? Стили и направления

В плане эстетической привлекательности, 3 года подряд плоский стиль господствовал в WEB-е. Затем, Google представил материальный дизайн, что немного вывело нас из визуальной абстракции. В 2017 году веб-дизайн сделает еще один шаг обратно – к реалистичности. Будь то формы, выбор цвета или функционала — 2017-й станет годом гибридов, в которых пересекутся реалии физического мира и технологии. Результатом следует ожидать лучшие возможности для просмотра веб-страниц.

Топ 9 ► Ништяки для Веб Разработчика!

Вот девять веб-дизайн трендов, способных сократить этот разрыв.

1. Pop-out навигация

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

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

Преимущества:

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

Лучшие практики:

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

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

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

Дизайнеры часто следуют этому тренду, применяя заглавные буквы.

Гамбургер-иконки с крестиком для открытия / закрытия меню. Поскольку стандарт позволяет, правильнее будет совместить их в одном значке для большей ясности и наглядности.

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

2.  Вопреки парадигмам навигации – альтернативы

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

Преимущества нестандартной навигации:

Уникальный дизайн Новации привлекают Расширяется опыт пользования (UX) Для дизайнеров – новые возможности оформления сайтов

Лучшие практики:

Различные эксперименты с навигацией по сайту. При столь неоднозначном отношении к «бургерам», в 2017 году надо ждать появления интересных новшеств в навигации.

Уникальное меню Hillsiderancho.com сочетает верхнюю, левую, правую и скролл навигацию

Вообще без меню навигации. Современный пользователь сталкивается с массой контента и ему не надо объяснять, что делать дальше. Скроллить! На органичность такого поведения уже обратили внимание в предыдущих веб-трендах (горизонтальная, бесконечная прокрутка, управление с клавиатуры, жестами…). Некоторые дизайнеры отказываются от меню совсем, предлагая посетителю использовать / получать опыт «продвинутого» исследования сайтов. Адаптация сайтов под мобильные и планшеты, также меняет UX / сами интерфейсы и открывает перспективы для горизонтальной прокрутки.

Сайт не имеет навигационного меню – просят скроллить для обнаружения контента, можете листать курсором

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

Используется pop over навигация, когда наведение на одну из 6 секций меняет фон всего полноэкранного меню

3. Карточки – вдохновение носимой электроникой

Как мобильные пользователи изменили дизайн современных сайтов, так носимые устройства начинают влиять на их оформление. С десятками миллионов проданных с 2015-го года носимых гаджетов, их пользователи научились ценить рациональное совершенство и в других сферах. Экономя место на экране, носимая электроника приучит упрощать визуально и веб-дизайнеров, а  маркетологов –  еще больше конкретизировать и формализовать задачи сайтов. Главные правила веб-дизайна по принципу контейнеров: стильно, лаконично и без больших усилий – идеология «less is more» не ограничивает себя размерами экранов.

Преимущества:

Оптимизированный UX дизайн Меньше неясностей и отвлекающих факторов Минимализм ускоряет загрузку сайта

Лучшие практики:

Плитки, принцип контейнеров и блоки в структуре веб-страниц. Тренд сохраняется уже не один год (2014 – 2016-й…) и вероятно 2017 год продолжит сложившуюся тенденцию. Популярные сейчас и новые модели гаджетов («умные» очки, часы, браслеты, прищепки, встроенные в одежду сенсоры…) выполнены в лаконичном стиле и столь же ненавязчиво информируют пользователя. Ожидаемо, носимые технологии вдохнут новую жизнь в легко считываемые плиточные интерфейсы. Контейнерная модель карточного UI подразумевает упорядочение с самодостаточностью и успешно масштабируется для больших экранов.

Крупные SVG иконки. Иконке нужна масштабируемость, простота – чтобы смотрелась на HD устройствах и замечалась беглым взглядом.

Строгая цветовая палитра. Модные цветовые схемы возвращаются сейчас к базовым основам. Двухцветный дизайн сайта (дуотон) или черно-белое оформление с добавлением одного цвета становятся все популярнее.

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

4. Material Design Lite (MDL)

Облегченная реализация материального дизайна от Google (MDL) предоставляет библиотеку шаблонов, наборы элементов (карточки, формы, иконки, кнопки …) и является интерпретацией каталога готовых Polymer-компонентов.

С руководствами, по уже существующим шаблонам и open-source компонентам, MDL делает материальный дизайн открытым для внедрения на любом сайте или приложении. Псевдо-3D-слои, тени, анимации – интерфейсные элементы классического веб-дизайна, приближающие юзабилити к имитации реального мира.

Преимущества:

MDL отличается в лучшую сторону от оформления традиционных сайтов, сохраняя изначальные выгоды классического веб-дизайна Легко вникать благодаря наглядности реалистичного интерфейса Кроссплатформенная доступность для всех устройств (без привязки к JS)

Лучшие практики:

Механика материального мира. Рассматривайте стилистические элементы MDL, как как реальные физические объекты, а именно:

Тени должны выглядеть, как отбрасываемые естественным источником света Размер и толщину элементов выбирайте, как для реальных объектов – в соответствии с физическими законами Движение – реакция на пользовательское взаимодействие

Кастомизация. Воспользуйтесь преимуществами библиотеки компонентов MDL, отбирая необходимое в нужном сочетании.

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

5. Винтажные цвета

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

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

gassiheld.de применяет позитивный и уютный оранжевый, чтобы сделать продающий сайт гостеприимнее

Современный веб-сайт в винтажносм стиле – пример тренда из рунета

6. Разделенный экран

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

Преимущества:

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

Лучшие практики:

Сплит-экран — удобный инструмент продвижения контента. Разделение экрана предполагает определенную взаимосвязь контента – дополняющего или контрастирующего. Продумайте этот момент, у каждого варианта свои (примерно равные) преимущества.

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

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

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

Интересные вариации тренда:

7. Больше видео

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

Будущее готовит новые возможности для видео, вроде интерактивного сторителлинга, описанного ниже.

Преимущества:  

Видео завлекает Большой потенциал для эмоциональной связи с пользователем Увеличивает среднюю длительность просмотра страниц Больше гибкости и универсальности в сравнении со статичными изображениями

Лучшие практики:

Высокое качество. Визуальная значимость. Видео развивается в обоих направлениях. Выбирайте форматы высокой четкости и осваивайте кинематографические техники на своем ресурсе.

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

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

8. В ожидании виртуальной реальности

Заглядывая вперед в 2017 год, можно предсказать: VR-технологии (Virtual Reality) начнут просачиваться в веб-дизайн. Но глобальный IT-тренд не потребует спец. устройств для реализации захватывающих возможностей. Как увидим скоро, мобильные и десктоп экраны позволят нам пожинать выгоды от виртуальной реальности.

Преимущества:

Увлекательный и погружающий формат UX Позволит действовать на опережение по разным вопросам Впечатляющий (в визуальном плане) опыт взаимодействия Интуитивный и реалистичный интерфейс  

Лучшие практики:

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

Дистанционность и комфортность. В VR, дистанционность определяет то, как пользователь сможет взаимодействовать с определенными элементами. Без плоских 2D экранов, к которым мы привыкли, VR-дизайнерам пришлось бы внедрять спец. разработки для создания реалистичных расстояний между объектами.

Дьявол кроется в деталях. Виртуальная реальность может быть и молода, но уже имеет общепринятые передовые практики:

Избегайте «головокружительных» перемещений Используйте горизонт, как базовый ориентир Моделируйте рабочую обстановку, не вынуждая пользователя хорошенько осмотреться, для понимания происходящего Разрабатывайте либо абсолютно реалистичный сценарий, либо полностью выдуманный, но не смешивайте эти два подхода

9. Анимированный интерфейс с микроитерациями

Движение это жизнь и человек с удовольствием наблюдает за уместными и предсказуемыми изменениями. Однако, неожиданность / резкость при этом – инстинктивно воспринимается нами, как сигнал тревоги. Сегодня в тренде легкая анимация.

Преимущества:

При органичной интеграции в веб-страницу, анимация будет напоминать элемент дизайна Интерактивное поощрение поьзователей за действие (наведение указателя, клик, скроллинг)

Лучшие практики

Анимированный маршрут для потребителя информации. Запускаемые в процессе прокрутки микроитерации, как будто указывают на что обращать внимание. Легкая анимация не только создает уникальный пользовательский опыт (UX) и впечатление от дизайна, но и добавляет персональности.

Японская компания дизайна интерьеров. Микроитерации подсказывают переходы в меню, главной, портфолио, страницах с UI элементами