CT300 65A

Typography for Digital Content Design

Date & Time: Monday 6:30 pm – 9:20 pm
Classroom: Marvin Feldman Center, Room C511
Semester: Fall 2019
Professor: Christie Shin
Company website: Cynda Media Lab
Email: christie_shin@fitnyc.edu
Office at FIT: D317
Office Hours: Monday 2 to 3, Wednesday 11 to 12 and 3 to 4, Thursday 5 to 6

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 professionally. Topics covered in this course include, but are not limited to responsive typography and layout design, the understanding of information architecture, wireframe, user flow, content design, 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. Design content and establish a typographic hierarchy based on a modular system 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 (paper prototype to XD)
7. create a professional quality online presence (Behance)

Project(s) & evaluation
Project 1: Media-agnostic responsive design (20 points)
Project 2: Content marketing strategy for a brand: Consumer product, digital product/service (60 points)

– 80% project(s)
– 20% Class participation, attendance, and professionalism

Topics: Modern web and app design, responsive design vs. adaptive design, digital typography fundamentals, Responsive typography for digital publishing, screen-based interface design, content design, content assessment, design with hierarchy, UI/UX design basics, Google fonts.
Week 1-5 (5 lectures / 10 studio hours)
Topics: Content marketing, content development, digital product, research and strategy, persona, scenario, sitemap, wireframes, user flow, prototype methods and tools, visual design principles, UI/UX design, design thinking methodology, iterative design process.
Week 6-15 (10 lectures / 20 studio hours)

Weekly Outline

Week 1: 8/26/2019 MON | P1 W1
1. Introduction of class, syllabus
2. Lecture
– UX/UI understanding
– UX/UI basics
– Project introduction
3. In-class workshop
– Define a subject and target audience
– Content development (one page)
– Sketch
– Wireframe
4. Next week
– Digitized master wireframe (submit by 9/2/19)
– Digitized wireframe in three different sizes (blackboard score: 8 points)

—— Labor Day: College closed (9/2/2019) ——

Week 2: 9/9/2019 MON | P1 W2
1. In-class workshop
– Content review
– Digitized wireframe review
2. Lecture
– Design tools: Artboard, grid system
3. Next week
– UI design first draft

Week 3: 9/16/2019 MON | P1 W3
1. In-class workshop
– UI design review
2. Lecture
– Media Agnostic RWD
– Design tools: Preview, prototype, etc.
3. Next week
– UI design (mobile, tablet, desktop)

Week 4: 9/23/2019 MON | P1 W4
1. In-class workshop
– UI design review (mobile, tablet, desktop)
2. Lecture
– Responsive typography
– Human Interface Guidelines
– Design tools: Repeated grid, working with data, sharing, etc.
3. Next week
– Completed UI design & Behance page draft

——–Sep 30 – Oct 1: Rosh Hashanah – College closed———-

Week 5: 10/7/2019 MON | P1 W5
1. In-class workshop
– Progress review

2. Next week
Create a project 1 folder inside of your folder and upload below:
– Wireframes (native file)
– Responsive UI design (native file)
– Behance page (native file. Email me your Behance link by October 13)

——–Oct 8: Yom Kippur – classes suspend at 4 pm————
——–Oct 9: Yom Kippur – College closed-———————-

Week 6: 10/14/2019 MON | P2 W1
(blackboard score: UI design 8 points, Behance page 4 points)

1. Lecture
– Content Marketing reference materials

2. In-class workshop
– Quick discussion: Select a brand & a subject

3. Next week
– Watch the CM documentary film
– Read the Best Content Marketing Brands 2018
– Provide 3 content marketing examples and briefly explain why they are successful (google doc)
– Content Marketing: Select a brand & a subject

Week 7: 10/21/2019 MON | P2 W2
1. Lecture
– Project 2 introduction: Content Marketing
– Proposal & user research (persona, scenario)

2. In-class workshop
– Project discussion (small group activity)
– Content Marketing Proposal (presentation format):
• Select a brand and define a subject
• Research
• Competitor analysis
• Insight
• Big idea
• Strategy
• Persona
• Scenario (persona’s situation and need)
• Content example
• CM platform (a microsite or a section of a website)

3. Next week
Create a project 2 folder inside of your folder and upload below:
– Content Marketing Proposal (blackboard score: 10 points)
– Developing content

Week 8: 10/28/2019 MON | P2 W3
1. Lecture
– UXUI Design process (information architecture, user scenario, user flow, task flow)

2. Content Marketing proposal presentation

3. Next week
Upload below inside of your project 2 folder:
– Sitemap (blackboard score: 4 points)
– User scenario & User flow (blackboard score: 4 points)
– Content (google doc)

Week 9: 11/4/2019 MON | P2 W4
1. In-class workshop
– Review sitemap, user flow, and wireframes

2. Next week
Upload below inside of your project 2 folder:
– Wireframe (blackboard score: 4 points)
– Content development (6 points)

Week 10: 11/11/2019 MON | P2 W5
1. In-class workshop
– Wireframe & content review
– Low-fidelity prototype (demo)

2. Next week
– Wireframe revision
– UI design

Week 11: 11/18/2019 MON | P2 W6
1. In-class workshop
– Finalized wireframes
– UI design based on user flow/wire flow

2. Next week
– UI design for all screens based on user flow/wire flow

Week 12: 11/25/2019 MON | P2 W7
1. In-class workshop
– Review UI design
– Work on a high-fidelity prototype (click-through)

2. Next week
– Complete UI design (blackboard score: 10 points)
– High-fidelity prototype (blackboard score: 10 points)

——–Nov 28 – Dec 1: Thanksgiving Recess – College closed

Week 13: 12/2/2019 MON | P2 W8
1. In-class workshop
– Review final UI design with a high-fidelity prototype

2. Next week
– Behance page draft
– Click-through recording

Week 14: 12/9/2019 MON | P2 W9
1. In-class workshop
– Case study video & Behance (blackboard score: 10 points)

Week 15: 12/16/2019 MON

Keep and backup all the 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)

Department 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. Two tardy marks equal one absence, and three absences may result in failure of the class.
1. Students are required to attend all classes, be on time, and remain for the entire class.
2. Students who are absent for 3 classes will receive a grade of “F.”
3. A 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 not returning from the break will be considered absent from the class
6. An excused absence is still considered an absence

Communication Design Pathways Department 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 prior to final grade assignments.
FIT Student Code of Conduct

Grading / Point sytem
A : 100 – 95
A- : 94 – 90
B+ : 89 – 85
B : 84 – 80
B- : 79 – 75
C+ : 74 – 70
C : 69 – 65
C- : 64 – 60