UI Design Certificate V7

Faculty: Christie Shin, C.J. Yeh, Ray Sision, Ricardo Medina, Juliana Ossa
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 6:30 PM to 8:30 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 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 the pedagogical needs.

Wed: 6/2 (S1)

  • Program introduction: project, syllabus, breakout sessions, Slack, etc.
  • UI vs UX (Shin/Yeh)
  • The project introduction (Shin/Yeh)
  • Branding Primer (Yeh)
  • Figma Introduction (Shin)
    • Workspace, structure
    • Collaborative work environment: Persona profile
    • Class file set-up
    • Presentation page set-up & adding content
  • Homework:
    • Homework 1 (Due tomorrow: Thursday 6/3)
      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
    • Homework 4
      Complete the personal profile
      Figma file/ex00. Personal Profile
    • Catch up: Figma getting started playlist

Mon: 6/7 (S2)

  • Student presentation
  • Information Architecture (Shin, Yeh)
  • Figma basics: Frames/Components/Grids/Library (Shin)
  • How to build a wireframe: Grids, simple type scale (Shin)
  • Homework:
    • 02. Competitor Analysis
    • 03. Wireframe (mobile homepage only)
      Study the current screens for your task flow and edit the content if needed.

Wed: 6/9 (S3)

  • Guest speaker: Ray Sision
    Topic: Nike’s UI design workflow and design system examples
  • Responsive Web Design (Yeh)
  • In-class activity:
    • Review the competitor analysis & wireframes (mobile homepage)
  • Homework:
    • 03. Wireframes (mobile complete flow)

Mon: 6/14 (S4)

  • Atomic Design & Design System (Shin)
  • Design System: Foundations (Shin)
  • In-class activity:
    • Review the wireframes (mobile complete flow)
  • Homework:
    • 04. Mood board (color, typography, tone & voice, etc.)
    • 03. Wireframes (mobile complete flow: round 2 if necessary)

Wed: 6/16 (S5) 

  • Guest speaker: Ricardo Medina
    Topic: R/GA UI design workflow and examples
  • Design System: Foundations & Components (Shin)
  • Homework:
    • 05. Three Initial designs (mobile landing page only)
  • Office Hours (Medina)
    First session: One-on-one UI design review
    Please sign-up with Ricardo (June 19/20)

Mon: 6/21 (S6)

  • Auto-layout, Cards (Shin)
  • In-class activity:
    • Review three initial designs and select a direction
  • Homework:
    • 06. UI Design (mobile home page only)

Wed: 6/23 (S7)

  • Color (Yeh)
  • Design (Shin)
  • In-class activity:
    • Review UI design (mobile home page)
  • Homework:
    • 06. UI Design (mobile: complete the task flow: round 1)
    • Start to establish the grid system and type scale
  • Office Hours (Medina)
    Second session: One-on-one UI design review
    Please sign-up with Ricardo (June 26/27)

Mon: 6/28 (S8)

  • Guest speaker: Martha
    Topic: TBA
  • Breakout sessions: Review/Q&A
  • Homework:
    • 06. UI Design (round 2)
    • Start to establish the grid system and type scale.

Wed: 6/30 (S9)  

  • Prototype (Shin)
  • Breakout sessions: Review/Q&A
  • Homework for this week:
    • 06. UI Design (round 2)
    • 07. UI Mobile Prototype

Wed: 7/7 (S10)

  • Variants & interactive components (Shin)
  • Lecture: Color (Yeh)
  • Breakout sessions: review/Q&A
  • Homework for this week:
    • Desktop wireframe
  • Office Hours (Medina)
    Third session: One-on-one UI design review
    Please sign-up with Ricardo (July 10/11)

Mon: 7/12 (S11) 

  • Accessibility (Shin)
  • Breakout sessions: Review/Q&A
  • Homework:
    • Desktop UI design first draft

Wed: 7/14 (S12)

  • Guest speaker: Ray Sison
    Topic: Presentation preparation and design considerations
  • Breakout sessions: review/Q&A
  • Homework:
    • Desktop UI design revision

Mon: 7/19 (S13) 

  • Micro-interaction (Yeh)
  • UI Design & Prototype Tools (Shin)
  • Homework:
    • Desktop UI design final & click-through prototype

Wed: 7/21 (S14)

  • Final presentation prep (Shin)
  • UI design and design system final review

Mon: 7/26 (S15)

  • Guest speaker: TBA

Wed: 7/28 (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