#uxschoolmicro

[calumdixon]

UX School - Master Apprentice - Travel App 1

While looking for more posts to use as inspiration for a Master Apprentice I found two posts by Dennis Kramer. The screens showed how a mobile carousel worked and also showed thumbnail images on the screen expanding into fullscreen displays when tapped on. 

I thought this would be a great piece to try and create my own version of because I knew that this screen was going to make use of some tools I hadn’t used before like the drag trigger.

To set up the carousel I used auto-animate with a drag trigger applied to each image that was poking out from the side of the screen, these let to a new art board where the half visible image was now in the centre of the screen. The expanding images were created by creating a second art board which had my image mask and image expanded to the fullscreen size. This then was attached to time trigger to automatically lead to a third art board which had the new text change from 0 % to 100% opacity. I used separate art boards to make sure the text didn’t come into view before the image had finished expanding.

Original Posts that Inspired this

Post 1

Post 2

[calumdixon]

UX School - Adobe XD Master Apprentice 

The second master apprentice I decided to do was create my own version of a number counter created by Howard Pinksy. Unlike Pinsky I didn’t want a sharp cut off as the numbers/letters left the focus point, to resolve this I used a gradients on either end of the numbers/letters to give a fading appearance as they move away. To achieve the moving effect I wanted I used a series of translations in a second artboard to move the grouped letter and number columns I created.

[calumdixon]

UX School - Master Apprentice - Record Player Music App

While trying to learn Adobe XD I decided to go onto Dribbble and recreate some of the animations I saw there. The first one I picked out was created by Adobe and showcased a record spinning in a music app. I created my own rendition of the design, In this design i used auto-animate to create the an effect of an image shrinking and becoming a circle, this would be the sticker in the center of the record. Afterwards I had a time trigger start the recording spinning, this time trigger would move onto another time triggered art board that would lead back to the previous art board creating an infinite loop for the record to play in.

Original Post my Master Apprentice is based on

[calumdixon]

UX School - Calendar Micro-Interaction 

One of the first micro-interactions I worked on was for my calendar, this animation uses a combination of masks and auto-animate to create an effect where when clicking on a the day of your choice the events of that day will slide into view, this animation is also responsible for expanding the calendar card if additional space is needed for displaying multiple events.