CX UI UX CASE STUDY: WIP
You know what they say, "'The cobbler always wears the worst shoes.'' I will do a write up on this case study working on the CX Tool but I have been busy working a lot. Worst of all, my files were in Sketch. :(
|
|
|
|
MY PROCESS FOR MOTION GRAPHICS: CISCO CX ANIMATION
I did motion graphics at CISCO though back in the day management thought video editing and MOGRAPH is faster than UX. :) HIGH TIME CONSTRAINTS SO I APOLOGIZE
CREATING THE CX SPLASH ANIMATION
|
I start off with a 1920x1080 Canvass and set it to 60 fps.
|
|
|
Create a Solid Layer in Cisco's light blue
|
|
|
In a pre-composed level section, i started to recreate the Cisco Logo in white on a blank background. The bridge icon are essentially bars with rounded ends. The official Cisco font is called Cisco TT
|
|
|
The next step is to transition to the next phase of the splash which I will put in another pre-comp. This is the logo for Cisco CX. The customer experience team within Cisco. The colors are all Cisco approved and branded colors. When I go about thinking how I want to create an animation, I start off thinking about the shapes. Immediately I see the X as a mask that is hiding these other complete circles. The circles overlap in a Venn diagram of sorts where the overlap produce a different color than the sum. This can be done in After Effects quite easily.
|
|
|
I like to start from where the bubbles all conform to the right position and work my way backwards. I will show the hierarchy i used to create the overlapping 3rd color effect.
`This is what I call the ugly frame. The circle density is all wrong and looks too condensed. When combined with the CX negative mask plate, it should form the correct logo but we never want the view to see this frame without the plate being "dropped." |
|
|
Here I have all my alpha channel masks and parenting hierarchy set up. To create the overlap between 3 circles and a center circle, I made a middle one that is the same as the background and made three duplicates with the same animation key frames react with each of the circles.
|
|
|
The CX "plate" is a mask made from an illustrator vector with the CX cut into a white box. I used scaling to create the zoom effect to make it look like the plate was going to drop on to the back drop.
|
|
|
The timing is off and i need to adjust when the plate drop when the bubbles start to crowd and not too late so that it looks too dense in comparison to the rest of the background composition. I like the density to remain the same and change it as the plate drops.
|
|
|
enhance motion blur
|
|
|
Landing the plate at the exact moment the bubbles overlap in the right placement is the key to a smooth transition.
|
|