App Animation Demo

Tips on prototyping screen recording
  1. Download Kap to record your prototyping screen. Kap has the option of not showing mouse movements.
  2. Screen recording your prototype on a web browser will allow you to zoom and increase screen size.
Suggested Schedule:

W 02/12: Plan your animation and prepare additional screens needed for animation

Weekend: Prototype your App

M 02/18: Prototype is due for discussion (Use your phone if applicable) Screen recording your 1st clip.

W 02/20: work in class: Animate your 1st clip;

Weekend: Screen record and animate your 2nd clip.

M 02/25: Discussion: Introduction to your app. Screen record and animate your 3rd clip and finishing your app animation

W 02/27: Work on your intro

M 03/04: Final presentation on App animation. Journal is due for mid term.

App Poster

  • Work in class today
  • Finish touching up all 8 screens

Inspiration 1, Inspiration 2, Inspiration 3

Weekend Assignment

  • Journal entries: Post at least 5 inspirational entries on app presentation
  • Digital poster(100% complete) for presentation —due on Monday, 02/10, TCU Online
  • Printed poster—due on Wednesday, 02/12

App Poster Design Mounting Guideline:

Include app logo, slogan(less than seven words), app description (2-3 sentences) , icons, color codes, typography, procedure (step1,2,3) or features, graphic elements, background and etc

  • Include 8-10 screens
  • Use iPhone mock-ups (3D, flat, outlined or no frame)
  • Label all screens
  • 1–2 inch border
  • Flush mount on foam board, long side edge 32-36 inch*
  • Similar to original iPhone screen size *

  • Bold text: project requirements
  • *suggested guides

Masking and Morphing shapes in After Effects

Any problems submitting your Animated Type Poster?


  1. Masking Shapes Demo—Trkmat, Bezier Path, Parent
  2. Morphing—Shape Layer, Rotation

Work in Class:

Please Animate one of your logo—due at the end of this class, you may post it on your instagram @ me or submit via TCU Online

  1. Separate logo layers in illustrator
  2. Use anchor point/scale/position/opacity/ rotation/ mask/ morphing in AE to animate your logo
  3. Don’t forget to turn on your Sunshine *
  4. Save it for Instagram

Meeting Individually:

  1. Creative Brief
  2. App names
  3. Logo Drafts
  4. 8-10 Screen plans

Due on Monday 01/27:

  1. Finalized name and logo design
  2. 2-3 UI styles for the 1st & 2nd screens (Sketch or XD)

Project Deadlines:

  1. at least 7 screens developed for progress critique—Monday 02/03
  2. 8 screens poster (digital) Presentation—Monday 02/10
  3. poster printed and mounted is due—Wednesday 02/12
  4. DSVC submission—Friday 02/15

App Project

  1. Download Uber and Foursquare in the App store
  2. Discussion: Visual Design, please reflect on your journal later
  3. Weekend Reading assignment: iOS Human Interface Guidelines
  4. After Effects Recap
  5. Discussion: Uber & Foursquare
  6. Work in class today—Type animation, please keyframe position, rotation, scale, opacity and make it fun? It’s due at the end of class today.
  7. Individual consultation today—What’s your app ideas? 2-3 app ideas, be ready to show 3-5 inspirational journal entries or apps on your phone, popular apps, work sample

8. Due Wed 01/22

  • One final app idea—Design brief, app name, and logo drafts are due
  • Be ready to discuss thumbnails and plan for all 8-10 screens (Sketches on paper)
  • Logo Animation Exercise—Please bring a logo you designed to work in the next class

Intro to After Effects


This is Advanced Computer Application to Graphic Design course! A class with the purpose of introducing the design concepts and skills required to develop interactive content for the screen-based media. This class will focus primarily on the merging of aesthetics and functionality in interface design, designing information architecture, and designing for a satisfactory user experience.

I will be encouraging you to work both individually and in groups during the semester on various projects, across various applications. However, the course remains focused upon understanding and the application of basic conceptual and design skills. I intend to provide these required skills to you, in informative, fun, and creative ways!

Please check out and use the links on the right column☞ for help and inspiration!

  1. Reading Assignment this weekend: UI Design Basics Visual Design, please put down your reading notes on your journal.
  2. Download: Exercise file
  3. Demo:
    • Inputting footage from Ai & Ps
    • AE interface
    • Shortcuts
    • Path editing
    • Timeframe
    • Graph editor
    • Rendering
    • Loop gif
    • Keywords for tutorials: after effects move on a path, bouncing ball, looping gif


  • Create an animated type poster by the end of Wed class/Jan 15, you may post it on your Instagram and tag me @yvecao, or submit it in Exercise folder on TCUOnline.
  • 2-3 app ideas/flow maps due on Mon/Jan 15, be ready to show 3-5 inspirational journal entries or apps on your phone
  • One app final idea—Design brief due on Mon/ 01/20, be ready to discuss thumbnails and inspirations on your journal

Intro to Bootstrap

Bootstrap is a free front-end framework for faster and easier web development
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
Bootstrap also gives you the ability to easily create responsive designs

HTML Template DEMO:

Coffee Blend HTML Template

Inspect elements
Edit source code
Find and replace in CSS

Extended learning on Bootstrap

Small Business Site Project

Event Website Presentation

Final Project:

Small Business Site

Event Project New Schedule

T Oct 29——Work in class
Th Oct 31—User testing and critique (3 or 4 sections)
T Nov 5—Work in class
Th Nov 7—Event Website final presentation

You are expected to have their fully functioning website uploaded to their server and accessible via web browser. Reply to my group email with your URL. The website needs to be put on digital mock ups and submit on TCUOnline. Please include title, description, web fonts, colors and other graphic elements.

Please continue working on your Journal site.