CT300 601/65A (2023)

Kinetic Typography

Professors: C. J. Yeh
Company website: Cynda Media Lab
Email: chinjuz_yeh@fitnyc.edu
Office at FIT: D317
Office hours: Schedule a meeting with CJ via Calendly
Program Website: NewCreatives.info
Instagram: NewCreatives.info
Program Channel: CT&D at YouTube
FIT Help Desk: TechHelp

Course Description

Focuses on fundamental typographic elements, theories, and skills unique to screen-based media that enable students to create holistic and experiential typographic designs that move beyond the limitations of print. Touch-screen-based typographic layouts and responsive editorial design principles and techniques will be explored. Expressive screen-based typography experimentations, including the integrations of type, sound, motion, and interactivity are included.

Weekly Outline
* Weekly outline is subject to change according to the pedagogical needs.

Tue: 08/29 Thur: 08/31 (w1)

  • Introduction
  • Project #1: More Than Words 30 FPS / Duration: 12 sec. (minimum) / Dimensions: 1080 (W) x 1080 (h) / format: H.264
    The goal of this assignment is to create an expressive animation using typography, shapes, and music to communicate the feeling and emotion embedded in a word.
    Examples:
    Dora Maya
    Yewon Shin
    Desiree Mohammadi
    Lena Kourgouzov
    Unmatched / Unstoppable / Unforgettable
  • Demo: After Effects Fundamentals
    – AE Terminologies: .aep, comp, footage…etc,
    – workspace layout and general interface
    – Aspect ratios and screen resolutions
    – Frame rate (FPS)
    – Setting up a comp (Command+N)
    – Import assets (Command+I)
  • In-class Workshop:
    – Team forming (5 students per team), elect a group captain and pick a theme for project #1
    – Create a team Slack channel and create a team folder in the class Google Folder.
  • In-class Workshop/Homework:
    – Prepare the first group presentation
    – This 6-minute team presentation must include the five selected keywords (one per team member) within the theme and five mood boards (images and 3 to 5 adjectives) representing the design style and the emotion that you intend to evoke.

Tue: 09/05 Thur: 09/07 (w2)

  • Group Presentation: More Than Words Project Proposal
  • Demo: After Effects
    – Review fundamentals
    – Edit composition settings (Command + K)
    – Creating and editing text layer
    – Exit text editing mode: (ENTER on the numeric pad or Command +RETURN)
    – Selection tool (V)
    – Primary transform properties: Anchor (A), Position (P), Scale (S), Rotation (R), Opacity (T)
    – Motion Path
    – Easy Ease
    – Anchor Point Tool (Y)
    – Next/Previous Frame: (PAGE UP/PAGE DOWN)
    – Move anchor point to object center (Command + double click pan behind tool)
    – Activate Anchor Point Guide (Command + move anchor point with pan behind tool)
    – Center object on stage (Option + double click pan behind tool)
    – Preview: (Space Bar or 0 on the numeric pad)
    – Import Photoshop Files (footage, composition, or composition retain layer sizes)
    – Pan Behind / Anchor Point Tool
    – Export using Adobe Media Media Encoder
    – Solid layer for background while rendering using AME
    – Shortcut References
  • QuickFire Challenge #1
  • Lecture: Storyboard and Animatics
  • Homework:
    – Project #1 storyboard designs (one per team member)
    – Compile storyboards and audio choices and add them to your project #1 presentation slides.

Tue: 09/12 Thur: 09/14 (w3)

  • Due: Storyboard and audio choice
  • Demo: After Effects
    – Converting Photoshop Text Layer (Layer/Create/Convert to Editable Text)
    – Source Text Property
    – Hold Keyframe
    – Set work area (B, N)
    – Trim comp to the work area (option + click)
    – Deselect All (Command + Shift + A)
    – Shape Layer Basics
    – Graph Editor: Value Graph
    – Render basics
  • QuickFire Challenge #2
  • Homework:
    – Animatics for project #1 (one per team member)
    – Render animatics and add them to your project #1 presentation slides

Tue: 09/19 Thur: 09/21 (w4)

Tue: 09/26 Thur: 09/28 (w5)

