Foundations of UI Design
Overview
AI tools generate UI at the speed of thought. But speed without judgment produces fast, mediocre outputs. Laws of UX, Gestalt psychology, visual hierarchy, and accessibility principles are the quality filter that separates AI-accelerated work that is genuinely good from AI-generated work that merely looks plausible. You cannot critique AI output effectively without this foundation. You cannot defend design decisions to stakeholders without this vocabulary.
AI workflow
11 steps
- 01
Laws of UX - Core 10
lawsofux.com
Study: Hick's Law (decision complexity), Fitts's Law (target acquisition), Jakob's Law (convention expectations), Miller's Law (cognitive chunking), Doherty Threshold (response time and engagement), Tesler's Law (conservation of complexity), and the Peak-End Rule (experience memory). Each maps directly to a design decision category.
- 02
Gestalt Principles Application
Interaction Design Foundation
The 7 principles - proximity, similarity, continuation, closure, figure/ground, symmetry, common fate - explain why layouts feel cohesive or broken. Apply one per screen: "What groupings am I communicating via proximity? Where does the figure/ground relationship create confusion?"
- 03
Visual Hierarchy Audit
Claude
Screenshot a design. Prompt Claude: "Describe the visual hierarchy of this layout. What does the eye see first, second, and third? Is this the intended reading order? What hinders the hierarchy?" Use this before every hi-fi review.
- 04
Colour and Contrast Foundations
Colour Contrast Analyser / Figma
WCAG AA requires 4.5:1 contrast for normal text, 3:1 for large text. Use the free Colour Contrast Analyser or Figma's built-in accessibility check. Study colour psychology: red urgency, blue trust, green success. These are not decorative choices.
- 05
Typography Fundamentals
Self-directed + Figma
Type scale (8pt grid), line height (1.4-1.6 for body), measure (45-75 characters per line), weight contrast for hierarchy. Prompt Claude: "Review this type system for readability issues. Reference WCAG text requirements and typographic best practices." Apply to every design review.
- 06
The Eye Test - Original vs Broken
Figma
Do not judge "good app vs bad app" - that gets subjective fast. Duplicate one screen, break one or two principles on purpose, and put the two side by side so you can see exactly what changed. The rule: do not say A looks cleaner, say why. Ten comparisons to run: Hierarchy (deciding what is allowed to be loud), Spacing (distance communicates relationship - 4px inside a group, 16px between groups), Typography (size and weight are how text gets ranked; 6-7 near-identical sizes flatten it), Alignment (the eye notices a 3-6px drift before the brain can explain it), Density (contextual - a trading screen needs compact rows), Colour (one action colour, so the next step is obvious), Components (quality dies in the relationships between things - one button system, same heights and radii), Forms (more space between groups than inside them, persistent labels), States (the current state is the loudest thing on screen), and AI-generated UI.
- 07
Run the Eye Test on Every Screen
Self-directed
Seven questions, in order. Hierarchy: what is allowed to be loud? Spacing: does distance match relationship? Type: how many sizes and weights, and why? Alignment: do edges actually line up? Density: does it fit the user and the task? Colour: is colour carrying meaning? Consistency: do components behave like a system? You know it is working when you stop saying "looks clean" and start saying "grouping", "density" and "optical alignment".
- 08
AI Design Critique Against Principles
Claude
Build a personal critique prompt template: "Review this design against: (1) Gestalt grouping principles, (2) Fitts's Law for interactive targets, (3) Hick's Law for decision points, (4) WCAG 2.1 contrast requirements. List violations and their user impact." Use at every review stage.
- 09
Component Decision Documentation
Claude + Notion
For every significant component decision, document the principle it applies: "This navigation pattern applies Jakob's Law - users expect [convention]. Departure from convention requires [justification]." This makes design rationale defensible and teachable.
- 10
UI Crime Scene Drill
Screenshot folder
Build a folder of 15 real screenshots from products you use. Pull one at random and give yourself 20 seconds to diagnose it - no long explanations. Name the crime (competing hierarchy, uneven spacing, too many type sizes, drifting edges, colour shouting, inconsistent components), then check your answer against the Eye Test questions.
- 11
Training Taste
Mobbin + Figma
Taste is trained judgment, not a personal preference: the ability to tell which of two good options is right for this user and this task, and to say why. Train it deliberately. Keep a reference library of screens from products you admire (Mobbin is the fastest source). For each one, write down the decisions you can see - what is loud, what is quiet, what was left out. Once a week, rebuild one screen pixel for pixel in Figma; the gaps between yours and theirs are the lesson. Then critique your own work against the reference, not against your memory of it.
Tools
| Tool | Use | Free tier | Client-safe |
|---|---|---|---|
| lawsofux.com | Primary reference for psychology-backed design principles | Free | Yes |
| Claude | Design critique, principle application, rationale generation | Free tier available | Yes |
| Figma | Implementation and accessibility checking | Free tier available (limited) | Yes |
| Interaction Design Foundation | Deep-dive learning on all foundational topics | Limited free articles, paid courses | Yes |
| WAVE | Live accessibility and contrast checking | Free browser extension | Yes |
Constraints
7 constraints
- Honest Assessment: No AI tool can tell you if a design is good. It can tell you if it violates measurable principles. Design quality requires human judgment informed by deep principle knowledge.
- Foundation-first rule: Do not use AI to generate UI until you can explain why a layout works using at least 3 principles. If you cannot explain it, you cannot critique AI output.
- Accessibility is not optional. WCAG 2.1 AA is the legal minimum in most jurisdictions. Treat contrast failures and missing ARIA labels as bugs, not style choices.
- Better UI is not prettier UI. A minimal checkout with placeholder-only fields and no labels wins on a Dribbble shot; the denser one with persistent labels, clear grouping, error guidance and a delivery estimate is the one that gets the checkout done. Always judge the screen against the task.
- Density is not inherently bad. Huge cards and massive whitespace can make a data-heavy screen worse for the people who scan it all day. Good UI is contextual.
- Colour is information, not decoration. When success green, brand purple, offer yellow, warning red and link blue all appear at once, everything is shouting and nothing is the next step. Stay mostly neutral and keep one action colour.
- When AI can generate ten competent screens in a minute, producing options stops being the skill. Choosing the right one - and explaining the choice in terms of principles, users and the task - is what taste is, and it is what clients and teams are now paying for.
Practice
Free browser games that drill one fundamental at a time. Reading about kerning or the pen tool does not build the eye or the hand - repetition does. Fifteen minutes each is enough to feel the difference.
- KernTypeLetter spacingSpace the letters of a word by eye, then compare your answer against the typographer's. Ten rounds is enough to stop seeing words and start seeing the gaps between them, which is the thing that makes a headline read as considered rather than default.
- ShapeTypeLetterformsRedraw a letter from its skeleton and get scored against the original curve. Trains the eye for stroke weight, optical correction, and why a circular "o" is drawn slightly taller than the x-height it sits on.
- ColorHue, saturation, luminosityMatch a target colour and build harmonies (complementary, analogous, triadic) under time pressure. The fastest way to learn that most "the palette feels off" problems are luminosity problems, not hue problems.
- The Bezier GamePen toolTrace shapes with the pen tool using as few anchor points as possible. Direct, transferable practice for Figma and Illustrator - fewer, better-placed points is the difference between an icon that scales cleanly and one that has to be redrawn.