С модным вайбом: сделали 3D-модели и анимацию персонажа для NFT приложения StepApp
Зачем люди покупают NFT кроссовки? 👟 Мы не знаем. Но зато мы знаем, как сделать для них классный дизайн!
Привет, на связи Purrweb - мы занимаемся дизайном и разработкой для бизнеса и стартапов.
Наш постоянный клиент, с которыми мы работали над несколькими крипто-проектами, обратился к нам с новой задачей: сделать 3D-модели стильных кроссовок для их NFT приложения StepApp. Получилось настолько круто, что в рамках этого проекта нам доверили еще несколько задач, о которых изначально речи не шло.
О том, почему мультяшность побеждает реализм, и зачем хорошей 3D-модели нужен скелет — в этом кейсе.
Как началось наше сотрудничество
Небольшая предыстория о том, как мы начали работать с командой StepApp 😀 В прошлом году они запустили сайд-проект — NFT приложение, где пользователи могут наряжать 3D-персонажей в стильную одежду. Инхаус-дизайнеры были заняты на основном продукте, поэтому руководитель StepApp решил подключить внешних подрядчиков.
Визуальный концепт проекта вдохновлен азиатской уличной модой и web3 трендами, и ребята искали дизайнеров, которые словят этот вайб и придумают, как передать его в дизайне мобильного приложения.
Они увидели наши работы на Dribbble и поняли — вот оно. Заказчику понравилось, как мы работает с цветами, текстурами и какие визуальные приемы используем. И тут случился мэтч 🔥
На первом созвоне заказчик отметил, что ему важны не только скиллы, но и личные качества дизайнера, его вкус и индивидуальный стиль. А соответствовать он должен вот таким критериям:
Обычно мы сами выбираем, кто из наших ребят будет дизайнить тот или иной клиентский проект — смотрим на релевантный опыт, навыки и загруженность. Но тут заказчик сказал, что хочет лично подобрать дизайнера на проект 🙂
Клиент изучил портфолио ребят и пообщался с теми, чьи работы зашли ему больше всего. Ну а потом мы ударили по рукам и полетели креативить. Задача была такая: сделать 3D-персонажей и продумать UI/UX дизайн для мобильного приложения.
Узнать больше о том проекте можно здесь, а заодно прочитать другие кулстори про наши самые необычные задачки в дизайне и разработке.
А пока посмотрите, что у нас получилось в итоге:
Мы (и наши дизайнеры) растопили сердце заказчика, и через некоторое время он вернулся к нам с новой задачей. Нужно было отрисовать 3D-модели NFT кроссовок для основного продукта — приложения StepApp.
Самые стильные NFT кроссовки: как в 2D, только 3D
В StepApp реализована популярная в крипто- и финтех-проектах механика: пользователь покупает NFT-актив и зарабатывает токены — внутреннюю валюту приложения — выполняя определенные действия. Например, в StepApp можно приобрести NFT-кроссовки, бегать и получать за это токены, которые потом можно обменять на криптовалюту. Такая модель называется «do-to-earn», буквально: делай и зарабатывай.
В приложении уже были 2D-кроссовки, но заказчик хотел проапгрейдить их до 3D, чтобы выпустить с ними новую NFT коллекцию. И поставил нам задачу: сделайте кроссовки примерно такими, как нарисованные в 2D…
…но только чтобы они напоминали реальную обувь.
То есть, нам нужно было сделать что-то мультяшное и в то же время реалистичное, но в 3D. Интересная и по-своему противоречивая задача 🙃
Наш дизайнер попробовал все это взболтать и смешать. Когда он работал над первой итерацией кроссовок, то тщательно отрисовал даже швы. Если не приглядываться, кажется, будто перед тобой фотка с витрины, а не 3D-модель — посмотрите сами 👇
Когда мы презентовали результат заказчику, он сказал, что они выглядят какими-то пластилиновыми. Так что в первый раз — мимо.
Мы продолжили искать и вскоре поняли: ну его, этот реализм, мультяшный мир должен победить! Поэтому все переиграли — намеренно ушли в мультяшность, полностью отказались от имитации в 3D-модели текстур реальных кроссовок.
Вот что получилось во второй раз 👍
Интересно, что этот стиль отличается от тех референсов, что принес заказчик. Более того: сама задача тоже была другой. Тем не менее, наш дизайнер попал в точку и правильно понял, что было нужно на самом деле.
Третья — и финальная — итерация. Зацените 😎 Нам удалось найти баланс между броской мультяшной стилистикой и эстетикой модных и дорогих кроссовок.
И другие модели кроссовок:
Результат настолько понравился заказчику, что он принес нам еще одну задачу в рамках проекта 😀 Дополнительно мы сделали анимацию для экрана загрузки приложения.
Кроме исключительно креативных задач, нужно было учитывать технические нюансы. Например, настроить все так, чтобы разработчики могли брать цвета и текстуры 3D-кроссовок и использовать их для автоматической генерации новых вариантов. Это позволяло создавать до ста уникальных NFT-кроссовок.
Наш дизайнер активно общался с разработчиками клиента и консультировал их по настройке текстур и сцены. Мы передали готовые материалы заказчику, но на этом проект не завершился. Для нас была припасена еще одна задача: анимировать 3D-персонажа.
(Ре)анимировали 3D-персонажа
Вскоре заказчик вернулся с еще одной дополнительной задачей в рамках проекта — нужно было переделать анимацию 3D-персонажа, которую до нас делал другой дизайнер. Заказчику не нравился результат: вышло не совсем то, что было нужно…
3D-модель девушки выглядела слишком кукольной — в плохом смысле. Ей не хватало реалистичности и живости, а движения казались неестественными и скованными.
А еще нужно было поработать над текстурой волос, пофиксить симуляцию одежды — на видео заметно, что худи девушки словно колышется на ветру, настроить освещение так, чтобы лицо модели не выглядело плоским.
Когда дизайнер углубился в задачу, то понял, что с 3D-моделью проблем гораздо больше, и тут нужна практически полная переделка.
У 3D-модели не было скелета 🦴 Вы спросите: а зачем он ей нужен, какой еще скелет? 🤨 Но в 3D-анимации кости и скелет ставят для того, чтобы управлять движениями модели и добиться большего реализма. Иначе у модели будут неестественно изгибаться ноги или руки — что, в общем, и случилось с персонажем. Из-за отсутствия скелета её движения нарушали анатомию человека, выглядели странными и нереалистичными.
Так что наш дизайнер буквально «пересобрал» тело 3D-модели, добавил недостающие части, чтобы она действительно напоминала живого человека, а не нагоняла жути.
Недостаточно проработана физика движений 🦵 В качественной 3D- анимации соблюдаются законы физического мира. В реальности одежда немного деформируется вслед за движениями человека, поэтому в анимации должен быть такой же эффект. Но одежда 3D- модели словно была сама по себе.
Казалось, что картинка выглядит статично. И — опять это слово — неестественно. Кстати, из этого вытекала следующая проблема.
Одежда сидит плохо 👕 Девушка должна была сначала стоять, а после сесть на корточки. При симуляции поэтапных движений её одежда «вела» себя странно: то скользила, то дергалась, и все это выглядело…да, неестественно. Чтобы добиться реалистичности, наш дизайнер «перекроил» всю одежду модели с нуля, настроил нужные параметры для размера и материала.
Девушка прошла несколько итераций. Дизайнер поработал не только над ее движениями и мимикой, но и над прической, одеждой, постоянно обсуждая варианты с заказчиком.
И вот как выглядела её эволюция. В итоге получилась крутая и уверенная в себе девчонка на стиле.
И вишенка на торте — анимация 3D-модели:
Без ТЗ и результат крутой
Наш заказчик не ставил дизайнерам четко прописанного ТЗ, и это одна из особенностей его подхода. Не каждый специалист умеет работать в таком формате. А нам — норм, мы понимаем, как прийти к результату даже если заказчик не прописал детальные требования.
Наш клиент убежден, что хороший дизайнер может сам определять, как лучше всего выполнить задачу. А дело заказчика — в общих чертах обрисовать, что он хочет получить в итоге, и давать фидбек в процессе.
Конечно, на первом проекте мы какое-то время притирались друг к другу и не сразу пришли к взаимопониманию. Но к тому моменту, когда к нам обратились с задачей для StepApp, мы гораздо лучше понимали, какой у заказчика вайб, какие штуки в дизайне ему заходят. И нам было проще уловить тот самый стиль.
К тому же заказчик сам хорошо разбирался в теме и разговаривал с дизайнером на одном языке — так проще было прийти к единому видению. Даже без ТЗ и брифа.
На всякий случай уточним: нашей команде комфортно работать и по четкому техническому заданию. Мы понимаем, что у всех клиентов разные потребности и задачи, и в каких-то проектах без ТЗ результат получится сами знаете какой, а в каких-то оно только загонит наших ребят в рамки. В общем, мы стараемся придерживаться гибкого подхода.
К слову, если вы думаете, что в 2024 году NFT — все, то это не так: рынок продолжает расти, и люди по-прежнему покупают коллекции NFT-арта на маркетплейсах вроде OpenSea. Может, самое время задуматься о разработке собственной торговой площадки? Специально для вас составили гайд по созданию NFT маркетплейса — читать тут.
Работали как одна большая команда
Со стороны заказчика в проекте участвовали разработчики, чьей задачей было позже интегрировать в приложение модели 3D- кроссовок, и арт-директор.
Над некоторыми задачами мы штурмили сразу двумя командами. Так, у разработчиков не было возможности загрузить текстуры в 4k — это бы утяжеляло размер приложения и кроссовки плохо бы прогружались. Поэтому использовали файлы, которые весили не так много. Из-за этого были такие опасения: а вдруг юзер захочет получше рассмотреть рисунок кроссовка и начнет зумить?
Вместе мы думали, что делать с этим кейсом, и пришли к такому решению — нужно после определенного расстояния поставить возможность зума на стоп.
И таких моментов на проекте, когда мы совместно искали, генерировали идеи и обсуждали варианты, было очень много. Мы сработались так, словно были не двумя отдельными командами, а одной большой.
А еще в чатике проекта была супер теплая и неформальная коммуникация. Мы с ребятами много шутили и кидались мемами. Посмотрите, какой вайб у нас там был — ну круто же, когда так!
Приложение сейчас в релизе, и скоро разработчики StepApp интегрируют 3D-модели кроссовок и анимацию персонажа.
А вот какой отзыв о работе с нами оставил заказчик!
У нас более 10 лет опыта в UI/UX дизайне мобильных и веб-приложений, а также в графическом и моушн-дизайне. Создаем креативные решения с заботой об удобстве пользователей. Заходите в наше портфолио - показываем красивое, делимся нашими решениями.
А пока пишите в комментариях: какой яркий и необычный дизайн приложения или сайта зацепил вас больше всего?
Не знала что для 3D модели нужен скелет. Но я и не занимаюсь этим так что неудивительно) Девочка хорошо получилась у вас!
Да, без скелета не обойтись 🦴 Спасибо! Рады, что понравилось: сами считаем, что результат работы крутой
Дизайн крутой и яркий мне понравилось, спасибо что поделились.
Спасибо вам! Мы тоже считаем, что получилось круто 😎
Все таки странно работать без тз на дизайн) То есть нет четких критериев что будет считаться приемлемым результатом для заказчика и тут могут начаться размытые требования типа не нравится, не то, сделайте вкуснее или поиграйтесь со шрифтами. Млжет вам повезло что попали в одидания и были на одной волне с клиентом но такое скорее редкость
На самом деле многое зависит от проекта и целей. Если задача креативная, как в этом кейсе, можно работать и без детального ТЗ — важно поймать стилистику и вайб, чтобы дизайн отражал характер бренда или продукта.
Но когда речь идет о сложных платформах с множеством пользовательских сценариев и функциональных требований, ТЗ необходимо. Потому что здесь нужны четкие рамки, чтобы избежать недопонимания. И чтобы были прозрачные критерии для итоговой оценки.
Статья - огонь!