Let's hop straight into my thought process when I think of motion and animation... I start by thinking does it meet the expectations or do I confuse users? When a user uses an interface I think about how the user perceives an object and how it actually behaves. As a designer, I want to minimize the gap between what user expects and what they experience, how do I incorporate this into my work? For example, looking at my portfolio I keep in mind how content comes on the screen and how it is cascading. This helps the user process all the information differently and understand where they are within the flow in a timely manner.
TARGET
Let's hop straight into my thought process when I think of motion and animation... I start by thinking does it meet the expectations or do I confuse users? When a user uses an interface I think about how the user perceives an object and how it behaves. As a designer, I want to minimize the gap between what user expects and what they experience,
Motion design is crucial in making user interaction with a brand's digital product it makes a more intuitive and streamlined.
let me better explain what interactions I took to animate my design and why each element is effective in my prototype process.
Problem questions I ask myself when I ideate
-
Is the interaction consistent?
-
Do the interactions and motion behaviors create a logical progression of events?
Solution
I wanted to ideate a flow by using Transformation to create a smooth narrative interaction.
why did I use transformation?
Transformation allows me to combine separate key moments in the user experience into a seamless and continuous series of events.
ex.
-
dog enter screen with the target
-
then hit the target
-
the target comes back as a 404 error
Key Interaction details used:
-
Offset after delay help to define relationships and hierarchies of objects when introducing a new element and scene.
This action was mostly used to move the dog in each scene with a 100ms after delay. I can say i could use more improvement by using less screens here and by micro-prototyping it and making it into components or using a plugin call figmotion which i didn't have enough time to master
Creating Components
-
Thought Process I knew i had to find a way to make the dog paw move so I did a bit of illustration to move the one paw.
-
To make the component move, i made 4 variants of the dog,
-
in the default state, I made the dog invisible so it can gradually disappear from the screen to look animated.
By the fourth screen, the dog is gone and it is invisible but the component is there.
A closer look at the full prototype
Obscuration Animation
what is Obstruction?
Obscuration Presents the user with an interface that causes attraction while Simultaneously Revealing a hint of the screen to follow.
-
We know the target is going to move us into a new screen this helps obscure the background so that the user can focus on the foreground, which is the 404.
-
As you can see i had to custom smart animate the spring for the intensity i want the bounce of the target.
Parallax animation
What is a Parallax ?
Parallax is a display when two or more UI elements move at the same time, but at a different speed, the intent here is to establish some sort of hierarchy. It provides a really nice visual experience for the user.
Incorporating parallax in my design
I wanted to give this part of the Target website a bit
enthusiastic visual experience settled and yet smooth.
What I did here is that i made section of key images into 3 layers
Each layer I had was moving opposite direction.
Clouds i'd SHIFT LEFT at least 15 times.
Cars were my second layers i SHIFT RIGHT about 20 times .
Building was the third layers i Shift LEFT
about 35 times.
Let's take
a look at the prototypes
Prototype
I originally did all the animation on 3 frames. In order to get the screen to move, I had to incorporate an extra frame so I named the two of them the same (as you can see on the right end) one of them is just for an illusion to make the movements seamless.
most parallax is on a drag state but because this was just animation I just wanted a consistent movement, that's why I had put it at an after-delay state .
How it looks currently on the website
Edits
I realized after a few weeks, With fresh pair of eyes from the far right that the building was not aligned and a bit disform. I probably missed it because
1. I didn't get peer revision it was just it was supposed to be seen by the client.
2. It was done at the last min because I saw it at the bottom of the target website and thought hmmm 🧐 it will be cool to create it into a parallax animation!
Final Results !
My mantra when It comes to Animation :
"Motion tells stories. Everything in an animation is a sequence, and motion is your guide. For every button clicked and screen transition, there is a story that follows"
Craig Dehner