Interface Design

Interface Design delivers structured training in visual UI design, covering typography, color, layout, component design, and design systems. The course develops both technical skills and design judgment through detailed lessons on spacing, hierarchy, consistency, and refinement, preparing learners to create polished, professional interfaces for digital products.

Created by Matt D. Smith
Last updated 04/2026
English
$49.00
$999.00
95% off
Buy now
30-Day Money-Back Guarantee
Full Lifetime Access

What you'll learn

Master the fundamentals of visual interface design and UI principles.
Create polished, professional interface designs with attention to detail.
Apply typography, color theory, and layout techniques in digital interfaces.
Design buttons, forms, navigation elements, and complex UI components.
Develop a systematic approach to spacing, alignment, and visual hierarchy.
Build consistency across interface designs using design systems and patterns.
Refine interfaces through iteration and critical evaluation of design decisions.
Produce portfolio-ready interface work that demonstrates professional skill.

Explore related topics

This course includes:

45 hours on-demand video
334 videos
1 documents
17.3 GB downloadable resources
Access on mobile and PC
Instant access after payment

Course content

Expand all sections
  • 00 Resources
    01:00
  • 1 1 welcome
    02:45
  • 1 2 how it works
    04:25
  • 1 3 mindset
    04:29
  • 1 4 software
    05:59
  • 1 5 ux vs ui
    06:00
  • 1 6 process
    16:55
  • 1 7 reference
    24:57
  • 1 8 quick keys
    03:35
  • 1 9 organize
    08:19
  • 1 10 How I organize my Figma files to overcome the creative block (with Template)
    13:30
  • 2 01 font size
    16:44
  • 2 02 font weight
    17:29
  • 2 03 hierarchy
    25:42
  • 2 04 titles body
    31:32
  • 2 05 truncation
    17:52
  • 2 06 callouts
    36:21
  • 2 07 definitions
    27:53
  • 2 08 1 interactive text
    25:20
  • 2 09 combining text
    20:06
  • 2 10 system fonts
    07:58
  • 2 11 alternate fonts
    22:23
  • 3 01 1 box model
    24:50
  • 3 02 grids containers
    28:34
  • 3 03 implicit grid
    23:41
  • 3 04 negative space
    21:54
  • 3 05 alignment
    12:40
  • 3 06 optics math
    24:49
  • 3 07 high low density
    28:18
  • 3 08 scale weight
    22:07
  • 3 09 affordance
    19:25
  • 3 10 interactive layouts
    26:22
  • 4 01 color methods
    23:17
  • 4 02 contrast
    26:57
  • 4 03 structural vs interactive
    34:53
  • 4 04 primary secondary
    21:46
  • 4 05 color definitions
    16:58
  • 4 06 amount modify
    23:38
  • 4 07 gradients
    31:49
  • 4 08 shades of grey
    14:13
  • 4 09 white almost
    25:20
  • 4 10 dark ui
    14:38
  • HW u 2013 Contact Cards 1
    14:34
  • HW u 2013 Contact Cards 2
    11:04
  • HW u 2013 Contact Cards 3
    07:21
  • HW u 2013 Contact Cards 4
    14:30
  • HW u 2013 Contact Cards 5
    01:25
  • HW u 2013 Contact Cards 6
    03:35
  • HW u 2013 Contact Cards 7
    04:38
  • HW u 2013 Contact Cards 8
    03:16
  • HW u 2013 Contact Cards 9
    03:57
  • HW u 2013 Contact Cards 10
    11:39
  • HW u 2013 Contact Cards 11
    02:46
  • HW u 2013 Contact Cards 12
    04:43
  • HW u 2013 Contact Cards 13
    04:25
  • HW u 2013 Contact Cards 14
    02:51
  • HW u 2013 Contact Cards 15
    06:58
  • HW u 2013 Contact Cards 16
    09:56
  • HW u 2013 Contact Cards 17
    03:00
  • HW u 2013 Contact Cards 18
    04:33
  • HW u 2013 Contact Cards 19
    05:49
  • HW u 2013 Contact Cards 20
    07:20
  • HW u 2013 Contact Cards 21
    08:56
  • HW u 2013 Contact Cards 22
    06:02
  • HW u 2013 Contact Cards 23
    11:49
  • HW u 2013 Contact Cards 24
    13:06
  • HW u 2013 Contact Cards 25
    02:05
  • HW u 2013 Contact Cards 26
    04:11
  • HW u 2013 Contact Cards 27
    01:20
  • HW u 2013 Contact Cards 28
    05:46
  • HW u 2013 Contact Cards 29
    02:16
  • HW u 2013 Contact Cards 30
    03:04
  • HW u 2013 Contact Cards 31
    04:36
  • HW u 2013 Contact Cards 32
    06:42
  • HW u 2013 Contact Cards 33
    02:52
  • HW u 2013 Contact Cards 34
    02:49
  • HW u 2013 Contact Cards 35
    03:48
  • HW u 2013 Contact Cards 36
    09:56
  • HW u 2013 Contact Cards 37
    07:41
  • HW u 2013 Contact Cards 38
    03:12
  • HW u 2013 Contact Cards 39
    08:09
  • HW u 2013 Contact Cards 40
    01:39
  • HW u 2013 Contact Cards 41
    04:45
  • HW u 2013 Contact Cards 42
    03:05
  • HW u 2013 Contact Cards 43
    06:24
  • HW u 2013 Contact Cards 44
    03:12
  • HW u 2013 Contact Cards 45
    11:26
  • HW u 2013 Contact Cards 46
    05:43
  • HW u 2013 Contact Cards 47
    09:19
  • HW u 2013 Contact Cards 48
    04:06
  • HW u 2013 Contact Cards 49
    04:52
  • HW u 2013 Contact Cards 50
    05:20
  • HW u 2013 Contact Cards 51
    03:57
  • HW u 2013 Contact Cards 52
    04:23
  • HW u 2013 Contact Cards 53
    03:25
  • HW u 2013 Contact Cards 54
    02:38
  • HW u 2013 Contact Cards 55
    14:55
  • HW u 2013 Contact Cards 56
    08:02
  • HW u 2013 Contact Cards 57
    05:52
  • HW u 2013 Contact Cards 58
    02:28
  • HW u 2013 Contact Cards 59
    02:40
  • HW u 2013 Contact Cards 60
    02:33
  • HW u 2013 Contact Cards 61
    05:22
  • HW u 2013 Contact Cards 62
    04:29
  • HW u 2013 Contact Cards 63
    03:31
  • HW u 2013 Contact Cards 64
    03:53
  • HW u 2013 Contact Cards 65
    04:08
  • HW u 2013 Contact Cards 66
    04:15
  • HW u 2013 Contact Cards 67
    02:42
  • HW u 2013 Contact Cards 68
    03:41
  • HW u 2013 Contact Cards 69
    09:03
  • HW u 2013 Contact Cards 70
    07:28
  • HW u 2013 Contact Cards 71
    11:56
  • HW u 2013 Contact Cards 72
    03:18
  • HW u 2013 Contact Cards 73
    07:32
  • HW u 2013 Contact Cards 74
    06:21
  • HW u 2013 Contact Cards 75
    11:50
  • HW u 2013 Using Reference Material 1
    09:44
  • HW u 2013 Using Reference Material 2
    06:21
  • HW u 2013 Using Reference Material 3
    04:02
  • HW u 2013 Using Reference Material 4
    04:50
  • HW u 2013 Using Reference Material 5
    06:55
  • HW u 2013 Using Reference Material 6
    05:05
  • HW u 2013 Using Reference Material 7
    05:05
  • HW u 2013 Using Reference Material 8
    08:44
  • HW u 2013 Using Reference Material 9
    03:44
  • HW u 2013 Using Reference Material 10
    10:12
  • HW u 2013 Using Reference Material 11
    03:29
  • HW u 2013 Using Reference Material 12
    10:58
  • HW u 2013 Using Reference Material 13
    05:01
  • HW u 2013 Using Reference Material 14
    04:53
  • HW u 2013 Using Reference Material 15
    11:16
  • HW u 2013 Using Reference Material 16
    10:12
  • HW u 2013 Using Reference Material 17
    03:55
  • HW u 2013 Using Reference Material 18
    03:46
  • HW u 2013 Using Reference Material 19
    08:09
  • HW u 2013 Using Reference Material 20
    02:56
  • HW u 2013 Using Reference Material 21
    03:01
  • HW u 2013 Using Reference Material 22
    02:28
  • HW u 2013 Using Reference Material 23
    02:16
  • HW u 2013 Using Reference Material 24
    02:26
  • HW u 2013 Using Reference Material 25
    01:36
  • HW u 2013 Using Reference Material 26
    02:30
  • HW u 2013 Using Reference Material 27
    01:25
  • HW u 2013 Using Reference Material 28
    02:31
  • HW u 2013 Using Reference Material 29
    02:36
  • HW u 2013 Using Reference Material 30
    02:25
  • HW u 2013 Using Reference Material 31
    02:26
  • HW u 2013 Using Reference Material 32
    02:21
  • HW u 2013 Using Reference Material 33
    02:25
  • HW u 2013 UX vs UIl 1
    02:41
  • HW u 2013 UX vs UIl 2
    02:42
  • HW u 2013 UX vs UIl 3
    02:30
  • HW u 2013 UX vs UIl 4
    02:06
  • HW u 2013 UX vs UIl 5
    01:39
  • HW u 2013 UX vs UIl 6
    01:19
  • HW u 2013 UX vs UIl 7
    02:46
  • HW u 2013 UX vs UIl 8
    02:08
  • HW u 2013 UX vs UIl 9
    01:59
  • HW u 2013 UX vs UIl 10
    04:09
  • HW u 2013 UX vs UIl 11
    02:37
  • HW u 2013 UX vs UIl 12
    04:19
  • HW u 2013 UX vs UIl 13
    01:29
  • HW u 2013 UX vs UIl 14
    02:17
  • HW u 2013 UX vs UIl 15
    05:28
  • HW u 2013 UX vs UIl 16
    02:34
  • HW u 2013 UX vs UIl 17
    02:37
  • HW u 2013 UX vs UIl 18
    03:41
  • HW u 2013 UX vs UIl 19
    01:51
  • HW u 2013 UX vs UIl 20
    02:33
  • HW u 2013 UX vs UIl 21
    01:18
  • HW u 2013 Design Process 1
    01:36
  • HW u 2013 Design Process 2
    00:11
  • HW u 2013 Font Size 1
    07:19
  • HW u 2013 Font Size 2
    03:55
  • HW u 2013 Font Size 3
    05:12
  • HW u 2013 Font Size 4
    06:51
  • HW u 2013 Font Size 5
    11:43
  • HW u 2013 Font Size 6
    05:03
  • HW u 2013 Font Size 7
    04:13
  • HW u 2013 Font Size 8
    06:42
  • HW u 2013 Font Size 9
    14:37
  • HW u 2013 Font Size 10
    04:17
  • HW u 2013 Font Size 11
    08:59
  • HW u 2013 Font Size 12
    07:36
  • HW u 2013 Font Size 13
    09:00
  • HW u 2013 Font Size 14
    08:09
  • HW u 2013 Font Size 15
    10:56
  • HW u 2013 Font Size 16
    15:05
  • HW u 2013 Font Size 17
    03:40
  • HW u 2013 Font Size 18
    05:19
  • HW u 2013 Font Size 19
    09:52
  • HW u 2013 Font Size 20
    06:08
  • HW u 2013 Font Size 21
    06:13
  • HW u 2013 Font Size 22
    17:59
  • HW u 2013 Font Size 23
    04:44
  • HW u 2013 Font Size 24
    05:42
  • HW u 2013 Font Size 25
    13:45
  • HW u 2013 Font Size 26
    08:22
  • HW u 2013 Font Size 27
    08:06
  • HW u 2013 Font Size 28
    05:48
  • HW u 2013 Font Size 29
    04:45
  • HW u 2013 Font Size 30
    08:44
  • HW u 2013 Font Size 31
    09:14
  • HW u 2013 Font Size 32
    03:55
  • HW u 2013 Font Size 33
    08:45
  • HW u 2013 Font Size 34
    05:33
  • HW u 2013 Font Size 35
    06:35
  • HW u 2013 Font Size 36
    03:27
  • HW u 2013 Font Size 37
    19:15
  • HW u 2013 Font Size 38
    06:30
  • HW u 2013 Font Size 39
    06:37
  • HW u 2013 Font Size 40
    04:31
  • HW u 2013 Font Size 41
    15:16
  • HW u 2013 Font Size 42
    19:15
  • HW u 2013 Font Size 43
    04:46
  • HW u 2013 Font Size 44
    03:43
  • HW u 2013 Font Size 45
    07:20
  • HW u 2013 Font Size 46
    15:05
  • HW u 2013 Font Size 47
    05:55
  • HW u 2013 Font Size 48
    07:49
  • HW u 2013 Font Size 49
    05:15
  • HW u 2013 Font Size 50
    06:20
  • HW u 2013 Font Size 51
    05:38
  • HW u 2013 Font Size 52
    07:19
  • HW u 2013 Font Size 53
    05:01
  • HW u 2013 Font Size 54
    09:09
  • HW u 2013 Font Size 55
    07:49
  • HW u 2013 Font Size 56
    03:24
  • HW u 2013 Font Size 57
    05:45
  • HW u 2013 Font Size 58
    13:53
  • HW u 2013 Font Size 59
    11:55
  • HW u 2013 Font Size 60
    07:26
  • HW u 2013 Font Size 61
    07:20
  • HW u 2013 Font Size 62
    09:46
  • HW u 2013 Font Size 63
    03:43
  • HW u 2013 Font Size 64
    08:03
  • HW u 2013 Font Size 65
    10:21
  • HW u 2013 Font Size 66
    05:23
  • HW u 2013 Font Weight 1
    03:44
  • HW u 2013 Font Weight 2
    04:42
  • HW u 2013 Font Weight 3
    02:48
  • HW u 2013 Font Weight 4
    02:24
  • HW u 2013 Font Weight 5
    01:59
  • HW u 2013 Font Weight 6
    05:11
  • HW u 2013 Font Weight 7
    24:02
  • HW u 2013 Font Weight 8
    04:08
  • HW u 2013 Font Weight 9
    06:28
  • HW u 2013 Font Weight 10
    03:54
  • HW u 2013 Font Weight 11
    04:58
  • HW u 2013 Font Weight 12
    20:38
  • HW u 2013 Font Weight 13
    07:10
  • HW u 2013 Font Weight 14
    05:56
  • HW u 2013 Font Weight 15
    07:22
  • HW u 2013 Font Weight 16
    06:39
  • HW u 2013 Font Weight 17
    03:47
  • HW u 2013 Font Weight 18
    02:05
  • HW u 2013 Font Weight 19
    09:40
  • HW u 2013 Font Weight 20
    05:18
  • HW u 2013 Font Weight 21
    09:24
  • HW u 2013 Font Weight 22
    09:16
  • HW u 2013 Font Weight 23
    03:45
  • HW u 2013 Font Weight 24
    07:05
  • HW u 2013 Font Weight 25
    07:19
  • HW u 2013 Font Weight 26
    02:25
  • HW u 2013 Font Weight 27
    03:28
  • HW u 2013 Font Weight 28
    05:19
  • HW u 2013 Hierarchy 1
    06:59
  • HW u 2013 Hierarchy 2
    04:00
  • HW u 2013 Hierarchy 3
    03:33
  • HW u 2013 Hierarchy 4
    03:42
  • HW u 2013 Hierarchy 5
    07:20
  • HW u 2013 Hierarchy 6
    08:08
  • HW u 2013 Hierarchy 7
    13:42
  • HW u 2013 Hierarchy 10
    22:52
  • HW u 2013 Hierarchy 11
    06:20
  • HW u 2013 Hierarchy 12
    10:36
  • HW u 2013 Hierarchy 13
    05:41
  • HW u 2013 Hierarchy 14
    11:03
  • HW u 2013 Hierarchy 15
    06:39
  • HW u 2013 Hierarchy 16
    04:59
  • HW u 2013 Hierarchy 17
    07:50
  • HW u 2013 Hierarchy 18
    19:05
  • HW u 2013 Hierarchy 19
    12:32
  • HW u 2013 Hierarchy 20
    09:06
  • HW u 2013 Hierarchy 21
    09:35
  • HW u 2013 Hierarchy 22
    03:44
  • HW u 2013 Hierarchy 23
    07:23
  • HW u 2013 Hierarchy 24
    04:30
  • HW u 2013 Hierarchy 25
    07:08
  • HW u 2013 Hierarchy 26
    08:47
  • HW u 2013 Hierarchy 27
    05:01
  • HW u 2013 Hierarchy 28
    21:00
  • HW u 2013 Hierarchy 29
    06:05
  • HW u 2013 Hierarchy 30
    11:23
  • HW u 2013 Hierarchy 31
    10:21
  • HW u 2013 Hierarchy 32
    09:00
  • HW u 2013 Hierarchy 33
    07:19
  • HW u 2013 Hierarchy 34
    04:03
  • HW u 2013 Hierarchy 35
    05:19
  • HW u 2013 Hierarchy 36
    07:43
  • HW u 2013 Hierarchy 37
    06:51
  • HW u 2013 Hierarchy 38
    06:04
  • HW u 2013 Hierarchy 39
    12:39
  • HW u 2013 Hierarchy 40
    04:45
  • HW u 2013 Hierarchy 41
    18:33
  • HW u 2013 Hierarchy 42
    04:49
  • HW u 2013 Hierarchy 43
    11:22
  • HW u 2013 Hierarchy 44
    04:45
  • HW u 2013 Hierarchy 45
    12:51
  • HW u 2013 Hierarchy 46
    02:52
  • HW u 2013 Hierarchy 47
    11:22
  • HW u 2013 Hierarchy 48
    08:12
  • HW u 2013 Starting with System Fonts 1
    01:17
  • HW u 2013 Starting with System Fonts 2
    05:02
  • HW u 2013 Starting with System Fonts 3
    13:15
  • HW u 2013 Starting with System Fonts 4
    04:33
  • HW u 2013 Starting with System Fonts 5
    10:31
  • HW u 2013 Starting with System Fonts 6
    07:54
  • HW u 2013 Starting with System Fonts 7
    03:18
  • HW u 2013 Starting with System Fonts 8
    05:02
  • HW u 2013 Starting with System Fonts 9
    05:40
  • HW u 2013 Starting with System Fonts 10
    05:34
  • HW u 2013 Choosing and Using Alternate Fonts 1
    05:58
  • HW u 2013 Choosing and Using Alternate Fonts 2
    05:32
  • HW u 2013 Choosing and Using Alternate Fonts 3
    05:43
  • HW u 2013 Choosing and Using Alternate Fonts 4
    09:43
  • HW u 2013 Choosing and Using Alternate Fonts 5
    05:50
  • HW u 2013 Choosing and Using Alternate Fonts 6
    03:48
  • HW u 2013 Choosing and Using Alternate Fonts 7
    08:56
  • HW u 2013 Choosing and Using Alternate Fonts 8
    04:07
  • HW u 2013 Choosing and Using Alternate Fonts 9
    04:53
  • HW u 2013 Choosing and Using Alternate Fonts 10
    04:20
  • HW u 2013 Choosing and Using Alternate Fonts 11
    07:26
  • HW u 2013 Choosing and Using Alternate Fonts 12
    08:03

