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?

Understand the role and responsibilities of a UI designer.

1.2 Introduction to Your Design Tool

Learn the interface and basic functions of either Sketch or Adobe XD (your choice).

1.3 Working with Layers & Shapes

Use shapes and layers in your design tool to create screens for an app.

1.4 Point Types & Boolean Operations

Use shapes in your design tool to create icons for an app.

1.5 Visual Design Basics

Learn some fundamental principles of visual design and apply them to an app.

1.6 Working with Text

Explore text styles and apply them to an app.

1.7 Advanced Design Tool Features

Get to know your design tool even better and create a layout to build an app icon.

1.8 Pixel Precision

Apply principles of pixel precision to UI elements.

1.9 Previewing Your Work

Learn how to use different design preview tools.

1.10 Preparing Your Work for Handoff

Get your work ready to handoff to developers.

This course provides a deeper dive into the daily practice and mindset of a professional UI designer. You’ll complete a total of five projects (achievements) consisting of one tasks each.

Achievement 1

Achievement 2

Achievement 3

Achievement 4

Achievement 5

Introduction to Design Principles

Learn design theory, principles, patterns and mediums and use them 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

Intro 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) design to solve UI design problems, then conduct user research and create user personas. 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 Exercise

User Interface Design Process

Create a workflow for your app and design 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 Prep Exercise

Mobile App Design for iOS and Android

Wireframe and design a complete mobile meeting management app and/or an 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 Gesture

4.8

Building a Mobile App

4.9

Prototyping a Mobile App

4.10

Portfolio Preparation

Animation, Branding, & UI Design

Design an app from start to finish, using everything you’ve learned in the program. You’ll also gather your coursework and build your professional portfolio.

5.1

Reusing Common Components

5.2

Prototyping Animation

5.3

Building a Cohesive Brand

5.4

Less is More

5.5

Starting From Nothing

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 projects (achievements) consisting of one task each.

Achievement 1: Introduction to Design Principles

Learn design theory, principles, patterns and mediums and use them 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
Intro 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) design to solve UI design problems, then conduct user research and create user personas. 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 Exercise

Achievement 3: User Interface Design Process

Create a workflow for your app and design 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 Prep Exercise

Achievement 4: Mobile App Design for iOS and Android

Wireframe and design a complete mobile meeting management app and/or an 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 Gesture
4.8
Building a Mobile App
4.9
Prototyping a Mobile App
4.10
Portfolio Preparation

Achievement 5: Animation, Branding, & UI Design

Design an app from start to finish, using everything you’ve learned in the program. You’ll also gather your coursework and build your professional portfolio.

5.1
Reusing Common Components
5.2
Prototyping Animation
5.3
Building a Cohesive Brand
5.4
Less is More
5.5
Starting From Nothing
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 >