Tue: 10/03 Thur: 10/05 (w6)

  • Team Review
  • In-class Workshop / Homework:
    – Project #1 production and team presentation prep

Tue: 10/10 Thur: 10/12 (w7)

  • Presentation: First Project
  • Lecture/Discussion: The Future is Inclusive
  • Project 2: The Future is Inclusive
    Each student team (3 students) will develop an inclusive product design concept through research and ideation, and a design sprint process inspired by Design Thinking methodology. The final deliverable is a project concept presentation and a persuasive case study video to communicate using kinetic typography to introduce the key value propositions of the product.
  • In-Class Workshop: Quick Fire Research
    – As a team, identify at least 3 problems that you believe are worth solving
    – Do a quick preliminary research to find at least 10 important facts per topic
    * Include links to sources
  • Homework:
    1) Identify three problems as potential topics
    2) Slack CJ and he will pick one topic for each team to move forward with
    3) Identify groups of people (potential users) that are impacted by each problem
    4) Dig deeper to understand the problem space as well as the potential users
    4) Create a Google doc to gather all the research findings for the selected topic and upload it before coming to the next class

Tue: 10/17 Thur: 10/19 (w8)

  • Due: Initial Research and Proposed Topics
  • Lecture/Discussion: Research Methodology: Empathy Interview
  • Lecture/Discussion: Persona
  • Demo:
    – Text property
    – Expression
  • In-class Assignment/Homework: Empathy Interviews (3 to 5) and Proto-personas
    – Desk research to learn more about your stakeholders (people with an interest or concern in something, such as people who care about and/or are impacted by the problem that you are trying to solve. In some cases, that might be people who could help solve the problem, yet not doing it.)
    – Interview a minimum of 3 to 5 look-alike stakeholders
    – Each team member will draft one proto-persona
    – Create a Miro board to gather the research findings
    – Prepare a slide deck for your key research findings and proto-persona drafts

Tue: 10/24 Thur: 10/26 (w9)

  • Due: Research Findings and Proto-personas
  • Demo:
    – Using video in After Effects
    – Effects: Corner Pin + CC Power Pin
    – Luma Matte
    – Time Remapping
  • Lecture/Discussion: Insight Statement (SEE)
  • Lecture/Discussion: Competitor Analysis + MVP
  • In-class Assignment/Homework: Insight Statement, Competitor Analysis, and MVP features

Tue: 10/31 Thur: 11/02 (w10)

  • Due: Insight Statement, Competitor Analysis, and MVP features
  • In-class Assignment: Winning Formula EXAMPLE
    – Each team will review 10 award-winning Future Lions case study videos and analyze:
    1. narrative flow and time allocation
    2. key fact(s)
    3. target segmentation
    4. primary functional/communication goals
    5. differentiation
    Click here to see past Future Lions winners
  • Homework: case study script first draft (no more than 2 minutes, roughly 240 words, upload before next class)

Tue: 11/07 Thur: 11/09 (w11)

  • Due: Case study video script first draft
  • Team review: case study script first draft
  • In-Class Workshop: Moodboard
  • Homework: case study script revision, mood board, and storyboard

Tue: 11/14 Thur: 11/16 (w12)

  • Due: Case study script revision, mood board, and storyboard
  • In-class Workshop / Homework:
    – Case study video design and production
    – Team review
    – Progress Update (upload before next class)

Tue: 11/21 Thur: 11/30 (skip 11/23, Thanksgiving) (w13)

  • In-class Workshop / Homework:
    – Case study video design and production
    – Team review
    – Progress Update (upload before next class)

Tue: 11/28 Thur: 12/07 (w14)

  • In-class Workshop / Homework:
    – Case study video design and supportive material production
    – Team review
    – Progress Update (upload before next class)

Tue: 12/05 Thur: 12/14

  • Final Presentation
  • All project files must be uploaded to Google Drive for final grading

Attendance Policy

