Process of 3D UI Conceptualization

It all started from freelancing. I have recently started freelancing but I have been studying in design college for the past 2 years. I have learned a lot of things in design college but there are some things that design colleges do not teach you, and you have to explore those things by yourself.

As you know the meaning of VR is virtual reality. I had no idea what was virtual reality before, because I have always been confused between AR and VR. One day I got a project, it was a freelancing project. The client wanted a Graphic Designer, since I had a lot of knowledge in Graphic design I approached him and talked to him about the project. His project was very difficult, He needed an Expert level Graphic designer in my opinion, but i was not an expert. Somehow I took that project and accepted that challenge, because I like challenges.

Project was to create a 3D looking interface but without any use of 3D software. He wanted a shelf which looks almost real. He wanted perfect shadowing and lighting on that shelf. Not only this, he also wanted a realistic lighting effect (how a light bulb generates). He wanted these shelves in line and his products should be on those shelves and there should be a realistic look in that too. This work can only be done in a 3D software. But i’m not a 3D artist, I’m a UX/UI Designer.

So i started this project and i thought why don’t we divide all this part by part. I divided this project in 3 parts.

1. The Shelf
2. The Lighting
3. The Products

To make any kind of shelf we need a specific material, what kind of material should something have so that it looks real? This material comes from texture and the color in it. I needed a material that can also be mixed with background and proper shadows can fall on it too, and if we add lighting effect then it should also look real. So I called my friend Arnab Dey. I told him about the project. He said “yes”, and then we started working together on this project. He told me that there is a concept like this already created in the past. This was related to the bookshelf. This is a kind of shelf where books are placed where books are digital and shelves are digital. Let’s have a look…

So this screen is actually made in a 3D Software, there is use of proper directional light, proper texture and it looks very realistic.

We have to do a similar kind of work but the difference here is that we also had to use the light bulb effect, as if we are emphasizing all the products separately. Plus there should be no lights where we don’t want to emphasize on. When the products on his shelf will be out of stock, then there should be no light emphasis effect on that.

So i started with the Shelf

We started exploring the types of shelf. How lighting is formed on that, it’s length, it’s breadth, it’s height. We got an idea that “why don’t we use PNG?”. We started to explore all kinds of PNG related to the shelf. Yea i know, very cheap trick but wait for it….

1. White Texture Shelf

2. Wooden Texture Shelf

3. Peacock Shelf (White)

In all of these examples a natural light is being used. A human with basic understanding of how natural light works can also get an idea of how to make lighting realistic. Our first task is to create a shape first, what kind of shape that will perfectly fit with our requirements.

We thought of taking an Individual Non-connected self

If we take an individual non-connected shelf, then we can create 2 shelves or 3 shelves or 4 shelves or an unlimited number of shelves. Then we can easily fit products in it.

After doing this simple prototype we got to know that the individual shelf system is very efficient, flexible and we are going in the right direction.

In this there are 3 different types of shelf, one is wooden style which is basically a png image, second shelf is also a png and we have added a shadow effect behind the shelf. The third shelf is made by Arnab himself.

Then we went to the next stage which was to give a more realism with the background included

In order to make it look more realistic we thought of why we don’t use realistic shadows. So we took a unique picture, in which there are very well defined shadows and a very minimalist style shelf with a single color gradient.

In this example there are very well defined shadows defined and very minimalist style individual non-connected shelves. Where we can place products.

Our Next Step was to make it look more advanced (More realism & Clarity)

In this step, we simply copied one part of the shelf and duplicated it into 4 parts. And arranged all those 4 parts with alignment.

In this background is also perfectly matching with the shadow colors and hence making it look much better.

We are still in the prototyping phase, we are still deciding what kind of model will fit perfectly with our requirements. Till now it is going great, there has been a lot of improvement up until now, we are able to see our desired concept getting created in front of our eyes.

People might not understand but this is unreal based on our perspective. The dimensions of all the 4 shelves are similar but if we view this from a real scenario perspective, every single shelf should look different and every single shelf will have unique length, breadth, and height. Here our brain gets confused and thinks that this is real.

But there were many problems that we still needed to solve!!!

We created a more presentable format, where we also presented the products and dimmed some sections.

Product Showcase with Shelf

It is looking pretty cool…

But our work isn’t done yet. We also had to make this in different color themes. Yes, I know it is looking great but we need to provide whatever client wants.

I recreated this shelf in a very detailed way.

1. In the upper part I have created a radial gradient which is turning from dark to lighter.
2. In the middle section I have created one side darker and one side lighter, because the light (Directional Light) is falling from above.
3. In the bottom, I have created a very simple shadow which is falling downwards which is creating a realism.

Now we have created a shelf that can change it’s color, and can be easily mixed with the background. And it looks realistic enough which can fake our eyes.

Overall it looks like this..

Why don’t we add lighting in this?…

After many tries, we found the perfect light which matches with this, which also enhances the products, and still maintains the realism effect.

Now we have the lights, we have the shadows, we have the shelf. Our work was almost done.

Our Job now was to place the products and see if our design works or not?

I used a layer blur effect on this. The place where I didn’t want to put emphasis, I placed a layer blur effect there. So that it should look as if there was no presence of light there.

Here design gets even worse, when we put Product tags in them. Whatever client wants we have to provide no matter how bad it looks. If the client says “yes” then yes.

But the most important part was that, here we could change the color theme to anything we wanted. And the client wanted a sunset theme. I created as many versions as possible which looks better

Here it is…

I hope you liked reading this. This was a very interesting project which I did for my Australian Client. This screen was made for vending machines. You can code this very easily because all of the components are unique with intact shadows. I have used a similar light effect which can be used in every single product. This can also be scrollable.

If you want to check out the source file click the link down below

For further information, you can contact me.

Thank you