Project 1: Media-agnostic responsive design
The project is to create a responsive website landing page which reflows the content across multiple devices—mobile phones, tablets, and desktops. The emphasis is user interface (UI) design for mainstream devices as well as content development. Students will develop the content and design system. The class will discuss basic UX/UI design concepts and visual design principles.

Community + Local + Experience
Airbnb provides great examples in community and local-based content. Use the Airbnb model and create new experience content based on your target audience’s interest, i,e. music, arts, history, food, tour, activities, etc.

Target audience:
International travelers who are visiting New York City for the first time.

Airbnb New York
Airbnb New York Experiences ex1
Airbnb New York Experiences ex2
Airbnb Design
Responsive and Adaptive Design

Project Specifications:
– Content development
– Sitemap & wireframe
– UI design for three different screen sizes
– Mobile portrait: 375 width
– Tablet: 768 width
– Desktop HD: 1920 width
– Behance page

Duration of the project: Five weeks
Behance presentation ex1
Behance presentation ex2
Behance presentation ex3

Other examples: https://www.behance.net/CTDFIT

Project 2: Content marketing strategy for a brand
This project is starting with defining a content marketing strategy for consumer goods, brands, or services. Then, students will develop the content, design, and prototype. Content marketing is an essential strategic marketing approach. It provides genuinely 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 valuable content to customers. The outcome can be a micro-website or a part of an existing website or an App. The content of content marketing should have a continuous feeding system.

Digital product as content marketing.  The focus is to provide valuable content to customers, which will benefit them, not to create a tool for e-commerce.

Possible brands are listed below but are not limited including consumer goods, lifestyle brands/services.

Emerging technology
Machine learning & AI
Inclusive design
Personalized needs & experience
Design & social impact

CM proposal (project definition):
• 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)

Project Specifications:
– Project brief and content development
– Sitemap, wireframe, scenario, user flow
– Design for touch-screen mobile devices (tablet or mobile phone)
– Multi-level interaction (minimum of three levels)
– UI design system
– UX/UI design
– XD prototype
– Case study video
– Behance page

Project 2 grading breakdown (60 points)
• Proposal (big idea, strategy, persona, etc.): 10 points
• Sitemap: 4 points
• User scenario & user flow: 4 points
• Wireframes: 4 points
• Content development: 6 points
• UI design: 12 points
• Hi-fidelity prototype with micro-interaction: 10 points
• Case study video: 5 points
• Behance presentation: 5 points

Duration of the project: Ten weeks

Final presentation 1: Behance page (width: 3840 px, height: open)
Project title (Content marketing strategy for a brand: Microsite name or blog name)
– Brand
– Insight (research findings)
– Big Idea
– Strategy
– Persona
– User scenario
– User flow
– Visual design (UI design with features)
– Hi-fidelity prototype
– Wireframes
– Credit
Design by:
Course: CT300 Typography for Digital Content Design
Program/School: Advertising & Digital Design, FIT
Professor: Christie Shin
– Disclaimer
Please note: This classroom project was created for the course “CT300 Typography for Digital Content Design”. This is purely for educational purposes and I do not claim any textual information and/or photos.
Final presentation 2: a case study video


Content Marketing:

Design System
IBM design language
IBM carbon design system


Behance CT300 Student work

Daily Readings



Case studies & studios

Design & Research

Style Guide & UI Components