CT300 Introduction to Digital Typography


  • Prerequisite: CD372 Typography II
  • Date & Time: Thursday 2:10 pm - 5 pm
  • Classroom: Marvin Feldman Center Room 511
  • Semester: Fall 2017
  • Professor: Christie Shin
  • Email: christie_shin@fitnyc.edu
  • Office: D317
  • Phone: 212-217-5651
  • Office Hours: Mon. 3-5, Wed. 3-4, Thu. 5-6
  • Class Website: ChristieShin.com

Course Description:

Introduction to Digital Typography focuses on the fundamental typographic elements, theories, and skills that are unique to screen-based media. The focus of this course is to enable students to create responsive and screen-based typographic designs through their projects and present their design solutions in a professional quality case study reel. Topics covered in this course include, but are not limited to responsive typography and layout design, the understanding of user flow, information architecture, wireframe, content navigation, reading experience, and prototyping methods.

Student Learning Outcomes:

    Upon 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 typographic hierarchy based on modular scales for adaptive and fluid grids
  3. demonstrate basic knowledge of responsive user interface (UI) design and typography for digital media
  4. create typographic design solutions in the areas of modern web and app design
  5. elaborate the mobile-first typography design process, screen-based typography scale, and the concept of relative hierarchy for responsive design.
  6. create a range of low to high fidelity prototypes in digital products (InVision)
  7. create a professional quality case study reel (AE) and online presence (Behance)


  • Project 1: Device diagnostic responsive design (30%)
  • Project 2: Content marketing strategy for a brand: Consumer product, digital product/service (40%)
  • Project 3: Case study reel (20%)


  • 80% Projects
  • 20% Class participation, attendance, and professionalism

Required Reading:

Due to the ever-changing nature of Digital Design, web resources will be assigned as required reading for this course.Class website: http://www.christieshin.com/

Unit/Area of Study:



Modern web and app design, responsive design vs. adaptive design, digital typography fundamentals, Responsive typography for digital publishing, screen based interface design, content assessment, design with hierarchy, UI/UX design basics, Google fonts.

Week 1-6 (6 lectures / 12 studio hours)

Project 1 : Device diagnostic responsive design

This project is about responsive typography and layout for the modern web design. The emphasis is user interface (UI) design for mainstream devices as well as content development and assessment. The basic UX/UI design concepts and visual design principles will be discussed.
Each student will come up with a theme-based gathering event with recipes and ideas (decor, music, etc.), and present a creative brief including theme, content and visual design direction. The outcome of the project is a single screen design with mobile first approach. Students must develop systems that can reflow the content across multiple devices—mobile phones, tablets, laptops, desktops, etc.


A theme based gathering event, which has at least three (3) components. (i.e. if you are planning a theme based party, the components can consists of recipes, music, visual influence/style, relevant stories/movies, etc.)

Creative brief (project definition):

- A gathering event theme and description(objective)
- Mood board and general design direction of a theme
- Selected content (recipes, music, activity ideas, relevant content, etc.)

Project Specifications:

- A home page and three component pages
- Four different screen sizes

  • Mobile portrait: 375 width
  • Tablet portrait: 768 width
  • Desktop/laptop: 1024 width
  • Desktop HD: 1440 x1024p width
- InVision prototype

Duration of the project:

6 weeks
Week 1: Creative brief presentation | Sitemap and wireframe
Week 2: Wireframe all, mobile first design
Week 3: First draft all, low-fidelity prototype
Week 4: Second draft all, high-fidelity prototype
Week 5: Presentation



Content marketing, digital product, research and strategy, content development, information architecture, user profile, defining persona, scenario/user stories, user flow, site map, wireframes, prototype methods and tools, visual design principles, UI/UX design, iterative design process.

Week 7-13 (7 lectures / 14 studio hours)

Project 2: Content marketing strategy for a brand

This project is to define a content marketing strategy and create a digital product for a major brand. Content marketing is an important strategic marketing approach. It provides truly relevant and useful content to a brand’s prospects and customers to help them fulfill their needs.
Students begin researching content marketing case studies. Once students select a brand, they continue with in-depth research on the brand’s insight and the target audience. Students define the content marketing direction and develop the content accordingly. The core content will be composed through the process of wireframing, information architecture, and prototypes. Create a digital product using mobile web or App platforms according to the defined content, features, and functionality.
The final outcome will be a mobile first digital product with multi-level interface design screens. After completion of the UI design, students will make a high fidelity prototype which they will use to pitch their strategies and ideas.


Content marketing digital product for a consumer product, lifestyle brand/service (Airbnb, fitness club, etc.). The focus is to provide valuable content to customers, which will benefit them, not to create a tool or a utility App.

Creative brief (project definition):

- Select a brand–Brand’s insight
- Competitor analysis
- Target audience
- Define the content marketing direction (pov, web, app, etc.)
- Persona and scenario
- Strategy and content

Project Specifications:

- Mobile first approach.
The proposed content can be a part of an existing website or it can be an independant microsite
- InVision prototype
- Behance page

Duration of the project:

7 weeks



Digital product pitch, case study reel

Week 14-15 (2 lectures / 4 studio hours)

Project 3: Case study reel

