UI Design Certificate_v1

Faculty: 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
  • Lecture: UI vs UX, UI design tools overview (Shin)
  • Project: User Interface System Redesign (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: Design
  • In-class Activity:
    – Progress check and presentation prep
  • Homework:
    – Complete presentation deck

Mon: 02/03 (s3)

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

Wed: 02/05 (s4)

  • Demo: (Shin)
    – Adobe XD: UI component
  • Demo: Adobe XD advanced feature and highlights, step-by-step demo (Burke)
  • 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)
    – Task flow, wireframe
    – Low/mid-fidelity wireframe: Using UI design kit
    – UI resources
  • In-class Activity:
    – Progress check
    – Refine task flow
    – Refine wireframe
  • Homework:
    – Complete one wireframe set

Wed: 02/12 (s6)

  • Lecture: Typography in UI (Shin)
  • Lecture: Professional Workflow, design system (Toro)
  • In-class Activity/Homework:
    – Type pairing
    – Mood Board or design inspiration
    – Finalize wireframe with click-through (minimum one task)

Tue: 02/18 (s7)

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

Wed: 02/19 (s8)

  • Lecture: (Shin)
    – Atomic Design
    – UI Design System
  • In-class Activity/Homework:
    – UI design review

Mon: 02/24 (s9)

  • Lecture: (Shin)
    – UI component in the design system
  • In-class Activity/Homework:
    – UI design review

Wed: 02/26 (10)

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

Mon: 03/02 (s11)

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

Wed: 03/04 (12)

  • In-class Activity/Homework:
    – UI design review
    – Design system
    – Micro-interaction

Mon: 03/09 (s13)

  • Demo: (Kim)
    – UI design tool: Principle
    – Step-by-step demo
  • In-class Activity/Homework:
    – Complete UI design
    – Finalize design system
    – Micro-interaction

Wed: 03/11 (14)

  • Lecture: UI design portfolio preparations & resume (Shin)
  • In-class Activity/Homework:
    – Presentation and portfolio prep
    – Micro-interaction

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