UI Design Certificate V9

Faculty: Christie Shin, C.J. Yeh, Ray Sision, Stacy Lee, Miguel Cardona
Program Webpage: FIT User Interface Design Certificate Program
Design Studio: Cynda Media Lab
Email: christie_shin@fitnyc.edu
Classroom: Zoom (Check the class Slack for Zoom information)
Office at FIT: Zoom
Date & Time: Mondays & Thursdays 6:30 PM to 8:30 PM
Program Portfolio: @newcreatives.info (Instagram), 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.

Project

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.

Thu: 3/24 (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: Friday 3/25)
      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
  • Figma structure/overview

Mon: 3/28 (S2)

  • Student presentation
  • Homework:
    • 02. Competitor Analysis

Thu: 3/31 (S3)

  • Figma basic
  • Vector graphic
  • Icon design
  • Information Architecture (Shin)
  • Designing wireframing with Figma (mobile)
  • Homework:
    • Wireframe-mobile

Mon: 4/4 (S4)

  • Guest speaker: Stacy Lee, Interaction Designer at Google
    Topic: Career transition to UX/UI Design
  • Responsive Web Design (Yeh, Shin)
  • Designing wireframing with Figma (desktop)
  • Homework:
    • Wireframe-mobile revision
    • Wireframe-desktop homepage

Thu: 4/7 (S5) 

  • Design system: Atomic Design (Shin)
  • Low-fidelity prototyping: Task flow validation(Shin)
  • Homework:
    • Wireframe-desktop
  • Office Hours
    First session: One-on-one UI design review: Taskflow & Wireframes (Stacy Lee: 2 hours)

Mon: 4/11 (S6)

  • Design system: Foundation & Component (Shin)
  • Design system: Layout (Shin)
  • Design motif (moodboard, etc.)
  • Homework:
    • Design motif (three themes)

Thu: 4/14 (S7)

  • Color (Yeh)
  • Review three initial design motifs and select a direction (Yeh, Shin)
  • Homework:
    • Mobile home page only (three UI design directions)
  • Office Hours
    Second session: One-on-one UI design review: Initial design direction (Stacy Lee: 2 hours)

Mon: 4/18 (S8)

  • Guest speaker: Akiko Sawairi, User Experience Lead, PwC
    Topic: UX case study + Design Ops
  • Design process (Shin)
  • Homework:
    • Task flow UI design round 1 (mobile)

Thu: 4/21 (S9)  

  • Auto layout (Shin)
  • Variants (Shin)
  • Interactive components 1 (Shin)
  • Homework for this week:
    • UI design round 1 (mobile)
    • Typescale
  • Office Hours 3
    One-on-one UI design review (Christie Shin, 2 hours)

Mon: 4/25 (S10)

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

Thu: 4/28 (S11) 

  • Guest speaker: Miguel A. Cardona Jr., Designer Advocate, Education, Figma Design
    Topic: Prototyping in Figma
  • Design System: Building Blocks
  • Homework:
    • UI design round 2 (desktop)
  • Office Hours 4
    One-on-one UI design review (Christie Shin, 2 hours)

Mon: 5/2 (S12)

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

Thu: 5/5(S13) 

  • Micro-interaction (Yeh)
  • Final presentation prep (Shin, Yeh)
  • Homework:
    • Design system: components
    • Orgnaizing file (clean-up UI design)
    • Refine design and prototype
  • Office Hours 5
    One-on-one UI design review (Christie Shin, 2 hours)

Mon: 5/9 (S14)

  • Guest speaker: Raisa Serrano, Art Director, Kyle Wukasch, Digital Art Director, Critical Mass
    Topic: Topic: the design/developer handoff process
  • Breakout sessions: review/Q&A

Thu: 5/12 (S15)

  • Guest speaker: Stacy Lee, Interaction Designer at Google
    Topic: TBA (Interaction design using other prototyping tools)
  • In-class workshop. Final presentation preparation.

Mon: 5/16 (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