CT302
Digital Product Design I
Fall 2024
Section
601, 65A
Date & Time
Thursday 2:10 pm - 5 pm, Tuesday 6:30 pm - 9:20 pm
Professors
Christie Shin
Classroom
D514
Co-requisite(s)
CT300 Kinetic Typography
Credits/Hours
2 credits; 1 lecture and 2 lab hours
School
School of Art & Design
Major
Advertising & Digital Design BFA
Minor
NA
Office Hours
Monday 1 to 3, Wednesday 2 to 3, Thursday 5 to 6
Office at FIT
D317 (email to schedule a remote meeting)
christie_shin@fitnyc.edu
Course Description
CT302 Digital Product Design I is a comprehensive course that equips students with essential skills to excel in digital product design. The course is divided into two parts: the first focuses on interface design using Figma, while the second delves into product thinking and UI design fundamentals. Students will engage in hands-on projects and in-depth exploration of design principles, understanding systemic thinking and scalable design. Through the product thinking method, 5W1H, students will develop problem-solving digital product concepts and features.
Student Learning Outcomes
Upon successful completion of the course, students will be able to:
Create and manage complex designs using Figma.
Understand Figma as a UI tool and implement advanced concepts including components, variables, styles, and auto layout in digital product design.
Apply UI design fundamentals to create responsive and visually appealing interfaces.
Develop interactive prototypes and present digital product/feature ideas effectively.
Complete a comprehensive digital design project demonstrating interface design knowledge and UI fundamentals.
Midterm Project: E-commerce Product Detail Page
Project Overview & Scope:
Create a responsive e-commerce product detail page using Figma, incorporating skills and concepts from Weeks 1 to 9.
Design a one-page e-commerce product detail page that adapts to three breakpoints: mobile, tablet, and desktop. Include a well-defined type scale, color styles, use of components, and support both light and dark modes.
Final Project: Knowt App Streak Feature
Challenge Description:
Design a user interface for the Knowt app that visually represents and motivates users to maintain a streak of consecutive days of using the app. The streak feature should encourage consistent engagement and reflect progress in learning. Research successful streak features in other apps, such as Duolingo, and incorporate insights into your design solution.
Grade Breakdown and Evaluation
Professionalism (Class Participation and Attendance): 10%
- Active engagement in class discussions and activities.
- Regular attendance and punctuality.Weekly Assignments and Exercises (Project 1): 20%
- Completion of course project part 1 to 6.
- Project weekly progress.Midterm Project (Project 2): 40%
- Design project demonstrating understanding of Figma interface design.
- Presentation and critique session.Final Project (Project 3): 30%
- Comprehensive design of the Knowt app interface with streaks feature.
- Research insights and their application in the design.
- Quality of UI design and design decisions.
- Final presentation and feedback session.
Course Weekly Outline:
Part 1: Interface Design with Figma (Week 1 to Week 8)
Week 1
[Part 1] Set up
[Part 2] Figma Basics
Course project scope and expectations
Week 2
[Hands-on-Exercise] Course Project Part 1: Wireframe and First Design
Midterm project kickoff
Week 3
[Part 3] Creating and Managing Components
Week 4
[Hands-on-Exercise] Course Project Part 2: Components
Midterm project checkpoint - Wireframe due
Week 5
[Part 4] Variables & Styles
Week 6
[Part 4] Document Variables & Styles
[Hands-on-Exercise] Course Project Part 3: Color & typography
Midterm project checkpoint - UI Design due
Week 7
[Part 5] Responsive Design
Week 8
Midterm Presentations: Process+Documentation+Final UI Design
Part 2: Product Thinking and UI Design Fundamentals (Week 9 to Week 15)
Week 9
Product Thinking: 5W1H
Final project kickoff
Week 10
[Hands-on-Exercise] Course Project Part 4: Adding Auto-layout
Week 11
[Part 6] Prototyping Basics
[Hands-on-Exercise] Course Project Part 5: Prototyping
Week 12
[UI Design Fundamentals] Layout Basics in UI Design
Final project checkpoint - Target, Problem, Research, Insight, and Solution
Week 13
[UI Design Fundamentals] UI Typography Fundamentals
Final project checkpoint - Feature Development & UI Design
Week 14
Final project checkpoint - Presentation Final Look
Week 15
Final Presentations
Creative Technology & Design (CT&D) 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.
Students are required to attend all classes, be on time, and remain for the entire class.
Students who miss three classes for classes meeting once a week or four classes for classes meeting twice a week will receive a grade of “F.”
The student who arrives 10 minutes after the start of the class will be considered late.
Two late occurrences = one absence
A student who arrives over 30 minutes late or not returning from the break will be considered absent from the class.
Working on projects for another class or using digital devices for socializing (texting, social media…etc.) or gaming during class time will be recorded as an absence.
An excused absence is still recorded as an absence. The difference is an excused absence won’t impact your grade for professionalism and class participation.
Additional Course Information:
Grade Appeals: Include information on the grade appeal process. See Grade Appeal for more information.
Department Policy on Plagiarism
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.
Use of AI tools
It is permissible to utilize AI tools in your creative process. However, you must identify which AI tool is being used at each stage of the process. You are required to fact-check AI output and avoid stereotyping and bias in your work. Finally, you are responsible for ensuring that the final creation is unique, ownable, and without any copyright issues.
Fact-checking AI output
AI tools are not infallible. They often generate incorrect or misleading information. It is your responsibility to fact-check any AI output before using it in your work. This includes checking the source of the information, evaluating the quality of the information, and considering the context in which the information was generated.
Avoiding stereotyping and bias
AI tools can be trained on data that contains stereotypes and biases. This can lead to AI output that is also biased. It is your responsibility to avoid the potential for bias in AI output. You should also be mindful of your own biases when using AI tools and take steps to mitigate them.
Ensuring the uniqueness and ownership of your work
You are responsible for ensuring that the final creation of your work is unique and ownable. This means that you must not plagiarize the work of others, including submitting works done solely by AI tools without meaningful improvement and input from you.
Penalty for violation
Violation of this policy may result in a grade reduction or suspension from the class.