UI Design Certificate V6

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: Zoom (Check the class Slack for Zoom information)
Office at FIT: Zoom
Date & Time: Mondays & Thursdays 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 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.

Mon: 4/5 (S1)

  • Program introduction: project, syllabus, breakout sessions, Slack, etc.
  • UI vs UX (Shin/Yeh)
  • Branding Primer (Yeh)
  • The project introduction (Shin/Yeh)
  • Figma Introduction (Shin)
    • Workspace, structure
    • Collaborative work environment: Persona profile
    • Class file set-up
    • Presentation page set-up & adding content
  • Homework:
    • 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.
    • Project Brief (prepare 5 minutes presentation): Figma file/page 01. discovery
      1) Brand profile, visual style guide, target audience.
      2) The current website’s significant challenges/problems.
      3) Improvement opportunities.

Thu: 4/8 (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.

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

Thu: 4/15 (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)

Mon: 4/19 (S5) 

  • Design System: Foundations & Components (Shin)
  • Homework:
    • 05. Three Initial designs (mobile landing page only)

Thu: 4/22 (S6)

  • Guest speaker: Ricardo Medina
    Topic: R/GA UI design workflow and examples
  • In-class activity:
    • Review three initial designs and select a direction
  • Homework:
    • 06. UI Design (mobile home page only)
  • Office Hours (Medina)
    Off-hour review the first session
    Over the weekend (4/24, 4/25)

Mon: 4/26 (S7)

  • Guest speaker: Juliana Ossa
    Topic: Design system and UI workflow
    Bonsai App, giphy.com
  • In-class activity:
    • Review UI design (mobile home page)
  • Homework:
    • 06. UI Design (working-in-progress)
    • Start to establish the grid system and type scale

Thu: 4/29 (S8)

  • Auto-layout (Shin)
  • Breakout sessions: Review/Q&A
  • Homework:
    • 06. UI Design (mobile: complete the task flow: round 1)
    • Enhanced type scale, color, and grid
  • Office Hours (Medina)
    Off-hour review the second session
    Over the weekend (5/1, 5/2)

Mon: 5/3 (S9)  

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

Thu: 5/6 (S10)

  • Variants & interactive components (Shin)
  • Lecture: Color (Yeh)
  • Breakout sessions: review/Q&A
  • Homework for this week:
    • Desktop wireframe

Mon: 5/10 (S11) 

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

Thu: 5/13 (S12)

  • Guest speaker: Ray Sison
    Topic: Presentation preparation and design considerations
  • Breakout sessions: review/Q&A
  • Homework:
    • Desktop UI design revision
  • Office Hours (Medina)
    Off-hour review the third session
    Saturday, May 15

Mon: 5/17 (S13) 

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

Thu: 5/20 (S14)

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

Mon: 5/24 (S15)

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

Thu: 5/27 (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