UI Design Program Curriculum

A learning experience that’s as rigorous and in sync with the industry as it is suited to beginners and upskillers alike.

Skills-focused

Every aspect of our curriculum is specifically designed to cultivate the industry’s most in-demand skills. From design principles and heuristics to wireframing, color theory, typography—and everything in between—you’ll graduate with everything you need to thrive in your new career.

Rigorously practical

Our project-based curriculum takes you well beyond theory to immerse you in the kind of work you’ll be doing on the job. You’ll put everything you learn to immediate, practical use through hands-on projects—all integral to the professional portfolio you’ll build along the way.

Written by experts

Our instructional designers and editors work together with subject matter experts—seasoned and skilled practitioners—to create and continuously update learning materials and project briefs that equip you with the industry knowledge and skills that will get you hired.

Curriculum overview

Part-time

Flexible

Full-time

Intro to UI Design

approx.
1 month

UI Design Immersion

approx.
6 months

Specialization

approx.
2 months

Intro to UI Design

approx.
0.5 - 1 month

UI Design Immersion

approx.
3 - 6 months

Specialization

approx.
1 - 2 months

Intro to UI Design

approx.
0.5 months

UI Design Immersion

approx.
3 months

Specialization

approx.
1 month

Completion times are approximations based on the progress of our current students and graduates.

Intro to UI Design

UI Immersion

Specialization

This course will take you through ten tasks leading up to one main project: recreating screens for a travel app.

1.1 What Is UI?

Differentiate the responsibilities of a UI designer and a UX designer.

1.2 Introduction to Your Design Tool

Navigate the interface and basic functions of popular UI design tools.

1.3 Working with Layers & Shapes

Use shapes and layers in popular UI design tools to create screens for an app.

1.4 Point Types & Boolean Operations

Use shapes to create icons for an app.

1.5 Visual Design Basics

Apply visual design basics to screens for an app.

1.6 Working with Text

Apply text styles to screens for an app.

1.7 Advanced Design Tool Features

Create a grid on which to build an app icon.

1.8 Pixel Precision

Apply principles of pixel precision to UI elements.

1.9 Previewing Your Work

Choose the tools for previewing the design.

1.10 Preparing Your Work for Handoff

Prepare design work for handoff.

This course provides a deeper dive into the daily practice and mindset of a professional UI designer. You’ll complete a total of five Achievements, consisting of several tasks each.

Achievement 1

Achievement 2

Achievement 3

Achievement 4

Achievement 5

Introduction to Design Principles

Use design theory, principles, patterns, mediums, and wireframes to design a mobile app from scratch. Here’s what you’ll learn:

1.1

Design Principles & Heuristics

1.2

Consistency in Design Patterns

1.3

Wireframes

1.4

Introduction to Grids

1.5

Layout Design & Spacing

1.6

UI Elements & Hierarchy

1.7

Symbols & Iconography

1.8

Evoking Emotion in UI

1.9

Text & Typography in UI

1.10

Using Color in UI

1.11

Platforms & Devices

User Experience Design Process

Incorporate basic principles of user experience (UX) such as conducting user research, creating user personas, and drawing user flows. Here’s what you’ll learn:

2.1

Design Processes

2.2

User Psychology

2.3

Conducting User Research

2.4

Creating User Personas

2.5

What Is Lean UX?

2.6

Gathering Requirements

2.7

User Flows & User Flow Diagrams

2.8

Exploratory Sketching & Rapid Prototyping

2.9

User Testing

2.10

Portfolio Preparation

User Interface Design Process

Develop a mood board, mockups, and the primary screens for your app. Here’s what you’ll learn:

3.1

Finding Inspiration

3.2

Building a Mood Board

3.3

Primary & Secondary Actions

3.4

A/B & Preference Testing

3.5

Responsive Design Patterns

3.6

Responsive Grids & Frameworks

3.7

Creating a Style Guide

3.8

Reviewing & Critiquing

3.9

The Feedback Loop

3.10

Mockups

3.11

Portfolio Preparation

Mobile App Design for iOS and Android

Wireframe, design, and prototype a complete mobile app of your choice for both iOS and Android. Here’s what you’ll learn:

4.1

Mobile Platforms: iOS

4.2

Mobile Platforms: Android

4.3

Mobile Design Patterns & Trends

4.4

Learning from Others

4.5

Basic App Structure

4.6

Sounds & Physical Feedback

4.7

Mobile Gestures

4.8

Building a Mobile App

4.9

Prototyping a Mobile App

4.10

Portfolio Preparation

Animation, Branding, & UI Design Portfolios