Requirements

  • Basic familiarity with design software such as Figma, Sketch, or Adobe XD.
  • A computer capable of running modern design tools.
  • Interest in user interface design and improving visual design skills.
  • No prior professional design experience required, but helpful.

Description

Interface Design provides a comprehensive journey into the craft of creating beautiful, functional user interfaces with precision and intentionality. This course takes you from foundational visual principles through advanced interface construction, emphasizing the small details that separate amateur work from professional polish.

The learning experience begins by establishing core visual design principles that form the foundation of all interface work. You will explore how spacing, alignment, contrast, and hierarchy work together to create clarity and visual appeal. These fundamentals are not presented as abstract theory but demonstrated through practical interface examples that show exactly how each principle applies in real design scenarios. You will learn to see interfaces differently, understanding the intentional decisions behind every pixel placement and typographic choice.

As you progress, the course moves into typography for interfaces, one of the most critical and often overlooked aspects of UI design. You will study font selection, pairing, sizing, line height, letter spacing, and hierarchy to ensure text is both readable and aesthetically pleasing across different screen sizes and contexts. Lessons cover how to choose appropriate typefaces for different interface contexts, how to create clear typographic systems, and how to balance functional readability with visual personality. This section transforms typography from a guessing game into a systematic, confident practice.

Color application in interfaces forms another major pillar of the course. You will learn how to build cohesive color palettes that serve both functional and aesthetic purposes. The training covers color psychology, accessibility considerations, contrast ratios for readability, and techniques for creating depth and emphasis through color choices. You will understand how to use color to guide user attention, communicate status and feedback, and maintain brand consistency while ensuring usability across light and dark modes.

