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

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

Читайте также: 8 веб-трендов на 2019 год: современные лэйауты

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

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

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

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

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

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

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

Читайте также: 20 лучших примеров дизайна главной страницы сайта

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

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

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

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

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

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

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

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

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

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

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

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

Различные эксперименты с навигацией по сайту. При столь неоднозначном отношении к «бургерам», в 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)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Перевела Катя Гонзуль.

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

Мы предлагаем рассмотреть тенденции веб-дизайна, которые стоит знать в 2017. Не все они новые; некоторые из них – стили, которые завоевывали и/или сохраняли свою популярность в 2016 году. Их активное использование ожидается и в проектировании сайтов нынешнего года.

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

Цвет

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

Компания Pantone представила свой цвет года – Greenery. Он был выбран как символ новых начинаний; освежающий и оживляющий оттенок. Мы не ждем, что в 2017 году каждый веб-сайт будет зеленым. Но уверены, что несколько веб-дизайнов, вдохновленных этим цветом, все же появится.

Если вы ищете вдохновения в вопросе цветовых комбинаций, то некоторые из сочетаний можете увидеть на странице Pantone Color of 2017.

Из-за популярности Google Material Design цвета и цветовые сочетания, рекомендуемые этими принципами дизайна, скорее всего, войдут в TOP-2017. Цвета яркие и смелые. Даже за пределами GMD в последнее время было много примеров веб-дизайна, включающих яркие цвета.

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

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

Такие сайты, как Spotify, очень удачно использовали дуплексные изображения. Вы, возможно, заметили, что двухцветность также популярна для иконок на YouTube.

Сайт Adison Partners успешно использовал дуплекс в пределах своего веб-дизайна.

Современное ретро

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

Интерактивное резюме Робби Леонарди – блестящий пример современного ретро. Он объединил полусовременный пиксель-арт-стиль с боковой прокруткой видеоигры Супер Mарио.

Кондитерская Sweet Magnolia Gelato выбрала винтажный дизайн с использованием привлекательной анимации. Это придает веб-сайту современный вид, одновременно сохраняя шарм старины.

Black Market также остановился на винтаже в сочетании с модульным макетом. На сайте есть деревенский призыв, который отлично подходит к тому, что предлагает Black Market .

Синемаграфия

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

Синемаграфией может быть GIF-файл или видео. Оба могут быть довольно большими по размеру файлами, если сняты в высоком разрешении. Синемаграфия в формате GIF легко достигает размеров более 3 MB, так что вам, возможно, будет логичнее загрузить видео.

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

Material Design

Material Design от Google появился в поле зрения еще в 2014 году. По существу, он построен на принципе бумаги и чернил, переводя их качества в цифровой формат. Например, использование теней и краев, чтобы указать на то, к чему вы должны прикоснуться: кнопки.

За последние пару лет Material Design набирает популярность с многочисленными темами и шаблонами, созданными для CMS (Content Management Systems), а также интерфейсными структурами, такими как Twitter Bootstrap. Одно из критических замечаний, которые вы можете услышать об этом сервисе, – то, что многие сайты, разработанные системой Material Design, очень похожи; возможно, даже слишком похожи. Это происходит из-за утрированного следования стилю Material Design – вместо применения основных принципов.

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

Отличным примером Мaterial Design в наиболее чистой форме является Material Design Blog (неожиданно, правда?). Здесь вы можете увидеть большинство принципов MD в действии.

Прямолинейная креативная типографика

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

Digital-агентство Nurture объединило типографику с видео, чтобы создать стильный первоклассный веб-сайт. Видео, проигрывающееся в фоновом режиме, просматривается только через одну большую букву со слова “nurture”. Видео и буквы меняются по мере вашего передвижения по разделам домашней страницы.

Friends – дизайн-агентство, основанное в США. На своем сайте оно использует большой жирный шрифт, который действительно выделяется как главная особенность.

Модульный дизайн

Модульный дизайн – не новинка, но он набирает популярность в течение нескольких последних лет. Это подход к проектированию с использованием шаблона модульной сетки расположения элементов. Взглянув на данные Google Trends, можно проследить рост интереса к модульному дизайну уже с начала 2011 года (по данным частоты запросов). И мы надеемся на сохранение этой тенденции и в 2017 году.

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

Университет Warwick также использовал модульный дизайн в проектировании своей странички.

SVGs (Scalable Vector Graphics)

