CT341 601/602
Design for Web-based UI
Instructor: C. J. Yeh
Company website: Cynda Media Lab
Email: chinjuz_yeh@fitnyc.edu
Office at FIT: D317
Office Hours: Mon. 1-2, Wed. 4-6, and Thur. 12-1
FIT Tutoring Center: A608B
Course Description
This advanced digital design course focuses on the process of creating a design system including visual, audio, time-based, interactive, and behavioral components that can be assembled to build any number of applications. A successful design system provides a centralized, and evolving map of a brand’s known product territories with directional pointers to help creatives explore new possibilities.
Weekly Outline
Mon: 01/28 (w1)
- Introduction of the course & distribute syllabus
- Project 1: Difference Makers
Each student team (2 to 3 students) will create a new product or service for a global brand to solve a problem in a way that couldn’t be done three years ago. The problem identified has to match the brand purpose, and the core technology utilized must be supported by research findings.
Deliverables:
– Research deck
– Case study video (maximum duration: 2 minutes) .
– Presentation deck
example: Emily Frost
example: Ashley Centrella - Lecture/Discussion: Target Segmentation
- Lecture/Discussion: Insight Statement
- In-Class Workshop: Team Forming
- Assignment: Winning Formula
– Each team will review 4 to 6 award winning Future Lions case study videos and analyze: - primary target segmentation
- insight statement
- primary functional goal
- differentiation
- narrative flow and time allocation
- upload to class Google folder before next class
click here to see past Future Lions winners
Wed: 01/30
- Team Presentation: Winning Formula
- Assignment: New Tech, New opportunity
Find 10 interesting new technologies developed within the past 5 years.
Mon: 02/04 (w2)
- Upload & Share: New Tech, New Opportunity (2%)
- Lecture/Discussion: Research Methodologies
- Lecture/Discussion: Empathy Interview Techniques
- Assignment: Target Segmentations
Create a total of 4 possible target segmentations that you like to design for. You are required to use 4 different segmentation techniques each inspired by a different source of information: one inspired by a brand (brand purpose, mission…etc,), one inspired by a story (personal or just a story that you heard), one inspired by a new technology, and one inspired by recent news.
Wed: 02/06
- Design Thinking Exercise: Wallet Project
- Team review: Target Segmentation
- In-class Workshop:
– Complete Target Segmentations presentation
Mon: 02/11 (w3)
- Presentation (3%): Target Segmentation upload to Google Drive before class
- Lecture/Discussion: Target Insight Statement
- Assignment: Problem Worth Solving (part I)
– Target segmentation, goals/wishes, enemies, insights, target insight statements (3)
Wed: 02/13
- Lecture/Discussion: Competitor Analysis
- Team Review: Target Insight Statements
- In-class Workshop: Problem Worth Solving (part II)
– Hypothesis, competitor analysis (differentiation), core technologies, brand(s), and scenario draft.
Mon: 02/18 (w4)
- President’s Day, College Closed
Wed: 02/20
- Team Review (5%): Problem Worth Solving upload to Google Drive before class
– Target segmentation, target insight statements, hypothesis, competitor analysis (differentiation), core technologies, brand(s), and scenario draft. - In-class Workshop / Homework Assignment: Script, Audio Choice(s) and Moodboard(s), style-frames
Mon: 02/25 (w5)
- Team Review: Script, Audio choice(s), and Moodboard(s) (5%) upload to Google Drive before the class
- In-class Workshop:
– Case study video production begins
– Team review/critic
Wed: 02/27
- In-class Workshop:
– Case study video production
– Team review/critic
Mon: 03/04 (w6)
- In-class Workshop:
– Case study video production
– Presentation deck design
– Team review/critic
Wed: 03/06
- In-class Workshop:
– Case study video production
– Presentation deck design
– Team review/critic
Mon: 03/11 (w7)
- Presentation: Difference Maker
- Project 2: Design Solutions (team competition)
Each team (3 students per team) will redesign an existing website that has great potential yet fails to address it intended goal and purpose. The objective is to create a design system for a multi-screen immersive brand experience that are consistent, purposeful, goal-oriented, and result-driven.
Deliverables:
– About: mission/history, competitor analysis, target segmentation…etc.
– Positioning: brand mantra/essence, brand position, brand attributes/personality…etc.
– Interaction Design: value propositions (key features), personas/moodboard, sitemap, flow chart (if applicable), user flow, wireframe…etc.
– Visual System Design: logo, color palette, typography, grid and spacing, icons, UI elements, sample screen designs…etc.
– Microinteraction animations
– Presentation deck - Assignment: the Worse Website Ever!!!
Wed: 03/13
- Lecture/Discussion: Human Interface Design Guideline (a primer)
- Team Review
- In-class Workshop:
– Design Solution Project starts
Mon: 03/18 (w8)
- Presentation: The Worse Website Ever!!!
- Team Review
- In-class Workshop:
– Target segmentation, competitor analysis, and persona
Wed: 03/20
- Lecture/Discussion: Branding
- In-class Workshop:
– Brand archetype
– Brand positioning statement
– Brand mantra
Mon: 03/25 (w9)
- Team review: brand archetype, brand positioning, brand mantra, target segmentation, competitor analysis, and persona
- Lecture: Value Proposition
- In-class Workshop:
– Insight statement and HMW questions
– Value proposition
– Key feature set
Wed: 03/27
- Work from Home
- Workshop:
– Target segmentation
– Competitor analysis
– Persona(s)
– Brand archetype
– Brand positioning statement
– Brand mantra
– Insight statement and HMW questions
– Value proposition
– Key feature set
Mon: 04/01 (w10)
- Team review Phase II: brand archetype, brand positioning, brand mantra, target segmentation, competitor analysis, persona, insight statement, value proposition, key feature set (5%)
- Future Lions video due
- In-class Workshop:
– Design development (sitemap, flowchart, moodboard, icons, color palette, type paring, photo/illustration style, UI components, micro motions…etc,)
Wed: 04/03
- Lecture/Discussion: Design System I (color)
- In-class Workshop:
– Design development (sitemap, flowchart, moodboard, icons, color palette, type paring, photo/illustration style, UI components, micro motions…etc,)
Mon: 04/08 (w11)
- Lecture/Discussion: Microinteractions
- In-class Workshop:
– Design system development (persona, sitemap, flowchart, moodboard, icons, color palette, type paring, photo/illustration style, UI components, micro motions…etc,)
Wed: 04/10
- In-class Workshop:
– Small group review: design system drafts (5%)
SPRING BREAK! (April 15 to 19)
Mon: 04/22 (w12)
- In-class Workshop:
– Design system, microinteraction, and prototype development
Wed: 04/24
- In-class Workshop:
– Design system, microinteraction, and prototype development
Mon: 04/29 (w13)
- Class Canceled: work from home and upload progress to Google Drive
Wed: 05/01
- Class Canceled: work from home
Mon: 05/06 (w14)
- In-class Workshop:
– Small group review: booklet design complete and ready for printing (5%)
Wed: 05/08
- In-class Workshop:
– Final presentation design
Mon: 05/13 (w15)
- In-class Workshop:
– Final presentation design - Booklet Printing
Wed: 05/15
- In-class Workshop:
– Final presentation design
Mon: 05/20 (w16)
- Final Presentation (20%)
- All project files upload to Google Drive for final grading
- Voting
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 you classmates.
- Students are required to attend all classes, be on time, and remain for the entire class.
- Three absents will result in a one letter grade deduction.
- Students who are 4 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 30 minutes late or not returning from the break will be consider 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.
Communication Design Pathways Department Policy on Plagiarism
Within the Communication Design Pathways Department, 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.
FIT Student Code of Conduct
http://www.fitnyc.edu/policies/enrollment-management/code-of-conduct.php
Grading
- Professionalism and Class Participation: 30%
- First Project: 35%
- Second Project: 35%
- (A: 91% or above, B: 90% – 71%, C: 70% – 61%, D: 60% – 51%, F: 50% or below)