What you'll learn
Explore related topics
This course includes:
Course content
-
00 Resources01:00
-
1 1 welcome02:45
-
1 2 how it works04:25
-
1 3 mindset04:29
-
1 4 software05:59
-
1 5 ux vs ui06:00
-
1 6 process16:55
-
1 7 reference24:57
-
1 8 quick keys03:35
-
1 9 organize08:19
-
1 10 How I organize my Figma files to overcome the creative block (with Template)13:30
-
2 01 font size16:44
-
2 02 font weight17:29
-
2 03 hierarchy25:42
-
2 04 titles body31:32
-
2 05 truncation17:52
-
2 06 callouts36:21
-
2 07 definitions27:53
-
2 08 1 interactive text25:20
-
2 09 combining text20:06
-
2 10 system fonts07:58
-
2 11 alternate fonts22:23
-
3 01 1 box model24:50
-
3 02 grids containers28:34
-
3 03 implicit grid23:41
-
3 04 negative space21:54
-
3 05 alignment12:40
-
3 06 optics math24:49
-
3 07 high low density28:18
-
3 08 scale weight22:07
-
3 09 affordance19:25
-
3 10 interactive layouts26:22
-
4 01 color methods23:17
-
4 02 contrast26:57
-
4 03 structural vs interactive34:53
-
4 04 primary secondary21:46
-
4 05 color definitions16:58
-
4 06 amount modify23:38
-
4 07 gradients31:49
-
4 08 shades of grey14:13
-
4 09 white almost25:20
-
4 10 dark ui14:38
-
HW u 2013 Contact Cards 114:34
-
HW u 2013 Contact Cards 211:04
-
HW u 2013 Contact Cards 307:21
-
HW u 2013 Contact Cards 414:30
-
HW u 2013 Contact Cards 501:25
-
HW u 2013 Contact Cards 603:35
-
HW u 2013 Contact Cards 704:38
-
HW u 2013 Contact Cards 803:16
-
HW u 2013 Contact Cards 903:57
-
HW u 2013 Contact Cards 1011:39
-
HW u 2013 Contact Cards 1102:46
-
HW u 2013 Contact Cards 1204:43
-
HW u 2013 Contact Cards 1304:25
-
HW u 2013 Contact Cards 1402:51
-
HW u 2013 Contact Cards 1506:58
-
HW u 2013 Contact Cards 1609:56
-
HW u 2013 Contact Cards 1703:00
-
HW u 2013 Contact Cards 1804:33
-
HW u 2013 Contact Cards 1905:49
-
HW u 2013 Contact Cards 2007:20
-
HW u 2013 Contact Cards 2108:56
-
HW u 2013 Contact Cards 2206:02
-
HW u 2013 Contact Cards 2311:49
-
HW u 2013 Contact Cards 2413:06
-
HW u 2013 Contact Cards 2502:05
-
HW u 2013 Contact Cards 2604:11
-
HW u 2013 Contact Cards 2701:20
-
HW u 2013 Contact Cards 2805:46
-
HW u 2013 Contact Cards 2902:16
-
HW u 2013 Contact Cards 3003:04
-
HW u 2013 Contact Cards 3104:36
-
HW u 2013 Contact Cards 3206:42
-
HW u 2013 Contact Cards 3302:52
-
HW u 2013 Contact Cards 3402:49
-
HW u 2013 Contact Cards 3503:48
-
HW u 2013 Contact Cards 3609:56
-
HW u 2013 Contact Cards 3707:41
-
HW u 2013 Contact Cards 3803:12
-
HW u 2013 Contact Cards 3908:09
-
HW u 2013 Contact Cards 4001:39
-
HW u 2013 Contact Cards 4104:45
-
HW u 2013 Contact Cards 4203:05
-
HW u 2013 Contact Cards 4306:24
-
HW u 2013 Contact Cards 4403:12
-
HW u 2013 Contact Cards 4511:26
-
HW u 2013 Contact Cards 4605:43
-
HW u 2013 Contact Cards 4709:19
-
HW u 2013 Contact Cards 4804:06
-
HW u 2013 Contact Cards 4904:52
-
HW u 2013 Contact Cards 5005:20
-
HW u 2013 Contact Cards 5103:57
-
HW u 2013 Contact Cards 5204:23
-
HW u 2013 Contact Cards 5303:25
-
HW u 2013 Contact Cards 5402:38
-
HW u 2013 Contact Cards 5514:55
-
HW u 2013 Contact Cards 5608:02
-
HW u 2013 Contact Cards 5705:52
-
HW u 2013 Contact Cards 5802:28
-
HW u 2013 Contact Cards 5902:40
-
HW u 2013 Contact Cards 6002:33
-
HW u 2013 Contact Cards 6105:22
-
HW u 2013 Contact Cards 6204:29
-
HW u 2013 Contact Cards 6303:31
-
HW u 2013 Contact Cards 6403:53
-
HW u 2013 Contact Cards 6504:08
-
HW u 2013 Contact Cards 6604:15
-
HW u 2013 Contact Cards 6702:42
-
HW u 2013 Contact Cards 6803:41
-
HW u 2013 Contact Cards 6909:03
-
HW u 2013 Contact Cards 7007:28
-
HW u 2013 Contact Cards 7111:56
-
HW u 2013 Contact Cards 7203:18
-
HW u 2013 Contact Cards 7307:32
-
HW u 2013 Contact Cards 7406:21
-
HW u 2013 Contact Cards 7511:50
-
HW u 2013 Using Reference Material 109:44
-
HW u 2013 Using Reference Material 206:21
-
HW u 2013 Using Reference Material 304:02
-
HW u 2013 Using Reference Material 404:50
-
HW u 2013 Using Reference Material 506:55
-
HW u 2013 Using Reference Material 605:05
-
HW u 2013 Using Reference Material 705:05
-
HW u 2013 Using Reference Material 808:44
-
HW u 2013 Using Reference Material 903:44
-
HW u 2013 Using Reference Material 1010:12
-
HW u 2013 Using Reference Material 1103:29
-
HW u 2013 Using Reference Material 1210:58
-
HW u 2013 Using Reference Material 1305:01
-
HW u 2013 Using Reference Material 1404:53
-
HW u 2013 Using Reference Material 1511:16
-
HW u 2013 Using Reference Material 1610:12
-
HW u 2013 Using Reference Material 1703:55
-
HW u 2013 Using Reference Material 1803:46
-
HW u 2013 Using Reference Material 1908:09
-
HW u 2013 Using Reference Material 2002:56
-
HW u 2013 Using Reference Material 2103:01
-
HW u 2013 Using Reference Material 2202:28
-
HW u 2013 Using Reference Material 2302:16
-
HW u 2013 Using Reference Material 2402:26
-
HW u 2013 Using Reference Material 2501:36
-
HW u 2013 Using Reference Material 2602:30
-
HW u 2013 Using Reference Material 2701:25
-
HW u 2013 Using Reference Material 2802:31
-
HW u 2013 Using Reference Material 2902:36
-
HW u 2013 Using Reference Material 3002:25
-
HW u 2013 Using Reference Material 3102:26
-
HW u 2013 Using Reference Material 3202:21
-
HW u 2013 Using Reference Material 3302:25
-
HW u 2013 UX vs UIl 102:41
-
HW u 2013 UX vs UIl 202:42
-
HW u 2013 UX vs UIl 302:30
-
HW u 2013 UX vs UIl 402:06
-
HW u 2013 UX vs UIl 501:39
-
HW u 2013 UX vs UIl 601:19
-
HW u 2013 UX vs UIl 702:46
-
HW u 2013 UX vs UIl 802:08
-
HW u 2013 UX vs UIl 901:59
-
HW u 2013 UX vs UIl 1004:09
-
HW u 2013 UX vs UIl 1102:37
-
HW u 2013 UX vs UIl 1204:19
-
HW u 2013 UX vs UIl 1301:29
-
HW u 2013 UX vs UIl 1402:17
-
HW u 2013 UX vs UIl 1505:28
-
HW u 2013 UX vs UIl 1602:34
-
HW u 2013 UX vs UIl 1702:37
-
HW u 2013 UX vs UIl 1803:41
-
HW u 2013 UX vs UIl 1901:51
-
HW u 2013 UX vs UIl 2002:33
-
HW u 2013 UX vs UIl 2101:18
-
HW u 2013 Design Process 101:36
-
HW u 2013 Design Process 200:11
-
HW u 2013 Font Size 107:19
-
HW u 2013 Font Size 203:55
-
HW u 2013 Font Size 305:12
-
HW u 2013 Font Size 406:51
-
HW u 2013 Font Size 511:43
-
HW u 2013 Font Size 605:03
-
HW u 2013 Font Size 704:13
-
HW u 2013 Font Size 806:42
-
HW u 2013 Font Size 914:37
-
HW u 2013 Font Size 1004:17
-
HW u 2013 Font Size 1108:59
-
HW u 2013 Font Size 1207:36
-
HW u 2013 Font Size 1309:00
-
HW u 2013 Font Size 1408:09
-
HW u 2013 Font Size 1510:56
-
HW u 2013 Font Size 1615:05
-
HW u 2013 Font Size 1703:40
-
HW u 2013 Font Size 1805:19
-
HW u 2013 Font Size 1909:52
-
HW u 2013 Font Size 2006:08
-
HW u 2013 Font Size 2106:13
-
HW u 2013 Font Size 2217:59
-
HW u 2013 Font Size 2304:44
-
HW u 2013 Font Size 2405:42
-
HW u 2013 Font Size 2513:45
-
HW u 2013 Font Size 2608:22
-
HW u 2013 Font Size 2708:06
-
HW u 2013 Font Size 2805:48
-
HW u 2013 Font Size 2904:45
-
HW u 2013 Font Size 3008:44
-
HW u 2013 Font Size 3109:14
-
HW u 2013 Font Size 3203:55
-
HW u 2013 Font Size 3308:45
-
HW u 2013 Font Size 3405:33
-
HW u 2013 Font Size 3506:35
-
HW u 2013 Font Size 3603:27
-
HW u 2013 Font Size 3719:15
-
HW u 2013 Font Size 3806:30
-
HW u 2013 Font Size 3906:37
-
HW u 2013 Font Size 4004:31
-
HW u 2013 Font Size 4115:16
-
HW u 2013 Font Size 4219:15
-
HW u 2013 Font Size 4304:46
-
HW u 2013 Font Size 4403:43
-
HW u 2013 Font Size 4507:20
-
HW u 2013 Font Size 4615:05
-
HW u 2013 Font Size 4705:55
-
HW u 2013 Font Size 4807:49
-
HW u 2013 Font Size 4905:15
-
HW u 2013 Font Size 5006:20
-
HW u 2013 Font Size 5105:38
-
HW u 2013 Font Size 5207:19
-
HW u 2013 Font Size 5305:01
-
HW u 2013 Font Size 5409:09
-
HW u 2013 Font Size 5507:49
-
HW u 2013 Font Size 5603:24
-
HW u 2013 Font Size 5705:45
-
HW u 2013 Font Size 5813:53
-
HW u 2013 Font Size 5911:55
-
HW u 2013 Font Size 6007:26
-
HW u 2013 Font Size 6107:20
-
HW u 2013 Font Size 6209:46
-
HW u 2013 Font Size 6303:43
-
HW u 2013 Font Size 6408:03
-
HW u 2013 Font Size 6510:21
-
HW u 2013 Font Size 6605:23
-
HW u 2013 Font Weight 103:44
-
HW u 2013 Font Weight 204:42
-
HW u 2013 Font Weight 302:48
-
HW u 2013 Font Weight 402:24
-
HW u 2013 Font Weight 501:59
-
HW u 2013 Font Weight 605:11
-
HW u 2013 Font Weight 724:02
-
HW u 2013 Font Weight 804:08
-
HW u 2013 Font Weight 906:28
-
HW u 2013 Font Weight 1003:54
-
HW u 2013 Font Weight 1104:58
-
HW u 2013 Font Weight 1220:38
-
HW u 2013 Font Weight 1307:10
-
HW u 2013 Font Weight 1405:56
-
HW u 2013 Font Weight 1507:22
-
HW u 2013 Font Weight 1606:39
-
HW u 2013 Font Weight 1703:47
-
HW u 2013 Font Weight 1802:05
-
HW u 2013 Font Weight 1909:40
-
HW u 2013 Font Weight 2005:18
-
HW u 2013 Font Weight 2109:24
-
HW u 2013 Font Weight 2209:16
-
HW u 2013 Font Weight 2303:45
-
HW u 2013 Font Weight 2407:05
-
HW u 2013 Font Weight 2507:19
-
HW u 2013 Font Weight 2602:25
-
HW u 2013 Font Weight 2703:28
-
HW u 2013 Font Weight 2805:19
-
HW u 2013 Hierarchy 106:59
-
HW u 2013 Hierarchy 204:00
-
HW u 2013 Hierarchy 303:33
-
HW u 2013 Hierarchy 403:42
-
HW u 2013 Hierarchy 507:20
-
HW u 2013 Hierarchy 608:08
-
HW u 2013 Hierarchy 713:42
-
HW u 2013 Hierarchy 1022:52
-
HW u 2013 Hierarchy 1106:20
-
HW u 2013 Hierarchy 1210:36
-
HW u 2013 Hierarchy 1305:41
-
HW u 2013 Hierarchy 1411:03
-
HW u 2013 Hierarchy 1506:39
-
HW u 2013 Hierarchy 1604:59
-
HW u 2013 Hierarchy 1707:50
-
HW u 2013 Hierarchy 1819:05
-
HW u 2013 Hierarchy 1912:32
-
HW u 2013 Hierarchy 2009:06
-
HW u 2013 Hierarchy 2109:35
-
HW u 2013 Hierarchy 2203:44
-
HW u 2013 Hierarchy 2307:23
-
HW u 2013 Hierarchy 2404:30
-
HW u 2013 Hierarchy 2507:08
-
HW u 2013 Hierarchy 2608:47
-
HW u 2013 Hierarchy 2705:01
-
HW u 2013 Hierarchy 2821:00
-
HW u 2013 Hierarchy 2906:05
-
HW u 2013 Hierarchy 3011:23
-
HW u 2013 Hierarchy 3110:21
-
HW u 2013 Hierarchy 3209:00
-
HW u 2013 Hierarchy 3307:19
-
HW u 2013 Hierarchy 3404:03
-
HW u 2013 Hierarchy 3505:19
-
HW u 2013 Hierarchy 3607:43
-
HW u 2013 Hierarchy 3706:51
-
HW u 2013 Hierarchy 3806:04
-
HW u 2013 Hierarchy 3912:39
-
HW u 2013 Hierarchy 4004:45
-
HW u 2013 Hierarchy 4118:33
-
HW u 2013 Hierarchy 4204:49
-
HW u 2013 Hierarchy 4311:22
-
HW u 2013 Hierarchy 4404:45
-
HW u 2013 Hierarchy 4512:51
-
HW u 2013 Hierarchy 4602:52
-
HW u 2013 Hierarchy 4711:22
-
HW u 2013 Hierarchy 4808:12
-
HW u 2013 Starting with System Fonts 101:17
-
HW u 2013 Starting with System Fonts 205:02
-
HW u 2013 Starting with System Fonts 313:15
-
HW u 2013 Starting with System Fonts 404:33
-
HW u 2013 Starting with System Fonts 510:31
-
HW u 2013 Starting with System Fonts 607:54
-
HW u 2013 Starting with System Fonts 703:18
-
HW u 2013 Starting with System Fonts 805:02
-
HW u 2013 Starting with System Fonts 905:40
-
HW u 2013 Starting with System Fonts 1005:34
-
HW u 2013 Choosing and Using Alternate Fonts 105:58
-
HW u 2013 Choosing and Using Alternate Fonts 205:32
-
HW u 2013 Choosing and Using Alternate Fonts 305:43
-
HW u 2013 Choosing and Using Alternate Fonts 409:43
-
HW u 2013 Choosing and Using Alternate Fonts 505:50
-
HW u 2013 Choosing and Using Alternate Fonts 603:48
-
HW u 2013 Choosing and Using Alternate Fonts 708:56
-
HW u 2013 Choosing and Using Alternate Fonts 804:07
-
HW u 2013 Choosing and Using Alternate Fonts 904:53
-
HW u 2013 Choosing and Using Alternate Fonts 1004:20
-
HW u 2013 Choosing and Using Alternate Fonts 1107:26
-
HW u 2013 Choosing and Using Alternate Fonts 1208: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. SmithAbout 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