Устали от логотипов и изменений размеров других изображений? Если да, стоит попробовать файлы SVG вместо обычных форматов PNG и JPG. Формат SVG подходит не для всех изображений; они будут работать только с векторной графикой, так что вы не сможете бесконечно масштабировать любые фотографии. Тем не менее, для таких изображений, как логотипы, формат работает блестяще.

SVG появился примерно с 1999 года, но до сих пор мы видим форматы PNG и JPG там, где SVG был бы более уместен. Хотя сейчас, вероятно, все-таки происходят некоторые изменения. Вы наверняка встречаете все больше файлов SVG, и данные Google Trends показывают, что интерес к этому формату растет начиная с 2013. В этом году ожидается еще более широкое использование этого формата, а также множество новых статей на эту тему.

Почему стоит использовать SVG? Основная причина заключается в том, что ваше SVG-изображение должно отлично отображаться независимо от масштаба. Кроме того, изображения в формате SVG, как правило, очень незначительны по объему. Это работает в пользу скорости вашей страницы.

Если хотите увидеть пример реального SVG, не ходите далеко: посмотрите на логотип WPMUDEV в левом верхнем углу их страницы. Если увеличить масштаб с помощью браузера, можно будет увидеть, что логотип не пикселизируется, сколько бы вы его не приближали. Наоборот, логотип WPMUDEV остается резким и качественным.

Flexbox

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

Flexbox неуклонно набирает обороты. И вместе с тем, в настоящее время он поддерживается всеми современными браузерами. Вероятно, все больше разработчиков интерфейсов будут использовать его. Вы можете прочитать больше о Flexbox в наших гидах: Understanding CSS3 Flexbox для Clean, Hack-Free Responsive Design и Understanding CSS Grids для Modern WordPress Website Design.

360°-видео и виртуальная реальность

2016 был годом VR (virtual reality). Были выпущены многочисленные игровые VR-наушники, и полнообзорные видео побили все рекорды по поисковым запросам. Надеюсь, в течение этого года дизайнеры подумают над интересными способами размещения панорамных видео на веб-сайтах.

Если вы еще не знали, Google VR View – это API (интерфейс программирования приложения) JavaScript, который позволяет без затруднений добавить 360°-видео на свой собственный веб-сайт.

Интерактивный веб-VR был создан для нового фильма «Ведьма из Блэр» (Blair Witch ). Его лучше всего смотреть на мобильном телефоне с использованием гарнитуры VR.

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

Микровзаимодействия – одиночные моменты, когда пользователь взаимодействует с вашим сайтом. Это не всегда должен быть сайт сам по себе, но в нашем случае все именно так. Этими моментами могут быть такие действия, как «оценка» поста, отправка сообщения или заполнение анкеты. Цель микровзаимодействий – обеспечить обратную связь и руководство для пользователя, одновременно улучшая опыт взаимодействия (user experience).

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

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

1. Нестандартный «абстрактный» дизайн

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

Нестандартное расположение элементов дает больше интересных возможностей: позволяет использовать все пространство страницы, добавлять в макет наслоение объектов и ощущение глубины. Вы сможете реализовать дизайн, впечатляющий пользователей даже без красочного полноэкранного видео или анимации. Учитывая сотни тысяч классических макетов в сети, абстрактные уникальные решения практически всегда будут выделяться и привлекать внимание посетителей сайта (по типу WOW фактора). И этим нужно пользоваться!

2. Новые варианты навигации

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

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

3. Карточки в дизайне

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

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

4. Сплит макеты с разделением экрана на 2 части

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

Дизайнер сможет использовать различные визуальные техники оформления в соседних блоках в рамках одного веб-проекта. А результат при этом будет выглядеть естественно. Кстати, сплит макеты хорошо срабатывают для Call to Action в лендингах. Детальнее о методе .

5. Большая и оригинальная типографика

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

Вместе с тем многие сайты избавляются от стандартных системных шрифтов, что позволяет значительно разнообразить их внешний вид. С ростом количества сервисов бесплатных оригинальных веб-шрифтов (Google Fonts, Typekit), их популярность еще больше возрастет. Похоже, что в 2017 нас также ждут эксперименты в области типографии сайтов. Главное в этом деле не перестараться — помните, что текст должен быть хорошо читаем. Кстати, если вы работаете с вордпресс то вам может пригодиться статья Как подключить шрифт в WordPress (в том числе и Google Fonts).

