Тренды веб-дизайна в 2018 году

Нет времени читать? Сохраните материал
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Большое меню с триггерами

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

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

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

Fashion-эффекты

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

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

Brand in lifestyle

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

Сейчас под коллекции одежды запускаются отдельные небольшие промо-сайты. Пример с Lacoste. Тональность кампании — легкость, воздушность. Это настроение и передается визуально. Вы буквально парируете между предметами одежды. Естественно, потом вы перейдете на понравившуюся модель, и вас переводят на классический e-commerce. Но притягивает вас не он, а эта ассоциация легкости в одежде и в стиле жизни.

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

Storytelling

Был, есть и будет. Правда, меняет форму.

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

Content is a king

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

Weathsimple — инвестиционная компания, которая рассказывает о своих услугах и предлагает пакеты. У ребят был просто текст. Но они отрисовали под него 3D-иллюстрацию, которую еще можно заанимировать. Придумали персонажа – монетку. По скроллу она переходит на другие экраны и с ней что-то происходит. Они разбавляют текст диаграммой, таблицами. А будь это стоковое фото, возможно, не так интересно было бы читать. У них месседжи дополнены графикой , чтобы их было легче воспринимать. В конце — отличный прием. Монетка падает, будто бы в ваш карман. У вас подсознательно откладывается «Вы становитесь богаче». Чудесный сайт.

Да, внутри разбираться со всеми пакетами не так просто, нужно вникать. Но главная страница выступает имиджевой. Ее цель — зацепить посетителя, заставить его заглянуть внутрь.

3D эффекты

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

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

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

A world with no heros. Сайт-игра. Бегаешь по Боливии, играешь в наркокартель. У него отдельные маркетинговые цели, поговорим об исполнении. Все очень детализировано. Если бы сделали в виде видео, получилось бы очень дорого. А так вы взяли 3D-шника, который за месяц выполнил работу. Проще, дешевле, меньше весит. Вы ходите по сайту, исполняете миссию, вам приходят сообщения о передвижениях – все красиво.

На мобильной версии, правда, нет такой детализации, но тоже работает. И это не игра, это сайт уже. Главное, что грузится за один раз. Сейчас загрузки страницы никто не будет ждать 30 секунд. 3-5 максимум. И дизайнеру нужно помнить об этом, выбирая изображения, формат видео, эффекты и прочее.

Интерактивный скролл

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

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

Новая тема для баттлов UI/UX дизайнеров — насколько это удобно? Но если все грамотно продумать, может хорошо получится.

SVG маски

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

Кто пользуется фотошопом, то там это можно сделать, просто вырезав маской дырку в слое. Либо наложением 6 квадратов. Мы для нашего клиента с помощью этой штуки сделали переход с экрана на экран. Открытие картинки из формы – тоже SVG маска. Но если посмотреть на макет, то он выглядит, как статическая картинка.

Canvas

Это уже сложно. Обязательно нужен человек с пониманием математических аспектов процесса. Некоторые вещи можно взять в библиотеках. Но В SVG нет синхронизации с курсором. А здесь есть.

Сайт Climachill от Adidas, к примеру.

Морфинг с буквой – это Canvas. Перелив градиентов — это Canvas. И это популярно уже несколько лет, но устареет не скоро. Потому что мало весит, и это 2D графика, которую сложно повторить. Подойдет тем, кто хочет много «вау» у себя на сайте.

3D+WEBGL

Направление будет развиваться. Когда вы делаете даже маленький, но качественный видеоролик на 1 минуту — это минимум 10 человек в команде. Когда в 3D — это 1 дизайнер. А webgl – это +1 разработчик. 3D может быть классическим, как на сайте Globekit. Выглядит фантастически, уникально. Хотя состоит из 6 слайдов всего.

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