Slides in Pdf: First: Interactive-Motion-Design
(ppt was too big, can’t upload it neither to GoogleDrive nor the IMA Blog
Link to the whole assignment folder: https://drive.google.com/drive/folders/1G32BVkD3lYfe7ArlFFRBUG5m1t4_CV5Z?usp=sharing
First 30sec assignment: Laugh away your insecurities: https://drive.google.com/file/d/1HObjlxcLMBMq_O177zDUPVvp3sHKbgXE/view?usp=sharing
Grid 10sec Piece: Caught off: https://drive.google.com/file/d/1NrpA9Lkbmg9f0NheUqtwk9fwBE__gKeG/view?usp=sharing
Helpful resources: Lynda
Other resources: https://www.youtube.com/watch?v=rnRc4_3PzWc , https://www.youtube.com/watch?v=uuaBg1agd70
Grid Inspiration: Animation by Maya Erdelyi: Africa Calling
Cultural Grid: Doctor Strange Mandala
1st: installing a new font to After Effects
2nd: Creating a circle texture from the text and stripes made from solids by using “Polar Coordinates”
3rd: Creating shape layers
4th: Pre-compose gradient shape layer with time displacement for exciting transformations
5th: Hand tracking on real life footage, parenting the mandala to hand
6th: Coloring the mandala (fractal noise, tinting, glow)
7th: new solid, mask and feather it
What’s motion design
To me, motion design is a field where one creates visual work that moves in a meaningful but also pleasant manner. I like to think that while it doesn’t necessarily mean that everything has to address the big questions or problems in life, the way the graphics move needs to somewhat represent/mean something as opposed to being entirely arbitrary. This meaningful-ness will hopefully allow the audience to understand the message that the designer tries to create or perhaps set the tone for a message the designer is about to share with them.
From my earlier memories, motion design means something seen on television. It is the animations connecting sections of the program, and the animated info charts to be the first thing when I think about motion graphics design. More specifically, they are animations not strictly containing characters or a story piece. In the recent 10 years, personal devices are becoming powerful enough that designers are putting more and more effort into interactive motion designs to enhance the user experience.
The first design system that attracts me to this area is Google’s Material Design. By using the metaphor of paper, elegant and meaningful animations are tools to help create a fluid and intentional workflow. The animations are not only beautiful to look at, but they are functional. They deliver information and communicate in a more efficient and useful manner.
From static graphics design to a moving media, motion design can help guiding viewer’s attention, expressing information with different hierarchies, or even accomplish a mini storytelling through staging. And by adding interaction to the formula, it now takes the responsibilities of providing feedback to the natural interaction. To summarize, interactive motion design is adding the “time” dimension to the traditional graphic design, and connect discrete and isolated scenes as a whole.
To define motion graphic design, we need to start with graphic design. Generally, graphic design keeps still. As a graphic designer, one need to place picture and texts in the proper position on a paper, such as movie poster or booklet, with certain design principles. However, motion graphic design is dynamic. Even though, graphic design and motion graphic design share the same design principle, motion graphic design has more various forms of expression. Instead of merely placing a picture or texts in the proper position, one can move, rotate, and transform a object on a screen. If graphic design is a piece of paper, then motion graphic design will be a flip book animation.
“Interactive” means the motion is not passively displayed to the audiences. It has to react to some elements in real life. The motion can change with the input, such as certain data and a gesture of the audience, so that the experience can be more immersive and interesting.
People’s eyes are sensitive to movements. Compare to graphic design, motion graphic design is more attractive. Moreover, it can help user understand some complex concept and process more easily, especially when interaction is added to the design.
In case of motion design, I can only associate to animation when we learned movement portrayal. How subtle, little things can change how one perceives a movement. For example squash and stretch can make all the difference in a walking cycle, making the character more realistic. Or timing, building up the movement matters, first to start slow, then to speed up and before the movement ends, to slow down again. These differences movement can make the viewer associate to anything, even that a piece of pizza can do the catwalk.
Motion design is getting more and more important in every field because by studying the relationship of movement and human perception, even the most boring and simple video redesigned can suddenly become exciting and eye-catching to the audience. I believe just like in animation, those 12 rules apply to motion design as well. Not just because it looks more appealing to the human eyes, if the motion design is “played by the rules”, but also movements need some consistency. If there is no rule to the design, we don’t know where to look and the information gets lost. That’s why I think the timing, and slowing in and out are exceptionally important.
Motion design is as its name implies, involving “motion”, “graphics”, and “design”, and comes up the pieces of digital footage or animation which create the illusion of motion or rotation and transformation.
First, Motion design is the animated graphic design. Motion design has to follow the principle of graphic design like the alignment, balance, contrast, proximity, repetition, and white space, etc.
Graphics are the components that move. Graphics can be referred to many visual elements, which take up the visual space or dimension and form the composition we see on the screen. They may include photographs, drawings, Line art, graphs, diagrams, typography, numbers, symbols, geometric designs, and maps, etc.
And for me, what makes motion design different from other types of animated digital footages is the continuity of the components and their motion flow, which can be referred to as the “rhythm” of the motion. It is the repetition of similar elements (either the components or the motion transitions) that creates the fluent connection between the last composition and the current composition and make the whole piece integrated.
Here is my “dynamic grid” practice. The motion is simple but implies the topic and rhythm of the ocean wave: Wave
During the class, many fields motion design can be used were introduced, such as Title Sequence, Public Service Announcement, Information Visualization, and Kinetic Typography. As a student who is interested in Graphic Design, I discovered that in all these fields, graphic design is related as well. Thus, I would build up my definition of motion design based on my understanding of graphic design. In my opinion, motion design can be understood as a branch of graphic design, at the same time, an extension of graphic design as well.
On one hand, graphic design is also recognized as “visual communication design”. From this perspective, graphic design is the design for communication of information in a visual form. The visual form can be in all kinds of media, including print media and digital media. In print media, with no doubt that all the graphics would be still. However, in digital media, the graphics can be still, but sometimes, with motions, graphics can convey more meanings than when it’s still. Thus, motion design, as design focusing on graphics with movements, is a branch of graphic design, which specifically focuses on how graphics with motions help convey meanings better and more that still graphics can not.
On the other hand, even though there is such a broad definition of graphic design, some people would easily assume that graphic designers only make posters, banners, logos, and sometimes, illustrations. From my own observation, this is not an assumption only made by consumers. In fact, there are some graphic designers who actually think these are the only thing that they do. I don’t quite agree with this opinion. However, if this opinion is widely accepted somehow, then, based on this interpretation of graphic design, I would argue that motion design can function as an enhancement and extension of graphic design. By giving well-designed motions to still images, the graphics will be more eye-catching and more expressive, and more effective in communicating the information. Since the ultimate goal of graphic design is to communicate information in a visual form, motion design seems to be more effective in communication as well as more pleasing in a visual way.
Even though motion design is sometimes more effective than graphic design, it can not be concluded that motion design is superior than graphic design since the two are for different medias. Graphic design has such a very long history, and so many theories have been made about graphic design. It’s very amazing how artists and designers use composition, shape, and color to convey endless meanings as well as arouse people’s imagination. Motion design, however, is a new concept compared to graphic design, and it’s more related to digital media. In fact, in different cases, different approaches should be considered. There are always some cases that would be better solved with still graphics and some other cases that have to be done with motion design.
200 word assignment:
I really don’t know what motion design is. I just entered the class inspired my interest in lettering and seeing other people animate their lettering, and I thought it would be a fun thing to learn. I’ve also previously made GIFs or little squiggly animations, which I’ve always loved because there’s such a charm to the movement, and how something simple when tweaked just the tiniest bit can turn into something monumentally different.
I’ve also done a little web design here and there, and I’ve always enjoyed how GIFs and animation can bring so much life to a website. I’ve always thought the popularity of mobile first has led to far, far less creative website designs, so it gives me a delight to discover a website with a GIF logo or a delightful TARDIS (Doctor Who icon) that slides open to show the menu on a Tumblr website.
So I don’t really know what the proper meaning of motion design is, but as far as I’m concerned, motion graphics has always brought me delight, made me look a little longer, and I’d like to put out work that makes people feel delighted enough to replay my work over and over again. If anything, that’s what motion design is to me.
10 second assignment: