С модным вайбом: сделали 3D-модели и анимацию персонажа для NFT приложения StepApp

Как началось наше сотрудничество 

Небольшая предыстория о том, как мы начали работать с командой StepApp 😀 В прошлом году они запустили сайд-проект — NFT приложение, где пользователи могут наряжать 3D-персонажей в стильную одежду. Инхаус-дизайнеры были заняты на основном продукте, поэтому руководитель StepApp решил подключить внешних подрядчиков. 

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

Они увидели наши работы на Dribbble и поняли — вот оно. Заказчику понравилось, как мы работает с цветами, текстурами и какие визуальные приемы используем. И тут случился мэтч 🔥

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

Клиенту был нужен супер-вовлеченный, креативный и смелый дизайнер, который будет с ним и его командой на одной волне

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

Клиент изучил портфолио ребят и пообщался с теми, чьи работы зашли ему больше всего. Ну а потом мы ударили по рукам и полетели креативить. Задача была такая: сделать 3D-персонажей и продумать UI/UX дизайн для мобильного приложения. 

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

А пока посмотрите, что у нас получилось в итоге: 

Вот таких персонажей мы сделали для нашего первого совместного проекта: ребята получились на стиле

Мы (и наши дизайнеры) растопили сердце заказчика, и через некоторое время он вернулся к нам с новой задачей. Нужно было отрисовать 3D-модели NFT кроссовок для основного продукта — приложения StepApp. 

Разрабатываем продукты для бизнеса и стартапов

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

Получить оценку бесплатно

Самые стильные NFT кроссовки: как в 2D, только 3D

В StepApp реализована популярная в крипто- и финтех-проектах механика: пользователь покупает NFT-актив и зарабатывает токены — внутреннюю валюту приложения — выполняя определенные действия. Например, в StepApp можно приобрести NFT-кроссовки, бегать и получать за это токены, которые потом можно обменять на криптовалюту. Такая модель называется «do-to-earn», буквально: делай и зарабатывай. 

В приложении уже были 2D-кроссовки, но заказчик хотел проапгрейдить их до 3D, чтобы выпустить с ними новую NFT коллекцию. И поставил нам задачу: сделайте кроссовки примерно такими, как нарисованные в 2D…

Такие референсы 2D-кроссовок принес нам заказчик. Они уже были в приложении, так что нужно было придумать что-то в похожей стилистике, но только для 3D 

…но только чтобы они напоминали реальную обувь.

Референсы «настоящих» кроссовок, подобранные нашим проектным менеджером

То есть, нам нужно было сделать что-то мультяшное и в то же время реалистичное, но в 3D. Интересная и по-своему противоречивая задача 🙃

Наш дизайнер попробовал все это взболтать и смешать. Когда он работал над первой итерацией кроссовок, то тщательно отрисовал даже швы. Если не приглядываться, кажется, будто перед тобой фотка с витрины, а не 3D-модель — посмотрите сами 👇

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

Когда мы презентовали результат заказчику, он сказал, что они выглядят какими-то пластилиновыми. Так что в первый раз — мимо.

Заказчик прислал нам дополнительные референсы кроссовок, стиль которых ему нравился

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

Вот что получилось во второй раз 👍

Оказалось, что именно такое направление стилистики наиболее близко к тому, что заказчик хотел видеть в приложении

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

Третья — и финальная — итерация. Зацените 😎 Нам удалось найти баланс между броской мультяшной стилистикой и эстетикой модных и дорогих кроссовок.

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

И другие модели кроссовок:

Результат настолько понравился заказчику, что он принес нам еще одну задачу в рамках проекта 😀 Дополнительно мы сделали анимацию для экрана загрузки приложения. 

Кроме исключительно креативных задач, нужно было учитывать технические нюансы. Например, настроить все так, чтобы разработчики могли брать цвета и текстуры 3D-кроссовок и использовать их для автоматической генерации новых вариантов. Это позволяло создавать до ста уникальных NFT-кроссовок.

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

