PHILIP PARK
PHILIP PARK
GR_Cover2.jpg

UI/UX Golden Ratio Animation

The Golden Ratio is a universal mathematical ratio found in nature that creates a pleasing design and composition. This UI/UX animation experiment is inspired by this rule and its goal is to give the user both an intuitive and visual pleasing user experience.

  Voted "Best of the Day" October 11th, October 13th, November 7th and February 1st on MaterialUp.com .    

 

Voted "Best of the Day" October 11th, October 13th, November 7th and February 1st on MaterialUp.com.

 

 

1 2 3 4 5 6 7 8 9
Previous Next
  Voted "Best of the Day" October 11th, October 13th, November 7th and February 1st on MaterialUp.com .    
  The golden ratio curve sets the blueprint for user expectation and continuity. UX animation lives within the curve to outline its composition and to demonstrate consistency.    
  In a non-realtime interaction, the FAB will transform into multiple selections along the curve. When a user selects his or her next action, he or she could anticipate the flow as the button masks into its next utility.    
  In a music app context, the FAB play transforms into pause and masks into its next utility along the curve. The previous and search action buttons extend along the same curve, which demonstrates continuity and expectation.    
  In a realtime interaction setting, a user could move from one card to the next along the curve. Scale and proximity to screen indicates the hierarchy of which card is to be selected or deleted.    
Using one hand, the buttons are located in the ideal areas (in green) that has the least stress for the thumb. The golden ratio curve allows the buttons to stay away from the "out of reach" areas (in red).    
In the context of holding the phone with both hands but using just one, the buttons continue to be located at the best reach areas (green). This is the most ideal situation of using the interface since there is no "out of reach" areas (red) and, thu
When a user uses both hands and thumbs, the golden ratio curve runs into some issues. In the vertical phone context, when the buttons are on the top, the reach for the thumbs is not the most ideal and there is a "no reach" zone (red). Also, in the h
  The golden ratio UI animation design shown in context through a Calendar App.