UI Design Certificate V8

Faculty: Christie Shin, C.J. Yeh, Ray Sision, Miguel Cardona
Program Webpage: FIT User Interface Design Certificate Program
Email: christie_shin@fitnyc.edu
Classroom: Zoom (Check the class Slack for Zoom information)
Office at FIT: Zoom
Date & Time: Mondays & Wednesdays 7:00 PM to 9:00 PM
Program Portfolio: Behance
FIT Help Desk: TechHelp

Course Description

FIT’s User Interface (UI) Design Certificate Program is an 8-week career accelerator that gives you the hands-on experience to prepare for a career in user interface design. Through lectures, discussions, demonstrations, critics, and workshops, students gain an in-depth understanding of the guidelines, practices, and methodologies of user interface design. FIT’s UI Design Certificate Program is tailored for creative professionals such as graphic designers who are looking to advance into the exciting fields of app design and web design.

*This program is a Synchronous and Collaborative Remote Experiential Learning™ (SCREL™) Certificate Program. Unlike traditional distance and online learning models, SCREL enables real-time interactions between faculty, industry professionals. In addition, our intimate maximum class size of 14 students will enable in-depth discussions and the exchange of ideas to maximize your learning experience and results.


Consumer goods eCommerce website.

Description: Redesign responsive interface design for both desktop and mobile to improve overall user experience through enhanced visual design, usability, learnability, and accessibility. Students will develop the wireframes based on the given task flow. This course’s core focus is to design a responsive user interface and establish a design system. The final presentation should include essential click-through prototyping.

What are Consumer Goods?
Consumer goods are products bought for consumption by the average consumer. Alternatively called final goods, consumer goods are the end result of production and manufacturing and are what a consumer will see stocked on the store shelf. Clothing, food, furniture, and cosmetics are all examples of consumer goods. Basic or raw materials, such as copper, are not considered consumer goods because they must be transformed into usable products.

Task flow: Search a product and add it to the shopping cart
(Home page > Search > Filter > Product Page > Add an item to the shopping cart)

Design tool: Figma

Weekly Outline

A weekly outline is subject to change based on pedagogical needs.

Wed: 10/27 (S1)

  • Course introduction: Syllabus, Figma, Slack, study group, etc.
  • UI vs UX (Shin/Yeh)
  • The project introduction (Shin/Yeh)
  • Branding Primer (Yeh)
  • Figma Introduction (Shin)
    • Workspace, structure
    • Class file set-up
  • Homework:
    • Homework 1 (Due tomorrow: Thursday 10/28)
      Three brand choices for your project (poorly designed website): upload your choices on Slack by tomorrow. We will select one for you.
      Tips: We are not redesigning the brand. Therefore, carefully consider the brand, which will be great for your portfolio. Study the website focusing on the task you will design, find problems, and analyze how to improve.
    • Homework 2
      Task flow analysis
      Figma file/your file/page 00. Taskflow Study
      1. Take screenshots based on the task flow and analyze them.
      2. Review the content and structure of a site carefully.
      Tips: GoFullPage – Full Page Screen Capture
    • Homework 3
      Project brief (prepare 5 minutes presentation)
      Figma file/your file/page 01. Project Brief
      1. Brand profile and current brand style guide, brand archetype, and target audience.
      2. The current website’s significant challenges/problems based on taskflow analysis.
      3. Opportunities
  • Figma basic tutorial: Figma getting started playlist

Mon: 11/1 (S2)

  • Student presentation
  • Figma Structure/Overview
  • Homework:
    • 02. Competitor Analysis

Wed: 11/3 (S3)

  • Guest speaker: Ray Sision, Head of Design
    Topic: UI design workflow and design system examples
  • Information Architecture (Shin)
  • Designing wireframing with Figma (mobile)
  • Homework:
    • Wireframe-mobile

Mon: 11/8 (S4)

  • Responsive Web Design (Yeh, Shin)
  • Designing wireframing with Figma (desktop)
  • Homework:
    • Wireframe-mobile revision
    • Wireframe-desktop homepage

Wed: 11/10 (S5) 

  • Guest speaker: Stacy Lee, Interaction Designer at Google
    Topic: Career transition to UX/UI Design
  • Figma quickfire (icon design/vector drawing/button component)
  • Homework:
    • Wireframe-desktop
    • Complete the full set of icons

Mon: 11/15 (S6)

  • Design system: Atomic Design (Shin)
  • Design motif (moldboard, etc.)
  • Homework:
    • Design motif (three themes)

Wed: 11/17 (S7)

  • Design system: Foundation & Component (Shin)
  • Design system: Layout (Shin)
  • Review three initial designs and select a direction (Yeh, Shin)
  • Homework:
    • Mobile home page only (three UI design directions)
  • Office Hours
    Fiirst session: One-on-one UI design review

Mon: 11/22 (S8)

  • Auto-layout basic (Shin)
  • Design process (Shin)
  • Color (Yeh)
  • Homework:
    • Task flow UI design round 1 (mobile)

Wed: 11/24 (S9)  

  • Prototype (Shin)
  • Auto layout 2 (Shin)
  • Homework for this week:
    • UI design round 2 (mobile)
    • Typescale. Button component. Icon component.
  • Office Hours
    Second session: One-on-one UI design review

Mon: 11/29 (S10)

  • Variants (Shin)
  • Interactive components (Shin)
  • Homework for this week:
    • UI design round 1 (desktop)

Wed: 12/1 (S11) 

  • Guest speaker: Raisa Serrano, Art Director, Kyle Wukasch, Digital Art Director, Criticla Mass
    Topic: BMW website and design system
  • Homework:
    • UI design round 2 (desktop)
  • Office Hours
    Third session: One-on-one UI design review

Mon: 12/6 (S12)

  • Guest speaker: Ray Sison
    Topic: Presentation preparation and design considerations
  • Accessibility (Shin)
  • Breakout sessions: review/Q&A
  • Homework:
    • Design system: foundation, atom level components
    • Mid-fidelity prototyping both mobile & desktop

Wed: 12/8 (S13) 

  • Guest speaker: Miguel A. Cardona Jr.,Designer Advocate, Education, Figma Design
    Topic: Prototyping in Figma
  • Final presentation prep (Shin, Yeh)
  • Homework:
    • Design system: components
    • Orgnaizing file (clean-up UI design)
    • Refine design and prototype

Mon: 12/13 (S14)

  • Micro-interaction (Yeh)
  • UI Design & Prototype Tools (Shin)
  • Breakout sessions: review/Q&A

Wed: 12/15 (S15)

  • Guest speaker: Luca Orio, Design Systems Manager at Netflix
    Topic: TBA
  • In-class workshop. Final presentation preperation.

Mon: 12/20 (S16)

  • Final Presentation
    Guest critic: Ray Sision

Final File Submission for Certification
A native Figma file is required for certification.

Attendance and Grading:
– This program grading is a pass-fail system
– Attendance and participation report are important factors in determining the completion of this certificate program
– Coming to class 15 minutes after starting time will be considered late
– Two lateness equals one absence
– Three absences will result in an incomplete