Calendar of The Blog
A trick of the eye 👀
🟦 In god “eye tracking”, we trust 🟦
After a whirlwind of travel, I continued to develop my understanding of motion design and animation principles present in the projects below. A “trick of the eye” isn’t just for magicians, and the next video showcases how interest in your design can carry your eyes and emotions through to the end of an animation. This is pure “design direction” at its finest! The many concepts explored here could be used for so many products, such as a movie title sequence or in contemporary product placement. What other ways could motion be used in your daily work?
The kinetic text plays with design elements such as scale, typography, and rhythm to pull your attention through the design. By layering tension and release, “Eyes Go Here” is both a design study and a reminder of how you can choose to keep the attention of all watching eyes by following planned movement.
Original project stills for constructing animation from School of Motion.
Roundtrip flight with follow-through, wrapping up with a ‘jackpot’ style rotation
Click image to play
‘Desk UnMess Revisited’ allowed me to explore prior lessons including elements like scale, follow-through, offsetting keyframes and I closed it out with a rotating track matte animation.
You can see my original ‘Desk UnMess’ video here.
Giving the ‘KIAI’ to secondary motion with some onomatopoetic roasting
Click image to play
🏓Pong practice highlights reusable & repeatable secondary animations that add ‘Zhuzh’ and emotion … sparkle, power and pizzazz! 🟣 Many other adjectives can continue to be explored within your own brand visuals! 🔵 How do you see the use of secondary motion in visual storytelling? 🟢
As the star of the show, or a secondary player, adding animation magic can become a decisive visual guide to your audience, communicating WITH animation can be fun and even helpful, aiding the conveyance of feelings, layered storytelling, and higher concepts, continuing an interesting brand storyline that perhaps you didn’t even know you had! (cue music)
While you wait for my next ‘episode’, please enjoy these wild roaming robots and keep exploring your own visual communication style as we pass through this quarter century moment!
Cheers!
The animations featured in this post were developed as part of my learning through the School of Motion’s Animation Bootcamp. While based on Bootcamp projects, each piece includes a variety of custom-built elements, modified timings and solutions, or creative additions to support animated ‘pieces of flair’ enriching the character — whether rebuilding from scratch, exploring secondary animation, or pushing visual storytelling further.
🥚From static to story🐥
Using two simple graphics (a toolkit of design icons and a wordmark for "DeskUnMess"), I built a looped animation using After Effects. This execution allowed me to explore foundational concepts within my work. I also explore digital “Easter Eggs” from Coursera that prove, if you know your audience you can implant marketing techniques from the back-end to the front-end of your technology.
Being a continuous learner, I have decided to dust off my technical skills and continue learning valuable tips and tricks that bring a new level of professional execution to my product delivery.
The Animation Process
I animated this conceptual design piece using Adobe After Effects as part of School of Motion’s Animation Bootcamp. It transforms two static graphics into a looping animation that explores additional illustrative concepts throughout the timeline. Brushing up on my skills through School of Motion - intense!
The concept: Bringing order to a chaotic desk using motion in Adobe After Effects.
Using two simple graphics (a toolkit of design icons and a wordmark for "DeskUnMess"), I built a looped animation using After Effects. This execution allowed me to explore the following foundational concepts within my work:
Improving motion hierarchy and concept execution.
Vector layer manipulation and shape creation tools.
Testing various easing and timing principles using the Graph Editor.
Final animation
Original still graphics used to animate
Still image 1 — A toolkit of design icons.
Still image 2 — A wordmark for "DeskUnMess".
Fun fact: Adobe After Effects' code name for the first version was originally "Egg" — Happy Easter! 🥚 ... I'm rolling with the egg theme ...
Peeping
for qualified Easter Eggs
What easter eggs bring back nostalgia? Digital or IRL?
What easter eggs bring back nostalgia? Digital or IRL?
🐣
Does this shape remind you of
Brach's Wrapped Marshmallow Easter Eggs?
🥚🐣🐥
Does this shape remind you of Brach's Wrapped Marshmallow Easter Eggs? 🥚🐣🐥
🥚
🥚
Have an Easter story? Share in the comments.
🐥
Dream it
🥚 Have an Easter story? Share in the comments. 🐥 Dream it
Where does branding stop and technology begin?
While poking around the developer console on Coursera, I stumbled across this gem: “Passionate about education? Come work at Coursera!”. It’s a subtle recruitment message—embedded where only the technically curious will see it, on the back-end of a technology website. It reminded me that small details can carry big impact when it comes to branding and voice. It also sparked a thought: how might I embed moments of meaning into my own work? Have you ever stumbled across an "Easter Egg" like the image below while working online? Let’s celebrate the hunt for curiosity!
✖️ Read about digital “Easter Eggs” and their history here 🧠
You can check out my LinkedIn post as well to find out more about how I found this surprise. I encourage you to be curious and explore today! You never know what you might find that will expand your ideas for tomorrow. 🥚
I have more to say, but I'll see you on the other side of the post—be curious!
Continuous learning | Enrolled in JavaScript Programming, part of the Meta Front-End Developer Certificate | School of Motion Courses including Kickstart and Animation Bootcamp
