top of page

Did That Submit Button Just Spin?

Writer: Stephanie CabralStephanie Cabral

Updated: Feb 20, 2023


READING AND WRITING

5 phenomenal examples of motion design in UI | Inside Design Blog

The time is now.


With everything planned out and ready to go, the time to animate has arrived. But did you really think the planning stage was over? With animation and film as well, you are always mentally updating even in the middle of production. Sometimes you find out that what you planned for a shot doesn’t actually look as good as you thought it would so you have to shift gears. Maybe the music you chose doesn’t sound like it matches the ambiance, or a complex scene can’t be done in a feasible way.


Seemingly minor details could impact the effectiveness of the piece if not carefully thought out. Posing characters a certain way adds to their personality, which enhances the story. Additionally, remember to include anticipation and follow through with actions to add to the reality of the world you created. Finding which direction movement is occurring, framing subjects using the Rule of Thirds, and mixing up the shot length and timing are all crucial factors to consider.


There are also some basic tips to consider that seem simple enough but will help you in the long run. For example, backing up your files. Imagine you just finished a week-long stop-motion animation project only for the SD card to malfunction and lose everything. This has happened at least once to every filmmaker, and it doesn’t need to! Backup, backup, backup!



RESEARCH TO INFORM

As I’m sure you know, animation can stretch into any field and not just strictly for entertainment purposes. It can even go down to some of the most niche aspects, like animating a search bar or navigation menu in a site or app.


Here are a few of my favorites:

CCRI: Clicking the CCRI logo at the top left page will bring you back to the home page. However, when you hover over it, it changes to I <3 RI.


Boston Museum of Science: The home page has a carousel that changes every 10 seconds or so to cycle through current exhibits. What’s nice about this is that it changes the background image as well. It blends in enough that it doesn’t make your eyes go straight to it, but visible enough to have a presence.


Dunkin Donuts: Their home page opens up with them encouraging visitors to get the app. The three icons below don’t link to anything, but they do zoom in and then out when you hover your cursor. It’s a simple enough animation but still catches the eye.


Loft: Many shopping sites have this, so Loft isn’t doing anything unique. The black bar at the top houses scrolling text to remind customers of sales or discounts going on right now.


Ryanair: A different take on the carousel approach but still gets the job done. I’ve never seen a design like this before.



CREATE

I continue to have a love-hate relationship with After Effects, even though I’m damn curious to learn it in and out.


Creating my own UI animation, I tried my best to pick something easy but….you know…I decided on creating a submit button, but make it more specific. So, I chose to have the button be for submittal for donations.


It wasn’t easy, and the spinning dollar sign did not come out the way I wanted to but hey, at least I’m learning!



Comments


©2023 by stephcabmedia. Proudly created with Wix.com

bottom of page