UI Design Certificate

Instructor: Christie Shin, SooYun Kim, David Toro
Program Webpage: FIT User Interface Design Certificate Program
Email: christie_shin@fitnyc.edu
Office at FIT: D317

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.

Project & Phases

Project:
User Interface System Redesign

Description: Redesign an App experience with new/redefined features to improve overall user experience through usability, learnability, customization, and visual communication. The principles of atomic design will be introduced.

Phase I:
App Comparative Analysis

Description: Identify two competitive apps from the same category. One is an example of a well-designed mobile app and the other is a poorly designed app that you like to redesign. Possible categories including but not limited to: fintech, e-commerce, transit, productivity, service (food delivery, job search…etc.), health and wellness (exercise, meditation…etc)…etc. Although branding is not the focus of the assignment, the students could rebrand if that is essential to provide a better experience.

Deliverable:
– A 5 minutes presentation to share three to five things that make one app better than the other.

Phase II:
Key Features and Wireframes

Description:
Identify three key features that you would like to redesign or create for your new app. These could be improving existing features and/or creating new features. 

Deliverable:
– Key Features
– Task Flows
– Wireframes

Phase III:
User Interface and System Design

Description:
Create an atomic design system and apply it to the three task flows.

Deliverable:
– An atomic design system which includes: typography, color pallet, icon system, UI elements, components, grid, and spacing.
– Minimum one example of micro-interaction design
– Final presentation (5 minutes)
– Upload all process documents and native files to the class Google Drive

Weekly Outline
Weekly outline is subject to change based on the pedagogical needs.
Mon: 01/27 (s1)

  • Program Introduction
    User Interface System Redesign
  • Lecture: UI vs UX, UI design tools overview (Shin)
  • In-class / Homework:
    – Select a category and the two Apps
    – Analyze UI design and features
    – Discover best practices, successful design elements, problems, and challenges
    – Comparative analysis
  • Next class: Bring your laptop & install the latest Adobe XD

Wed: 01/29 (s2)

  • Lecture: UI element terminology (Shin)
  • Demo: (Shin)
    – Design Tool Demo: Adobe XD
    – UI design & Prototype
  • In-class Activity:
    – Progress check and presentation prep
  • Homework:
    – Complete presentation deck

Mon: 02/03 (s3)

  • Presentation & Discussion
  • Demo: (Shin)
    – Adobe XD: UI component
  • Homework:
    – Identify: Three new/redefined features

Wed: 02/05 (s4)

  • Demo: Adobe XD advanced feature and highlights, step-by-step demo (Burke)
  • Lecture: (Shin)
    – Task flow, wireframe, wireflow
    – Low/mid-fidelity wireframe: Using UI design kit
    – UI resources
  • In-class Activity:
    – Progress check
    – Select one new/redefined feature to design first
    – Create task flow
    – Start low/mid-fidelity wireframe
  • Homework:
    – Complete one task flow
    – Complete one wireframe set

Mon: 02/10 (s5)

  • Lecture: (Shin)
    – UI component design system
  • In-class Activity:
    – Progress check
    – Refine task flow
    – Refine wireframe
  • Homework:
    – Complete one wireframe set

Wed: 02/12 (s6)

  • Lecture: Professional Workflow (Toro)
  • Demo: (Toro)
    – UI design tools: Figma
    – Step-by-step demo
    – File sharing & collaboration
  • In-class Activity/Homework:
    – UI design first draft

Tue: 02/18 (s7)

  • Lecture: Design system (Toro)
  • Demo: (Toro)
    – UI design tool: Principle
    – Step-by-step demo
  • In-class Activity/Homework:
    – Refine UI design
    – Micro-interaction first draft

Wed: 02/19 (s8)

  • Lecture: (Shin)
    – Typography in UI
    – Layouts/grid
    – UI best practices: overlay, fixed navigation…etc.
  • In-class Activity/Homework:
    – Design system first draft
    – Micro interaction second draft

Mon: 02/24 (s9)

  • Lecture: Professional workflow (Kim)
  • Demo: (Kim)
    – UI design tool: Sketch
    – Step-by-step demo
    – Zeplin and other plug-ins
    – Handoff
  • In-class Activity/Homework:
    – Refine the design system
    – Refine micro-interaction

Wed: 02/26 (10)

  • Lecture: Working with design system-IBM (Kim)
  • Demo: (Kim)
    – UI design tool: Flinto
    – Step-by-step demo
  • In-class Activity/Homework:
    – Refine the design system
    – Refine micro-interaction

Mon: 03/02 (s11)

  • Lecture: Responsive Design (Shin)
  • In-class Activity/Homework:
    – Small group critic
    – Expand the system to the other two task flows

Wed: 03/04 (12)

  • Lecture: UI design portfolio preparations (Shin)
  • In-class Activity/Homework:
    – Small group critic
    – Expand the system to the other two task flows

Mon: 03/09 (s13)

  • Lecture: Resume (Shin)
  • In-class Activity/Homework:
    – Presentation and portfolio prep
    – Small group critic
    – Finalize design system
    – Complete UI designs

Wed: 03/11 (14)

  • In-class Activity/Homework:
    – Presentation and portfolio prep
    – Small group critic
    – Finalize design system
    – Complete UI designs

Mon: 03/16 (15)

  • In-class Activity/Homework:
    – Final in-class workshop

Wed: 03/18 (16)

  • Final Presentation

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