Как началось наше сотрудничество
Небольшая предыстория о том, как мы начали работать с командой 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…
Такие референсы 2D-кроссовок принес нам заказчик. Они уже были в приложении, так что нужно было придумать что-то в похожей стилистике, но только для 3D
…но только чтобы они напоминали реальную обувь.
Референсы «настоящих» кроссовок, подобранные нашим проектным менеджером
То есть, нам нужно было сделать что-то мультяшное и в то же время реалистичное, но в 3D. Интересная и по-своему противоречивая задача 🙃
Наш дизайнер попробовал все это взболтать и смешать. Когда он работал над первой итерацией кроссовок, то тщательно отрисовал даже швы. Если не приглядываться, кажется, будто перед тобой фотка с витрины, а не 3D-модель — посмотрите сами 👇
Попытка перерисовать настоящие кроссовки в таком стиле давала странный эффект — они казались детскими, словно игрушечными. И заказчику не зашло: нужно было что-то более «крутое»
Когда мы презентовали результат заказчику, он сказал, что они выглядят какими-то пластилиновыми. Так что в первый раз — мимо.
Заказчик прислал нам дополнительные референсы кроссовок, стиль которых ему нравился
Мы продолжили искать и вскоре поняли: ну его, этот реализм, мультяшный мир должен победить! Поэтому все переиграли — намеренно ушли в мультяшность, полностью отказались от имитации в 3D-модели текстур реальных кроссовок.
Вот что получилось во второй раз 👍
Оказалось, что именно такое направление стилистики наиболее близко к тому, что заказчик хотел видеть в приложении
Интересно, что этот стиль отличается от тех референсов, что принес заказчик. Более того: сама задача тоже была другой. Тем не менее, наш дизайнер попал в точку и правильно понял, что было нужно на самом деле.
Третья — и финальная — итерация. Зацените 😎 Нам удалось найти баланс между броской мультяшной стилистикой и эстетикой модных и дорогих кроссовок.
В качестве финального штриха дизайнер добавил черную окантовку к кроссовкам — хотя такой задачи не было. Клиенту понравилось, как получилось
И другие модели кроссовок:
Результат настолько понравился заказчику, что он принес нам еще одну задачу в рамках проекта 😀 Дополнительно мы сделали анимацию для экрана загрузки приложения.
|
Интересный момент: изначально заказчик планировал делать анимацию для лоадера приложения не с Purrweb. Но в итоге эту задачу доверили нам |
Кроме исключительно креативных задач, нужно было учитывать технические нюансы. Например, настроить все так, чтобы разработчики могли брать цвета и текстуры 3D-кроссовок и использовать их для автоматической генерации новых вариантов. Это позволяло создавать до ста уникальных NFT-кроссовок.
|
Один из вариантов лоадера приложения. Здесь видно, как к базовым моделям кроссовок накладываются различные цвета и текстуры. Такой подход позволяет автоматически масштабировать коллекцию |
Наш дизайнер активно общался с разработчиками клиента и консультировал их по настройке текстур и сцены. Мы передали готовые материалы заказчику, но на этом проект не завершился. Для нас была припасена еще одна задача: анимировать 3D- персонажа.
(Ре)анимировали 3D-персонажа
Вскоре заказчик вернулся с еще одной дополнительной задачей в рамках проекта — нужно было переделать анимацию 3D-персонажа, которую до нас делал другой дизайнер. Заказчику не нравился результат: вышло не совсем то, что было нужно…
3D-модель девушки выглядела слишком кукольной — в плохом смысле. Ей не хватало реалистичности и живости, а движения казались неестественными и скованными.
|
Исходная анимация |
А еще нужно было поработать над текстурой волос, пофиксить симуляцию одежды — на видео заметно, что худи девушки словно колышется на ветру, настроить освещение так, чтобы лицо модели не выглядело плоским.
Когда дизайнер углубился в задачу, то понял, что с 3D-моделью проблем гораздо больше, и тут нужна реанимация практически полная переделка.
У 3D-модели не было скелета 🦴 Вы спросите: а зачем он ей нужен, какой еще скелет? 🤨 Но в 3D-анимации кости и скелет ставят для того, чтобы управлять движениями модели и добиться большего реализма. Иначе у модели будут неестественно изгибаться ноги или руки — что, в общем, и случилось с персонажем. Из-за отсутствия скелета её движения нарушали анатомию человека, выглядели странными и нереалистичными.
Это тело 3D-модели, на которое потом накладывается одежда. Понимаем, выглядит крипово😨 Особенно с учетом того, что у бедной девушки не было коленей
Так что наш дизайнер буквально «пересобрал» тело 3D-модели, добавил недостающие части, чтобы она действительно напоминала живого человека, а не нагоняла жути.
Так дизайнер настраивал движения модели, чтобы каждая часть тела двигалась правильно
Недостаточно проработана физика движений 🦵 В качественной 3D-анимации соблюдаются законы физического мира. В реальности одежда немного деформируется вслед за движениями человека, поэтому в анимации должен быть такой же эффект. Но одежда 3D-модели словно была сама по себе.
Когда 3D-модель меняла позу, одежда не искажалась вслед за её движениями
Казалось, что картинка выглядит статично. И — опять это слово — неестественно. Кстати, из этого вытекала следующая проблема.
Одежда сидит плохо 👕 Девушка должна была сначала стоять, а после сесть на корточки. При симуляции поэтапных движений её одежда «вела» себя странно: то скользила, то дергалась, и все это выглядело…да, неестественно. Чтобы добиться реалистичности, наш дизайнер «перекроил» всю одежду модели с нуля, настроил нужные параметры для размера и материала.
Пришлось подгонять складки на одежде под движения модели
Девушка прошла несколько итераций. Дизайнер поработал не только над ее движениями и мимикой, но и над прической, одеждой, постоянно обсуждая варианты с заказчиком.
И вот как выглядела её эволюция. В итоге получилась крутая и уверенная в себе девчонка на стиле.
И вишенка на торте — анимация 3D-модели:
|
Анимация получилась на значительно более высоком уровне. Заказчику результат очень понравился |
Без ТЗ и результат крутой
Наш заказчик не ставил дизайнерам четко прописанного ТЗ, и это одна из особенностей его подхода. Не каждый специалист умеет работать в таком формате. А нам — норм, мы понимаем, как прийти к результату даже если заказчик не прописал детальные требования.
Наш клиент убежден, что хороший дизайнер может сам определять, как лучше всего выполнить задачу. А дело заказчика — в общих чертах обрисовать, что он хочет получить в итоге, и давать фидбек в процессе.
Конечно, на первом проекте мы какое-то время притирались друг к другу и не сразу пришли к взаимопониманию. Но к тому моменту, когда к нам обратились с задачей для StepApp, мы гораздо лучше понимали, какой у заказчика вайб, какие штуки в дизайне ему заходят. И нам было проще уловить тот самый стиль.
К тому же заказчик сам хорошо разбирался в теме и разговаривал с дизайнером на одном языке — так проще было прийти к единому видению. Даже без ТЗ и брифа.
На всякий случай уточним: нашей команде комфортно работать и по четкому техническому заданию. Мы понимаем, что у всех клиентов разные потребности и задачи, и в каких-то проектах без ТЗ результат получится сами знаете какой, а в каких-то оно только загонит наших ребят в рамки. В общем, мы стараемся придерживаться гибкого подхода.
Ничто не способно вывести команду Purrweb из состояния дзена капибары!
К слову, если вы думаете, что в 2024 году NFT — все, то это не так: рынок продолжает расти, и люди по-прежнему покупают коллекции NFT-арта на маркетплейсах вроде OpenSea. Может, самое время задуматься о разработке собственной торговой площадки? Специально для вас составили гайд по созданию NFT маркетплейса — читать тут.
Работали как одна большая команда
Со стороны заказчика в проекте участвовали разработчики, чьей задачей было позже интегрировать в приложение модели 3D-кроссовок, и арт-директор.
Над некоторыми задачами мы штурмили сразу двумя командами. Так, у разработчиков не было возможности загрузить текстуры в 4k — это бы утяжеляло размер приложения и кроссовки плохо бы прогружались. Поэтому использовали файлы, которые весили не так много. Из-за этого были такие опасения: а вдруг юзер захочет получше рассмотреть рисунок кроссовка и начнет зумить?
Вместе мы думали, что делать с этим кейсом, и пришли к такому решению — нужно после определенного расстояния поставить возможность зума на стоп.
И таких моментов на проекте, когда мы совместно искали, генерировали идеи и обсуждали варианты, было очень много. Мы сработались так, словно были не двумя отдельными командами, а одной большой.
А еще в чатике проекта была супер теплая и неформальная коммуникация. Мы с ребятами много шутили и кидались мемами. Посмотрите, какой вайб у нас там был — ну круто же, когда так!
Приложение сейчас в релизе, и скоро разработчики StepApp интегрируют 3D-модели кроссовок и анимацию персонажа.
А вот какой отзыв о работе с нами оставил заказчик!
И краткая выжимка для тех, у кого нет времени смотреть видео отзыв:
➡️ Ищете для своего проекта дизайнеров, которые не просто реализуют ваши идеи, но будут сами предлагать решения и подсказывать, как докрутить дизайн? Мы, Purrweb, здесь. Словим вайб, раздадим стиля, да и просто сделаем классный дизайн, который зайдет юзерам, которых сложно чем-то удивить.
Свяжитесь с нами, поговорим о вашем проекте, прикинем сроки и бюджет, пропишем дорожную карту.
