UI Challenge 1: Button

BUTTON SET 1

Visual Reference


Funny Colorful Square Faces by TopVectors on @creativemarket


UI Reference

Liquid button v2 | Motion design, Digital design, Light installation

I tried to do something like this but it failed.

Design















Development Process

This is a set of gummy buttons. I designed it in  gummy looking because I planned to develop it into interactive buttons whereby the button will change the shapes following the cursor. I found the reference in Pinterest but the designer used HTML to create the button. I tried to ask Mink about it and it requires a lot of functions such as Mesh Renderer , Circle Collider 2D, etc... I tested it out and it failed because I still haven't own the skills to create such interactive soft body button.Thus, I have to stick back on my initial idea. I use After Effects to create the animation (wave) so that the gummy elements have slimy texture. These series of buttons are quite basic because the buttons will animate only when I pressed on them. 

Final Outcome


Animated GIF

Animated GIF

Animated GIF


Rationale (Set 1)

These sets of buttons share the same characteristics and similar interactive experience.The first button is a sleeping gummy button.Initially, the button remains static. When the user pressed on it, the sleeping gummy button will start to animate. The body will have wavy effect and the mouth of the creature will open and close. When the user hover on it, the creature will turn into an angry expression. The second button of the set is a star gummy button. The button will rotate and the scale of the eyes of the creature change. The button will change to other image when hover on it. The third button of the set is a surprise gummy button. The creature will jump up when the user pressed on it. It also changes to angry expression when user hover on it. 

In conclusion, three buttons share the same functions. These buttons can be used for entertainment purpose, for example game or webpage. The target audience are mainly on children because of the visual design that easily attracts the attention of a kid. Besides that, it also can turn into stickers or emoji icons for social media platform such as messenger, whatsapp, etc..for the user to express their current emotions.
 

BUTTON SET 2

Visual Reference

Stary Night by SunakoWhale by Giorgio Schirò


Design




Development Process

For the second button, I created a toggle button. I change the function whereby the graphic elements will move up only when the user switches the mode . During the process, I didn't know how to turn the shape of the sun into the shape of moon because the moon is not a complete shape. I was glad that I tried this because it helped me to have a better understanding on mask and unmask. It also helped me to revise the script on how to use boolean to create function like such. I also change the color of the design to create a better contrast. 

Final Outcome


Animated GIF


Rationale(Set 2)

The toggle button can switch between day and night. It starts from the day. If the user wants to change the mode from day to night they have to press on the sun, the sun will rotate and turn into the moon. The colour and graphics will change as well to represent the differences between day and night. This works as well when the user wants to change from night to day.Besides that, there is a clicking sound when the user tab on the button. This button can be used as controller for the user to adjust between day and night. The art style is very simple and the colors are in cool color to create a relaxing, calming mood. 

Button Set 3

The button for set 3 is a combination with the slider in UI part 2 challenge. Further explaination of the button will be explained together with the slider.

*Gif doesnt have audio












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