CT372 Advanced Digital Typography

SEC602/THU

  • Prerequisite: CT371 Intro to Kinetic Typography or instructor’s approval
  • Date & Time: Thursday 3:10 pm - 6 pm
  • Classroom: Marvin Feldman Center Room 511
  • Semester: Spring 2017
  • Instructor: Christie Shin
  • Email: christie_shin@fitnyc.edu
  • Office: D317
  • Phone: 212-217-5651
  • Office Hours: Mon. 3-5, Wed. 2-3, Thu. 2-3
  • Class Website: ChristieShin.com

Course Description:

Advanced Digital Typography explores diverse typographic issues related to screen-based communication. The focus of this course is on modern typographic principles and design elements for screen-based media. Topics covered in this course include, but are not limited to readability and legibility of type on screen, modular type scales, hierarchy and structure for responsive layout, amplifying meaning and intent through typographic experience, sequence and flow of reading on digital devices, visual systems for interactive design projects, and wayfinding for screens.

Student Learning Outcomes:

    Upon completion of the course, students will be able to:
  1. distinguish the shared and unique attributes/principles of typography for print and screen
  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 area of modern web and app design
  5. apply design process for a digital product
  6. create a content centric design with a professional prototype pitch

Projects:

  • Project 1: Device diagnostic recipe design (30%)
  • Project 2: Content centric design for a mobile device (InVision Prototype + bechance) (40%)
  • Project 3: Case study reel (p2: Content marketing stratagy) (20%)

Unit/Area of Study:

UNIT 1 – Modern web and mobile design. Responsive typography for digital publishing

Core concepts:

Modern web and app design, responsive design, digital typography fundamentals, screen based interface design, content assessment, design with hierarchy, UI/UX design basics, Google fonts

Week 1-5 (5 lectures / 10 studio hours)

Project 1 : Device diagnostic recipe design

Brief:
This project is about responsive typography for the modern web design. The emphasis is user interface (UI) design for mainstream devices as well as content assessment and wireframing. The basic concepts and principles of UX/UI design specifics will be introduced.
Students form teams of 3 to 4 and define a theme which will be the core direction for the team’s set of recipes. Each team will present a creative brief after brainstorming the overall visual direction and content. Each student will continue to develop an interface design for a chosen recipe within the core theme.
In terms of the project outcome, it is a single screen design with the mobile first approach. Students must develop systems that can handle reflowing content across multiple devices—mobile phones, tablets, laptops, and desktops, etc.

Creative brief (project definition):

- Description of a theme
- Mood board and general design direction for a theme
- Selected recipes (content)

Subject(content):

A theme based recipe

Project Specifications:

Top level. Four different screen sizes

Readings:

Apple developer’s guide
Google: Material Design guide

Duration of the project:

4 weeks

UNIT 2 – Type dominant digital product for a brand

Core concepts:

Content marketing, content centric design, digital product, research and strategy, content assessment and wireframing, information architecture, high fidelity vs low fidelity prototype, prototype methods and tools, prototype pitch, UI/UX design, iterative design process, user test

Week 6-12 (7 lectures / 14 studio hours)

Project 2: Content centric design for a mobile device

Brief:
This project is to define a content marketing strategy and create a digital product for a major brand. Content marketing is one of the important strategic marketing approaches. It provides truly relevant and useful content to a brand’s prospects and customers to help them solve their issues.
Students begin with research on content marketing case studies. Once students select a brand, they continue with in-depth research about the brand’s insight, and their target audiences. 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 either mobile web or App 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 in order to pitch their strategy and idea.

Creative brief (project definition):

-Select a brand
-Brand’s insight and target
-Define the content marketing direction (web, app, etc.)
-Competitor analysis
-Strategy and content

Subject(content):

Content marketing strategy for a brand.

Project Specifications:

mobile web or app. multi level UI/UX design

Readings:

Content marketing strategy

Duration of the project:

6 weeks

UNIT 3 – Professional presentation of a digital product (Mobile web or App)

Core concepts:

Prototype pitch, Case study reel

Week 13-15 (3 lectures / 6 studio hours)

Project 3: Reimagining software training (FIT + infor)

