CT302 65A(F23)
Digital Product Design I
Section: 601
Date & Time: Tuesday 6:30 am – 9:20 pm
Semester: Fall 2023
Professor: Christie Shin
Design Studio: Cynda Media Lab
Program Portfolio: @newcreatives.info (Instagram), Behance
Email: christie_shin@fitnyc.edu
Classroom: D514
Office at FIT: D317 (email to schedule a remote meeting)
Office Hours: Monday 1 to 3, Tuesday 2 to 3, Wednesday 2 to 3
Corequisite(s): CT300 Kinetic Typography
Slack: Please join the class Slack channel. This is the main communication hub.
FIT Help Desk: TechHelp
Course Description
The primary objective of this course is to introduce the fundamental principles and workflow of digital product design. The secondary objective is to create a responsive product with a cohesive design system. Topics covered in this course include systemic thinking, design systems, responsive design, and interaction design. Through lectures and projects, students develop the design skills and knowledge necessary for a digital product designer.
Student Learning Outcomes
Upon completion of the course, students will be able to:
- Demonstrate an understanding of systemic thinking in digital product design.
- Apply the digital product design workflow.
- Demonstrate basic knowledge of user interface (UI) design and responsive design.
- Apply the UI design methodology to digital product design.
- Develop and build a design system that is scalable.
- Create a range of low to high-fidelity UI designs & prototypes in digital products.
- Create a professional quality presentation.
Project
Reimagine an e-commerce (marketplace) website:
Start with design research and user experience (UX) design to create a beautiful yet functional experience for an e-commerce website. You will design for three different devices: mobile, tablet, and desktop. Begin with the mobile version and make it responsive for other devices. You will focus on a specific flow from a category page to a product detail page and viewing the shopping cart. You will develop the content and new features during the wireframe development.
Since we are creating seamless, responsive experiences, we will focus on a website, not an app. However, you should study apps for content organization and UI design.
Deliverables:
- Research: Brand selection, 3 comparative analyses
- Wireframe: Content development (category, product detail page, shopping cart)
- Design Brief: Moodboard
- UI Design: Category, product detail page, shopping cart
- Design System
- Responsive Design: 3 devices (mobile, tablet, desktop)
- Theme: 3 modes (normal, dark, special)
- Interactive Prototype (mobile)
- Presentation
Evaluation
1. Presentation 1 (research, comparative analysis, wireframes, design brief): 20 points
2. Presentation 2 (UI design, typography foundation, RWD, dark mode): 40 points
3. Final presentation (UI design handoff, design system, presentation): 30 points
4. Professionalism (attendance, participation, presentation, etc.): 10 points
A/A-: 90% or above (A 95 points above, A- 90-94 points)
B+/B/B-: 89% – 75% (B+ 89-85 points, B 84-80 points, B- 79-75 points)
C+/C/C-: 74% – 60% (C+ 74-70 points, C 69-65 points, C- 64-60 points)
D: 59% – 51%
F: 50% or below
Weekly Outline
Weekly outline is subject to change according to the pedagogical needs.
Week 1: 8/29/2023 Tue
1. Course introduction: Syllabus, Slack, Figma setup
2. Lecture
– Figma basic
– Welcome to Design System
3. In-class
– Brand selection (3)
4. Homework
Design Research
– Brand selection
– Analysis on the current website (desktop & mobile views)
– 3 comparative analyses
—— 9/4 Labor Day – College closed ——
Week 2: 9/5/2023 Tue
1. Lecture
Define your design systems
– Principles
2. In-class
Review – Design Research
3. Homework
– Wireframe
– Content development (category, product detail page, shopping cart)
Week 3: 9/12/2023 Tue
1. Lecture
Define your design systems
– Foundation 1
2. In-class
Review – wireframe
3. Homework
Design Brief (3)
– Design Statement
– Brand Archetype
– Adjectives
– Moodboard
—— 9/15, 9/17 Rosh Hashanah – College closed ——
Week 4: 9/19/2023 Tue
1. Lecture
Define your design systems
– Foundation 2
2. In-class
– Review – design brief (3)
3. Homework
– Presentation 1 prep (research, comparative analysis, wireframes, design brief)
—— 9/24-25 Yom Kippur – College closed ——
Week 5: 9/26/2023 Tue
Presentation 1 (research, comparative analysis, wireframes, design brief): 20 points
1. Lecture
Define your design systems
– Foundation 3
2. Homework
– UI Design exploration (3)
Week 6: 10/3/2023 Tue
1. Lecture
Define your design systems
– Documentation
– Processes
2. In-class
– Review
3. Homework
– UI Design round 1
Week 7: 10/10/2023 Tue
1. Lecture
Build your design systems
– Set up your library
2. In-class
– Review
3. Homework
– UI Design round 2
Week 8: 10/17/2023 Tue
1. Lecture
Build your design systems
– Build your foundations 1
2. In-class
– Review
3. Homework
– Design System
Week 9: 10/24/2023 Tue
1. Lecture
Build your design systems
– Build your foundations 2
2. In-class
– Review
3. Homework
– UI Design – Theme (modes)
Week 10: 10/31/2023 Tue
1. Lecture
Build your design systems
– Build components
– Define patterns
2. In-class
– Review
3. Homework
– UI Design – Responsive Design
Week 11: 11/7/2023 Tue
1. Lecture
Document, improve, & update your system
2. In-class
– Review
3. Homework
– Presentation 2 prep (UI design, design system, prototype)
Week 12: 11/14/2023 Tue
Presentation 2 (UI design, typography foundation, RWD, dark mode): 40 points
1. Homework
– Design System
Week 13: 11/21/2023 Tue
1. In-class
– Workshop
2. Homework
– UI Design handoff
—— Nov 23 – Nov 26: Thanksgiving Recess – College closed——
Week 14: 11/28/2023 Tue
1. In-class
– Presentation Prep
Week 15: 12/5/2023 Tue
Final presentation (UI design handoff, design system, presentation): 30 points
Keep and back up 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)
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.
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.
FIT Student Code of Conduct
Student Disability Services
Academic Honesty and Integrity Policy
FIT’s Course Withdrawal Policy
Children on campus policy
FIT-ABLE
Academic Advisement Center
FIT Writing & Speaking Studio
FIT Counseling Services
Academic Skills Tutoring Center
Dean of Students Office
Technical Support for Blackboard with Open SUNY Help Desk
Additional Course Information:
Credits/Hours: 2/3
Grade appeal process: http://www.fitnyc.edu/registrar/grades/appeal.php for more information.
Library Resources: FIT Library Databases
Academic Advisement Center: http://www.fitnyc.edu/academic-advisement/index.php
Technical Requirements: High-speed internet and Adobe CC
Textbooks and Required Materials: Lecture slides will be provided every week after class,