The course dedicates substantial focus to designing individual interface components with craftsmanship. You will work through buttons, input fields, dropdowns, checkboxes, toggles, cards, modals, and navigation elements. Each component is examined in detail, exploring states such as default, hover, active, focus, disabled, and error. You will learn the nuances of sizing, padding, border radius, shadows, and transitions that make components feel polished and responsive. This hands-on approach develops your eye for detail and teaches you to design with precision.

Layout and composition skills are built systematically throughout the course. You will learn grid systems, responsive design considerations, and how to arrange interface elements to create natural reading flows and intuitive interaction patterns. Lessons demonstrate how to balance density and whitespace, how to group related elements effectively, and how to create visual pathways that guide users through complex interfaces without overwhelming them. These skills apply across mobile, tablet, and desktop contexts.

As your technical skills develop, the course shifts toward building design systems and maintaining consistency. You will learn how to document design decisions, create reusable patterns, and develop style guides that ensure coherence across an entire product. This section teaches you to think beyond individual screens and consider the ecosystem of components, patterns, and principles that create unified user experiences.

The training also emphasizes iteration and refinement. You will develop critical evaluation skills that allow you to identify weaknesses in your own work and improve designs through multiple rounds of refinement. This process includes techniques for gathering feedback, testing design decisions, and making informed revisions that elevate the quality of your interfaces.

