UI Challenge 2: Slider

SLIDER SET 1

Development Process

I thought that basic slider is very easy to do as I just have to follow what Mink had taught us during the class. Unfortunately, I faced a lot or problems when creating the slider. For example, my handle of the slider will distort whenever I play it. Secondly, the fill of the slider will change its position when I change its assets. I was very frustrated and seeked help from lecturer. At last, I understand what was the problem and the method to solve it. I realized that it helped a lot when I came across the same problem on Part 3 UI Challenge. By that time, I already knew how to fix it. Besides that, I had learnt how to use 'mathlerp' in order for the value of image to start from 0 to 100. 

Final Outcome

Animated GIF


Rationale

The slider is a basic slider. It changes value when the user slides from the left to the right. Basically, the value decreases when the slider moves to left while it increases when it moves to the right. The trolley will follow the slider when the user slides it. If this slider develops in advanced, it would be better to see that the stuff in the trolley increases when the value increases. This slider can be used for commercial purpose (supermarket app) to scale the weight of object.  Besides that, it can also be used for loading bar if it is further modified. 

Slider Set 2

Reference

DailyUI 009 Music Player by Josh MacDonaldGive me a like if you love Neumorphic Style in UX/UI

Design


Development Process

For slider 2, we are asked to create slider with functions. I think of music player on my first thought because I want to create sliders that can adjust its volume and timeline. Besides that, I also want to try buttons with functions as well. I also can take this opportunity to experiment with audio in unity. During this process, I struggle a lot because I'm still new to unity and there's still many functions to explore. I keep getting error when doing the script because I still don't really understand the concept of it. These mistakes are useful for my future because I can learn from it. After practising for a few times, I realize that I start to know how to implement the scripts and functions on the sliders and buttons. The most challenging part of this music slider is to enable the slider to start from the beginning when the following song is played. I'm quite satisfied with the final outcome because I manage to create a functional music playlist besides learning from it.

Final Outcome

Animated GIF
*doesn't have audio


Rationale

This is a music player that is totally functional. The slider will follow the duration of the song. In addition, the timeline of the song will change accordingly when the user slides on it. When the first music clip move to the second music, the timeline slider will starts and play from the beginning again. Moreover, there is a volume slider whereby the user can adjust according to their desired volume.This is a combination of buttons and sliders. The music player will only start when the user press the play button while it will stops when the user pause it. Other than that, the user can click on the next or back button to change the song. The image and title of the song will also change following the current 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