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

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, task flow, wireframe explanation (Shin/Medina)
  • Figma overview: work environment (Shin)
  • In-class activity:
    – Warming up exercise: personal profile
  • Homework:
    Figma getting started playlist
    – Personal profile 1st draft
    – Select a brand

The: 7/2 (w1/s2)

  • Case studies online and on Figma (Medina)
  • Figma: organizing files, create, delete, duplicate files, etc.
  • Figma overview: frames, layout grid, components (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:
    – Select and begin working on the mobile flow.

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

Thu: 7/9 (w2/s4)

  • UI elements (Shin)
  • Figma fundamental (Shin)
    – Frames: groups vs. frames
    – Components: master vs. instances
    – Button vs.auto-layout button
  • Q&A and what to do when Figma “doesn’t work” (Shin/Medina)
  • Breakout sessions (30 min): review/Q&A

Tue: 7/14 (w3/s5)

  • UI Design Methodology & Foundation: atomic design, design system, components (Shin)
  • Conversational design. Human communication on digital devices (Medina)
  • Breakout sessions (30 min): review/Q&A

Thu: 7/16 (w3/s6)

  • DS foundation: 8pt grid system, type system (Medina)
  • Layout: grid layouts, spacing method (Shin-FlexFit)
  • Breakout sessions (30 min): Review WIP mobile flow/s

Tue: 7/21 (w4/s7)

  • Styles: typography, color, grid, effects (Shin-FlexFit)
  • Styles, components, libraries (Shin-FlexFit)
  • Breakout sessions (30 min): Review WIP mobile flow/s

Thu: 7/23 (w4/s8)

  • Auto-layout (Shin-FlexFit/Medina)
  • Grid, constraints, responsive design (Shin-FlexFit)
  • App vs Mobile Site. Similarities and differences (Medina)
  • Breakout sessions (30 min): review/Q&A

Tue: 7/28 (w5/s9)

  • Screen design fundamental, pixel density (Yeh)
  • Responsive design, breakpoint, @media query (Yeh)
  • In-class activity:
    Milestone 2: Present mobile flow/s.
  • Homework:
    Adjust work based on feedback. Begin working on desktop views.

Thu: 7/30 (w5/s10)

  • Vector network, images, mask (Shin)
  • Plug-ins: accessibility, etc. (Shin/Medina)
  • Breakout sessions (30 min): review/Q&A

Tue: 8/4 (w6/s11)

  • Accessibility (Yeh)
  • Breakout sessions (30 min): review desktop work/Q&A

Thu: 8/6 (w6/s12)

  • Branding (Yeh)
  • Logos on digital devices (Medina)
  • Breakout sessions (30 min): review/Q&A

Tue: 8/11 (w7/s13)

  • Micro-interaction (Yeh)
  • Basic prototyping in Figma (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)

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

Tue: 8/18 (w8/s15)

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

Wed: 03/18 (16)

  • Beyond mobile/desktop. Adjusting designs to other digital devices (Medina)
  • Milestone 3: 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