11 октября прошла лекция арт-директора студии Vintage Web Production Ольги Шевченко, посвященная трендам веб-дизайна и диджитала в 2018 году. Ольга является членом жюри Awwwards и каждый день просматривает сотни новых сайтов, разработанных агентствами и дизайнерами со всего мира. Это позволяет ей отслеживать новинки и тенденции веб-разработки и дизайна. Мы записали главные месседжи лекции, а с полной версией вы можете ознакомиться по ссылке.

Итоги 2017

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

Большое меню

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

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

Большое меню. Сайт radioaktivefilm.com

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

Fashion-эффекты

Глитч, морфинг, геометрия, взрыв цвета, минимализм. Мы с Дашей Шаполовалой, идеологом Mercedez-Benz Fashion Week в Киеве, обсуждали тенденции в моде, а я рассказывала о новых веяниях в вебе. И мы нашли общие черты в совершенно разных сферах.

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

Пример морфинга. Сайт camper.com

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

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

Brand in lifestyle

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

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

Скриншот с сайта Lacoste.

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

Скриншоты с сайта Adidas. 

Storytelling

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

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

Сайт Bear Grylls. Да, по сути история рассказывается сплошным сухим текстом. Но раньше подача кейсов на сайте была классической, по сетке, с имиджевой фоткой, коротким описанием и переходом на другую страницу.  Здесь текст идет сплошняком, без сетки. Если вас цепляет месседж, вы кликаете на фразу и переходите по ссылке. Привычные 3-4 колонки уже надоели. Правда, и такой подход применим не везде, но чтобы выделиться, можно попробовать.

Новый вариант подачи текста на сайте Bear Grylls

Content is a king

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

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

Пример того, как “контент решает” на сайте weathsimple.com

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

3D

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

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

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

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

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

WEBGL, Unity

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

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

Ребята Watson/DG, словили свою нишу. Они делают сайты для фильмов, вышедших в прокат. Такой себе пост-продакшн. Для этого фильма они сделали сайт с персонажем этого трупа. Его можно тоже дергать, таскать, куда хочется, двигать. Потом выпадают сообщения: «Набери слово, он начнется взрываться». Это тоже не игра. Это сайт. И это начало 2017 года.

Промо-сайт сериала «Человек-швейцарский нож» 

VR&AR

В 3D можно сделать круто и быстро. Но все рендерится неделю. То есть, все готово, у вас одна правка – + 1неделя. Мы начали пробовать VR. Год назад это было очень сложно. Для приложения нужно было подтверждение на App Store и Google Play и еще много нюансов. Но с марта 2017 этого уже не надо делать. Можно просто зайти по ссылке на сайт и все.

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

Konterball – пример VR-игры, построенной на веб-платформе

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

Украина на Awwwards

• Украина на период середины сентября подала 39 номинантов.
• Получили 25 honorable mentions — это что-то вроде приза зрительских симпатий. Тоже считается авторитетной наградой в оценке сайта.
• 4 награды “Site of the day”. И это хорошо, потому что в прошлом году было 2.
• Также у нас увеличилось количество судей от Украины — их уже 4.

2018 год

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

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

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

Пример интерактивного скролла на сайте Volcano

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

SVG маски

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

Использование SVG-маски для дизайна перехода на сайте Rich Brown

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

Canvas

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

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

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

3D+WEBGL

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

 Сайт Globekit

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

VR

В марте 2017 появился первый сайт в VR. Их становится больше. Недавно сделали первую VR трассу на футбольном стадионе. Человек надевает маску, и ему кажется, что он на гоночной трассе.

Приспособление для виртуальных гонок от Audi. 

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

AR

Круто, что сейчас можно обойтись без приложения. Вы заходите в браузере по ссылке, и у вас должен быть маркер, который будет считывать некоторые вещи. Вы показываете этот маркер и он дорисовывает то, что вы захотите. То есть сначала в 3D делаете дизайн, показываете ему и он дорисовывает уже дополненную реальность. Можно кастомизировать под себя.

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

A frame

Это готовая библиотека, где можно найти все штуки для AR и VR. Можно посмотреть, как они работают, понаблюдать за ними в действии.

Поэтому я советую всем веб-дизайнерам идти доучиваться на 3D. Это сделает ваш сайт намного живее.

Google

Следите за ними. Они не стоят на месте. Есть такая штука, как Google experiments. Освободите пару часов времени, чтобы изучить всю красоту. Google проводит много экспериментов, к которым подключает разработчиков, агентства. Из последнего – использование big data.

А недавно Awwwards стали сотрудничать с Google. Это значит, что сейчас пойдет акцент на мобильные сайты. Начнется оптимизация технологий, чтобы сделать их легче. Google начинает все больше проявлять интерес к мобильному вебу.

WebVj

Очень новая заморочка. Построение страницы происходит на основе данных. Есть один японец, Масатацу Накамура, который особо серьезно этим занимается. Его графика сделана полностью программистом, а не дизайнерами. Он многое делает для Google Experiments.

Пример графики Масатацу Накамура, сделанной при помощи WebVJ

Трендосики

Самый задаваемый вопрос — “Какой цвет/шрифт/паттерн будет трендовым в следующем году?”. Я это называю “трендосиками”.

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

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

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

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

За кем следить

Из любимых

1. JAM3— сумасшедшие ребята из Канады. Всего их 43 человека, но уже мировое агентство.
2. AQuest  — итальянцы. Помешаны на последних технологиях веба.
3. Hellomonday – много интерактива с пользователями. Любят нестандартные переходы, нестандартно разбивают страницы. Остаются вопросы к навигации и UX, но выглядят очень красиво.
4. Goodmorning – норвежцы, агентство года в 2016. У них можно подсмотреть классный корпоративный скандинавский стиль.
5. Watsons/DG – космонавты, которых я обожаю. Швейцарский нож – их работа. Треш и космос, видео, 3D– это все о них.
6. Unit9 – огромное агентство, представительства по всему миру. Около 50 Каннских львов. Сайты – 1% от предоставляемых услуг. Люблю их кампанию, где они сделали человека из воды.
7. Lokomotiv – мои любимые канадские ребята. 1,5 года назад познакомилась с их креативным директором. И буквально через год после того, как они взяли site of the day на Awwwrds, они вошли в топ 20 лучших агентств мира. Все потому, что у них появился сумасшедший фронт-ендер, который роется во всех библиотеках. Так они выработали свой почерк. Такой темп – это колоссально.

(Больше ссылок для вдохновения от Ольги Шевченко можно найти в ее статье из рубрики #полезныеископаемые)

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

Больше примеров, инсайтов, историй в полной версии лекции, которую можно приобрести по ссылке.