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
1 month
6 months
2 months
0.5 - 1 month
3 - 6 months
1 - 2 months
0.5 months
3 months
1 month
Completion times are approximations based on the progress of our current students and graduates.
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:
Design Principles & Heuristics
Consistency in Design Patterns
Wireframes
Intro to Grids
Layout Design & Spacing
UI Elements & Hierarchy
Symbols & Iconography
Evoking Emotion in UI
Text & Typography in UI
Using Color in UI
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:
Design Processes
User Psychology
Conducting User Research
Creating User Personas
What Is Lean UX?
Gathering Requirements
User Flows & User Flow Diagrams
Exploratory Sketching & Rapid Prototyping
User Testing
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:
Finding Inspiration
Building a Mood Board
Primary & Secondary Actions
A/B & Preference Testing
Responsive Design Patterns
Responsive Grids & Frameworks
Creating a Style Guide
Reviewing & Critiquing
The Feedback Loop
Mockups
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:
Mobile Platforms: iOS
Mobile Platforms: Android
Mobile Design Patterns & Trends
Learning from Others
Basic App Structure
Sounds & Physical Feedback
Mobile Gesture
Building a Mobile App
Prototyping a Mobile App
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.
Reusing Common Components
Prototyping Animation
Building a Cohesive Brand
Less is More
Starting From Nothing
Final Project Part 2
What Makes a Good Portfolio?
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.
Getting Started with Your Voice Design Course
History & Appeal of Voice
Use Cases for Voice
Personas for Voice
How Alexa Voice Interactions Work
Building Your First Skill
Working with AWS Lambda
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.
User Needs & User Stories for Voice
Sample Dialogs
User Flows for Voice
Voice Scripts
Context & Memory in Voice Design
Usability Testing for Voice Interactions
Multimodal Interactions
Accessibility & Voice
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.
Intro to UI Animation
UI Animation: Principles and Techniques
Intro to Adobe After Effects
Preloader Animation
Icon Animation
Staging Animation
Presenting Animation
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.
UI Animation: The project Journey
Storyboarding
Effects in After Effects
Expressions in After Effects
3D Animation
Logo Animation
External Tools in After Effects
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.
Getting Started with Your Frontend Course
Internet & the Web
Starting with HTML
Coding with HTML
Using GitHub for Your Projects
CSS Basics
CSS Layouts
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.
Introduction to JavaScript
Coding with JavaScript
JavaScript Libraries & Plugins
User Testing
Code Quality & Cross-Browser Testing
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.
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.
What our graduates have to say


















How would you like us to contact you?
Book a time to speak with a program advisor
Send us a message


What questions do you have about the program? We're happy to help.
Thank you!
Our program advisor will be in touch with you shortly.