Attendance is not optional. If you are going to miss a class, you must contact me via email ASAP. Due to the quantity of material covered in the course, I will not be able to spend class time explaining missed assignments or redo lectures. If a class is missed, it is your responsibility to get information regarding missed assignments and lectures from one of your classmates.

  1. Students are required to attend all classes, be on time, and remain for the entire class.
  2. Students who miss three classes will receive a grade of “F.”
  3. The student who arrives 10 minutes after the start of the class will be considered late
  4. Two late occurrences = one absence
  5. A student who arrives over 30 minutes late or not returning from the break will be considered absent from the class
  6. Working on projects for another class or using digital devices for socializing (texting, social media…etc.) or gaming during class time will be recorded as an absence
  7. An excused absence is still recorded as an absence. The difference is an excused absence won’t impact your grade for professionalism and class participation.
  8. In-class workshop time is for you to work IN CLASS so you can get feedback and help from your teammates, classmates, and professor. The more you do in class, the less homework you have. Sneaking out of an in-class workshop will be counted as lateness or absence, depending on the duration of the workshop.

Grading

  • Professionalism and Class Participation: 30%
  • QuickFire Challenges (5 points per challenge): 20%
  • First Project Presentation: 15% (4% project proposal, 4% storyboard, 4% animatics, 4% animation)
  • Final Project Presentation: 35% (5% research, 5% ideation and MVP, 10% script, 5% animatics, 10% animation)
  • (A: 91% or above, B: 90% – 71%, C: 70% – 61%, D: 60% – 51%, F: 50% or below)
    * You will work in teams in this class, but you will be graded as an individual

Uploading Files & Final Grades

Department Policy on Plagiarism

Plagiarism and other forms of academic deception are unacceptable. Each instance of plagiarism is distinct. A plagiarism violation is an automatic justification for an “F” on that assignment and/or an “F” for the course. A student found in violation of FIT’s Code of Conduct and deemed to receive an “F” for a course may not withdraw from the course prior to final grade assignments.

Use of AI tools
It is permissible to utilize AI tools in your creative process. However, you must identify which AI tool is being used at each stage of the process. You are required to fact-check AI output and avoid stereotyping and bias in your work. Finally, you are responsible for ensuring that the final creation is unique, ownable, and without any copyright issues.

Fact-checking AI output
AI tools are not infallible. They often generate incorrect or misleading information. It is your responsibility to fact-check any AI output before using it in your work. This includes checking the source of the information, evaluating the quality of the information, and considering the context in which the information was generated.

Avoiding stereotyping and bias
AI tools can be trained on data that contains stereotypes and biases. This can lead to AI output that is also biased. It is your responsibility to avoid the potential for bias in AI output. You should also be mindful of your own biases when using AI tools and take steps to mitigate them.

Ensuring the uniqueness and ownership of your work
You are responsible for ensuring that the final creation of your work is unique and ownable. This means that you must not plagiarize the work of others, including submitting works done solely by AI tools without meaningful improvement and input from you.

Penalty for violation
Violation of this policy may result in a grade reduction or suspension from the class.

FIT Student Code of Conduct
Student Disability Services
Academic Honesty and Integrity Policy
FIT’s Course Withdrawal Policy 
Children on campus policy
FIT-ABLE 
Academic Advisement Center 
FIT Writing & Speaking Studio
FIT Counseling Services
Academic Skills Tutoring Center
Dean of Students Office
Technical Support for Blackboard with Open SUNY Help Desk

Additional Course Information:

Credits/Hours: 2/3

STUDENT LEARNING OUTCOMES:
Upon successful completion of the course, students will be able to:

  1. demonstrate an understanding of the typographic design principles and theories that are unique for screen-based media
  2. establish a typographic hierarchy based on modular scales for adaptive and fluid grids
  3. create typographic design solutions for digital content design
  4. elaborate the mobile-first typography design process, screen-based typography scale, and the concept of relative hierarchy for responsive design.
  5. create a range of low to high-fidelity prototypes 
  6. create a professional quality case study reel (AE) and online presence

Grade appeal process: http://www.fitnyc.edu/registrar/grades/appeal.php for more information.
Library Resources: FIT Library Databases
Academic Advisement Center: http://www.fitnyc.edu/academic-advisement/index.php
Technical Requirements: High-speed internet and Adobe CC
Textbooks and Required Materials: Lecture slides will be provided every week after class,