UI Application: Design and Production (Design & Development)

Design Development Process

Initial Design ( Rough Idea )



This was the inital design that roughly came across my mind. Initially, I tried to implement the colour scheme that I'd wanted to but it turned out to be very ugly. It didn't really affect much because this was just try and error. 

Design Development Stage 1






On this stage of development, I start to design the environments and assets. I use double complementary colour for the game world and character. This is to create contrast between both of them so that the player can easily grab their attention on the character. The background of the town is purplish- red ( more reddish ) while the underwater is in blue with the combination of a little green.

Spooky Town Background


















The background are basically designed with lots of graveyards behind. This was inspired by Nightmare before Christmas because the town has a lot of graveyards to represent Halloween. I added gradient for the background to create depth so that there's a flow of hierachy. Besides that, there are ghosts with different sizes on the background to show that the town is creepy with lots of ghosts. I also add some overlay effect on the basic shapes just to enhance the overall mood and feel.


Assets

Flying Monster

Flying Monster



This is a flying monster // ground that moves up and down in the game. This creates an interaction whereby the player have to find the right timing in order to jump on this flying monster.

Bones


The bones has gradient on it as well and it follows the colour scheme so that everything is interconnected together.

Ghost


The ghosts shares the similar characteristics with the flying monster.

Ground Assets




The ground is in a brighter colour in order to create contrast with the background. Besides that, I added gradient with overlay to enhance the design.

Pumpkin



Checkpoint



Underwater Background










The initial background of the underwater world is in a brighter blue-green colour which is very contradict with the spooky town.There's still a lot of graveyard even though its underwater. Besides that, the background is layered with overlay to create a sense of depth on it. There are also bones, bubbles, plants and weeds with animations to enhance the design.

Underwater Ground Assets





The underwater ground shares the similar characteristics with the ground in spooky town.

Sea creatures




The design of the fish are inspired by lantern fish. I add some pointy area on the scale to show that the fish are not friendly. Besides that, the eyebrows also indicates that the fish are harmful. This is to allow the player to know not to interfere with them.

Piranha



Ghost Mansion






















This is the intial design of the ghost mansion. The background seems lacking because there's not details that tells the story of it. This design is further improved on another stage of development.


Design Development Stage 2 (Final Design)

Color Scheme



Title Screen






















Spooky Town









Underwater









After concluding the user test, there's adjustment and refinement to be made. I get feedbacks that the colours make them feel like Chinese New Year instead of Halloween. Thus, I change the colour into darker maroon purple colour and increase the darkness of the background. Besides that, I also make adjustments on the colour of the underwater. I make the water looks more greenish so that it looks creepier. This is because the initial underwater looks too bright and clear.  I change the whole blue colour palette so that the colours fits nicely on every assets.

Ghost Mansion























For the design of the ghost mansion, I added portraits of ghosts on the background. It turns out much better than the initial design and it feels more like a mansion.

Instruction // Result Scene



The colours of different scene is seperated into three different colours. This is easier for user to differentiate the differences instead of using the same colours.  The board that shows the result and instruction is designed as a graveyard so that it is interconnected with the game world.The pumpkins are also designed differently on each board. For the victory scene , the pumpkins are smiling to show that they are happy. For the defeat scene, the pumpkins are angry while the pumpkins are shocked for the oops scene. Last but not least, the pumpkins are sad on the instruction scene because they are caught away by the ghost!!

UI Buttons


These are the close up of the buttons. The typography is always darker than the background to create contrast.

Character Design 

Idle
Dive



Jump
Run









Comments

Post a Comment

Popular posts from this blog

IxD Project: Floor Projection Mapping Setup (Critics & Refinement)

Image
Floor Projection-Mapping Setup Critics & Feedbacks There was a critic session held to get feedbacks and critics from peers and lecturers. I will list down all the critics below. First of all, the animations take too much time. It does not have a rigid reason for the user to continue stepping within the circles because there are no animations playing and the feedback from the lines is too subtle. It was suggested to add some narrations to let users know what's the purpose of the graphics and animations. They should know what's the point standing and stepping around the circle. I should cut down the time and add some audio to improve the overall atmosphere.  Secondly, the feedback from the lines is too subtle. It's not inviting enough. Thus, I should tweak the formula and smooth time in order to get instant feedback when the user steps on it. For right now, I should minimize the smooth time to get very engaging feedback.  Thirdly, I was suggested to take out the looping o...
Read more

IxD Project: Production Process (Coding Design Development)

Image
Design Development This project is very challenging than usual because it uses visual coding which is very new to me. Before starting the visual on coding, I've tried to develop some visual to see how it looks like. I've tried to see and compare how does the circles will look like if added with dotted circles. Lines without Dotted Circles Lines with Dotted Circles Unfortunately, these designs look bad because I feel they look like Indian Diwali and it doesn't match with the overall look and feel that I want.  Design Development with Coding Formation of Circles with Joints At the very first stage, I've learned something very interesting which is creating circles using coding. This is very new to me as I never explore this kind of coding before. This feels like bringing back to my secondary life whereby the formula and calculations to create a perfect circle is being implemented now on coding. From this coding, I've understood that by instantiating the joints, it will...
Read more

Case Study 2 - MORI Building DIGITAL ART MUSEUM: teamLab Borderless

Image
      Introductio n       MORI Building DIGITAL ART MUSEUM: teamlab Bordeless is the world’s first digital museum that displays digital interactive arts. It is created by art collective, called teamLab and located in Tokyo’s Odaiba district. Teamlab Borderless is also known as a world of artworks without boundaries because it is a museum without a map.       The museum has 10,000 square meter spaces that uses 520 computers and 470 projectors. It is filled with more than 50 pieces of digital artworks. The 3D digital arts move freely and constantly in motion from one exhibition to the next so that the visitor can immerse themselves with the wonderful artworks together.   Interactions The artworks are spread across the museum’s five zones. The first zone is called ‘Borderless World’, an interactive digital landscape where visitors are encouraged to create their own path. People can walk through digitized waterfalls and touch luminescen...
Read more