CoursesUI / UX DesignUI Design Basics Tutorial
AdvancedFree
5.0(2,003 reviews)

UI Design Basics Tutorial

Learn UI Design Basics from beginner to advanced with practical examples, layout, typography, color, components, and polished interface design workflows.

60 Lessons
Step by step
25 Hours
Estimated duration
12.2K
Students enrolled
Certificate
Upon completion
Start Learning Free

What You'll Learn

UI Design Foundations Introduction
UI Design Foundations Core Concepts
UI Design Foundations Workflow Patterns
UI Design Foundations Practical Examples
UI Design Foundations Best Practices
Typography Systems Introduction

Course Content

60 lessons • 25 hours total
Course Progress0% Complete

Practice editor is inside each lesson

Open any lesson to use the Try It Yourself editor with course-specific practice code.

Open First Lesson
01

Module 1

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
UI Design Foundations IntroductionTry It Yourself available
9:07Try It Yourself
UI Design Foundations Core ConceptsTry It Yourself available
11:17Try It Yourself
UI Design Foundations Workflow PatternsTry It Yourself available
13:27Try It Yourself
UI Design Foundations Practical ExamplesTry It Yourself available
15:37Try It Yourself
UI Design Foundations Best PracticesTry It Yourself available
17:47Try It Yourself
02

Module 2

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Typography Systems IntroductionTry It Yourself available
15:42Try It Yourself
Typography Systems Core ConceptsTry It Yourself available
17:52Try It Yourself
Typography Systems Workflow PatternsTry It Yourself available
19:02Try It Yourself
Typography Systems Practical ExamplesTry It Yourself available
9:12Try It Yourself
Typography Systems Best PracticesTry It Yourself available
11:22Try It Yourself
03

Module 3

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Color and Contrast IntroductionTry It Yourself available
9:17Try It Yourself
Color and Contrast Core ConceptsTry It Yourself available
11:27Try It Yourself
Color and Contrast Workflow PatternsTry It Yourself available
13:37Try It Yourself
Color and Contrast Practical ExamplesTry It Yourself available
15:47Try It Yourself
Color and Contrast Best PracticesTry It Yourself available
17:57Try It Yourself
04

Module 4

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Spacing and Layout IntroductionTry It Yourself available
15:52Try It Yourself
Spacing and Layout Core ConceptsTry It Yourself available
17:02Try It Yourself
Spacing and Layout Workflow PatternsTry It Yourself available
19:12Try It Yourself
Spacing and Layout Practical ExamplesTry It Yourself available
9:22Try It Yourself
Spacing and Layout Best PracticesTry It Yourself available
11:32Try It Yourself
05

Module 5

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Cards Buttons and Inputs IntroductionTry It Yourself available
9:27Try It Yourself
Cards Buttons and Inputs Core ConceptsTry It Yourself available
11:37Try It Yourself
Cards Buttons and Inputs Workflow PatternsTry It Yourself available
13:47Try It Yourself
Cards Buttons and Inputs Practical ExamplesTry It Yourself available
15:57Try It Yourself
Cards Buttons and Inputs Best PracticesTry It Yourself available
17:07Try It Yourself
06

Module 6

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Visual Hierarchy IntroductionTry It Yourself available
15:02Try It Yourself
Visual Hierarchy Core ConceptsTry It Yourself available
17:12Try It Yourself
Visual Hierarchy Workflow PatternsTry It Yourself available
19:22Try It Yourself
Visual Hierarchy Practical ExamplesTry It Yourself available
9:32Try It Yourself
Visual Hierarchy Best PracticesTry It Yourself available
11:42Try It Yourself
07

Module 7

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Responsive UI Patterns IntroductionTry It Yourself available
9:37Try It Yourself
Responsive UI Patterns Core ConceptsTry It Yourself available
11:47Try It Yourself
Responsive UI Patterns Workflow PatternsTry It Yourself available
13:57Try It Yourself
Responsive UI Patterns Practical ExamplesTry It Yourself available
15:07Try It Yourself
Responsive UI Patterns Best PracticesTry It Yourself available
17:17Try It Yourself
08

Module 8

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Design Systems Basics IntroductionTry It Yourself available
15:12Try It Yourself
Design Systems Basics Core ConceptsTry It Yourself available
17:22Try It Yourself
Design Systems Basics Workflow PatternsTry It Yourself available
19:32Try It Yourself
Design Systems Basics Practical ExamplesTry It Yourself available
9:42Try It Yourself
Design Systems Basics Best PracticesTry It Yourself available
11:52Try It Yourself
09

Module 9

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Accessibility in UI IntroductionTry It Yourself available
9:47Try It Yourself
Accessibility in UI Core ConceptsTry It Yourself available
11:57Try It Yourself
Accessibility in UI Workflow PatternsTry It Yourself available
13:07Try It Yourself
Accessibility in UI Practical ExamplesTry It Yourself available
15:17Try It Yourself
Accessibility in UI Best PracticesTry It Yourself available
17:27Try It Yourself
10

Module 10

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Microinteractions and Polish IntroductionTry It Yourself available
15:22Try It Yourself
Microinteractions and Polish Core ConceptsTry It Yourself available
17:32Try It Yourself
Microinteractions and Polish Workflow PatternsTry It Yourself available
19:42Try It Yourself
Microinteractions and Polish Practical ExamplesTry It Yourself available
9:52Try It Yourself
Microinteractions and Polish Best PracticesTry It Yourself available
11:02Try It Yourself
11

Module 11

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Collaboration and Handoff IntroductionTry It Yourself available
9:57Try It Yourself
Collaboration and Handoff Core ConceptsTry It Yourself available
11:07Try It Yourself
Collaboration and Handoff Workflow PatternsTry It Yourself available
13:17Try It Yourself
Collaboration and Handoff Practical ExamplesTry It Yourself available
15:27Try It Yourself
Collaboration and Handoff Best PracticesTry It Yourself available
17:37Try It Yourself
12

Module 12

5 lessons • 75 minutes

Try It Yourself available

Try It Yourself
Projects and Best Practices IntroductionTry It Yourself available
15:32Try It Yourself
Projects and Best Practices Core ConceptsTry It Yourself available
17:42Try It Yourself
Projects and Best Practices Workflow PatternsTry It Yourself available
19:52Try It Yourself
Projects and Best Practices Practical ExamplesTry It Yourself available
9:02Try It Yourself
Projects and Best Practices Best PracticesTry It Yourself available
11:12Try It Yourself

Try It Yourself

Practice this course here with UI Design Foundations Introduction.

Open Full Lesson

Try It Yourself

Loading editor...

Requirements

  • No prior coding experience needed
  • A computer with internet access
  • Any modern web browser (Chrome, Firefox, Safari)
  • Text editor (VS Code recommended)

Student Reviews

0.0(0 reviews)
No reviews yet. Be the first student to add one.

Add Your Review

Rating

Instructor

Instructor Ali Moavia
Ali Moavia
Senior Web Developer

Full-stack developer with 3+ years of experience. Passionate about teaching web technologies.

50K+ students
12 courses

Related Courses

HTML Tutorial logo

HTML Tutorial

Beginner • Frontend Development

Learn HTML from beginner to advanced with practical examples.

4.7
CSS Tutorial logo

CSS Tutorial

Beginner • Frontend Development

Learn CSS from beginner to advanced with practical examples, layouts, animations, responsive design, and modern styling techniques.

4.8

Share this course