CT300 602/65A

Typography for Digital Content Design

Professors: C. J. Yeh
Company website: Cynda Media Lab
Email: chinjuz_yeh@fitnyc.edu
Office at FIT: D317
Program Website: NewCraetives.info
Program Channel: CT&D at YouTube
Student Projects on Behance: CT Classes / AD Classes
Instagram: NewCreatives.info
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 which 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/30 | Thur 09/01 (w1)

  • Introduction of the course & distribute the syllabus
  • Project #1: More Than Words 30 FPS / Duration: 15 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.
    – example: Lena Kourgouzov
    – example: Dora Maya
    – example: Desiree Mohammadi
    – example: Unmatched / Unstoppable / Unforgettable
    – example: Flavors
  • Lecture: Introduction to Typography for Digital Content Design
  • 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)
  • In-class Workshop/Homework:
    – Study group forming and select a group captain
    – Collaborative learning framework: join Slack group channel, install and/or update After Effects, Photoshop, and Illustrator, and create one G drive group folder.
    CT300 601
    CT300 65A
  • Prepare the first group presentation: one thing the group members have in common and the four examples of digital content design.

Tue 09/06 | Thur 09/08 (w2)

  • Group Presentation: Four Best Content Designs
  • Demo: After Effects
    – Review fundamentals
    – Setting up a comp (Command+N)
    – Import assets (Command+I)
    – 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
  • Homework:
    – Project #1 starts
    – Each group prepares a 7-minute presentation of the group of related words
    – The presentation should include the five keywords and five moodboard (images and 3 to 5 adjectives) each representing the emotion you intend to evoke.

Tue 09/13 | Thur 09/15 (w3)

  • Group Presentation: More Than Words Project Proposal
  • Lecture: Storyboard and Animatics
  • 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:
    – Audio choice(s)
    – Storyboard for project #1

Tue 09/20 | Thur 09/22 (w4)

Tue 10/04 | Thur 09/22 (w5)

Tue 10/11 | Thur 10/06 (w6)

  • QuickFire Demos
    – Text Animation Presets
    – Puppet pin
  • Team Review
  • In-class Workshop:
    – Project #1 production and presentation prep
  • Homework:
    – Project #1 Production

Tue 10/18 | Thur 10/13 (w7)

  • Individual Review
  • In-class Workshop:
    – Project #1 production and presentation prep

Tue 10/25 | Thur 10/20 (w8)

  • Presentation: First Project
  • Final Project: Data, Information, and My Message to the World (scholarship competition) / 30 FPS / Duration: 90 sec. (minimum) / Dimensions: 1920 (W) x 1080 (h) / format: H.264
    The goal of this assignment is to create a time-based and type-dominant quantitative infographic that is persuasive. Each student will define their research topic based on one of the sociological issues and challenges that people are facing today. The instructor will guide the students through the professional process of research, concept development, storyboarding, and the final production.
  • Discussion: How to Create Persuasive Motion Graphics
    – example: Natalia Corletto
    – example: Din Terpuni
    – example: Gabriel Ribes
    – example: Lia Sfiligoj
    – example: Alexis Gallo
    – example: Si Weon Kim
    – example: Margaux Le Pierres
    – example: Ashley Aviles
    – example: Marisa Sorto
    * Click here to see more past examples on class YouTube Channel
  • Homework:
    – Final project topic selections (3)

Tue 11/01 | Thur 10/27 (w9)

  • Presentation: Final Project Topic Selection
  • Demo:
    – Using video in After Effects
    – Effects: Corner Pin + CC Power Pin
    Luma Matte
    Time Remapping
  • In-class Workshop:
    – Winning Formula Part One: watch at least four examples together
    – Winning Formula Part Two: discuss why the scripts are successful and list all the key points (minimum 5 per video). Submit at the end of the class. (Google Doc, label your comment with your initials)
    – Final Project Scripts First Draft (Google Doc)
  • Homework:
    – Final Project Scripts First Draft (Google Doc)

Tue 11/08 | Thur 11/03 (w10)

  • Group Review: Project Script
  • Demo:
    Roto Brush
    2D Motion Tracking
    3D Camera Tracking Text
    3D Camera Tracking Solid
    – expression panel (Option + click on stopwatch)
    – expression: loopOut(); wiggle();
    – Tracking
  • In-class Workshop:
    – Final Project Scripts Review and Edits
    – Review your scripts together, do editing (Google Doc, label your comment with your initials), and submit the revision at the end of class.
  • Homework:
    – Final Project Scripts Complete.
    – Find audio, and create moodboard and style frames.

Tue 11/15 | Thur 11/10 (w11)

  • Review: Audio, Moodboard, and Style Frames
  • Demo:
    – Special techniques as needed
  • In-class Workshop:
    – Review your audio, moodboard, and style frames.
  • Homework:
    – Record Voiceover
    – Animatics

Tue 11/22 | Thur 11/17 (w12)

  • Review: Animatics
  • Demo:
    – Special techniques as needed
  • In-class Workshop:
    – Final production
  • Homework:
    – Final production

— Thanksgiving —

Tue 11/29 | Thur 12/01 (w13)

  • Demo:
    – Special techniques as needed
  • In-class Workshop:
    – Final production and presentation preparation

Tue 12/06 | Thur 12/08 (w14)

  • Demo:
    – Special techniques as needed
  • In-class Workshop:
    – Final production and presentation preparation

Thur: Tue 12/13 | Thur 12/15 (w15)

  • Final Presentation
  • All project files upload 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. 2 late occurrences = one absence
  5. A student who arrives over 30 minutes late or does not return 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.


  • Professionalism and Class Participation: 30%
  • First group presentation: 4%
  • QuickFire Challenges (5 points per challenge): 20%
  • First Project Presentation: 16% (4% project proposal, 4% storyboard, 4% animatics, 4% animation)
  • Final Project Presentation: 30% (5% research, 5% script, 5% animatics, 15% animation)
  • (A: 91% or above, B: 90% – 71%, C: 70% – 61%, D: 60% – 51%, F: 50% or below)

Uploading Files for Final Grades

  • CT300 601
  • CT300 65A
    * Keep all project and process files and upload them before the semester is over for final grading.

Policy on Plagiarism

Within the Communication Design Pathways Department, 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 before final grade assignments.

FIT Student Code of Conduct
Student Disability Services
Academic Honesty and Integrity Policy
FIT’s Course Withdrawal Policy 
Children on campus policy
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

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,