Week 16
HI. Starting to slowly set up assets to showcase the overall design of the website
This blog will be mainly updating the preparation of setting up the 2D and 3D assets for my website to showcase the overall website design on Week 18 (final week)
3D progress
Scene set up
The 3D space for Selangor is more or less done. When I consulted my technical advisor, he told me to reduce the polycount on the 3D models for better performance and also reduce file size. I started to use the decimate modifier in blender to reduce polycount on every single model. I realized while doing that, my models will start looking more geometrical, with this, I decided to just go for a full low-poly art style for my 3D.
And it works! Compared to the previous 300++MB size, my current FBX size is only 7MB. I will try loading the 3D space into PlayCanvas and test it out.
Color palette
These are the colors that I extracted from references, hopefully with this color guide it will be easier for me to set up the colors that I want in the scene.
3D typeface layout
I tried a different layout for the type. The previous feedback was that the layout does not make the text look 3D and with the additional 2D illustrations at the back, it is not standing out. This time, I tried incorporating more 3D elements and play with the positioning of the text.
3D set up for navigation page
My idea of the navigation page is to build a map-like visual but using 3D platforms instead. And each platform will represent each individual state that users can choose to explore.
Navigation page
I used the rendered 3D model and build up the concept wireframe of the page. The navigation page is mainly for users to continue exploring nature places in different states. My plan is to create a map-like 3D visuals to portray the different states. Users will interact with the touchpoints on the 3D visual itself and locate to their desire state.
Gamification feature
2D illustration
These are the design of the badges required in the gamification feature that users will be collecting. I am using the previous proposed 2D art style (outline + flat colors) that will blend in better with the 3D style.
Layout on website
I tried implementing the badges design into the website wireframes. I tried 2 different layouts with different interactions. One is with a hovering effect on the badges, another it's just displaying the criteria of each badge.
That's all for now, in the next blog, I will be updating my progress regarding the content information part.
Comentarios