UI interaction & UI Challenge [4]

 UI interaction 

Swipe Products


Retrieved from: https://dribbble.com/shots/15292175-Product-Carousel-Experience

This is a button interaction with animation. Two buttons at the right bottom for the user to slide through the pages with different products. Two buttons pointed to two different directions which are left and right. The left button swipes to the left page whereas the right button swipes to the right page. 

Animation is applied to the product, typography which is changing the opacity, scale, and position. The background of the product changes whenever swipes to the other product. There's a number counting on the right side of the page showing user the products numbers on this website. The buttons have some animation too which is the button background turn black when the user presses the button. 

The overall design is clean and smooth. All elements are aligned well.

Flowchart



       3d hover interaction

Retrieved from: https://dribbble.com/shots/11321655-3d-hover-interactions

This is a website with well-crafting elements. All interactive elements using hover interaction and 3d animation. There's a three title for users to click in which is CULTURE, BOOKS, and PODCASTS. Before users click in, there's an interaction in these three titles. Users hover each title and title turn to only showing the outlines with appearing the related items behind the title. Items behind using rotation animation. Besides, the background color changes when users hover different titles. 

This interaction is interesting with adding the 3d items.

Flowchart



  Safety-GDPR Settings 




Retrieved from: https://dribbble.com/shots/15635034-Saifty-GDPR-Settings

An interaction for users to set up their personal information before login in. In the beginning, users are required to type in their Gmail and password. After completed, users click the login button and will then pop up a box for users to confirm whether receiving content in the following ways. Three options are provided for users to choose which are Push, Email, and SMS. When users tap one of the icons, will appear the animation of filling up the color for the icon which using scale, opacity, and color. Some small circle shape appears behind the icons as well. Users can then click the Save settings button.

This interaction using button interaction and a combination of animation. The color contrast shows the accessibility and the prior elements.  

Flowchart




  UI Challenge [4]


UI Interaction- Painting





This is a combined UI interaction with drag and drop, a button, and a slider. An interaction of painting piece. Due to the file size, I can only record this in a few seconds for uploading here. First and foremost, users have the option to click the music button. The music button allows music on. Then, users need to drag the slider where located on the left side. Users can choose different colors and located them on the painting pieces. If users want to change the color, they can directly drop the other colors to replace the piece.

3 steps in this interaction


The first step, click this button for music.


In the second step, drag the slider and drag one of them to the painting pieces.

The last step, drag and drop the color to painting pieces.


Animation

I applied animation to the Home, frame, and button as well. For button animation, I make it in Unity.


Frame animation 


Home animation

Cursor


For the cursor, I change to the hand illustration style that suits the theme. When the user mouse press, the cursor will scale down whereas retaining its original size when the mouse is up. 


Inspiration


Retrieved from:https://www.pinterest.com/pin/601371356498327405/


                    Retrieved from:https://www.pinterest.com/pin/601371356498327418/


                   Retrieved from:https://www.pinterest.com/pin/601371356496801571/

I found some of these interesting illustration designs and concepts. After that, I started on express this design in my artwork. 


Sketches


I first started on the sketch and I wanted to do a scroller with different colors of ball drag into the empty painting. Besides, the two buttons are for redo and undo steps. I also decided to apply animation to my title.

Flowchart





                                                        Reflective Evaluation


In this exercise, I learn all the UI interactions combined. It is quite challenging for me to do this exercise especially the scroller and drag and drop script for dragging the color to the painting pieces. However, I enjoy the process of learning to code and obtain some new knowledge in Unity as well. 


 






Comments

Post a Comment

Popular posts from this blog

Final Submission - Week 18

Image
   Week 18 Final Submission This week, I refined my rationale video and arrange the files folders that need to be submitted. Presentation slide Here is the Google link Project Background Normal people take notes on their phone or digital notepad to remember things. Similarly, blind people use audio recording to keep track of tasks and plans. They carry essential items every day, which use up their memory. Problem statement However, phone recording is inconvenient for them as it may record voice instructions and the files are disorganized without labels. They have to go through more steps to find the recording they want. Device Overview   Function Record & Playback Main features  3 main Braille buttons Item Task Phone number Target Audience Blind workers Place Wearable device Rationale Our brains have a limited capacity for memory storage, so taking notes is a common way to remember important information. Similarly, blind people also rely on note-taking to keep track of thei
Read more

Hand Up Do good Project Proposal - Week 7

Image
  Project Category I choose the sixth category for the assignments which is optimizing: making daily activities more efficient. Project Background Our human brains can store a maximum amount of memory. Therefore, we rely on taking notes down in case we forgot. This task seems so simple for normal people to do, we normally send messages in our own chat on our phone or take notes in a digital notepad. Similarly, most blind people have the habit of taking notes too. They use audio recording as a result to keep track of these tasks and plans. However, they experience inconvenience from the phone recording because they will record the voice instructions if they use their phone at the same time. In addition, the audio files are arranged in an absolute mess without labels. Besides, there are more steps for them to click the recording they want. Because they need to go to work every day, they always bring their essentials —white canes, work bags, wallets, and keys— along with them. None o
Read more

Design Planning -Week 5

Image
  Design Planning  After secondary research and primary research, I have two design plans at this stage both of which address the same problem but in different directions. It is a special device that provides find things easily without taking time to find out. 
Read more