6. Градиенты и яркие цвета

Еще одна тенденция веб-дизайна 2017 — использование ярких цветовых палитр для градиентов (и не только). Старт эры плоского дизайна привнес в онлайн интересные фишки, но работать в этом стиле нужно весьма аккуратно, т.к. он может способствовать обезличиванию сайта. Дабы решить проблему некоторые специалисты начали экспериментировать с яркими цветами и градиентными решениями. В текущем году тенденция продолжит развиваться, причем не только в Web`е (наверняка, все уже заметили недавнее обновление Instagram).

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

7. Анимация и микро-взаимодействия

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

8. Параллакс эффект

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

9. Почти виртуальная реальность

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

10. Тактильный, естественный дизайн

Данный тренд объединяет сразу два направления — натуральная цветовая гамма и тактильный дизайн. Чрезмерная увлеченность плоскими Flat решениями превратила многие веб-проекты в однообразные безликие Bootstrap макеты. Сейчас некоторые дизайнеры пытаются отходить в сторону более естественных решений, например, они размещают фото и реалистичные 3D модели дабы у пользователя было ощущение возможности прикоснуться и потрогать объекты на сайте. Также они используют природные материалы в качестве текстур, иллюстраций и фонов + натуральные оттенки (зеленые, коричневые, серые, нейтральные металлические).

11. Остальные тенденции веб-дизайна 2017

В процессе изучения основных трендов дизайна сайтов 2017 года нам встречались разные мнения. С самыми значимыми вариантами вы уже ознакомились, а теперь кратко расскажем о парочке предположений, которые оказались менее популярны. Часть из них, кстати, активно использовалась и ранее, просто в текущем году тенденция сохранится.

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

Геометрические формы

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

Уникальные иллюстрации

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

Итого

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

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

Внимание, контент

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

Так что в 2017 году мы сможем увидеть медленное движение назад к основам, когда дизайнеры будут делать главный акцент на контенте. Некоторые функциональные элементы перестанут быть актуальными, вполне возможно, что их дизайн будет переосмыслен, возможно, появится новый, более понятный функционал. Уже сейчас ощущается, что тренд к упрощению набирает силу, так что движение к основам это не регресс, а движение вперед. Пользователю не нужны красивые кнопки CTA или формы регистрации – все, что интересует людей сегодня, это контент и дизайнеры должны предоставить его так, чтобы у посетителя сайта не было лишних препятствий на пути к ознакомлению с содержанием.

Конец эпохи флэт-дизайна

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

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

Геометрические формы, линии и узоры

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

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

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

Широкое использование анимации

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

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

Упрощенная навигация

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

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

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

Кастомная графика

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

Рост значения целевых страниц

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

Вместо заключения

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

Веб-дизайн 2017-2018 | Тренды современного дизайна и разработки

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

ТРЕНДЫ ВЕБ-ДИЗАЙНА

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

Графический дизайн

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

Векторные изображения

Увеличивается использование вектора на сайтах, он имеет малый вес, а значит загрузка идет быстрее. Так как вектор можно растягивать и сжимать как угодно, ваша графика будет всегда выглядеть отлично на экране любых устройств с любым разрешением. Для векторных изображений используйте SVG (Scalable Vector Graphics) формат. Большинство векторных редакторов позволяют сохранять в этот формат и нет необходимости для специфического софта.

Бесцветные - призрачные кнопки

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

Нажмите на изображение для его увеличения

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

Нажмите на изображение для его увеличения

Анимация, видео и интерактивные объекты

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

Сложные сетки

Еще в конце 2016 появилось направление сайтов с использованием динамических, сложных сеток с ультрасовременным дизайном.

Геометрия в разных формах

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

Нажмите на изображение для его увеличения

Модные цвета

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

Безусловная адаптация

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

Споры не утихают как лучше, ставить иконку или надпись. Результаты тестирования на 240 000 пользователях мобильных устройств.

Альтернативы мобильных меню

Если разделов на сайте не много, то лучше использовать вкладки как меню, или добавить к ним в конце кнопку в выпадающим дополнительным меню.

Гибкое динамичное меню

Решение заключается в меню, которое подстраивается под ширину экрана, показывая столько вкладок, сколько можно, а что не входит – прячет под «Больше».

ТРЕНДЫ ВЕБ-РАЗРАБОТКИ

Продуманный дизайн

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

Текста меньше – да лучше!

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