UI Design Certificate

Faculty: Christie Shin, C.J. Yeh, Ricardo Medina
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
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

Responsive User Interface design with a design system for both desktop and mobile.
Description: Redesign responsive interface design for both desktop and mobile to improve overall user experience through enhanced visual design, usability, learnability, and accessibility. The task flows and wireframes will be provided. Students should focus on establishing a design system and visual interface design. The basic prototyping including click-through will be covered.

  • Industries & Brands (select one):
    – E-commerce: BestBuy, Kiels’s
    – Fashion: Anthropologie, Uniqlo
    – Food ordering: Starbucks, Chipotle
  • Tasks (three tasks):
    – On-boarding > Sign-up/Create an account > Landing page
    – Product Page > Checkout
    – Search > Filter > Product Page > Save an item to a wishlist
  • Design tool: Figma

Weekly Outline

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

Phase 1: Moodboard. Initial Design system. (1.5 Weeks)

Tue: 6/30 (w1/s1)

  • Program introduction: project, syllabus, breakout sessions, Slack, etc.
  • UI vs UX (Shin/Yeh/Medina)
  • UI design tools overview (Shin)
  • The project introduction (Shin/Medina)
  • Figma overview: work environment, structure (Shin)
  • In-class activity:
    – Warming up exercise: personal profile
  • Homework:
    Figma getting started playlist
    – Personal profile 1st draft
    – Select a brand

Thu: 7/2 (w1/s2)

  • Case studies online and on Figma (Medina)
  • Figma: organizing files, create, delete, duplicate files, etc.
  • Figma 01: frames, layout grid (Shin)
  • In-class activity:
    – Review student’s brand choices. Breakout session grouping.
  • Homework:
    – Create a mood board
    – Initial design system (typography)

Tue: 7/7 (w2/s3)

  • UI design workflow/collaboration (Medina)
  • Task flows & wireframes (Medina)
  • Presenting design work in Figma. (Medina)
  • Collaboration best practices in and out Figma—Annotating, naming convention, decision repository. Client communication and your POV. (Medina)
  • In-class activity:
    Milestone 1: Present Moodboard and initial design system.
  • Homework:
    – Comparative analysis
    – Study, assess the current screens for your task flow (Search & PDP) and edit if necessary.
    – Wireframe v1.

Phase 2: Mobile View (2.5 Weeks) & Desktop View (1.5 Weeks)

Thu: 7/9 (w2/s4)

  • UI elements (Shin)
  • Figma 02: component, button(Shin)
  • First breakout sessions (30 min): review/Q&A
  • Homework: complete wireframes for a task flow (search & PDP)

Tue: 7/14 (w3/s5)

  • Responsive Web Design (Yeh)
  • UI Design Methodology: atomic design, design system (Shin)
  • DS Foundation: color, typography, components (Shin)
  • Low-fidelity (wireframe) prototype–Figma Mirror (Shin)
  • Homework by next Tuesday:
    1. Desktop wireframe
    2. Initial design exploration (only landing page for mobile): three UI design directions

Thu: 7/16 (w3/s6)

  • DS Foundation 2: grid, layout, spacing method (Shin)
  • App vs Mobile Site. Similarities and differences (Medina)
  • Review the first mobile flow (Search & PDP)
  • Homework:
    – Desktop wireframe
    – Initial design exploration (only landing page for mobile): three UI design directions

Tue: 7/21 (w4/s7)

  • Figma 03-1: UI Design single page (Shin)
  • Design review-select one direction
  • Homework for next Tuesday:
    – Type scale first draft
    – Color first draft
    – Task flow 1: mobile UI design first draft

Thu: 7/23 (w4/s8)

  • Figma 03-2: UI Design multi-page (Shin)
  • Figma 04: constraints, RWD (Shin)
  • Figma 05: auto-layout (Shin)
  • Conversational design. Human communication on digital devices (Medina)
  • Breakout sessions (40 min): review/Q&A
  • Homework:
    – Iterate your design system
    – Task flow 1: mobile UI design first draft

Tue: 7/28 (w5/s9)

  • Figma 05: auto-layout (Shin)
  • Lecture: Color (Yeh)
  • Milestone 2: Review of mobile flow.
    Best practice in UI design: demo with student examples (Shin)
  • Homework:
    Adjust work based on feedback.

Thu: 7/30 (w5/s10)

  • Accessibility, color contrast plug-in (Shin)
  • Best practice in UI design: demo with student examples (Shin)
  • Useful plug-ins (Medina)
  • Breakout sessions (40 min): review/Q&A
  • Homework:
    Desktop flow first draft

Tue: 8/4 (w6/s11)

  • Pixel density (Yeh)
  • Icon design (Shin)
  • Best practice in UI design: demo with student examples. Focus on RWD (Shin)
  • Review desktop work/Q&A

Thu: 8/6 (w6/s12)

  • Micro-interaction (Yeh)
  • Basic prototyping & presentation in Figma (Medina)
  • Breakout sessions (30 min): review/Q&A
  • Homework:
    Desktop flow: Adjust work based on feedback.

Tue: 8/11 (w7/s13)

  • InVision, AE, Principle*, Flinto* and other prototyping tools (Medina)
  • Introductory micro-interaction demo using Principle (Medina)
  • Breakout sessions (30 min): review desktop work/Q&A

Phase 3: Click-through Prototype/Introductory micro-interaction (1 Week)

Thu: 8/13 (w7/s14)

  • Beyond mobile/desktop. Adjusting designs to other digital devices (Medina)
  • Breakout sessions (30 min): review /Q&A

Tue: 8/18 (w8/s15)

  • Workflow and Flinto demo (Kim)

Thu: 8/20 (w8/s16)

  • Milestone 3: Final Presentation (Presentation format TBA)

Final File Submission for Certification
Native Figma file(s) is required for certification including below:

  • Mood board including adjectives, colors, and type choice
  • Comparative analysis (minimum of three competitors)
  • Three initial design direction
  • Wireframe for both mobile and desktop (task flow: search & PDP)
  • UI design for both mobile and desktop
  • Design system including type scale, colors, buttons, icons, cards, but not limited to add more components

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