# Intro to UI Design: User Interface Design Principles for UX/UI Designer (+Figma Design Exercise) - review & insight | Gareth B. Davies

Source: https://garethbdavies.com/course-insights/intro-to-ui-design-user-interface-design-principles-for-ux-ui-designer-figma-design-exercise/

[← All courses](https://garethbdavies.com/course-insights/) Graphic Design · Solid intro · Rated 7 /10

# Intro to UI Design: User Interface Design Principles for UX/UI Designer (+Figma Design Exercise)

 Updated August 2026

 Christine Vallaure · UI designer, speaker & teacher

 Beginner · 48 min

 A tight 48-minute Gestalt-theory primer that turns fuzzy design intuition into ten nameable, testable rules.

 [Get a Free Month on Skillshare](https://skillshare.eqcm.net/c/3155494/298081/4650?u=https%3A%2F%2Fwww.skillshare.com%2Fclasses%2Fintro-to-ui-design-user-interface-design-principles-for-ux-ui-designer-figma-design-exercise%2F1581966365)

 New to Skillshare? Your first month is free, enough to take this course at no cost.

## What it actually covers

 The course is built entirely around Gestalt psychology, the early-20th-century framework describing how the eye groups visual information into patterns. Christine Vallaure walks through ten specific laws in sequence: the aesthetic-usability effect, visual hierarchy, the law of Prägnanz, similarity, proximity, common region, the Von Restorff (isolation) effect, common fate, and finally the more abstract idea of visceral reaction. Each lesson runs the same pattern: define the principle, show a quick abstract diagram, then dissect a real website (Wix, Spaces, Oatmeal, Headspace) to point out exactly where that law shows up in practice. That repetition is a strength rather than a weakness. It turns each law from an abstract claim into something a viewer can go spot on any site within minutes.

 The most concrete, immediately usable material sits in the middle section. The lesson on text and button sizing gives a real formula: a 16px base font, an 8-point spacing scale, and a 44 to 48 point minimum touch target pulled directly from Apple's Human Interface Guidelines. The proximity lesson explains the difference between a grid system, which handles horizontal layout, and a spacing system, which handles vertical rhythm and internal padding, a distinction many beginners conflate. These two lessons alone give a design vocabulary that holds up in a critique or a handoff conversation with a developer.

## Where it thins out

 The opening lesson on UX versus UI is useful framing but explicitly caps its own ambition, noting that in-depth UX research sits outside this course's scope. Visceral reaction, the closing principle, is acknowledged even by the course itself as resistant to a clean rule: it is presented as a gut-feeling layer built from imagery, video, color, and tone rather than something with a testable formula. That honesty is appreciated, but it also means the course's final substantive lesson is its least actionable one.

 The capstone exercise, designing a co-working space website from a supplied wireframe and brand brief in Figma, is where the theory is meant to click into practice. It comes with a suggested solution file for comparison, which is a nice touch for self-directed learners without access to feedback. But the exercise itself is not walked through step by step in video form. It is handed off as a self-paced download, so a viewer who wants to see the instructor's own design decisions narrated in real time will not get that here.

## Verdict

 At 48 minutes across 17 short lessons, this is closer to a structured cheat sheet than a comprehensive UI course. It succeeds at what it sets out to do: give a beginner a named vocabulary for why good interfaces look good, backed by real examples rather than abstract theory alone. It does not attempt to teach Figma itself, in-depth typography systems, or accessibility beyond passing mentions of contrast checking, and it repeatedly points elsewhere in the instructor's own catalog for those topics. Anyone expecting a full design curriculum in under an hour will be disappointed. Anyone wanting a fast, well-organized primer on the psychological rules behind UI hierarchy will get exactly that.

 The standout

 The walkthrough of real websites (Wix, Spaces, Oatmeal, Headspace) dissecting exactly how each Gestalt law shows up in an actual shipped interface is the one section worth the price of admission alone.

## What you will learn

- · Apply Gestalt-based laws (Prägnanz, similarity, proximity, common region, common fate) to structure a layout
- · Build a type scale from a 16px base and an 8-point spacing/grid system
- · Size touch targets correctly (44-48pt clickable area per Apple HIG)
- · Use the Von Restorff effect to highlight a single option like a pricing tier
- · Distinguish UX from UI responsibilities and where they hand off to development
- · Design a co-working website in Figma from a given wireframe and brand brief

 Best for: A beginner or self-taught designer who can already open Figma and wants a vocabulary and rule set for why some UI layouts feel right.

 Skip it if: Anyone wanting hands-on tool training, in-depth UX research methods, or coverage beyond visual/interaction principles already familiar to a working UI designer.

 Organization of Lessons Clarity of Instruction Helpful Examples Engaging Teacher

 [Get a Free Month on Skillshare](https://skillshare.eqcm.net/c/3155494/298081/4650?u=https%3A%2F%2Fwww.skillshare.com%2Fclasses%2Fintro-to-ui-design-user-interface-design-principles-for-ux-ui-designer-figma-design-exercise%2F1581966365)
