UI Challenge 3: Combination of Button & Slider

UI Challenge 3

Reference

ポケコロガチャ図鑑ポケコロガチャ図鑑 | 真夜中クローゼット

I feel that designs are really nice and cute. Besides that, I feel it would be fun if I grab these ideas and make it interactive in my own style. I want to create a mini game which all the elements are interactable.

Idea & Sketches

No description available.

My idea is to create a mini game that contains instruments for the user to play with. I list out the ideas that are compulsory to insert in my final design:
1. Piano
2. Violin 
3. Bass  
4. Gramophone
5. Volume Slider

Design



Development Process

For this project, I want to try something new and different, I create the scene in 1080x1920px (portrait) size.During this process, the script and functions are quite straightfoward as I just apply on every concept that I've learnt during the practices. The most challenging part of this project is to find the perfect audio source. I've searched for a long time so that it fits the overall feeling and mood. I ended up compose and record the audio source by myself. I compose the correct key and scale (A major) for the piano so that the user can compose more songs by themselves. Besides that, I seek help from my friend to play the violin and the bass in order to create a perfect match for the overall user interface experience. I'm quite satisfied with it as everything are done by myself from scratch. 

Final Outcome

link :https://youtu.be/0gYNumWXamI

Animated GIF

Rationale

Every elements in the scene are interactive. The user can tab on every single assets to play with it. There are three animals in the scene that have three different functions. The bear which is playing the drum produce the sound of bass, the rabbit which is playing the violin produce the sound of violin white the piano tiles produce the sound of piano. There are stars blinking at the background allows user to interact with it.

To start playing with this mini game, the user can tab on the bear to play the bass.The bear will start to animate by playing the drum. Then, the user can tap on the rabbit to play the violin. The rabbit will animate and play the song of 'Row Row Row Your Boat'. Besides that, the user can also click on the piano tiles to play along together with the violin and bass. When the user tab on one of the piano tiles, the bird on the gramophone will animate as if instructing the gramophone to play according to the key. Musical notes will also appear from the gramophone to show that the piano tile is working.Thus, it will end up composing a song with their own creativity. Moreover, the user can also tab on the piano tiles to play with different songs such as 'Happy Birthday, Marry had a Little Lamb', etc.. There are three different sliders for the user to adjust the volume of three different instruments. 

After describing the main elements of the UI design, there are a few interactive part on the background such as the moon, star and cloud. Besides playing with music, every assets on the scene are buttons. User can tab on the blinking star and it will start to scale and changes its shapes. Other that that, the moon and cloud changes color when it is hovered. 

In conclusion, this design can be implemented on game or mini game on specific occasion to attract the audience. I think this design can be used on festival such as mid-autumn festival because the feeling of the design somehow kinda related to it. This design currently are more on entertainment purpose. I think that it can be educational if there are guidance to teach the children how to compose their song. 







  






















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