Labels

Information Design / Project 1

11.1.2023 - 24.2.2023 (Week 1 - Week 7)
Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media
Information Design
Project 1

LECTURES

Week 1 What is Motion Graphics? (11/1/2023)

Fig.1-1: Motion Graphics

Motion Graphics means Graphics in Movement.

Motion Graphics = Composition + Animation
    →　Composition = Graphics + Typography
    →　Animation = Movement + Rhythm

Motion graphics are produced in the following sequence.
  • Step 1: Write a Script That Tells a Story. 
  • Step 2: Storyboard While You Brainstorm the Visual Treatment.
  • Step 3: Take Your Storyboards into Design. 
  • Step 4: Animate the Final Designs.

The difference between motion graphics and animation
Motion graphics are a type of animation. While motion graphics describes moving or animated graphic design, animation is an umbrella term for the whole field of moving imagery.

Fig.1-2: Animation 

Unlike cartoon animation, motion graphics are not driven by characters or storylines. This art form focuses on the ability to move graphic elements, shapes, and text. This process is commonly used for things like television promotions, explainer videos, and animated logos. The skillset necessary for the other types of animation doesn't apply to motion graphics because there's no need to mimic body movement or facial expressions. Advertisements rely heavily on motion graphics and present plenty of career opportunities.

Type of Motion Graphics
  • Text animation: Kinetic Typography
  • Vector animation: Graphics elements created in AI
  • Chart Visualization
  • Character animation: wiggling
Fig.1-3: Kinetic Typography + Vector Animation
en.99designs

Fig.1-4: Character animation: wiggling

INSTRUCTION

Week 1 - Individual Task (13/1/2023)

Recommend 3 Professional Motion Graphics with Rationales & Inspirations

Fig.2-1: Explanatory Video, Apple

Recently, we often find motion graphics being used in well-known IT companies for explanatory videos of their products and services. The backgrounds in photos and videos are dense, but that is superfluous visual information in explanatory videos. Motion graphics are the most desirable way to explain how to use the product in a concise manner.

I do not particularly like this video. I cited one Apple video as a great example because the quality of videos from well-known companies is consistent.

Fig.2-2: TVCM, SumaRyu (a study abroad agency)

