#uxschool

General contents of slide deck and deliverables reminder.

More in depth break down of slides and narrative.

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.

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 - Minor Tweaks to Desktop App

I went back to my design to make some minor tweaks here and there because i wasn’t happy with the overall quality of the design just yet. The first thing I changed was the buttons, I felt that their scale needed to be slightly larger to give the text they held more breathing room, before it was really tight which made reading the text harder and also made it more unpleasant on the eyes.

The second thing I changed was the drop shadows on certain elements such as my resume last session tab at the top of the desktop screen. I made the drop shadows underneath the nav bar smaller so that I can add depth to the design which made the layering of different elements more apparent. 

UX School - Pivot Mobile App - Screen Intro Animations