case studies interactive design

 Drag and Put researches Image Upload  Retrieved from:  https://dribbble.com/shots/8297994-ikas-Dashboard-Image-Upload-Animation This is a UI interface with experiencing drag and put. In the beginning, users choose the image from elsewhere with hand-holding which means mouse clicking the image. Then, users need to drop their images to this place where there's an icon animation and the "Drop your image here or browse"  title as well. After users complete the drop image, it will show the uploading animation. The overall design is smooth and clean. The color mood is blue and white. Background applied the drop shadow effect to create a pop-up feeling. Besides, an interesting interaction is applied when users drag the image to the drop place, which has some rotation on it. The place for drop image has applied hover effect on it. After completing the uploading, the line animation moves down its position until fully disappears. The box decreases its height as well. Flowchart

Slider Researches  Balloon Slider Control Retrieved from:  https://dribbble.com/shots/7515563-Balloon-Slider This slider is a balloon slider that shows the numbers. Users are required to drag the slider for experiencing the interaction. In the beginning, users can choose the direction they prefer to go. The number starts counting from the left to right and changes the value in every drag point as well. Whenever users drag, the balloon will follow the drag holder with the number in it, at the same time, the balloon will change its size depends on the value. The smaller value, the smaller balloon whereas the bigger value, the bigger the balloon is.  When users satisfy the drag point they want, the handle slide transforms to a smaller circle with different colors and the balloon gone.  Smaller value, smaller balloon Bigger value, bigger balloon Holder slider change when users confirm the point.   The overall design is clean and smooth. Background slider using low opacity and the fill area