Since the timeline of this project was four weeks, it seemed pragmatic to designate a single task flow capable of demonstrating as many micro-interactions as possible.
Previous design system colors were re-adapted through Material Design XD sticker sheet for accessibility. Typography was converted from Verdana to Roboto to provide more character styles. Mobile components were updated per material design specs.
Additional contextual information is featured in the top navigation. Added notification center. Redesigned message display. Simplified interface, changed buttons to tabs.
Material Design offers an After Effects sticker sheet, demonstrating an effective workflow following the Material motion guidelines. Although this was a helpful resource, I had to import custom components from XD rather than placing and manipulating pre-existing baseline UI components from the sticker sheet. The majority of interactions were built by me in After Effects while referencing the Material motion guidelines.
Certain fading elements utilize linear easing. Otherwise, a typical easing pattern is 40% outgoing and 80% incoming over 300ms.
Most interactions occur over 300ms, frequently choreographed with various moving pieces. This time frame is long enough to guide attention but short enough not to distract. Depending on screen size and need, an animation may occur from 90ms to 500ms. Stylistic choices may last longer.
ReflectionThere is a need for consistent and meticulous relationships between all atoms, molecules, and organisms in both interface and motion design. We perceive interactive space similarly to how we understand the real world, where movement is generally consistent, guided by laws of motion. Successful design intuitively guides users through space, and successful motion design intuitively guides users through space + time.