The Language
of Design
A PM's complete course in design vocabulary — so you can earn a seat at the table where design decisions get made. Ten modules. Real visual examples. No fluff.
Visual Hierarchy
"The eye needs to be told where to go. If you don't tell it, it gets lost."
Visual hierarchy is the single most important concept in design. Everything else — typography, color, spacing — are tools in service of it. Hierarchy is the intentional arrangement of elements to guide the viewer's eye in a specific order.
Designers create hierarchy using 6 variables: size, weight, contrast, color, spacing, and position. When these work together, the eye moves naturally. When they conflict, the user's eye stutters — they can't find the entry point.
The Squint Test
Squint at a design until it blurs. The largest, brightest, highest-contrast element you can still perceive is the first thing users see. If that element isn't the most important thing on the page, the hierarchy is broken.
Everything is the same size, weight, and color. The eye doesn't know where to start. The CTA gets lost.
Large headline draws the eye. Secondary text steps back. Body recedes further. CTA pops with color. One clear path.
In a design review, you can now say: "The headline and the CTA are the same visual weight — the hierarchy is fighting itself. The eye doesn't have a clear path." You've named the problem precisely without prescribing the solution.
The intentional ordering of elements by visual prominence to guide the viewer's eye in a specific sequence.
Use it: "The hierarchy is inverted — the metadata is more visually prominent than the headline."
How much an element "pulls" the eye. Size, boldness, contrast, and color all contribute to visual weight.
Use it: "The title and the body copy have the same visual weight — they're competing."
The first element a user's eye lands on. Every design should have one clear, intended entry point.
Use it: "There's no clear entry point here — where should the user look first?"
The difference between two elements — light/dark, large/small, bold/thin. High contrast creates prominence. Low contrast creates subtlety.
Use it: "We need more contrast between the primary and secondary actions."
When something "feels off" but you can't name it, try the squint test first. Then ask: Where does my eye go? Is that where it should go? What's competing for attention that shouldn't be? The answer usually reveals a hierarchy problem.
Typography
"95% of design is typography. Typography is 95% of communication."
Typography is the most important design skill you can develop. Bad typography undermines even good ideas. Good typography communicates hierarchy, tone, and readability before a user reads a single word.
Typeface vs. Font
A typeface is the design family (e.g., Fraunces, Helvetica). A font is a specific instance of that typeface — a particular weight and size (e.g., Fraunces Bold 24px). Most people use "font" for both, but designers notice when PMs don't.
The Type Scale
A type scale is a set of predefined sizes that create visual rhythm. A good scale has clear contrast between levels — if two sizes look "the same," they're competing.
Leading (Line Height)
Leading is the vertical space between lines of text. Too tight and text feels claustrophobic. Too loose and lines feel disconnected. Body text typically lives at 1.5–1.7×. Headlines compress to 1.0–1.2×.
The product needs to solve the user's core job. We've identified three patterns in the research that suggest the current flow is missing a critical step.
The product needs to solve the user's core job. We've identified three patterns in the research that suggest the current flow is missing a critical step.
The product needs to solve the user's core job. We've identified three patterns in the research that suggest the current flow is missing a critical step.
Tracking (Letter Spacing)
Tracking is the uniform spacing between all letters in a word. Headlines often benefit from negative tracking (tighter, more luxury). All-caps labels benefit from positive tracking (more legible). Never add tracking to body text.
Font Weight
Weight runs from 100 (thin) to 900 (black). Most typefaces only support 300/400/500/600/700. Weight is one of the most powerful tools for creating hierarchy within a single typeface.
Font Pairing & Type Roles
Most well-designed products use 2 typefaces with distinct roles: a display/serif for headlines (gravitas, character) and a sans-serif for body (readability, neutrality). A monospace font handles code, labels, and data.
They want fewer, better ones.
After 42 user interviews, the pattern is clear. The most engaged users describe the product with two words: fast and focused. The features they love most are the ones that get out of their way. The features they ignore are the ones we're most proud of.
Measure (Line Length)
Measure is the width of a text column. The ideal range is 45–75 characters per line. Too wide and the eye loses its place at line-end. Too narrow and the eye has to return too often, breaking reading rhythm.
The vertical space between lines of text. Comes from the lead strips typesetters once placed between lines.
Use it: "The body copy's leading is too tight — it's hard to read at small sizes."
Uniform letter spacing applied to a block of text. Distinguished from kerning, which is spacing between specific letter pairs.
Use it: "The headline needs tighter tracking — it'll feel more premium."
The spacing between two specific characters, adjusted optically. "AV" needs tighter kerning than "HH."
Use it: "The logo has a kerning issue between the 'A' and 'V' — they look too far apart."
A defined set of text sizes used consistently throughout a product. Creates rhythm and hierarchy.
Use it: "This label looks like it's between two sizes in our scale — which one is it meant to be?"
The thickness of letterform strokes, on a scale of 100 (thin) to 900 (black). A key tool for hierarchy.
Use it: "The title needs more weight — it's getting lost next to the bold metadata."
The width of a column of text. Optimal readability is 45–75 characters per line.
Use it: "The body text is spanning full width — the measure is too wide to read comfortably."
Typography problems are almost always one of four things: the scale doesn't have enough contrast between levels (two sizes look identical), the leading is wrong for the context (too tight for body, too loose for display), the weight isn't differentiating hierarchy, or the measure is too wide to read. You can now diagnose all four.
Color
"Color communicates intent before the user reads a single word."
Color is not decoration. It is a communication system. Every color decision encodes meaning — status, priority, brand, affordance — and bad color decisions create noise that users have to decode.
Hue, Saturation, Value
Every color is defined by three dimensions. Understanding them lets you manipulate color precisely instead of guessing.
HUE — the base color, around the color wheel
SATURATION — from grey (0%) to vivid (100%). Same hue.
VALUE (LIGHTNESS) — from dark to light. Same hue, full saturation.
Color as Communication — Semantic Colors
Products use a consistent set of semantic colors. These encode meaning. Never use red for a non-destructive action. Never use green for a warning. Users have trained responses to these colors.
Accessibility: Contrast Ratios
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and its background. AA (4.5:1) is the legal standard for most products. AAA (7:1) is optimal. Failing AA is both a design and a legal problem.
The 60-30-10 Rule
A classic composition principle: 60% dominant color (usually background/surface), 30% secondary (panels, cards), 10% accent (CTAs, highlights, interactive elements). The accent is precious — overuse it and it loses power.
Background
Surface
Accent
The base color — where it sits on the color wheel. Red, orange, green, blue are hues.
Use it: "The hover state shifts the hue too far — it reads as a different color entirely."
The intensity/vividness of a color. High saturation = vivid. Low saturation = muted/grey.
Use it: "The disabled state needs lower saturation, not just lower opacity."
Tint = color + white (lighter). Shade = color + black (darker). Tone = color + grey (more muted).
Use it: "The background should use a tint of the brand color, not the full saturation."
The measured difference in luminance between text and its background. WCAG AA requires 4.5:1 minimum.
Use it: "That grey-on-grey text won't pass AA contrast — we can't ship that."
Web Content Accessibility Guidelines. The international standard for digital accessibility. AA is the legal minimum in most jurisdictions.
Use it: "We need to check WCAG compliance before launch — this is a legal requirement."
A color assigned to a specific meaning (error = red, success = green). Used consistently to encode status and intent.
Use it: "We're using red here for a non-destructive action — that's breaking the semantic color system."
Three color questions to ask in every review: (1) Does the accent color have enough contrast to be accessible? (2) Are we using semantic colors consistently — does red always mean destructive? (3) Is the accent being overused? If everything is highlighted, nothing is.
Spacing & Layout
"Space is structure, breathing room, and hierarchy — all at once."
Spacing is one of the most powerful and most underused design tools. Designers with poor spacing instincts cram elements together. Designers with great spacing instincts understand that negative space shapes positive space.
The 8-Point Grid
The most common spatial system in modern product design. All spacing values are multiples of 8px: 4, 8, 16, 24, 32, 40, 48, 64, 80, 96. This creates visual rhythm and makes spacing decisions consistent across a product. When something "looks off" with spacing, it's often because someone used a non-8pt value.
Object Snapping
Snapping is what makes alignment feel effortless in design tools. When you drag an element close to another — a button near a text block, an icon inside a card — the tool detects the proximity and automatically locks it into perfect alignment. The element "snaps" to the nearest alignment point like a magnet.
There are three types: grid snapping (elements snap to the 8pt grid), object snapping (elements snap to the edges, centers, or corners of other elements), and guide snapping (elements snap to manually drawn guides). Most tools have all three on by default.
Snapping is what enforces the 8-point grid in practice. Without it, designers would need to manually check every spacing value. With it, the tool does the precision work — which is why "pixel-perfect" designs are achievable at speed.
Slight offsets everywhere — 18px here, 21px there. Nothing truly aligns.
All elements share the same left edge — 24px. Grid-snapped, instantly consistent.
Spacing Hierarchies
Not all spacing is equal. Spacing encodes relationships: small spacing = close relationship, large spacing = separation. Items within a component (e.g., label + input) sit close together. Components within a section sit further apart. Sections within a page have the most space between them.
Padding vs. Margin
Padding is space inside an element — between the content and the border. It grows the element itself. Margin is space outside an element — between this element and its neighbors. It creates distance between things. Designers use these terms precisely. "Add more padding to the button" means the button itself grows. "Add more margin below the headline" means push the next element down.
A spacing system where all values are multiples of 8px. Creates rhythm and consistency across a product.
Use it: "This padding looks like 10px — that's off-grid. Can we align this to the 8-point system?"
A design tool feature that automatically aligns elements to each other, a grid, or guides when dragged close enough. Like a magnet for precision alignment.
Use it: "This button is 3px off from the input — can you snap it to the same left edge?"
Empty space in a design. Often called "white space" even on dark backgrounds. A design element in its own right.
Use it: "The card needs more negative space — everything is competing for attention."
Space between an element's content and its border. Affects the size of the element itself.
Use it: "The button's padding feels too tight — the text is almost touching the edge."
Space outside an element, between it and its neighbors. Does not affect the element's own size.
Use it: "There's no margin between the heading and the form — they look related when they shouldn't."
When something feels "cluttered" or "hard to scan," it's almost always a spacing problem. Ask: "Is the spacing following the 8-point grid?" and "Does the spacing reflect the relationships between elements — are close things related, and distant things separate?"
Components &
Design Systems
"Good design scales through systems. Heroic one-off effort doesn't."
A design system is the single source of truth for how a product looks and behaves. It contains components, tokens, patterns, and usage guidelines. Understanding design systems makes you a better PM — you can scope accurately, avoid breaking consistency, and speak with authority.
Atomic Design
Brad Frost's framework for building design systems. Start with the smallest units (atoms) and compose them into larger structures.
Component States
Every interactive component must have all its states designed. Missing a state in design means the engineer has to guess — and guessing is how inconsistency enters a product. Before shipping any component, all states should be specced.
Design Tokens
Tokens are the named variables of a design system. Instead of hardcoding #1DCD98 everywhere, designers and engineers reference color-accent-primary. When the brand refreshes, you change the token once — everything updates.
A single source of truth containing components, tokens, patterns, and guidelines for how a product looks and behaves.
Use it: "Does this pattern exist in our design system, or are we creating something new?"
A reusable UI building block — a button, input, modal, card. Components have defined variants and states.
Use it: "Are all the states for this component specced? I don't see a loading state."
A named variable for a design decision — a color, spacing value, or border radius. Referenced by name, not value.
Use it: "Is this using a token or a hardcoded value? We need to use tokens for brand consistency."
The different conditions a component can exist in: default, hover, active, focus, loading, disabled, error, success.
Use it: "What happens to this button while the API is loading? The loading state needs to be designed."
Before approving a new component, always ask: "Does this already exist in our design system?" New components create maintenance debt. If a new component is necessary, ask: "Are all states designed — default, hover, loading, error, disabled?" Missing states get built inconsistently.
Gestalt Principles
"The brain perceives patterns before it reads words. Designers use this deliberately."
Gestalt psychology (German: "shape" or "form") describes how the human brain automatically organizes visual information into patterns. Designers use these principles to create visual groupings, relationships, and flow — often without users being consciously aware of it. When something "feels wrong" in a layout, it's usually a Gestalt violation.
Nine dots. No grouping. Your brain just sees a blob.
Same dots. Your brain now sees two groups — the left group of 6, and right group of 3.
The PM application: When two unrelated elements sit close together, users assume they're related. When related elements are spread apart, users lose the connection. Proximity is the most common spacing error in product design.
Similarity
Elements that look alike — same color, shape, size — feel like they belong to the same group. This is how designers communicate "these items are the same type of thing" without using words.
You see 6 shapes. No clear groups emerge.
You see two distinct groups — circles and squares. Same elements, different organization.
Figure / Ground
The brain automatically separates an image into foreground (figure) and background (ground). In UI design, this is why cards and modals work — they "float" above the background. When figure/ground is ambiguous, the eye doesn't know what to focus on.
Common Fate
Elements that move together are perceived as a group. In digital products, this explains why animating a group of items together signals that they belong together — and why a rogue element animating differently feels "broken."
Elements close to each other are perceived as related. The primary tool for creating visual groupings without explicit borders.
Use it: "The label and the input are too far apart — proximity is telling users they're unrelated."
Elements that share visual characteristics — color, shape, size — are perceived as belonging to the same group.
Use it: "The primary and secondary actions look too similar — similarity is making them feel like equals."
The relationship between a focused element (figure) and its background (ground). Cards, modals, and tooltips use this principle.
Use it: "The modal isn't reading as a foreground element — the figure/ground contrast is too low."
The eye naturally follows paths, curves, and lines. Users will follow a visual line even if it's implied, not explicit.
Use it: "The eye is being led off the page here — the diagonal element is breaking the flow."
When a layout feels "confusing" or elements feel like they don't belong together, it's almost always a Gestalt issue. Ask: "Is the proximity reflecting the relationships we want users to perceive?" and "Are visually similar elements actually meant to be in the same group?"
Interaction Design
"Digital design is time-based, not just spatial. Every interaction has a before, a during, and an after."
Interaction design (IxD) is the design of the moments between a user and a system — clicks, taps, transitions, errors, and loading states. It's where product and design overlap most. PMs who understand interaction vocabulary can write better acceptance criteria and spot missing states before they ship.
Affordances & Signifiers
An affordance is a relationship between an object and a person — a door handle affords pulling. A signifier communicates what that affordance is — the word "PULL" on the door. In digital design, buttons afford clicking. Their visual treatment (elevation, color, border) is the signifier. When a clickable element doesn't look clickable, the signifier has failed.
"Learn more" has no underline or color. "Submit" looks like body text. Users hesitate or miss them entirely.
The link color + underline signals "click me." The button's background, padding, and radius signal "this is a button."
Component States — The Full Picture
Every interactive component has multiple states. Designing all of them isn't optional — missing states get built inconsistently by engineers. The full set of states for an input field:
Feedback
Every user action should produce feedback from the system. No feedback creates anxiety — "did that work?" Good feedback is immediate, appropriate in scale, and uses the right channel (toast, inline, modal, etc.).
Progressive Disclosure
Don't show users everything at once. Show only what they need for the current task. Reveal additional complexity on demand. This reduces cognitive load and keeps the interface feeling manageable.
The property of an element that suggests how it can be used. A button affords clicking; a slider affords dragging.
Use it: "The affordance is unclear here — it doesn't look like something you can interact with."
A signal that communicates an affordance. Color, shape, text labels, and icons are all signifiers.
Use it: "The signifier is missing — users have no visual cue that this is draggable."
The system's response to a user action. Can be visual (button state change), auditory, or haptic.
Use it: "There's no feedback when the form submits — users won't know if it worked."
Revealing information and options progressively, as users need them, rather than all at once.
Use it: "We should use progressive disclosure here — show advanced settings only when requested."
The designed state of a UI element when it has no content — a new user's dashboard, an empty search result.
Use it: "The empty state isn't designed — what does a new user see before they have any data?"
A single, small interaction moment with a defined trigger, rules, and feedback. The animation when you "like" a post is a microinteraction.
Use it: "This action needs a microinteraction — right now it feels unresponsive."
When writing tickets for interactive components, always specify all states in the AC: "The button must have: default, hover, loading (spinner), success, disabled, and destructive variants." If you don't name the state, it won't get designed or built.
Giving Design
Feedback
"The difference between a PM who earns designer trust and one who doesn't is how they give feedback."
Everything in this course has been building to this. Vocabulary, visual thinking, systems knowledge — they only matter in the moment of feedback. Great design feedback names the problem precisely, without prescribing the solution.
The Feedback Ladder
Move through these steps. Stop as early as you can while still being useful.
"Something feels off here." — This is valid. Name it, but don't stop here.
"My eye doesn't know where to go first." — You're naming what you perceive. Better.
"The visual hierarchy is unclear — the headline and CTA have the same visual weight." — You've named the design problem using design language. This is your goal.
"What should the user's eye land on first?" — Invite the designer's intent before prescribing a fix.
Bad vs. Good Feedback — Side by Side
| ✗ Feedback that erodes trust | ✓ Feedback that earns trust | Why it works |
|---|---|---|
| "I don't like the colors." | "The low contrast between the body text and background will fail WCAG AA — this is an accessibility issue." | Names the principle (contrast ratio), the standard (WCAG AA), and the stakes (accessibility). No guessing required. |
| "Make the button bigger." | "The CTA is getting lost — it has the same visual weight as the secondary action. What's our intended entry point for this page?" | Names the problem (visual weight), identifies the principle (hierarchy), asks about intent rather than prescribing a fix. |
| "This looks too cluttered." | "The spacing between these elements isn't following the 8-point grid — there's inconsistent rhythm throughout the card." | Pinpoints the cause (8-point grid violation), explains the effect (rhythm), gives the designer something actionable. |
| "Can you make it more modern?" | "The type scale doesn't have enough contrast between the headline and subhead sizes — they're competing for the same visual level." | "Modern" is meaningless. Naming the typographic issue is specific, actionable, and doesn't impose your taste on the designer. |
| "I think users will be confused." | "The affordance isn't clear — this interactive element doesn't look clickable. There's no signifier that communicates it's interactive." | Moves from speculation about users to a specific design principle (affordance/signifier). Much easier to act on. |
| "What happens if there's an error?" | "I don't see an error state for this input. Before we spec this out, can we design all the states: default, focus, error, success, disabled?" | Shows you know the full system (component states), asks for completeness, prevents a missing state from shipping. |
Your job in a design review is to articulate the user's experience and the product's constraints — not to be the art director. When you name a design principle clearly, you invite the designer to solve it. When you prescribe a solution ("make it bigger"), you've taken their job. The former earns trust. The latter creates resistance.
Master Vocabulary Reference
Every term from this course, in one place. Your reference card for design reviews.
Intentional ordering of elements to guide the eye in sequence.
How much an element pulls the eye via size, weight, contrast, color.
The first element the eye lands on. Every design should have one.
The difference between elements. High contrast = prominence. Low = subtlety.
A font family design (e.g., Fraunces). A font is a specific size + weight of it.
A defined set of text sizes for visual rhythm and hierarchy.
Vertical space between lines. Body: 1.5–1.7×. Headlines: 1.0–1.2×.
Uniform letter spacing. Tight for headlines. Wide for uppercase labels.
Spacing between specific letter pairs, adjusted optically.
Line length. Optimal: 45–75 characters.
The base color on the color wheel.
Color intensity. High = vivid. Low = muted/grey.
How light or dark a color is.
Luminance difference between text and background. AA = 4.5:1 minimum.
Color assigned to a specific meaning (red = error, green = success).
Web accessibility standard. AA is the legal minimum in most jurisdictions.
Spacing system where all values are multiples of 8px.
Empty space used as a structural design element.
Space inside an element, between content and border.
Space outside an element, between it and its neighbors.
A single source of truth for components, tokens, and guidelines.
A reusable UI building block with defined variants and states.
A named variable for a design decision (color, spacing, radius).
Default, hover, active, focus, loading, disabled, error, success.
Close elements are perceived as related (Gestalt).
Similar-looking elements are perceived as a group (Gestalt).
The foreground/background relationship. Cards float above ground.
What an element suggests it can do. A button affords clicking.
The visual cue that communicates an affordance.
System response to user action. Essential. Absence creates anxiety.
Revealing complexity only when the user needs it.
The designed state of a UI with no content. Always design this.
A small, single-purpose interaction with trigger, rules, and feedback.
You now have the language. The next step is developing taste — learning to see WHY things work before you can articulate that they do. Spend time with Mobbin (real product screenshots), Linear's changelog (exceptional attention to detail), and Stripe's design decisions. Build a swipe file. When something looks good, describe why using the vocabulary in this course. That practice is how language becomes instinct.
Design Movements
"Every design has a lineage. Knowing the movements lets you name the style — and choose it intentionally."
Design movements are schools of thought — shared philosophies about what design should do and look like. They emerge from cultural moments, react against each other, and leave DNA in modern products. When you recognize a movement, you can describe a visual direction precisely instead of saying "I want it to feel clean" or "more modern."
Most product design today descends from Swiss International Style and Minimalism — with reactions from Brutalism emerging as a counter to safe, corporate aesthetics.
Grafik
Grid-based, typographic, functional. The direct ancestor of modern UI design.
Form follows function. Primary colors, geometric shapes, no ornament. Art + craft + industry unified.
not less.
Maximum whitespace, single focal point, nothing decorative. Every element earns its place.
Digital objects that mimic physical materials — leather, wood, glass, metal. Early Apple's signature. Teaches affordances through familiarity.
No gradients, no shadows, no textures. Solid colors, clean shapes. Microsoft Metro (2010) triggered the industry-wide shift away from skeuomorphism.
Google's systematic design language (2014). Flat colors + subtle elevation shadows. "Paper and ink" metaphor. Systematized at scale.
HONEST
DESIGN
Raw, intentional, anti-corporate. High contrast, stark typography, visible structure. A reaction to safe, polished "AI slop" aesthetics. Gumroad, Bloomberg.
Charcoal or pencil texture, loose outlines, monochromatic, minimal detail. Feels human and warm — a deliberate contrast to polished digital aesthetics. Common in editorial design, newsletters, and brand illustration.
Most AI-generated UIs default to a vague approximation of Material + Flat Design — cards, purple gradients, rounded corners, safe sans-serif. This is the "AI slop" aesthetic. The movements above give you the vocabulary to push in any other direction: "I want this to feel more Swiss — typographic, grid-based, less decorative." or "Let's go minimal — strip everything that isn't load-bearing."
Designing digital objects to look like their physical counterparts. Gradients, shadows, and textures that simulate real materials.
Use it: "The button has a skeuomorphic feel — the gradient makes it look raised. Is that intentional?"
A design approach that removes all 3D effects — no shadows, gradients, or textures. Relies on color and typography alone.
Use it: "We're going full flat here — let's make sure the color contrast is doing all the hierarchy work."
An aesthetic that celebrates raw, unpolished structure. High contrast, visible grid, stark typography, intentional "ugly."
Use it: "There's a brutalist quality here that feels right for this brand — let's lean into it rather than polish it away."
A hand-drawn aesthetic using pencil or charcoal textures, loose outlines, and minimal detail. Monochromatic and intentionally imperfect — signals warmth and craft over polish.
Use it: "The illustration style feels too polished for this brand — can we go more sketch, rougher lines, less clean?"
The consistent set of design decisions — color, type, motion, shape — that define a product's aesthetic identity.
Use it: "Our visual language is inconsistent across these surfaces — they don't feel like the same product."
When a designer shows you a direction, try naming the movement you see: "This is reading very Swiss International — is that intentional? I think it could work well for our B2B audience." Or: "This has a lot of Material DNA — cards, elevation, the FAB. Should we be more opinionated about our own visual language?" Referencing movements shows you've developed taste beyond "I like it/don't like it."
Navigation Patterns
"Navigation is the mental model of your entire product, made visible."
Navigation is the most consequential structural decision in a product. It determines what users think your product is for, what they can discover, and how they orient themselves. A navigation change is never just a visual change — it's a statement about your product's information architecture.
At AlphaSense, the left nav pattern you're already familiar with is one of the most common enterprise navigation patterns — and each choice (what goes in the nav, what order, what's visible vs. hidden) encodes a product strategy decision.
What you put in the nav is a product decision, not a design decision. Left nav items = your product's primary jobs-to-be-done. If "Search" is the first item, you're saying search is the core workflow. If "Workspace" moves up, you're betting on that feature's importance. Every navigation change is a statement about what you believe users come to your product to do.
The structural design of a product — how content and features are organized, labeled, and navigated.
Use it: "Before we redesign the nav, we need to revisit the IA — the groupings don't reflect how users actually think about the product."
A reusable solution to a recurring navigation problem. Left nav, tab bar, breadcrumbs, and mega menus are all established patterns with known tradeoffs.
Use it: "We're using a hamburger pattern on desktop — that's going to hurt discoverability. Should we consider a persistent left nav?"
The design of cues that help users understand where they are and how to get where they want to go. Breadcrumbs, active states, and page titles all aid wayfinding.
Use it: "There's no wayfinding on this page — users don't know where they are in the product."
How easily users can find features or content without being told they exist. Hidden navigation (hamburger menus) kills discoverability.
Use it: "Hiding this feature in a dropdown will kill discoverability — can we surface it in the main nav?"
The visual treatment of the currently selected navigation item. Tells the user where they are. Always needs to be designed.
Use it: "The active state isn't distinct enough — users can't tell which section they're in."
Navigation that remains visible and accessible at all times, regardless of scroll position or current page.
Use it: "The left nav should be persistent — users need to be able to switch contexts without scrolling back up."
When you're in a nav discussion at AlphaSense, you can now ask: "What job does each left nav item represent? Are we ordering by importance or by workflow sequence?" And when something gets proposed for the nav: "What does adding this to the top-level nav say about how we prioritize this feature? Should it live there, or is it a secondary workflow that belongs in a sub-nav?"
Test Your Eyes
You've learned the vocabulary. Now train the reflex.
Reading about design is passive. Recognizing it in the wild is the skill that actually matters in a room full of designers. Each challenge below shows two versions of a real UI pattern. One is better. Pick it — then read why.
Which card has stronger visual hierarchy?
Module 01 — Visual HierarchyB wins on visual hierarchy. Option A has three elements at nearly the same visual weight — the eye doesn't know where to start. Option B uses size contrast (22px vs 11px), weight contrast (700 vs normal), and a high-contrast CTA to create a clear reading order: headline → body → action. The focal point is unambiguous.
Which form has better spatial rhythm?
Module 04 — Spacing & LayoutA has consistent spatial rhythm. Every field uses the same label-to-input gap (5px), the same field-to-field gap (14px), and the same internal padding (8px). In B, the spacing is arbitrary — 1px label gap in the first field, 9px in the second; the button is nearly flat. Spatial consistency is invisible when done right and immediately jarring when wrong. Good spacing follows a system (multiples of 4 or 8), not intuition.
Which passage is easier to read?
Module 02 — TypographyB is dramatically easier to read. Option A uses all-caps for body copy — a common mistake. All-caps works for 2–4 word labels; it destroys legibility at paragraph length because the eye reads the silhouette of word shapes, not individual letters. All-caps flattens those shapes into uniform rectangles. B uses sentence case with generous line-height (1.75) and a clear heading-to-body size contrast, letting the eye move naturally.
Which uses color more purposefully?
Module 03 — ColorA uses color as a signal, not decoration. In B, both the "BETA" badge and the CTA button use the same accent green — so the color no longer communicates priority, it just means "thing that exists." In A, the accent is reserved for the one action you most want the user to take. The badge uses a neutral, muted tone. Accent colors lose meaning when overused. Every additional use dilutes the signal.
Which notification is better aligned?
Module 06 — GestaltB has a single, consistent alignment axis. In A, the heading is centered, the body is left-aligned, and the button is centered again — three elements pulling in two directions. This is a Gestalt failure: the eye is constantly resetting its anchor point. Option B aligns everything to the left edge. Picking one alignment axis and committing to it is a fundamental principle of visual coherence. Center-alignment works for short, isolated headings — not for multi-element components.
Think you've got
a designer's eye?
Can't Unsee is a free online game with 100+ real design challenges — two versions of a UI, one correct. The differences get subtler as you advance. It's the fastest way to train the reflex of noticing what most people walk right past.
Train your eyes →