Brief:
A joint project with students enrolled in both Design for Screen-based Media and Advanced Digital Tyopgrphy.
--
This project is a professional presentation of a digital product that students created in the previous project. This prototype pitch will demonstrate clearly a digital project’s content and features. The flow of content and key features will be highlighted with informational typography.
Students begin with storyboarding for the key features and record a prototype created by InVision or other prototype tools. Typography will be a leading element in this case study reel.
Produce a case study real using After Effects.

Subject(content):

Digital product pitch

Project Specifications:

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

Duration of the project:

2 weeks

Grading:

  • 90% Projects
  • 10% Class participation, attendance, and professionalism

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 2/2/2017Thu

INTRODUCTION / P1 WK1

1. Introduction of class, syllabus, projects

- CT Annual Exhibition (Nov.)
- Industry Collaboration

2. Lecture

- Modern Web and App design
- Mobile-First Responsive Design
- Introduction to Project 1

3. In-class workshop

- Form a group & define a theme

4. Next week

Creative brief(project definition): 10min.
- Description of a theme
- Mood board (general design direction for a theme)
- Selected recipes (content)


------ Snow Day: College closed ( WEEK2 February 9)------

Week 3 2/16/2017Thu

P1 WK2

1. Lecture

- Responsive Web Design

2. In-class workshop

- Presentation and discussion

3. Next week

- First draft: wirefame for all
• Mobile portrait: 320 x
• Tablet Portrait: 768 x
• Desktop/laptop: 1024 x
• Desktop HD: 1440 x1024px

Week 4 2/23/2017Thu

P1 WK3

1. Lecture

- Digital typography fundamentals
- Responsive typography

2. In-class workshop

- Design review

3. Next week

- Second draft: visual interface design

Week 5 3/2/2017Thu

P1 WK4

1. Lecture

- Responsive Web Design (RWD) layouts
- UI/UX design basics

2. In-class workshop

- Content assessment
- Design with hierarchy
- Design review

3. Next week

- Presentation

Week 6 3/9/2017Thu

PROJECT 1 DUE. PRESENTATION/CRITIQUE

1. Lecture

- Content marketing
- Digital products
- Introduction to Project 2

2. In-class workshop

- Content marketing case study discussion
- Brand research
- Project definition

3. Next week

Creative brief(project definition)
- Select a brand
- Brand’s insight and target
- Define the content marketing direction (web, app, etc.)
- Competitor analysis
- Strategy and CONTENT

Week 7 3/16/2017Thu

P2 WK1

1. Lecture

- Digital product workflow–Fairy Tale Fashion App
- Content assessment and wireframing
- Information architecture

2. In-class workshop

- Presentation and discussion

3. Next week

- Content development
- Wireframe + information architecture

Week 8 3/23/2017Thu

P2 WK2

1. Guest lecturer

- Prototype methods and tools

2. In-class workshop

- Stuio hours
- Monday, March 20 from 12 to 3pm

3. Next week

- First draft (first level & second level)

Week 9 3/30/2017Thu

P2 WK3

1. Lecture

- one-on-one: Content assessment

2. In-class workshop

- Low fidelity prototype

3. Next week

- Second draft (first level & second level)


------ Spring break (April 10-16)------

Week 10 4/6/2017Thu

P2 WK4

1. Lecture

- High fidelity vs low fidelity prototype
- Prototype making using InVision
- Prototype pitch

2. In-class workshop

- Design review

3. Next week

- Prototype

Week 11 4/20/2017Thu

P2 WK5

1. In-class workshop

- Design review

2. Next week

- Final design and Prototype making

Week 12 4/27/2017Thu

P2 WK6

1. In-class workshop

- Design review and prototype making

2. Next week

- Presentation

Week 13 5/4/2017Thu

PROJECT 2 DUE. PRESENTATION

1. Next week

- Storyboard for the Digital product reel

Week 14 5/11/2017Thu

P3 WK1

1. Lecture

- Digital product pitch (ideas and concepts)
- Pitching ideas and concept

2. In-class workshop

- Storyboard and content review

3. Next week

- AE first draft

Week 15 5/18/2017Thu

PRODUCT 3 DUE. FINAL PRESENTATION AND CRITIQUE

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)