Skvot

Mag

Skvot Mag
Курсы по теме:

Играть в новой вкладке

Гейм-механики для веба — на кейсах Netflix, Max Mara, Balenciaga и других.
card-photo
card-photo
Аня
Сидельникова

Автор в SKVOT

21 января, 2021 / Дизайн / Статья

Быстрый скрол, фиксация на ключевых словах и заголовках, меню, клик, скрол — закрыть. В среднем мы проводим на сайте 15 секунд. И задерживаемся подольше в двух случаях: если нашли суперактуальную информацию, в которую готовы вникать, или попали на интерактив.

Геймификация — самый эффективный способ преодолеть «правило 15 секунд».

Даже простые игровые сценарии, зашитые в веб-продукт, цепляют и запоминаются.

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

 

Виртуальный музей 

Диджитал-агентство MediaMonks в 2020 году работало сразу над несколькими веб-проектами для стриминговых сервисов-гигантов — TNT и Netflix. 

Ко старту второго сезона сериала «Алиенист» команда MediaMonks превратила сайт проекта в интерактивную карту Нью-Йорка 1890-х, и после выхода каждого эпизода ее дополняли новыми элементами. Что-то похожее делали  и к первому сезону. Для другого сериала, «Тьма», креаторы разработали полный интерактивный гайд по героям, событиям и местам.

А в конце 2020 года MediaMonks сделал крутой сайт для проекта-коллаборации Netflix и Бруклинского музея — виртуальную выставку знаковых костюмов из сериалов «Корона» и «Королевский гамбит»:

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

В чем суть. The Queen and The Crown — это виртуальная экспозиция, по которой можно ходить и взаимодействовать с экспонатами (если хоть раз видел музейные онлайн-проекты, то и здесь сориентируешься). Над каждым артефактом — ключ, который ведет на отдельную страницу. Внутри: краткая информация о костюме, фрагмент из фильма, несколько крупных планов.

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

Кнопки, наклейки, рычаги

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

Project Turntable — это интерактивный одностраничный веб-проект, который разработала команда дизайнеров и стратегов ThreeSixtyEight. Собрали его в конструкторе сайтов Webflow. 

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

Еще на сайте можно раскрасить маскота агентства и наткнуться на несколько пасхалок «для своих» (например, в одном из динамиков открывается упаковка холодного пива в снегу). И, в общем-то, все.

Где пригодится. Такая мини-игра помогает визуализировать простой месседж и развлечь постоянных подписчиков и клиентов. А для креативного агентства такой проект — еще и кейс для портфолио в духе «смотри, что мы можем запилить в Webflow».

Интерактивная карта

Самый известный кинопроект режиссера Джулиуса Она — фантастический триллер «Парадокс Кловерфилда», релиз которого состоялся в 2018 году на Netflix. Остальные проекты (телевизионные, музыкальные, короткий метр) режиссер собрал на личном сайте Open Continents.

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

Все истории, которые снял Джулиус Она, привязаны к месту действия. Сейчас активны подборки фильмов на трех континентах из семи: «Африканские дни», «Европейские истории» и «Улицы Нью-Йорка».

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

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

Фэшн-фабрика

В 2020 году сразу несколько модных брендов представили промо новых коллекций в гейм-формате. Balenciaga отправила игроков пробежаться по городу будущего и рассмотреть на прохожих коллекцию осень-2021. А Max Mara представила уже культовую Teddy-коллекцию в виде фабрики мишек.

Легендарное пальто Teddy Bear выпускают с 2013 года — его носят селебритис, с ним прочно ассоциируется бренд. Гимном медвежьей одержимости Max Mara стал игровой сайт Max Mara Bearing Gifts:

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

Где пригодится. И Balenciaga, и Max Mara используют самые простые игровые техники: перемещаться по стрелкам или жать на кнопки. Так можно геймифицировать презентацию новой коллекции или линейки продуктов.

Доска и маркер

Нидерландский дизайнер Льюис Аткинс работает с Nike, Nokia, Huawei, Deutsche Telekom, Converse, BMW, Microsoft — ищет «смысл, красоту и юмор в абсурде, который нас окружает». 

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

На главной странице сайта Аткинс разместил свое фото и включил тулзу, которая позволяет его разрисовать. Или сделать подпись, или закрасить полностью, или добавить рыбью тушку, или надеть шапку. Главное — вовремя остановиться и не залипнуть на пару часов.

В чем суть. Большая стрелка курсора, один синий цвет, управление мышкой. Рисуешь — стираешь. Аткинса вдохновляла его же привычка дорисовывать газетные фото. 

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

Взрыв текста

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

Например, разработчик Джонни МакЛафлин собрал простой сайт-визитку, на котором при каждом клике вылезает тигриная лапа и превращает слова и картинки в смешную неразборчивую кучу. А девелопер Черри Хартиган на главной странице своего сайта сделала мини-гейм с Пакманом, пожирающим буквы, — и дарит пиво каждому, кто наберет 100 очков. 

В чем суть. Техника на сайте Хартиган суперпростая: фигурка Пакмана управляется кнопками со стрелками, он движется по тексту и съедает строчки, набирая очки. Отметка в 100 очков — «ура, напишите мне, выпьем вместе пива». Съеденный текст восстанавливается, если страницу обновить. 

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

Короче 

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

Геймификация веб-проекта — хороший подход, если нужно:

#1. Рассказать по-новому о чем-то известном. Например, в формате онлайн-экспозиции.

#2. Визуализировать месседж. Даже очень простой, вроде «вот что мы слушаем на работе».

#3. Организовать контент. Например, разместив его на интерактивной карте.

#4. Презентовать линейку продуктов. И направить внимание пользователя по нужному пути.

#5. Фрикануть. Интерактив может быть чистым фаном — и отлично впишется в абсурдный веб-проект.

#6. Сделать акцент на тексте. Даже если для этого сам текст придется разрушить.

Поделиться материалом