Explore advanced UI design skills, such as prototyping complex animations and interactivity, and consolidate your projects from throughout the program into a complete portfolio.

5.1

Reusing Common Components

5.2

Prototyping Animation

5.3

Building a Cohesive Brand

5.4

Less is More

5.5

Final Project Part 1

5.6

Final Project Part 2

5.7

What Makes a Good Portfolio?

5.8

Building Your Portfolio

To further develop your expertise, you’ll choose one of three specialization course options: Voice User Interface Design, Animation for UI Designers, or Frontend Development for Designers.

Voice User
Interface Design

Achievement 1

Achievement 2

Animation for UI Designers

Achievement 1

Achievement 2

Frontend Development for Designers

Achievement 1

Achievement 2

Introduction to Voice Design with Alexa

Explore the origins of voice, discover the unique user populations and use cases for voice, then get to know Amazon’s Alexa and build a skill for the interface.

1.1

Getting Started with Your Voice Design Course

1.2

History & Appeal of Voice

1.3

Use Cases for Voice

1.4

Personas for Voice

1.5

How Alexa Voice Interactions Work

1.6

Building Your First Skill

1.7

Working with AWS Lambda

1.8

Certifying Your Skill

Introduction to Voice Design with Alexa

Find out how to create user stories, dialogs, flows, and scripts, as well as how to test your designs. You’ll also explore some advanced topics.

2.1

User Needs & User Stories for Voice

2.2

Sample Dialogs

2.3

User Flows for Voice

2.4

Voice Scripts

2.5

Context & Memory in Voice Design

2.6

Usability Testing for Voice Interactions

2.7

Multimodal Interactions

2.8

Accessibility & Voice

2.9

Safety & Privacy for Voice Design

Intro to UI Animation and After Effects

Explore the principles and techniques behind the best UI animation, learn how to use Adobe After Effects, create animations and prepare them for presentation and handoff.

1.1

Intro to UI Animation

1.2

UI Animation: Principles and Techniques

1.3

Intro to Adobe After Effects

1.4

Preloader Animation

1.5

Icon Animation

1.6

Staging Animation

1.7

Presenting Animation

1.8

Preparing Animation for Handoff

Advanced UI Animation & Project Journey

Prepare a visual style guide, adapt your designs for additional breakpoints, and finalize the presentation mockups for your responsive mobile app.

2.1

UI Animation: The project Journey

2.2

Storyboarding

2.3

Effects in After Effects

2.4

Expressions in After Effects

2.5

3D Animation

2.6

Logo Animation

2.7

External Tools in After Effects

2.8

Final Presentation & Portfolio Review

Getting Started with HTML & CSS

Learn how to code with HTML and CSS, and debug and use JavaScript to add interactivity to a website. You’ll complete two projects (achievements) consisting of several tasks each.

1.1

Getting Started with Your Frontend Course

1.2

Internet & the Web

1.3

Starting with HTML

1.4

Coding with HTML

1.5

Using GitHub for Your Projects

1.6

CSS Basics

1.7

CSS Layouts

1.8

Advanced CSS for Designers

JavaScript & Your Portfolio Site

Discover JavaScript code, libraries, and plugins, then learn to set up efficient processes for testing, QA, and debugging. Explore hosting options and then present your website.

2.1

Introduction to JavaScript

2.2

Coding with JavaScript

2.3

JavaScript Libraries & Plugins

2.4

User Testing

2.5

Code Quality & Cross-Browser Testing

2.6

Portfolio Site Demo & Case Study

Intro to UI Design

This course will take you through ten tasks leading up to one main project: recreating screens for a travel app.

1.1 What Is UI?

1.2 Introduction to Your Design Tool

1.3 Working with Layers & Shapes

1.4 Point Types & Boolean Operations

1.5 Visual Design Basics

1.6 Working with Text

1.7 Advanced Design Tool Features

1.8 Pixel Precision

1.9 Previewing Your Work

1.10 Preparing Your Work for Handoff

UI Immersion

This course provides a deeper dive into the daily practice and mindset of a professional UI designer. You’ll complete a total of five Achievements, consisting of several task each.

Achievement 1: Introduction to Design Principles

Use design theory, principles, patterns, mediums, and wireframes to design a mobile app from scratch. Here’s what you’ll learn:

1.1
Design Principles & Heuristics
1.2
Consistency in Design Patterns
1.3
Wireframes
1.4
Introduction to to Grids
1.5
Layout Design & Spacing
1.6
UI Elements & Hierarchy
1.7
Symbols & Iconography
1.8
Evoking Emotion in UI
1.9
Text & Typography in UI
1.10
Using Color in UI
1.11
Platforms & Devices

