How our collaboration started
Let us give you a bit of background on how we started working with the Step App team 😀 Last year, they launched a side project — an NFT app where users could dress up 3D characters in stylish clothes. The in-house designers were busy with the main product, so the Step App manager decided to involve external contractors.
The visual concept of the project was inspired by Asian street fashion and Web3 trends. The client was looking for designers who would catch this vibe and find a way to represent it in the mobile app design.
They saw our works on Dribbble and understood — this is it. The client liked how we worked with colors and textures, as well as the visual techniques we used. And boom — total match 🔥
On the first call, the client noted that he took not only a designer’s skills into consideration but also their personal qualities, tastes, and individual style. So, a designer had to meet the following criteria:
The client needed a super-involved, creative, and bold designer to be on the same page with him and his team
As a rule, it’s up to us to decide which of our guys will design this or that project — we estimate the relevant experience, skills, and workload. But here, the client told us that he wanted to choose the designer for the project himself 🙂
The client studied our designers’ portfolios and talked to those whose works he liked the most. Then, we shook hands and got creative. Our task was to make 3D characters and come up with a UI/UX design for a mobile app.
In our article about design challenges, you can learn more about that project and also read other cool stories about our most peculiar tasks in design and development.
And now, take a look at the result:
These are the characters we made for our first project together — the guys turned out to be stylish
We (and our designers) made the client’s heart melt, and sometime later, he came back with a new task. We had to draw 3D models of NFT sneakers for the main product — the Step App app.
The most stylish NFT sneakers: like in 2D, but in 3D
The Step App has the most popular mechanics of crypto and fintech projects: a user buys NFT assets and earns tokens — the internal app currency — by performing certain actions. For example, in Step App, you can buy NFT sneakers, run, and get tokens, which can then be exchanged for cryptocurrency. This model is called “do-to-earn.”
The app already contained 2D sneakers, but the client wanted to upgrade them to 3D and release a new NFT collection with them. And he gave us a task: make sneakers that would look like the 2D sneakers from the app…
The client brought us these 2D sneaker references. They were already in the app, so we had to make something in a similar style, but only for 3D.
…but resemble real shoes.
The “real” sneaker references chosen by our project manager
So we had to do something cartoonish but realistic, at the same time, in 3D. It was an interesting and, in its way, a controversial task 🙃
Our designer tried to shake and mix all of this. When he worked on the first iteration of the sneakers, he thoroughly drew even the seams. If you don’t look closely, you may think that it’s a photo from a window display, not a 3D model — see for yourself 👇
An attempt to redraw the real sneakers in such a style gave a strange effect — they seemed childish and toyish. The client didn’t like it — he needed something “cooler.”
When we presented the result to the client, he said they looked somewhat plasticine. So, we missed the first time.
The client sent us additional references of the sneakers in the style he liked
We kept searching and soon realized: the heck with that realism — the cartoon world must take over! That’s why we changed everything — we deliberately went cartoonish and completely abandoned imitating the textures of real sneakers in 3D models.
This is what we got in the second iteration 👍
It turned out that this exact style was the closest to what the customer wanted to see in the product
Interestingly, this style is different from the references provided by the client. More than that, the task itself was different. Nevertheless, our designer nailed it and got the right idea of what was really needed.
Then came the third — final — iteration. Check it out 😎 We managed to find a balance between a catchy cartoonish style and the aesthetics of fashionable and expensive sneakers.
As a final touch, the designer added the black outline to the sneakers — although there was no such
The other sneaker models:
The client liked the result so much that he gave us one more task from this project 😀 We also made an animation for the app’s loading screen.
|
Fun fact: Initially, the client planned to make an animation for the app’s loader with another team. But finally, he entrusted this task to us. |
Apart from exceptionally creative tasks, we had to take technical issues into consideration. For example, we had to configure everything so that the developers could take the colors and textures of the 3D sneakers and use them to automatically generate new variants. This made it possible to create up to a hundred unique NFT sneakers.
|
One of the loader variants. Here, you can see how different colors and textures are applied to the basic sneaker models. This approach helps automatically scale the collection. |
Our designer actively communicated with the client’s developers and consulted them on setting up textures and scenes. We handed over the finished materials to the client, but the project didn’t end there. One more task was stored for us — we had to animate a 3D character.
How we reanimated the 3D character
Soon, the client returned with another task for the project — we needed to remake the 3D character’s animation created by another designer before us. The client didn’t like the result: it wasn’t what he wanted…
The 3D model of the girl looked too doll-like — in a bad way. She lacked realism and liveliness, her movements looked unnatural and constrained.
|
Original animation |
Also, we had to work on the hair texture and fix the clothing simulation — in the video, you can see that the girl’s hoodie seems to be waving in the wind. Another task was to adjust the lighting so the model’s face didn’t look flat.
When the designer went deeper into the task, he realized that there were many more problems with the 3D model. It needed almost a complete reanimation rework.
The 3D model had no skeleton 🦴 You can ask: why does it need a skeleton? Why skeleton? 🤨 But in 3D animation, a designer adds bones and skeletons to control a model’s movements and achieve greater realism. Otherwise, a model’s legs and arms will bend unnaturally — which happened to the character. Because there was no skeleton, the model’s movements violated the human anatomy and looked weird and unrealistic.
This is the body of the 3D model, which is later covered by the clothes. We understand it looks creepy, especially considering that the poor girl had no knees 😨
So our designer literally “reassembled” the 3D model’s body and added the missing parts. It started to look more like a real person and less creepy.
This is how our designer configured the model’s movements so that each body part moved correctly
The physics of the movements wasn’t developed sufficiently 🦵 A high-quality 3D animation follows the laws of the physical world. In reality, the clothing slightly deforms as the person moves, and the animation had to have the same effect. But the 3D model’s clothes seemed to have a life of their own.
When the 3D model changed the pose, the clothes didn’t deform with the movements
The picture seemed static and — this word again — unnatural. By the way, this led to the following problem.
The clothes didn’t fit well 👕 The girl had to stand and then squat down. When simulating these movements step-by-step, the clothes “behaved” weirdly — they either slid or twitched, and all this looked… yes, unnatural. To make it look more realistic, our designer had to “redesign” all of the model’s clothes from scratch and set up the necessary parameters for the size and material.
We had to adjust the folds on the clothes to match the model’s movements
The girl went through several iterations. The designer worked not only on her movements and mimics but also on her hairstyle and clothes, constantly discussing the options with the client.
This is the model’s evolution. Finally, we got a cool, confident, and stylish girl.
And here’s the cherry on the top — the 3D model’s animation:
|
We created an animation of a significantly higher level. The client liked the result very much. |
No specifications, and a cool design
The client didn’t give clear specifications to our designers, and this is one of the peculiarities of his approach. Not all the specialists can work in this format. But we are OK with this. We know how to achieve a result even when clients don’t provide clear specifications.
Our client is convinced that a good designer can independently choose the best way to fulfill the task. All the client has to do is outline what they want to get as a result and give feedback in the process.
Of course, working on the first project, we spent some time getting used to each other and didn’t immediately come to a mutual understanding. But by the time the client came to us with the Step App task, we understood his vibe and his preferences in the design. And it was easier for us to find the style we needed.
In addition, the client himself was well-versed in the topic and spoke the same language as the designer — it was easier to achieve the common vision. Even specifications and briefs weren’t necessary.
Just to be clear — our team is comfortable working with detailed specifications as well. We understand that all the clients have different needs and tasks. In certain projects without specifications the result will be, you know what, whereas, in other projects, specifications will only impose limits on our team. In general, we try to stick to the flexible approach.
Nothing can disrupt the capybara zen of the Purrweb team!
By the way, if you think that the NFT era will be over by 2024, it’s not true. This market keeps growing, and people are still buying NFT art collections on marketplaces like OpenSea. Maybe it’s time to think about developing your own sales platform? We have compiled a guide on creating an NFT marketplace specifically for you — read our article about it.
We worked like one big team
On the client’s side, the project involved the developers, who would later integrate the 3D sneaker models into the app, and the art director.
Certain tasks were tackled by two teams at a time. For example, the developers couldn’t upload the textures in 4k — this would increase the size of the app, and the sneakers wouldn’t load well. That’s why we used files that weren’t as heavy. Due to this, we had some concerns: what if a user wants to see the sneaker texture better and starts zooming?
Together with the client, we thought about what to do in this case and came up with this solution — we need to limit the zooming feature to a certain scale.
And the project had a lot of these moments when we searched, generated ideas, and discussed options together. We worked together as if we were like one big team instead of two different sides.
Also, in the project chat, we had super warm and informal communication. We joked a lot and exchanged memes.
The app is being released now, and soon the developers will integrate the 3D sneaker models and character animation.
And this is the feedback we got from the client!
➡️ Are you looking for designers who will not only bring your ideas to life but will also offer their solutions and suggest how to complete the design? We, Purrweb, are here. We’ll catch your vibe, make everything stylish, and just make a cool design that will impress the users, who are difficult to surprise.
Contact us, and we will discuss your project, estimate the timelines and budget, and write the roadmap.
