UI Application: Design & Production (Reference , Sketches, Flowchart, Storyboard)

Moodboard






Colour Scheme











Halloween is always associated with the color of purplish- red kind colour. Thus, the backgrounds are mainly on purplish-red and greenish-blue. In this project, I decide to use double complementary colour scheme to create contrast in the game world. I want to create a mood whereby the halloween town is fun to explore but it somehow still associated with the theme of halloween. Thus, the colours are vibrant and bright for the interaction part but the background is more dull and darker. I do not want it to be presented in a very scary, ghostly mood. I want the user to experience a fun and cute halloween town with subtle creepy feeling which somehow still reflects halloween.

Visual Reference






The overall gameplay will be presented in vector art. I analyze and study how they make the background to be outstanding with simple basic vector shapes. Besides that, I realize they most of the vector art play with opacity and overlay in order to enhance the artwork. There are also gradients so that it doesn't look totally flat.

Character Design 























Sketches

  
The main character is a grim reaper. I try with different design of my character and choose the suitable ones. I design my reaper in a cute cartoonish style to suit with the background. The main characteristics of my reaper is that the eyes are big while the mouth is small.

Play/ Defeat Scene

























Assets


Underwater Assets




Typography
























I insert two typography in my game which are Business and Feast of Flesh BB. This is because I like the minor details of the typography(Business) , for example there are some pointy area in and out which gives some sort of dangerous feel. The typography of Feast of Flesh BB is suitable to place on the UI Buttons because it's easy to read and the typography has its own characteristics which can enhance the overall user experience.

Flowchart


























Storyboard




This is the initial storyboard which shows only the first section of the map. The storyboard and the flowchart shows how the game mechanics and the flow of the game. For instance, the player must collect assigned pumpkins to win the game. On the other hand, if he hits the enemy , one life will be deducted. As he loses all his three lives without completing his mission, it will show a defeat scene.




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