Achievement 2: User Experience Design Process

Incorporate basic principles of user experience (UX) such as conducting user research, creating user personas, and drawing user flows. Here’s what you’ll learn:

2.1
Design Processes
2.2
User Psychology
2.3
Conducting User Research
2.4
Creating User Personas
2.5
What Is Lean UX?
2.6
Gathering Requirements
2.7
User Flows & User Flow Diagrams
2.8
Exploratory Sketching & Rapid Prototyping
2.9
User Testing
2.10
Portfolio Preparation

Achievement 3: User Interface Design Process

Develop a mood board, mockups, and the primary screens for your app. Here’s what you’ll learn:

3.1
Finding Inspiration
3.2
Building a Mood Board
3.3
Primary & Secondary Actions
3.4
A/B & Preference Testing
3.5
Responsive Design Patterns
3.6
Responsive Grids & Frameworks
3.7
Creating a Style Guide
3.8
Reviewing & Critiquing
3.9
The Feedback Loop
3.10
Mockups
3.11
Portfolio Preparation

Achievement 4: Mobile App Design for iOS and Android

Wireframe, design, and prototype a complete mobile app of your choice for both iOS and Android. Here’s what you’ll learn:

4.1
Mobile Platforms: iOS
4.2
Mobile Platforms: Android
4.3
Mobile Design Patterns & Trends
4.4
Learning from Others
4.5
Basic App Structure
4.6
Sounds & Physical Feedback
4.7
Mobile Gestures
4.8
Building a Mobile App
4.9
Prototyping a Mobile App
4.10
Portfolio Preparation

Achievement 5: Animation, Branding, & UI Design Portfolios

Explore advanced UI design skills, such as prototyping complex animations and interactivity, and consolidate your projects from throughout the program into a complete portfolio.

5.1
Reusing Common Components
5.2
Prototyping Animation
5.3
Building a Cohesive Brand
5.4
Less is More
5.5
Final Project Part 1
5.6
Final Project Part 2
5.7
What Makes a Good Portfolio?
5.8
Building Your Portfolio

Specialization

To further develop your expertise, you’ll choose one of three specialization course options: Voice User Interface Design, Animation for UI Designers, or Frontend Development for Designers.

Voice User Interface Design

Learn how to design voice user interfaces and develop three “skills” for Amazon’s Alexa voice assistant. You’ll complete a total of two projects (achievements) consisting of several tasks each.

Animation for UI Designers

Explore the essential skills for producing animated user experiences and put your designs into motion. You’ll complete two projects (achievements) consisting of several tasks each.

Frontend Development for Designers

Learn how to code with HTML and CSS, and debug and use JavaScript to add interactivity to a website. You’ll complete two projects (achievements) consisting of several tasks each.

Built on proven learning theories and industry expertise

Dive into a comprehensive and varied learning experience designed to take you from beginner to pro.

Each course is packed with reading materials and supporting videos, audio learning options, and more.

Our instructional designers work hand-in-hand with seasoned experts in the field to keep our curriculum rooted in proven learning theories, and in-sync with the industry.

Graduate portfolios

See some of the incredible work our students complete during the UI Design Program.

annabel-cover-3e907dcb627d3c1e3fb9c930963db4fcec454b227797dc587636aee1b5189a25.png

Annabel Hesselink's Portfolio Project

Annabel Hesselink

UX/UI Designer

See project

portfolios/kaya-kise/Claudia_feat1-3e907dcb627d3c1e3fb9c930963db4fcec454b227797dc587636aee1b5189a25.png

Claudia Lordelo's Portfolio Project

Claudia Lordelo

UI designer

See project

feat-curry-3e907dcb627d3c1e3fb9c930963db4fcec454b227797dc587636aee1b5189a25.jpg

Curry Du's Portfolio Project

Curry Du

UX/UI designer

See project

feat_kristen-3e907dcb627d3c1e3fb9c930963db4fcec454b227797dc587636aee1b5189a25.jpg

Kristen Stabile's Portfolio Project

Kristen Stabile

UI/Product designer

See project

feature_lissy-3e907dcb627d3c1e3fb9c930963db4fcec454b227797dc587636aee1b5189a25.jpg

Lissy Bonness's Portfolio Project

Lissy Bonness

UI designer

See project

Create beautiful work with industry-standard tools

Design Tools

We’ve partnered up with industry-standard tool providers to make sure you have access to the tools you might use on the job. Through free trials and special discounts available to CF students, you’ll be able to try out a variety of tools to see what works best for you. Check out our perks page or Course Prep in your course for more information on tool discounts.

Learn more about the perks we offer with each program >