Пт, 5/04/19 – 9:26 | 2 комментария

Эта статья о том, что для успеха Landing Page важна не только визуальная привлекательность. От лендингов ждут высоких конверсий. Эффективность лендингового сайта особенно …

Читать статью »
Дизайн

Секреты веб-дизайна, примеры стильных сайтов

Тренды / ТОП

Топ лучших идей, новые тенденции и тренды WEB’а

Маркетинг

Статьи о маркетинге сайтов, примеры эффективности

Свой сайт

Как создать, оформить, сделать сайт лучше

Шаблоны сайтов

Обзоры шаблонов: лучшие темы для сайта

Главная » Тренды / ТОП

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

17 февраля 2017 Нет комментариев

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

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

Читайте также:  Тренды в веб-дизайне 2022: идеи запоминающегося UX

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

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

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

Основные тренды в веб-дизайне 2017 года

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

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

Основные тренды в дизайне сайтов на 2017 год

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

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

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

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

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

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

тренды веб дизайна 2017

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

Актуальные тренды в веб-дизайне на 2017 год

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

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

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

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

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

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

Читайте также:  11 креативных сайтов отечественных студий веб-дизайна

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

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

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

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

Читайте также:  Самые необычные и оригинальные сайты

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

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

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

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

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

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

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

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

Карточки - популярный тренд Web-дизайна 2017. Яркий пример

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

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

Плитки и минимум цветов - тренды Web-дизайна 2017

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

4. Material Design Lite (MDL)

Пример материального дизайна на сайте - WEB тренды 2017

Тренд веб-дизайна 2017: облегченный материальный дизайн

Читайте также:  Лучшие дизайны интернет-магазинов в стиле Flat и Material

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

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

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

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

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

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

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

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

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

Читайте также:  Цвета в Web дизайне: колор-тенденции (яркие тона)

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

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

Винтажные цвета в веб-дизайне - тренд 2017 года

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

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

Читайте также:  Психология влияния цвета на конверсию сайта

Тренд веб-дизайна 2017: сайты в винтажном стиле

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

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

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

Тренды веб-дизайна 2017: разделенный экран. Пример с приятным оформлением

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

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

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

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

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

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

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

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

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

Читайте также:  Как правильно использовать фоновое видео: 24 сайта в пример

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

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

тренд в веб-дизайне 2017: больше видео

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

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

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

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

тренд в веб-дизайне 2017: красивое видео

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

Читайте также:  Анимация по правилам UX-дизайна: полное руководство

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

Устоявшийся тренд в web-дизайне: интерактивный сторителлинг

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

VR - новый тренд в веб-дизайне 2017

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

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

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

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

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

VR - новый тренд в веб-дизайне 2017

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

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

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

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

Читайте также:  7 CSS-анимаций с использованием SVG + сайты применяющие эффект

Анимированный интерфейс - тренд веб-дизайна 2017

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

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

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

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

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

Читайте также:  24 вдохновляющих дизайна портфолио сайтов

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

Читайте также:  10 впечатляющих сайтов-портфолио дизайнеров и разработчиков 2017 года