Ищете команду опытных и креативных дизайнеров для своего проекта?

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

Получить оценку

(Ре)анимировали 3D-персонажа

Вскоре заказчик вернулся с еще одной дополнительной задачей в рамках проекта — нужно было переделать анимацию 3D-персонажа, которую до нас делал другой дизайнер. Заказчику не нравился результат: вышло не совсем то, что было нужно…

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

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

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

У 3D-модели не было скелета 🦴 Вы спросите: а зачем он ей нужен, какой еще скелет? 🤨 Но в 3D-анимации кости и скелет ставят для того, чтобы управлять движениями модели и добиться большего реализма. Иначе у модели будут неестественно изгибаться ноги или руки — что, в общем, и случилось с персонажем. Из-за отсутствия скелета её движения нарушали анатомию человека, выглядели странными и нереалистичными.

Это тело 3D-модели, на которое потом накладывается одежда. Понимаем, выглядит крипово😨 Особенно с учетом того, что у бедной девушки не было коленей

Так что наш дизайнер буквально «пересобрал» тело 3D-модели, добавил недостающие части, чтобы она действительно напоминала живого человека, а не нагоняла жути.

Так дизайнер настраивал движения модели, чтобы каждая часть тела двигалась правильно

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

Когда 3D-модель меняла позу, одежда не искажалась вслед за её движениями

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

Одежда сидит плохо 👕 Девушка должна была сначала стоять, а после сесть на корточки. При симуляции поэтапных движений её одежда «вела» себя странно: то скользила, то дергалась, и все это выглядело…да, неестественно. Чтобы добиться реалистичности, наш дизайнер «перекроил» всю одежду модели с нуля, настроил нужные параметры для размера и материала. 

Пришлось подгонять складки на одежде под движения модели

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

И вот как выглядела её эволюция. В итоге получилась крутая и уверенная в себе девчонка на стиле.

И вишенка на торте — анимация 3D-модели: 

Без ТЗ и результат крутой

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

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

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

К тому же заказчик сам хорошо разбирался в теме и разговаривал с дизайнером на одном языке — так проще было прийти к единому видению. Даже без ТЗ и брифа.

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

Ничто не способно вывести команду Purrweb из состояния дзена капибары!

К слову, если вы думаете, что в 2024 году NFT — все, то это не так: рынок продолжает расти, и люди по-прежнему покупают коллекции NFT-арта на маркетплейсах вроде OpenSea. Может, самое время задуматься о разработке собственной торговой площадки? Специально для вас составили гайд по созданию NFT маркетплейса — читать тут. 

Работали как одна большая команда

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

Над некоторыми задачами мы штурмили сразу двумя командами. Так, у разработчиков не было возможности загрузить текстуры в 4k — это бы утяжеляло размер приложения и кроссовки плохо бы прогружались. Поэтому использовали файлы, которые весили не так много. Из-за этого были такие опасения: а вдруг юзер захочет получше рассмотреть рисунок кроссовка и начнет зумить? 

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

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

А еще в чатике проекта была супер теплая и неформальная коммуникация. Мы с ребятами много шутили и кидались мемами. Посмотрите, какой вайб у нас там был — ну круто же, когда так! 

Приложение сейчас в релизе, и скоро разработчики StepApp интегрируют 3D-модели кроссовок и анимацию персонажа. 

А вот какой отзыв о работе с нами оставил заказчик! 

И краткая выжимка для тех, у кого нет времени смотреть видео отзыв: 

➡️ Ищете для своего проекта дизайнеров, которые не просто реализуют ваши идеи, но будут сами предлагать решения и подсказывать, как докрутить дизайн? Мы, Purrweb, здесь. Словим вайб, раздадим стиля, да и просто сделаем классный дизайн, который зайдет юзерам, которых сложно чем-то удивить. 

Свяжитесь с нами, поговорим о вашем проекте, прикинем сроки и бюджет, пропишем дорожную карту.