This project is a professional presentation of a digital product that students created in the previous project. This prototype pitch will clearly demonstrate the digital project’s content and features. The flow of content and key features will be highlighted with informational typography and/or voice over.
Students begin with storyboarding for key features and record a prototype created by InVision or other prototype tools such as After Effects.


Digital product pitch

Project Specifications:

- Screen size: 1920x1080 px
- Length: Max 2 minutes

Duration of the project:

2 weeks

Department Policies:

Attendance is not optional. If you are going to miss a class, you must contact the instructor via telephone or email ASAP. If a class is missed, it is your responsibility to get information regarding missed assignments and lectures from one of you classmates.

  • Students are required to attend all classes, be on time, and remain for the entire class.
  • Students who are absent for 3 classes will receive a grade of "F."
  • Student who arrives 10 minutes after the start of the class will be considered late
  • 2 late occurrences = one absence
  • A student who arrives over 1 hour late or not returning from the break will be consider absent from the class
  • An excused absence is still considered an absence

Week 1 8/31/2017Thu


1. Introduction of class, syllabus, projects

2. Lecture

- UX/UI Design Basics, Process, & Techniques
- Modern Web and App design
- Introduction to Project 1

3. In-class workshop

- Project definition

4. Preparation for next week

Presentation: Creative brief(project definition)
- Event theme & description
- Mood board & general design direction for a theme
- Selected content (research & findings)
- Sitemap (structure)
- Wireframe (content)

------ Labor Day: College closed (9/4/2017)------

Week 2 9/7/2017Thu

P1 W2

1. Lecture

- Responsive Web Design

2. In-class workshop

- Presentation and discussion

3. Preparation for next week

- First draft: wirefame for all
• Mobile portrait: 375 width
• Tablet portrait: 768 width
• Desktop/laptop: 1024 width
• Desktop HD: 1440 width

Week 3 9/14/2017Thu

P1 W3

1. Lecture

- Responsive typography

2. In-class workshop

- Content assessment
- Sitemap & wireframe review

3. Preparation for next week

- First draft all, low-fidelity prototype (paper prototype)

------ Rosh Hashanah: 9/20/17 Class suspended at 4pm, 9/21/17 College closed------

Week 4 9/28/2017Thu

P1 W4

1. Lecture

- Responsive Web Design (RWD) layouts

2. In-class workshop

- UX/UI review
- Design review

3. Preparation for next week

- Second draft all, high-fidelity prototype (InVision)

------ Yom Kipper: 9/29/17 Class suspended at 4pm, 9/30/17 College closed------

Week 5 10/5/2017Thu

P1 W5

1. Lecture

- Interactive Prototype

2. In-class workshop

- Design review

3. Preparation for next week

- Presentation

Week 6 10/12/2017Thu


1. Preparation for next week

- Understanding of Content Marketing: Explain definition of Content Marketing and provide 3 examples

Week 7 10/19/2017Thu

P2 W1

1. Lecture

- Introduction to Project 2
- Content marketing
- Digital products

2. In-class workshop

- Quick presentation: Explain definition of Content Marketing and provide 3 examples
- Content marketing case study discussion
- Select a brand

3. Preparation for next week

Creative brief (Project definition)
- Select a brand–Brand’s insight
- Competitor analysis
- Target audience
- Persona and scenario
- Strategy–define the content marketing direction (mobile web, microsite, blog, etc.)
- Content

Week 8 10/26/2017Thu

P2 W2

1. Lecture

- Digital product workflow–Fairy Tale Fashion App
- Content assessment
- Information architecture (sitemap)
- User flow/task flow
- Wireframing (content)

2. In-class workshop

- Presentation and discussion

3. Preparation for next week

Designing content
- Sitemap (information architecture)
- User flow/task flow
- Wireframe
- Paper prototype

Week 9 11/2/2017Thu

P2 W3

1. Lecture

- High fidelity vs. low fidelity prototype
- Prototype methods and tools

2. In-class workshop

- Content assessment
- Paper prototype review

3. Preparation for next week

- UI & design development
- InVision prototype round1

Week 10 11/9/2017Thu

P2 W4

1. In-class workshop

- InVision prototype round1 review

2. Preparation for next week

- InVision prototype round2

Week 11 11/16/2017Thu

P2 W5

1. Lecture

- Digital product pitch (ideas and concepts)
- Behance portfolio

2. In-class workshop

- InVision prototype round2 review

3. Preparation for next week

- Final design
- Behance page draft

------ Thanksgiving break: College closed (11/23/2017)------

Week 12 11/30/2017Thu

P2 W6

1. In-class workshop

- Final design and Behance page review

2. Preparation for next week

- Presentation (Behance & InVision)

Week 13 12/7/2017Thu


1. Lecture

- Introduction to Project 3

2. In-class workshop

- Storyboard and script development

3. Preparation for next week

- Storyboard
- AE first draft

Week 14 12/14/2017Thu

P3 W1

1. In-class workshop

- Content/script/design review

2. Preparation for next week

- Final presentation (Reel movie)

Week 15 12/21/2017Thu


Keep and backup all the exercises and projects that you have done throughout the semester! You must submit all your projects for the final grade no later than the last day of class (Week 15)