CT300 PROJECTS
Project 1: Media-agnostic responsive design
Brief:
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.
Subject:
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.
References:
Airbnb
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
Brief:
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.
Subject:
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.
Considerations:
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
https://www.behance.net/gallery/60086781/Wonder
https://www.behance.net/gallery/59891977/Sari-Sari-Screen-Design
https://www.behance.net/gallery/60020469/Citibike-Content-Marketing-adapt
https://www.behance.net/gallery/60107265/Organize-Chaos-Content-Marketing-Microsite
Lectures:
Content Marketing:
Design System
IBM design language
IBM carbon design system
References/articles/links:
Daily Readings
Articles
- A Comprehensive Overview of UX Design Deliverables
- Master Your UX Vocabulary With These 50 Must-Know Terms
- What You Should Know About User Experience
- UX Process: What It Is, What It Looks Like and Why It’s Important
- User Persona
- UI vs UX — A Guide to UI Design
- Design Systems: InVision
- Design Language System
- User Personas & Journey Maps
- Booking.com — UX Case Study
Learning
- Lynda.com
- Typography Resources: The big list
- Top 21 Prototyping Tools For UI And UX Designers 2018
- Adobe XD Feedback: Feature request & bugs
- XD UX kits and tips
- UX Resources-medium
- Sketch 101
- Flinto-prototype tool
- Principle
- Principle repo
- Mobile motion. 20 Creative Concepts of UI Animation
- MockFlow–Wireframe
- figma-prototyping tool
- Orgami-prototyping tool
- Word Press themes: Colorlib
Case studies & studios
- ADAA 2018 Winners & Finalists
- Digital Signage Expo – case studies
- International Design Awards: 2018 Winner Galleries
- ESI Design
- Float
- Gensler
- Cadillac House/Gensler
- Cadillac House
- Brookfield Place
- Westfield World Trade Center
- Local Projects
- potion
- Fakelove
- Digital Kitchen
- Idean
Design & Research
Style Guide & UI Components