Bold and fast movements give viewers a sense of excitement. In particular, since this service is aimed at a younger audience, it features an actress (probably famous? I don't know her) and the text movements are somewhat exaggerated.

The reason we chose this video is the technology that combines actual video with motion graphics. Perhaps they used chroma key compositing to capture that actress.　If the settings for the progression of the video in Storyboard are not precisely defined, it will be difficult to support the actress's movements. In this sense, we felt it was necessary to plan and control the movement of the video in second-by-second detail from the planning stage.

Fig.2-3:  FITC Tokyo 2015 Title

While the 2 aforementioned videos are more commercial in nature, this one has a bit more of an artistic feel to it. I was researching great motion graphics and hit upon this video. Therefore, I do not know the details of how this video was made or what concept it is based on. From the title, I would guess that it is probably the title video of a video competition or event. When I looked at the fine details of the figure's movement, I got the impression that a great many man-hours were spent on it. Usually, showing too many colors and movements would make for an unpleasant video. However, I felt that this video was organized well.

Week 3 - Project 1: Instructable Infographics (27/1/2023)

Project details
These infographics present complex information quickly and clearly, with symbols charts and diagrams. With an information graphic, computer scientists, mathematicians, and statisticians develop and communicate concepts using a single symbol to process information. 

Your job is to transmit a set of instructions and at the same time educate the audience. Infographics should be fun, it should simplify the context, while representing information graphically. 

Because “A picture is worth a thousand words”. Yours should reflect the following:
  • To transmit or communicate a message. 
  • To present large amounts of information in a compact and easy to understand way. 
  • To reveal the data. Discovering cause-effect relations, knowing what’s happening. 
  • To periodically monitor the evolution of certain parameters. 
You will develop an infographic to communicate a concept, topic or idea - IN THIS CASE A COMPLETE SET INSTRUCTION TO A RECIPE. 
The infographic should take viewer visually through information you want them to learn or know. Based on your infographic the audience should be able to learn through viewing and interpreting the various graphical information and text. 

You will be required to evaluate what parts of the topic, concept, or idea are most important to tell/demonstrate and ask how you would represent each piece of information best. 
You will also decide how to graphically represent the most salient facts about your topic, concept or idea for student learning. This includes the finishing outcome which could be a slick animation or even a rough stop motion. 

An infographic poster for ONE recipe selected from
Study one video, breakdown and chunk the preparation and cooking process into an instructable poster. Try to capture each Grandma’s personality and unique dish identity in your poster as part of the narrative structure.

Requirement
  1. Infographics poster (1240 × 1750 pixels or 2048 × 2048 pixels)
  2. Animated Instructable poster (Max 60 sec / 720p: 1280x720 pixels (H26/mp4))

Process of Work
First, select a video from the Youtube channel designated as the subject matter to be used for this project.

Fig.2-4:  Selected Video
"Pasta Grannies cook strozzapreti pasta with seafood!"

From the videos selected for this project, I created a spreadsheet listing the cooking process and ingredients.

Fig.2-5: Listing Process & Ingredients


The process was analyzed in the spreadsheet, I drew a draft by hand. Because each process and ingredient needs to be illustrated, I drew it in some detail rather than wireframes.

Fig.2-6: Poster Draft Final Ver.

After this, the poster will be digitized using Illustrator.

Fig.2-7: Artboard Setting

Fig.2-8: Mood Board

Created artboards in the specified size. Also set up a working environment with a draft and reference images.

Fig.2-9: Illustration (Parts)

Fig.2-10: Title Logo

Designing the illustrations needed for the poster in parts.

Fig.2-11: Designing Process

Fig.2-12: 1st Draft of Poster (3/2/2023)

As feedback on 1st draft, the handwritten draft (Fig.2-6) is tighter and better contained. Therefore, I decided to adjust the size and margins of each illustration and text to achieve a style similar to the draft.

Fig.2-13: Unnecessary Empty Space

I also noticed at this stage that the eye guidance on this poster is not good. In particular, the sequence of steps 4, 5, and 6 is unnatural, which was a remnant of initially thinking of the cooking of the sauce and the cooking of the noodles as separate items.

Fig.2-14: Previous Flow

Fig.2-15: Revised Flow

So I changed the position of the cooking process, to make the flow natural.

Fig.2-16: 2nd Draft of Poster (5/2/2023)

While adjusting the parts of the illustration, I attempted to adjust the title and overall color scheme.

Fig.2-17: 3rd Draft (6/2/2023)

In the 3rd draft, a reconsideration of background colors and color schemes was suggested as feedback.

Fig.2-18: 4th Draft (12/2/2023)

As feedback on 4th draft, brighter backgrounds are now better. However, the process numbering sizes aren't uniform and the spacing of each process doesn't look good. Reducing and standardizing the numbering and hierarchy of information were suggested, such as bolding important parts in the text information.

Fig.2-18: Poster Final Outcome (16/2/2023)

Animation
Based on the created poster design, make a 1-minute animation.

Fig.2-19: Redesigning Parts

Create an artboard of the given screen size and modify objects in the poster.

Fig.2-20: Separate Layers

Now the objects are subdivided into layers with animation in mind.

Fig.2-21: Layer Numbering

I numbered the layers for each scene and used them as a reference when animating.

Fig.2-22: Import to After Effects

Fig.2-23: Video Editing Part

Multiple scenes were merged to create the final 1-minute composition.

Fig.2-24: Error?

Sometimes I got this error when I tried to export. Probably lack of my PC specs.

Fig.2-25: Sound Effect

Added sound effects. Since Premier Pro was easier for me to handle, I completed the animation and exported it, then imported it into Premier Pro for further editing.

Fig.2-26: 1st Draft (16/2/2023)

Feedback from Lecturers
  • Animation speed of the ingredients list is too fast
  • Eliminate text and use only keywords throughout
  • Knead scene added
  • Composition of the dough-making scene, put it in the center
  • Add cutting ingredients in the scenes of sauce
  • Expression of the ingredients in the frying pan
To make additional edits from these ideas, I created new captions, illustrations, etc. in Illustrator.

Fig.2-27: More Illustration

Created the missing illustrations, layer them in the same way, and import them into AE again.

Fig.2-28: Exporting

Similarly, adjust the animation timing, add sound effects, and export.

Fig.2-29: 2nd Draft (23/2/2023)

Further Feedback from Lecturers
  • It would be smarter to have a flow of making the sauce and then making the noodles while waiting for the dough to be ready.
  • Display the name of the ingredient.
  • Unify the design of cutting and other cooking methods.
  • Adjust speed of 5,6 a little slower.

Fig.2-30: Caption Design using Illustrator

Ingredients were designed in a circular frame, and the cooking method was decided upon in a speech-bubbles-like design.

Fig.2-31: Re-designing the Compositions

This time, I split the composition further in order to swap the order of the animations. The completed Final outcome is below.

Final Outcome
Fig.2-32: Poster Final Outcome (16/2/2023)

Fig.2-33: Animation Final Outcome (2/3/2023)

REFLECTIONS

Experiences
In this assignment, we were able to learn how to organize information and reconfigure an already existing flow (in this case, how to make pasta) in an easy-to-understand manner through actual examples. I paid special attention to the first step, the part where you watch the video and organize the cooking methods into a spreadsheet. I believe that in-depth understanding of the subject matter allowed me to proceed with tasks, such as creating illustrations, without hesitation.
Observation
I was able to further deepen my knowledge of how to use After Effects. In particular, in addition to basic AE usage, such as creating multiple compositions for each scene and combining them into a final composition, I investigate various things through a series of productions, from animation speed to sound. But still my video design is not perfect. In the future, I hope to complete my work more efficiently, including designing in illustrator, so that I can have more time to review my own work objectively.

Findings
In fact, my computer crashed several times as I worked on the project. I thought that when making more complex or long videos, knowledge of hardware, as well as software, is necessary. Project 1 was my favorite assignment because it offered both instruction in graphic design and video editing, and the subject matter was both routine and educational.
Labels:

Comments

Post a Comment

Popular Posts