#uxschoolresearch

UX School - Empathy Mapping

UX School - Master Apprentice - Citadela App

The next post I found to create a master apprentice from was a dribbble post by an interaction designer at google named Vilem Ries. The original post shows a carousel of cards that when tap on expand into a fullscreen image. From this fullscreen image the user can drag down to reveal an article, clicking on the images in the article will also move into a fullscreen display that gives some extra information on the image.

To create this post I set up an auto-animate trigger between a screen with the location card not expanded and a second in its expanded form. To create the effect from the downward drag leading to the article content I created a invisible layer that would have a drag trigger applied to it. this would use auto-animate and lead to an art board with the article content. The reason I chose to use an invisible layer is because it meant I could use a drag trigger without moving any of the on screen content. Lastly to create the expanding image effect I used three art boards. The first was the original article content screen. This screen would have a tap trigger applied to leading to a second art board showing the image in its expanded state. Then a time trigger would start leading to a new art board where the same content would be displayed by the new art board would be shrunk to the to the viewport height so that the art board could no longer scroll. The reason for the two art boards for this effect is because using only a single transition results in the image moving upwards and the viewport position suddenly changing because the image being clicked on is under the fold.

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

UX School - Adobe XD Master Apprentice 

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.

All UX School Project Blog Posts

UX School Research

Making of UX School Project 

UX School Sketches

Finished UX School Desktop Version

Finished UX School Mobile Version

All Heroes & Villains Project Blog Posts

Heroes & Villains Research

Making of Heroes & Villains Project

Heroes & Villains Sketches

Heroes & Villains XD Prototype Version 1 (5 Column)

Heroes & Villains XD Prototype Version 2 (6 Column)

UX School - Learning Adobe XD - Files for Chris

While I was relearning Adobe XD Chris asked me to help him create some designs for him in Adobe XD, these included a range of toggle sliders in various different detail levels, including Flat, and Flat+Shadows and Skeuomorphic as well as a recreation of a old IOS setting screen which made use of skeuomorphic design.

UX School - Refreshing my Adobe XD Knowledge