UI Design Certificate V5

Faculty: Christie Shin, C.J. Yeh, Ray Sision, Ricardo Medina, Sooyun Kim, Juliana Ossa
Program Webpage: FIT User Interface Design Certificate Program
Email: christie_shin@fitnyc.edu
Classroom: Christie’s Remote Learning Studio
Office at FIT: Christie’s Remote Learning Studio
Date & Time: Mondays & Wednesdays 7 to 9
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 jewelry 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.

Phase 1: Moodboard. Initial Design direction.

Mon: 10/26 (S1)

  • Program introduction: project, syllabus, breakout sessions, Slack, etc.
  • UI vs UX (Shin/Yeh)
  • UI design tools overview (Yeh)
  • The project introduction (Shin/Yeh)
  • Figma 01: Figma Intro (Shin)
  • In-class activity:
    – Warming up exercise: personal profile
  • Homework:
    Figma getting started playlist
    – Personal profile 1st draft
    – Three brands choices for your project (poorly designed website)

Wed: 10/28 (S2)

  • Information Architecture (Shin)
  • Examples of a sitemap, task flow, and wireframe (Yeh)
  • Figma 02: components, styles, library (Shin)
  • In-class activity:
    – Review personal profile and Q&A
    – Review student’s brand choices
    – Study group forming (3 groups of 4)
    – Setup an individual project file in Figma, and explain the page structure.
  • Homework:
    01. Discovery (5-minute presentation)
    – Brand overview: branding, company profile, target audience.
    – Current website’s 3 main challenges/problems

Mon: 11/2 (S3)

  • Guest speaker: Ray Sision
    Topic: Nike’s UI design workflow and design system examples
  • Figma 03: UI design workflow using wireframe kit and other UI kit (Shin)
  • Student presentation (group critique: 3)
  • Homework:
    02. Task flow & wireframe
    – Study the current screens for your task flow and edit the content if needed.
    – Wireframes

Phase 2: Mobile View & Desktop View

Wed: 11/4 (S4)

Mon: 11/9 (S5) 

  • Guest speaker: Ricardo Medina
    Topic: R/GA UI design workflow and examples
  • Homework:
    – 05. Initial design exploration (only landing page for mobile): UI design directions (3)

Wed: 11/11 (S6)

  • DS Foundation 2: grid, layout, spacing method (Shin)
  • Responsive Web Design (Yeh)
  • Homework:
    – 05. Three Initial designs (complete three design directions: mobile landing page only)
    – Start to establish the grid system and type scale
  • Off-hour review session one: 40 minutes per team (Medina)
    Over the weekend (11/14, 11/15): office hours

Mon: 11/16 (S7)

  • Guest speaker: Juliana Ossa
    Topic: Bonsai App – creating user flows, establishing a brand system, building a component library
  • Figma 04: layout grids and styles (Shin)
  • Homework for this week:
    – 06. UI Design (mobile: complete the task flow)
    – Enhanced type scale, color, and grid

Wed: 11/18 (S8)

  • Figma 05: auto-layout (Shin)
  • Breakout sessions (30 min): review/Q&A
  • Homework:
    – 06. UI Design (mobile: complete the task flow)
    – Enhanced type scale, color, and grid
  • Off-hour review session two: 40 minutes per team (Medina)
    Over the weekend (11/21, 11/22): office hours

Mon: 11/23 (S9)  

  • Guest speaker: Juliana Ossa
    Topic: giphy.com – a design system
  • Figma 07: prototype 1 (Master component navigation, vertical scroll)
  • Homework for this week:
    – Desktop wireframe (landing page)
    – Desktop UI design (landing page)
    – Mobile click-through prototype — copy & paste (07. UI Mobile Prototype)

Wed: 11/25 (S10)

  • Figma 07: prototype 2 (horizontal scroll, overlay (Shin)
  • Lecture: Color (Yeh)
  • Breakout sessions (30 min): review/Q&A
  • Homework for this week:
    – Desktop wireframe (landing page)
    – Desktop UI design (landing page)
    – Mobile click-through prototype — copy & paste (07. UI Mobile Prototype)

Mon: 11/30 (S11) 

  • Accessibility, color contrast plug-in (Shin)
  • Homework:
    – Desktop UI design first draft

Wed: 12/2 (S12)

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

Phase 3: Completed Design System + Click-through prototype/Introductory micro-interaction

Mon: 12/7 (S13) 

  • Micro-interaction (Yeh)
  • Homework:
    – Desktop UI design final & click-through prototype

Wed: 12/9 (S14)

  • Basic prototyping & presentation in Figma (Shin)
  • UI design and design system final review

Mon: 12/14 (S15)

  • Guest speaker: Sooyun Kim
    Topic: IBM workflow and Flinto demo

Mon: 12/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