Изучили всю Россию и хотели сделать GTA: как мы создавали проект ко Дню велосипеда для Самоката

Привет! Это Chipsa. Продолжаем историю нашей работы с Самокатом. На этот раз расскажем о проекте, который разрабатывали специально к Всемирному дню велосипеда. Мы уже создавали Музей курьера для Самоката, где реализовали полноценное трёхмерное путешествие. И сейчас снова сделали путешествие – но теперь в 2D.

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

При этом нужно было придумать такое решение, которое можно применить ко всем городам сразу, а не отрисовывать/разрабатывать каждую точку отдельно. Это и стало главным вызовом – мы хотели добавить максимум разнообразия и уложиться в сроки. Стали думать над универсальной концепцией, которая при полном изучении сайта не создавала бы у пользователя ощущение, что она сделана простым сочетанием клавиш «Ctrl+C – Ctrl+V».

Как и во время работы над Музеем курьера, Самокату было важно синхронизироваться с нашей командой, чтобы представить картину сайта именно так, как её видим мы. Благодаря прошлому проекту, у нас уже образовалась синергия и сложностей с этим не возникло.

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

Конечно, не все заказчики готовы к долгим проектам без поэтапного согласования. Тогда мы используем командный мозговой штурм, чтобы быстро генерировать идеи и искать решения без глубокого анализа или длительной подготовки. Новая задача от Самоката подходила под этот метод как нельзя лучше – и нас начало «штормить».

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

Этот нелёгкий груз лёг на плечи дизайнера проекта Жени Жалниной, которая, кстати, занималась проектированием и моделированием залов для Музея курьера, арт-директора Саши Педченко, который лично руководит дизайном в каждом проекте студии вот уже 15 лет, и пиарщика, а по совместительству и креативщика Лёши Трепачёва, который жаждет внедрять идеи и смыслы не только в пиар, но и в сами проекты.

Втроём мы сгенерировали четыре основные концепции того, как может выглядеть сайт. Начнём по порядку.

Идея №1. Минималистичные силуэты и рисунки

Мультипликационная стилистика говорит с человеком на простом и понятном для него языке. Это помогает легко включить воображение для ещё большего погружения в идеи проекта.

Идея №2. Имитация книжки-панорамки

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

Идея №3. Коллаж с графическими элементами

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

Идея №4. Процедурная генерация локаций

Честно, хотелось испытать технологию процедурной генерации и создать стилизованную, но при этом упрощённую игру по типу Pacman или, скорее, GTA. Вы же знаете, что у первой части был вид сверху? Вот и у нас чесались руки сделать что-то похожее.

Методом исключения и жарких прений выбор пал на идею №2. Оставалось понять, как лучше подать информацию, и продумать вовлекающие интерактивы.

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

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

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

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

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

Первое, с чего стартовало наше безопасное путешествие, это подготовка к велопрогулке. Каждый знает, с чего она начинается, а если нет, подсказываем: нужно надеть шлем. Не хотелось уходить в сложные механики, поэтому использовали обыкновенное модальное окно с краткой памяткой и кнопкой «надеть шлем». Продолжить велопрогулку можно только после нажатия на неё. Кто-то скажет, что с точки зрения ux это неудобно для пользователя. Но именно так мы хотели подметить необходимость экипировки шлема перед поездкой на велосипеде.

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

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

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

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

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

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

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

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

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

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

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

Вообще текстового контента оказалось много, потому что в процессе работы над ним Самокат заколлабился с 2ГИС – и мы составили подробный гид к интерактивным картам по каждому городу. Теперь эти десятки тысяч знаков можно с лёгкостью собрать в какую-нибудь Большую Велосипедную Монографию и напечатать толстую книгу.

Так как, напоминаем, мы выбрали идею №2, то основной задачей стало сделать послойную анимацию как в книжках-панорамках. По задумке, все элементы должны крутиться и вертеться в разные стороны. При этом есть центральный элемент – Земля, около которой и происходит большинство анимаций. Города появляются и скользят вокруг земной оси, по такой же траектории появляются и тексты на сайте. Внутренний круг с кустами тоже привязан к центральному элементу, но двигается медленнее, создавая иллюзию объёма.

Как получилось добиться плавности анимации? Всё почти просто. Изначально мы хотели привязаться к самому скроллу и при помощи библиотек трансформировать значения, следить за силой скролла и так далее. Чтобы привязать такое количество городов и контент между ними к скроллу, на сайте должен быть… скролл! Получается, высота сайта обязана быть больше контентной части, но такой контейнер занимал несколько гигабайт памяти. Поэтому от идеи отказались.

Пришли к тому, что теперь высота всего сайта – один экран, вес – 46 мегабайт, а как такового скролла нет вообще. По сути мы сделали прослушивание событий с устройств ввода и их обработку.

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

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

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

Итак, основные преимущества lerp:

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

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

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

У нас есть наглядная демка, особенно если поскроллить её при помощи мыши. Надеемся, вы разберетесь, как ее посмотреть.

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

– Запустили уникальный проект в стиле pop-up книги.

– Ещё больше прокачали навыки работы с 2D.

– Побывали во многих городах России, где не были раньше – пусть и виртуально.

– Наштурмили идеи, которые планируем использовать в будущем.

– Изучили новые фишки разработки и поняли, что за неё может отвечать один человек.

– Научились делать интерактивные мини-игры.

– Стали экспертами по велосипедам.

Подписывайтесь на наш телеграм-канал, где о проектах мы рассказываем чаще и больше. На написание статьи уходит много времени, а анонс запуска чего-либо – секундное дело. Да и вообще там много всего интересного – проверьте сами.