CT300 Introduction to Digital Typography

SEC65B/WED

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)

Projects:

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

Evaluation:

  • 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.

Unit/Area of Study:

UNIT 1 – RESPONSIVE TYPOGRAPHY & UI DESIGN

Topics:

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

Brief:
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.


Subject(content):

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.)
Categories: Holidays, culture, history


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.)
- Sitemap (Information Architecture)


Project Specifications:

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

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


Duration of the project:

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


UNIT 2 – CONTENT MARKETING & DIGITAL PRODUCT

Topics:

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

Brief:
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.


Subject(content):

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 (microsite, blog, 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


UNIT 3 – PROFESSIONAL PRESENTATION OF A DIGITAL PRODUCT

Topics:

Digital product pitch, case study reel

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


Project 3: Case study reel

Brief:
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.


Subject(content):

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/30/2017Wed

INTRODUCTION / P1 W1

1. Introduction of class, syllabus, projects

- Combined class with Thursday group

2. Lecture

- Introduction to Project 1

3. In-class workshop

- Project definition

4. Preparation for next week

Presentation: Creative brief(project definition)
- Meet-up/event theme, category & description
- Mood board & general design direction for a theme
- Selected content (research & findings)
- Sitemap (structure)


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

Week 2 9/6/2017Wed

P1 W2

1. Lecture

- UX/UI Design Basics, Process, & Techniques

2. In-class workshop

- Presentation and discussion

3. Preparation for next week

- First draft: wirefame
• Desktop HD: 1440 width

Week 3 9/13/2017Wed

P1 W3

1. In-class workshop

- Sitemap & wireframe review
- Paper prototype
- Content assessment
- InVision account set-up

2. Preparation for next two weeks

Sept. 20
- First draft for all pages (wireframes)
• Mobile portrait: 375 width
• Tablet portrait: 768 width
• Desktop HD: 1440 width

Sept. 27
- First draft for homepage (visual design)
• Mobile portrait: 375 width
• Tablet portrait: 768 width
• Desktop HD: 1440 width


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

Week 4 9/27/2017Wed

P1 W4

1. Lecture

- Interactive prototype (InVision)

2. In-class workshop

- Design review

3. Preparation for next week

- Visual design for all pages
• Mobile portrait: 375 width
• Tablet portrait: 768 width
• Desktop HD: 1440 width


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

Week 5 10/4/2017Wed

P1 W5

1. Lecture

- Responsive Web Design & layout analysis

2. In-class workshop

- Design review
- UI/UX review
- Prototype (InVision)

3. Preparation for next week

- Three(3) InVision projects
• Mobile portrait: 375 width
• Desktop HD: 1440 width
• Tablet portrait: 768 width

Week 6 10/11/2017Wed

P1 W6 plus one extra week

1. Lecture

- Responsive typography

2. In-class workshop

- InVision Prototype
- UI/UX review

3. Preparation for next week

- Presentation (InVision/3 projects)

Week 7 10/18/2017Wed

PROJECT 1 DUE. PRESENTATION & CRITIQUE | P1 W7

1. Preparation for next week

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

Week 8 10/25/2017Wed

P2 W1

1. Lecture

- Introduction to Project 2
- Content Marketing
- Creative Process: Design Thinking Methodology
• Definition of persona, empathy mapping, scenario, user stories, user flow, task flow, prototype, etc.

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

Proposal deliverables (5 point)
• Brand
• Research analysis (insight)
• User personas (2)
• Ideas & concepts (content marketing strategy)
• Scenario (user story)
• Sample content

Week 9 11/1/2017Wed

P2 W2

1. Lecture

- Presentation and discussion
- Proposal review

2. In-class workshop

Content development
- Information architecture (site map)
- User flow/task flow (based on a user story)
- Wireframe (content/features/elements)

3. Preparation for next week

Content development (5 point)

Week 10 11/8/2017Wed

P2 W3

1. In-class workshop

- Content development review (one-on-one)

2. Preparation for next week

- Prototyping: paper prototype (5 point)

Week 11 11/15/2017Wed

P2 W4

1. In-class workshop

- Paper prototype review - Visual design direction

2. Preparation for next week

- Visual design first draft

Week 12 11/22/2017Wed

P2 W5

1. In-class workshop

- Visual design review
- InVision prototype

2. Preparation for next week

- InVision prototype


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

Week 13 11/29/2017Wed

P2 W6

1. In-class workshop

- InVision prototype
- UX/UI review

2. Preparation for next week

- Behance page draft

Week 14 12/6/2017Wed

P2 W7

1. In-class workshop

- Behance: Content/script/design review

2. Preparation for next week

- Final presentation: InVision prototype & Behance page

Week 15 12/13/2017Wed

PROJECT 2 DUE. FINAL PRESENTATION & CRITIQUE | P2 W8

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)