Throughout the entire learning path, practical application remains the priority. Every concept is demonstrated through real interface examples, and you are encouraged to apply lessons immediately in your own design work. The course builds not just knowledge but also taste, training your eye to recognize quality and understand the subtleties that distinguish excellent interfaces from merely adequate ones.

By the end of this comprehensive training, you will possess a robust toolkit of visual design skills, a systematic approach to interface construction, and the confidence to create professional-grade UI work. You will understand the rationale behind design decisions, be able to articulate your choices clearly, and produce interfaces that are both beautiful and highly functional. Whether building mobile apps, web applications, or digital products, you will have the visual design foundation to execute with precision and creativity.

Who this course is for:

Interface Design is ideal for aspiring UI designers who want to elevate their craft, product designers seeking to strengthen visual skills, developers who want to understand design principles better, and self-taught designers looking to formalize their knowledge with structured training in interface aesthetics and usability.

Instructor

Matt D. Smith
Interface Designer and Design Educator

About Me

I have spent over a decade refining my craft as an interface designer, working with startups, agencies, and product teams to create digital experiences that balance aesthetics with usability. My journey into design began with a fascination for how small visual decisions could dramatically change the way people interact with software. Over the years, I have worked on a wide range of projects, from mobile applications to complex web platforms, always pushing myself to understand the why behind every design choice.

My approach to design is rooted in precision and intentionality. I believe that great interfaces are not the result of luck or natural talent alone, but of disciplined practice, careful observation, and a commitment to continuous improvement. I have developed methods for teaching these principles in ways that make them accessible to designers at any stage of their journey. My goal has always been to demystify the craft and provide clear, actionable guidance that helps others elevate their work.

I have collaborated with companies across various industries, contributing to products used by millions of people. These experiences have taught me the importance of balancing creativity with constraints, maintaining consistency across large systems, and advocating for design quality in fast-paced environments. I have learned that strong visual design is not just about making things look good, but about creating clarity, building trust, and reducing friction for users.

Beyond client work, I have dedicated significant time to education and community building within the design field. I have shared insights through writing, workshops, and online platforms, always aiming to provide practical knowledge rather than abstract theory. I am passionate about helping designers develop both technical skills and critical judgment, empowering them to make confident decisions and produce work they are proud of. My teaching philosophy emphasizes learning by doing, iterating based on feedback, and cultivating an eye for detail that distinguishes professional work from amateur attempts.

Relative Courses