Design Glossary

91 terms

A/B Test

UX

A controlled experiment in which traffic is randomly split between two or more variants and a predefined metric is compared. It establishes which variant performed better on that metric, but not why, and it can only compare options someone already thought of. Short-term metric gains can mask long-term harm.

Splitting traffic between two signup headlines and measuring completed registrations over two weeks.

UsabilityMVPDark Pattern

Affinity Diagram

UX

A synthesis method in which many individual observations are written separately, then clustered by natural relationship until themes emerge from the bottom up. The discipline is to let groups form from the notes rather than sorting into categories decided in advance, which is what distinguishes synthesis from confirming what you expected.

Clustering three hundred interview quotes on a wall until six recurring frustrations become visible.

Card SortingPersonaCritique

Affordance

UX

A possible action offered by the relationship between an object and the person using it. A handle affords pulling for a hand; a step affords climbing for a leg. Crucially, an affordance may exist without being visible — which is why an undiscoverable swipe gesture is an affordance the interface fails to communicate.

A screen edge affords a swipe whether or not anything on the screen reveals that it does.

SignifierMental ModelForm Follows Function

Alignment

Visual

Positioning elements so their edges, centers or baselines share a common line. Alignment is the cheapest way to make a layout look deliberate, because the eye detects even small deviations as error. Fewer alignment lines generally read as stronger; a layout with six different left edges looks accidental.

Left-aligning a heading, its body text and its button to a single edge so the group reads as one unit.

GridCompositionLine

Alt Text

Accessibility

A short text alternative describing an image's content and purpose for people who cannot see it. Good alt text conveys what the image is doing in context, not what it literally contains. Images that are purely decorative should carry an empty alt attribute so assistive technology skips them rather than announcing noise.

For a chart, 'Revenue fell 20 percent between March and June' serves better than 'line chart'.

Screen ReaderSemantic HTMLWCAG

Atomic Design

Systems

A methodology that describes interfaces at five levels of granularity — atoms, molecules, organisms, templates and pages — so teams can discuss components at a shared level of detail. Its value is the common vocabulary rather than the chemistry metaphor, which stops being useful at the boundary between molecules and organisms.

A label and an input are atoms; combined with a button they form a molecule; a full search bar in context is an organism.

ComponentDesign SystemPattern Library

Balance

Visual

The distribution of visual weight across a composition so it feels stable rather than tilted. Symmetrical balance mirrors elements about an axis and reads as formal and calm. Asymmetrical balance offsets a large quiet element against a small intense one, producing tension and movement while still resolving.

A large photograph on the left balanced by a small block of dense bold type on the right.

CompositionRhythmAlignment

Baseline

Typography

The invisible horizontal line on which the main body of most letters rests. Round letters such as o and e are drawn to overshoot it very slightly so they appear to sit level, and descenders on g, y and p hang below it. Type size, leading and vertical rhythm are all measured from baseline to baseline.

In a two-column layout, aligning both columns to the same baseline grid keeps lines of text level across the gutter.

X-HeightLeadingGrid

Bauhaus

History

A German school of art, craft and design founded by Walter Gropius in 1919 and closed under Nazi pressure in 1933. It sought to unify fine art with craft and industrial production, taught through a shared preliminary course in materials and form, and produced an approach to geometry, function and mass manufacture that shaped design education worldwide.

The preliminary course structure — fundamentals of material, color and form before specialization — persists in foundation years today.

ModernismForm Follows FunctionGrotesque

Breakpoint

UI

A viewport width at which a responsive layout changes its arrangement. Breakpoints are best chosen where the content itself starts to fail — where a measure grows too wide or a column too narrow — rather than by copying the dimensions of particular popular devices, which change every few years.

Switching from a single column to two at the width where the text measure would otherwise exceed 75 characters.

Responsive DesignGridMeasure

Brief

Process

The written agreement that defines a design project: the problem, the audience, the objectives and how success will be judged, along with constraints of budget, timeline, technology and mandatory requirements. A brief states the problem to be solved rather than the solution to be produced; one that specifies the output has skipped the design work.

A brief stating 'reduce checkout abandonment' rather than 'build a one-page checkout' leaves the solution open.

Double DiamondMVPCritique

Brutalism

History

An architectural movement of the mid twentieth century characterized by exposed structure, raw unfinished materials and monumental geometry, honest about how a building was made. In web design the term was adopted for a later, largely unrelated style using unstyled defaults, harsh color and visible markup as a reaction against polished templates.

A site using default browser fonts, blue underlined links and hard borders as a deliberate stance, not neglect.

Origin

The name comes from béton brut, French for raw concrete, used by Le Corbusier to describe the untreated poured concrete surfaces of his postwar buildings. The English critical label New Brutalism followed in the 1950s.

ModernismFlat DesignForm Follows Function

Card Sorting

UX

A research method in which participants group labeled items into categories that make sense to them. In an open sort they name the groups themselves, revealing their mental model; in a closed sort they file items into predefined categories, testing a proposed structure. It informs information architecture rather than dictating it.

Asking twelve participants to sort sixty help-article titles into piles, then looking at which items consistently travel together.

Information ArchitectureAffinity DiagramMental Model

CMYK

Color

A subtractive color model for print, using cyan, magenta, yellow and key — black — inks layered on paper. Each ink absorbs part of the reflected light, so more ink means darker. Black is included separately because mixing the three colored inks produces a muddy brown and wastes ink on text.

A poster file supplied in CMYK so the printer can separate it into four inked plates.

RGBValuePalette

Cognitive Load

UX

The amount of working memory a task demands. Intrinsic load comes from the task's inherent difficulty, extraneous load from how the information is presented, and germane load from genuine learning. Design can do little about the first but a great deal about the second: unclear labels and hidden state add load that contributes nothing.

Requiring a user to remember a code from a previous screen adds extraneous load that showing it again would remove.

Hick's LawUsabilityHierarchy

Color Contrast Ratio

Color

A numeric measure of the difference in relative luminance between two colors, expressed from 1:1 to 21:1. WCAG sets minimums for text legibility: 4.5:1 for normal body text and 3:1 for large text and meaningful non-text elements. It measures luminance only, so two colors can pass while still being hard to tell apart.

Mid-gray text at #767676 on white reaches 4.5:1; one step lighter and it fails the threshold.

WCAGValueColor-Blind Safe

Color-Blind Safe

Accessibility

A palette or encoding that remains readable for people with color vision deficiency, most commonly red-green types affecting a significant minority of men. The reliable approach is never to let color be the only carrier of meaning: differences should also appear in value, shape, position, pattern or label.

A status list that pairs red and green dots with distinct icons and written labels rather than color alone.

Color Contrast RatioValuePalette

Component

UI

A reusable interface element with defined structure, behavior and states, designed once and used in many places. A component encapsulates its own logic and appearance so consumers configure it through properties rather than rebuilding it. Consistency across a product comes from reusing components, not from designers separately remembering the same rules.

One button component with variant, size, icon and disabled properties replaces dozens of separately drawn buttons.

Design SystemStateAtomic Design

Composition

Visual

The arrangement of all elements within a frame, and the decisions about what the frame contains at all. Composition determines the order in which a viewer reads a layout, where the eye enters, where it rests and where it leaves. It is the sum of hierarchy, balance, alignment, scale and negative space.

Placing the subject off-center so the eye enters at the image, travels to the headline and ends at the button.

BalanceHierarchyNegative Space

Contrast

Visual

A measurable difference between elements in color, value, size, weight, shape, texture or direction, used to create emphasis and separation. Contrast is what makes hierarchy visible and text legible. The common failure is timidity: differences that are present but too small read as accidental inconsistency rather than as deliberate emphasis.

A solid accent-colored button against a neutral gray page draws the eye immediately.

HierarchyColor Contrast RatioScale

Critique

Process

A structured session in which work in progress is examined against its stated goals. It differs from feedback in general by having a frame: the designer states the problem and the decisions made, and reviewers respond to whether those decisions serve the goal — not to personal preference or to solutions they would prefer.

Asking 'does this hierarchy get a first-time user to the primary action?' rather than 'do you like the blue?'

IterationHeuristic EvaluationBrief

Dark Pattern

UI

An interface deliberately constructed to make people act against their own interest — obscured cancellation, pre-ticked consent, costs revealed only at the final step, or a decline button styled to look inactive. The defining feature is intent: these are not usability failures but designs working exactly as their commissioners planned.

A subscription that takes one click to start and a phone call during business hours to cancel.

A/B TestSignifierMicrointeraction

Dashboard

Data

A single screen presenting the measures a specific audience needs to monitor a situation, arranged so the state can be assessed at a glance. Good dashboards are edited to a decision: every metric earns its place by being actionable. Most fail by displaying everything available rather than everything needed.

An operations screen showing four live measures with thresholds, rather than thirty charts across three scrolling pages.

Origin

The word originally named the board fixed at the front of a horse-drawn carriage to stop mud and stones being dashed up by the horse's hooves. It transferred to the instrument panel of the motor car, and from there to software.

Data-Ink RatioSmall MultiplesHierarchy

Data-Ink Ratio

Data

The proportion of a graphic's marks that represent data, as opposed to decoration, heavy gridlines, borders and redundant labels. Raising it generally clarifies a chart. It is a strong default rather than a law: later empirical work suggests some non-data imagery can aid memory, and stripping too far can hurt comprehension.

Removing a chart's background fill, outer border and heavy gridlines so only the bars and axis labels remain.

Small MultiplesContrastDashboard

Design Sprint

Process

A time-boxed, facilitated process — classically five days — that takes a team from a hard product question to a tested prototype. Participants sketch individually before deciding together, a designated decider resolves ties, and real users are interviewed at the end. Its main function is forcing a decision that debate has failed to produce.

A week spent mapping the problem, sketching, voting on one direction, building a facade prototype and testing it with five customers.

PrototypeIterationDouble Diamond

Design System

Systems

The shared set of principles, patterns, components and practices a team uses to build products consistently, together with the documentation and governance that keep it current. A component library is one artifact of a design system, not the system itself; without agreed principles and an owner, a library becomes a stale asset folder.

Material Design and Apple's Human Interface Guidelines pair stated principles with components and usage rules.

ComponentDesign TokenPattern Library

Design Token

UI

A named variable holding a single design decision — a color, spacing step, radius, duration or type size — stored independently of any platform so design tools and code can consume the same value. Tokens turn visual decisions into data, which is what makes theming, dark mode and coordinated change possible.

Changing color-surface-raised in one place updates every card, modal and menu across web and mobile.

Design SystemSingle Source of TruthPalette

Double Diamond

Process

A model of the design process as two successive cycles of divergence and convergence: first explore the problem broadly and define it, then explore solutions broadly and deliver one. Its useful claim is that the problem deserves the same exploration as the solution — teams routinely skip the first diamond entirely.

Spending two weeks researching why users abandon a form before generating a single layout proposal.

BriefDesign SprintIteration

Figure and Ground

Visual

The perceptual separation of an image into a subject that appears in front and a background that recedes behind it. The eye performs this split automatically and cannot easily hold both readings at once. Ambiguous figure-ground relationships, where the negative space forms a second image, are a common device in logo design.

The arrow hidden in the negative space between the E and x of the FedEx wordmark.

Negative SpaceGestaltContrast

Fitts's Law

UX

A model predicting that the time to move to a target depends on the distance to it and its size: distant and small targets take longer and produce more errors. It explains why primary actions should be large and near the pointer's likely position, and why screen edges are efficient — the pointer cannot overshoot them.

Placing a phone's primary action within thumb reach at the bottom of the screen rather than in the top corner.

Hick's LawUsabilityResponsive Design

Flat Design

UI

A visual style that removes simulated depth — gradients, bevels, drop shadows, textures — in favor of solid color, clear type and open space. It became dominant in the early 2010s. Taken to an extreme it removes the very cues that signaled interactivity, which is why later variants reintroduced shadow and elevation selectively.

A solid rectangle with no bevel or shadow serving as a button, distinguished only by its fill color.

SkeuomorphismSignifierModernism

Focus State

Accessibility

The visible indication of which element currently receives keyboard input. Anyone navigating by keyboard, switch device or voice control depends on it to know where they are. Browsers provide a default outline; removing it without supplying a clear replacement of sufficient contrast makes a product unusable without a pointer.

A two-pixel high-contrast ring around the focused field, clearly distinct from the hover styling.

StateWCAGSemantic HTML

Form

Visual

Shape that carries an implication of three dimensions, created through shading, perspective, overlap or highlight. On a flat screen form is always a simulation, produced by cues the eye interprets as depth. It also carries a second meaning in design theory: the overall physical or visual resolution of an object.

A subtle shadow and gradient turn a flat circle into a sphere the eye reads as sitting above the page.

ShapeSkeuomorphismForm Follows Function

Form Follows Function

History

The principle that an object's shape should be determined by its intended purpose rather than by applied decoration. It has been enormously productive as a corrective to ornament, but taken literally it is incomplete: most functions permit many forms, and the choice among them is made on grounds function alone does not settle.

A hand tool shaped entirely around grip and leverage, with nothing added for appearance.

Origin

The architect Louis Sullivan wrote 'form ever follows function' in an 1896 essay on the tall office building, drawing the idea from observations of nature. The compressed slogan spread far beyond his original argument.

ModernismBauhausAffordance

Gestalt

Visual

A group of principles from early twentieth-century German psychology describing how the visual system organizes separate elements into wholes. The main principles are proximity, similarity, closure, continuity, common fate and figure-ground. They describe automatic perception, which is why they hold whether or not a designer applies them deliberately.

Dots arranged around a circular path are perceived as one ring, not as a set of independent dots.

ProximityFigure and GroundComposition

Golden Ratio

Visual

The proportion of approximately 1:1.618, in which the ratio of the whole to the larger part equals the ratio of the larger part to the smaller. It has been used deliberately in some design and architecture, but many claims that it appears in nature, classical buildings or famous logos are retrospective and unsupported.

Dividing a page so the text column and the margin stand in roughly a 1:1.618 relationship.

ScaleGridBalance

Grid

Visual

An underlying framework of columns, rows, gutters and margins that elements are positioned against. A grid does not dictate a layout; it supplies a limited set of consistent positions, which is what lets a long publication or a large interface stay coherent across many pages made by different people.

A twelve-column grid lets a page mix full-width, half-width and third-width blocks that still share edges.

AlignmentCompositionBreakpoint

Grotesque

Typography

The earliest family of sans-serif typefaces, characterized by slightly irregular, squarish letterforms, closed apertures and a modest contrast in stroke weight. Later refinements of the style are called neo-grotesques and include Helvetica and Univers. In Britain the plain-sans category is still commonly labeled grotesque or grot.

Akzidenz-Grotesk, released in the late nineteenth century, is the model Helvetica was later drawn against.

Origin

Early nineteenth-century sans-serif type struck readers accustomed to serifs as ugly and strange, and English founders adopted the name grotesque for it. The German equivalent, Grotesk, remains the standard term for the category.

Sans SerifModernismTypeface vs Font

Heuristic Evaluation

UX

An inspection method in which several evaluators independently review an interface against a set of established usability principles, then combine their findings and rate severity. It is fast and needs no participants, but it identifies likely problems rather than observed ones, so it complements user testing instead of replacing it.

Three evaluators separately check a checkout flow against Nielsen's ten heuristics, then merge and rank the issues found.

UsabilityCritiqueA/B Test

Hick's Law

UX

A model stating that the time needed to make a decision grows logarithmically with the number of equally likely options. It supports reducing and grouping choices, but the logarithmic relationship matters: ten well-grouped options are not ten times worse than one, and splitting a menu into many small steps can cost more than it saves.

Grouping thirty navigation links into five labeled categories so the user makes two easy choices instead of one hard one.

Cognitive LoadFitts's LawInformation Architecture

Hierarchy

Typography

The deliberate ordering of elements so a viewer can tell at a glance what matters most, what is secondary, and what merely supports. It is built from differences in size, weight, color, position and spacing. Effective hierarchy usually needs fewer distinct levels than designers first assume — typically three or four.

A heading in large bold type, a standfirst in medium gray, and body text in regular weight establish three clear levels.

ContrastScaleTypeface vs Font

HSL

Color

A color model that describes a color by hue angle, saturation percentage and lightness percentage, rather than by mixing channels. It maps more closely to how people talk about color, which makes it practical for generating systematic palettes — a set of tints from one hue is a single lightness adjustment.

Generating five tints of a brand color by holding hue and saturation fixed and stepping lightness.

RGBHuePalette

Hue

Color

The attribute of a color that gives it its name — red, green, blue — corresponding to its position around the color wheel and, physically, to dominant wavelength. Hue is independent of how light or how intense a color is: a pale pink and a deep crimson can share the same hue.

Rotating the hue of a brand blue by 30 degrees produces a teal at the same lightness and intensity.

SaturationValueHSL

Information Architecture

UX

The structural design of shared information environments: how content is organized, labeled, navigated and searched. It covers the categories themselves and the words used to name them, which fail more often than the structure does. IA problems are frequently misdiagnosed as navigation or visual design problems.

Deciding whether help content is organized by product area, by task, or by the words users actually search for.

Card SortingUser JourneyMental Model

Iteration

Process

Repeated cycles of making, evaluating and revising, where each round is informed by what the previous one revealed. Iteration is only meaningful if something is learned between rounds; producing twenty variations without testing any of them is generating options, not iterating.

Testing a signup flow, finding people stall at the password rules, revising them, and testing again the following week.

PrototypeCritiqueDesign Sprint

Jobs to Be Done

UX

A framing that defines a product by the progress a person is trying to make in a particular situation, rather than by user attributes or demographics. The question shifts from who buys to what they hired the product to do, which reframes competition: a commute podcast may compete with an audiobook, not another app.

People hire a milkshake for a long, dull commute — so competitors include bananas and bagels, not other milkshakes.

PersonaUser JourneyMVP

Kerning

Typography

The adjustment of space between two specific adjacent characters so the optical gap between them looks even. Certain pairs — AV, To, Wa — leave awkward holes at their default spacing because of their shapes. Kerning corrects individual pairs, unlike tracking, which adjusts spacing uniformly across a run of text.

Tightening the pair in a wordmark so the A tucks under the arm of the V without the letters touching.

Origin

In metal type a 'kern' was the part of a letter's face that overhung its own body block so it could overlap the adjacent sort. The word survives even though the physical overhang does not.

TrackingTypographyLigature

Leading

Typography

The vertical distance from one baseline to the next, controlling how open or dense a block of text feels. Too little and the eye loses its place returning to the next line; too much and lines stop reading as a paragraph. Leading generally needs to grow as the measure gets wider.

Opening leading from 1.2 to 1.5 times the font size to make a long article comfortable to read on screen.

Origin

Named for the thin strips of lead that compositors inserted between lines of metal type to space them apart. Text set with no strips at all was described as set solid, a term still in use.

BaselineMeasureTracking

Less Is More

History

A modernist maxim holding that reduction to essentials produces greater clarity and impact than addition. In practice it is a discipline of removal rather than a style of sparseness, and it is frequently confused with minimal appearance — a design can look sparse while still being cluttered with unnecessary decisions.

Removing three of five navigation items so the two that matter are actually found.

Origin

The phrase is associated with the architect Ludwig Mies van der Rohe, who used it as a working maxim. The architect Robert Venturi answered it in 1966 with 'less is a bore', opening the postmodern argument against modernist reduction.

ModernismNegative SpaceBauhaus

Ligature

Typography

A single glyph that replaces two or more characters which would otherwise collide or space awkwardly, most commonly fi, fl and ffi. Standard ligatures are applied automatically for legibility; discretionary ligatures, such as decorative st or ct pairs, are stylistic choices the designer switches on deliberately.

Without the fi ligature, the dot of the i collides with the hook of the f in the word 'find'.

KerningTypeface vs FontSerif

Line

Visual

A mark whose length dominates its width, or an implied path the eye follows between elements. Lines separate, connect, enclose and direct attention. An implied line needs no drawn stroke: a row of aligned elements, or the direction a photographed figure is looking, will steer the viewer just as effectively.

A one-pixel rule between list rows separates them; the aligned left edges of those rows form an implied line down the page.

ShapeAlignmentComposition

Measure

Typography

The horizontal width of a column of text, usually described in characters per line rather than in pixels or picas. Roughly 45 to 75 characters is the conventional comfortable range for continuous reading. Beyond that the eye struggles to find the start of the next line; far below it, the rhythm breaks up.

Capping an article column at around 65 characters so paragraphs stay readable on a wide desktop screen.

LeadingGridBaseline

Mental Model

UX

The internal explanation a person holds of how a system works, built from prior experience and largely unexamined. It is usually incomplete and often wrong, but it drives what they expect and try. Friction generally appears where the system's implementation model and the user's mental model disagree.

People expect deleted files to be recoverable because a physical wastebasket can be emptied out again.

AffordanceSkeuomorphismInformation Architecture

Microinteraction

UI

A small, contained interaction built around a single task — toggling a setting, liking a post, pulling to refresh. Each has a trigger, rules governing what happens, immediate feedback, and modes or loops for edge cases. They are where an interface communicates that it heard the user and what it did in response.

A toggle that slides, changes color and gives a short haptic tap the instant it is switched.

StateSignifierComponent

Modernism

History

A broad early-to-mid twentieth-century movement favoring rationality, abstraction, industrial materials and the rejection of historical ornament. In graphic design it produced asymmetric layout, sans-serif type, grid systems and a belief in universal, objective communication — a belief that postmodern designers later challenged as neither universal nor neutral.

Swiss typography of the 1950s and 1960s: grid-based, sans serif, asymmetric, and free of decoration.

BauhausLess Is MoreGrid

Moodboard

Process

A curated arrangement of images, colors, type samples and textures assembled to establish a visual direction before any design is made. Its purpose is to align a team and a client on tone early, when disagreement is cheap to resolve. It is a conversation tool, not a design, and it commits to nothing structural.

Two contrasting boards — one warm and editorial, one cool and technical — presented so a client can react before work begins.

BriefCritiqueComposition

MVP

Process

Minimum viable product: the smallest release that lets a team learn something real about whether an idea works, by putting it in front of actual users. The term is frequently misused to mean a cheap first version with features cut, which discards the learning purpose and leaves only the compromise.

A manually operated service behind a simple form, used to test whether anyone wants it before any system is built.

PrototypeIterationA/B Test

Negative Space

Visual

The unoccupied area around and between elements, also called white space regardless of its actual color. It is an active design material rather than leftover background: it creates grouping, establishes rhythm, signals importance and gives the eye somewhere to rest. Cramped layouts usually have a spacing problem, not a content problem.

Generous margins around a single quotation make it read as significant without changing its type size.

ProximityCompositionFigure and Ground

Orphan and Widow

Typography

Two typesetting faults in running text. An orphan is a single opening line of a paragraph stranded at the foot of a column or page; a widow is a short final line, often one word, stranded at the top of the next. Both break the reader's sense of the paragraph as a unit.

Adjusting tracking slightly across a paragraph to pull a single stranded word back onto the previous line.

MeasureLeadingComposition

Palette

Color

The deliberately limited set of colors chosen for a design, usually structured into roles rather than listed flat: a neutral range for surfaces and text, one or two brand hues, and semantic colors for success, warning and error. Constraint is the point — an unlimited palette produces inconsistency, not flexibility.

A system with nine neutrals, one brand hue in five tints, and three semantic colors covers most interface needs.

Design TokenSaturationDesign System

Pattern Library

Systems

A documented collection of recurring interface solutions — a form layout, a data table, an empty state — with the context each is appropriate for. It differs from a component library in emphasis: components are the built units, patterns are the recommended ways of assembling them to solve a recurring problem.

A documented pattern for destructive confirmation, specifying wording, button order and when to require typed confirmation.

Design SystemComponentStyle Guide

Persona

UX

A composite character built from patterns found in real user research, standing in for a segment of users with shared goals and behaviors. A persona's purpose is to make design arguments decidable by naming who a decision serves. Personas invented without research are fiction and quietly encode the team's own assumptions.

A persona for a first-time investor whose goal is understanding risk, not comparing returns, rules out a feature-comparison table.

User JourneyJobs to Be DoneMental Model

Prototype

UX

A provisional, testable version of a design made to answer a specific question. Fidelity should follow the question: paper sketches test whether a concept makes sense, clickable mockups test whether a flow is followable, coded prototypes test performance and feel. A prototype is built to be discarded once it has answered.

A clickable mockup of checkout, made only to find out where people hesitate before entering card details.

WireframeIterationUsability

Proximity

Visual

The Gestalt principle that elements placed close together are perceived as belonging to one group, and elements separated by space as belonging to different ones. Spacing therefore carries meaning independently of borders or boxes. Most confusing interfaces have labels sitting closer to the wrong field than to the right one.

A form label placed tight above its input and far from the field above makes the pairing unambiguous.

GestaltNegative SpaceAlignment

Responsive Design

UI

An approach in which one layout adapts to the viewport rather than separate designs being built per device. It rests on fluid grids, flexible media and media queries that change layout at defined points. The design problem is deciding what content priority should be at each size, not merely making things shrink.

A three-column card grid reflowing to two columns on a tablet and one on a phone, with navigation collapsing to a menu.

BreakpointGridFitts's Law

RGB

Color

An additive color model in which red, green and blue light are combined at varying intensities to produce color on emissive displays. All three at full intensity give white; all three at zero give black. It is device-dependent, so the same RGB values render differently across screens unless a color profile is applied.

The CSS value rgb(255, 0, 0) drives the display's red subpixels to full and the others to zero.

CMYKHSLHue

Rhythm

Visual

The pattern created by repeating elements or intervals across a layout, and by the variation in those intervals. Regular rhythm feels orderly and predictable; progressive or broken rhythm creates emphasis and movement. In interfaces, consistent vertical spacing between sections is the most common and most load-bearing form of rhythm.

Consistent 24-pixel gaps between cards, interrupted by a 64-pixel gap that marks a new section.

BalanceGridNegative Space

Sans Serif

Typography

A typeface whose letters have no finishing strokes at the ends of their stems, from the French sans, meaning without. The category covers very different designs: grotesques, neo-grotesques such as Helvetica, geometric faces built from circles and lines, and humanist faces with calligraphic proportions.

Helvetica, Futura and Inter are all sans serif, but their letterforms come from three different design traditions.

SerifGrotesqueTypeface vs Font

Saturation

Color

The intensity or purity of a hue, from fully gray at zero to fully vivid at maximum. Desaturating a color moves it toward neutral without changing which hue it is. Interfaces generally use highly saturated color sparingly, reserving it for the few elements that must compete for attention.

Muting a chart's supporting series to low saturation so the single highlighted series stays dominant.

HueValuePalette

Scale

Visual

The relative size of an element compared with others around it, or with the viewer's own body. Scale communicates importance, creates depth, and sets the emotional register of a composition. Unlike absolute size it is always a relationship, so an element only becomes large by sitting next to something smaller.

A headline set four times the size of the body text establishes the page's subject before any word is read.

HierarchyContrastType Scale

Screen Reader

Accessibility

Software that converts on-screen content into synthesized speech or refreshable braille, used primarily by blind and low-vision people. It presents the page as a linear sequence and lets users jump by headings, links, landmarks or form fields — which is why a correct heading structure changes navigation far more than it changes appearance.

A user pulls up a list of all headings to jump straight to the section they want instead of reading from the top.

Semantic HTMLAlt TextWCAG

Semantic HTML

Accessibility

Using HTML elements according to their meaning — button, nav, main, heading levels, list, label — rather than styling generic divs to look the part. Semantic elements bring keyboard behavior, roles and state reporting for free, so assistive technology can announce what a thing is and how it can be operated.

A real button element is focusable, activates on Enter and Space, and announces itself as a button; a styled div does none of that.

Screen ReaderFocus StateWCAG

Serif

Typography

A small finishing stroke projecting from the end of a letter's main stem, and by extension the name for typefaces that have them. Serif shapes vary from the bracketed wedges of old-style faces to the hairline slabs of Didone designs, and that variation is one of the main ways typefaces are historically classified.

Times New Roman, Georgia and Garamond are serif typefaces; Helvetica and Inter are not.

Sans SerifGrotesqueTypeface vs Font

Shape

Visual

A flat, enclosed area defined by a boundary — an outline, a change of color, or the edges of surrounding elements. Shapes divide into geometric, organic and abstract categories. Because the eye resolves shape before it reads detail or color, shape is usually the first thing a viewer registers in a composition.

A rounded rectangle reads as a button before the viewer has processed the label inside it.

FormLineNegative Space

Signifier

UX

Any perceptible cue that tells a person an action is possible and where to perform it. Where the affordance is the possibility itself, the signifier is its advertisement: a button's raised appearance, an underline on a link, a small arrow suggesting a panel slides. Hidden affordances are the usual cause of undiscoverable features.

A partially visible next card at the edge of a carousel signifies that the row can be scrolled sideways.

AffordanceStateMicrointeraction

Single Source of Truth

Systems

The practice of holding each piece of information in exactly one authoritative place that every consumer references, rather than duplicating it. In design systems it usually means tokens and component definitions that design tools and production code both derive from, so a value cannot be correct in one place and stale in another.

Color values defined once in a token file and consumed by the design library, the web build and both mobile apps.

Design TokenDesign SystemComponent

Skeuomorphism

UI

Design in which a new object retains ornamental features from the older object it replaces, such as an on-screen notepad drawn with stitched leather and ruled paper. The features are decorative rather than structural, though they can carry genuine information about how something behaves to people unfamiliar with the new medium.

A digital audio recorder interface drawn with a spinning reel and a physical-looking record button.

Flat DesignMental ModelForm

Small Multiples

Data

A series of small charts sharing identical scales, axes and design, placed together so differences between them can be compared directly. Because the encoding is constant across the set, the reader learns it once and then compares shapes, rather than decoding a legend and re-reading axes for each panel.

Twelve identical small line charts, one per region, arranged in a grid to show which regions diverge from the trend.

Data-Ink RatioRhythmGrid

State

UI

The condition a component or screen is in at a given moment, and the visual representation of that condition. Interactive states include default, hover, focus, active, disabled and loading; screen-level states include empty, loading, partial, error and ideal. Designs that only cover the ideal state fail as soon as they meet real data.

A table needs designs for no rows yet, loading, a failed request, and one row as well as the full case.

ComponentFocus StateMicrointeraction

Style Guide

Systems

Documentation specifying how a brand or product should look and sound: logo use, color values, typography, imagery, spacing and tone of voice. It is prescriptive reference material rather than working code, and it answers questions for people outside the core team — agencies, partners, new hires — who cannot ask.

A guide stating minimum clear space around the logo and which backgrounds it may never be placed on.

Design SystemPattern LibrarySingle Source of Truth

Tracking

Typography

A uniform adjustment to the spacing across a whole run of characters, also called letter-spacing. Unlike kerning, which fixes individual pairs, tracking shifts everything equally. Large display type usually needs negative tracking to close up gaps; small text, all-caps settings and light type on dark grounds usually need positive tracking.

Adding a little positive tracking to a line of small all-caps labels so the letters stop crowding each other.

KerningLeadingHierarchy

Type Scale

Typography

A predefined, limited set of type sizes used across a design, usually generated by multiplying a base size by a consistent ratio. Restricting sizes to a scale makes hierarchy legible and keeps a system coherent, because every heading level relates proportionally to the body text rather than being chosen ad hoc.

A scale of 12, 14, 16, 20, 25 and 31 pixels, derived from a 16-pixel base with a 1.25 ratio.

HierarchyScaleDesign Token

Typeface vs Font

Typography

A typeface is the designed family of letterforms — the intellectual work, with a name like Helvetica. A font is a specific deliverable instance of it: one weight, width and style, historically at one size, and today usually one file. The distinction survives from metal type, where each size was physically separate.

Helvetica is the typeface; Helvetica Neue Bold Condensed is a font within it.

Variable FontSerifX-Height

Uppercase and Lowercase

Typography

The two cases of the Latin alphabet: capitals and small letters. Capitals derive from Roman inscriptional letters, small letters from the Carolingian minuscule developed for manuscript copying. All-capital settings are slower to read in continuous text because the word shapes lose the ascender and descender profile the eye uses.

A long paragraph set entirely in capitals reads noticeably slower than the same text in mixed case.

Origin

Compositors kept metal sorts in a pair of wooden trays. Capitals, used less often, sat in the upper case; the small letters sat in the more accessible lower case. The names stuck long after the trays disappeared.

Typeface vs FontHierarchyX-Height

Usability

UX

How effectively, efficiently and satisfyingly a specified group of people can achieve specified goals with a product in a specified context. It is a measurable property with recognized components — learnability, efficiency, memorability, error rate and satisfaction — not a synonym for a design being clean or simple.

Measuring what proportion of first-time users complete a purchase unaided, and how many errors they make on the way.

Heuristic EvaluationCognitive LoadPrototype

User Journey

UX

A mapped sequence of the steps, channels, thoughts and feelings a person moves through while pursuing a goal, usually extending well beyond the product itself. Journey mapping makes visible the gaps between touchpoints — where a handoff drops, where a person waits without feedback — that per-screen design never surfaces.

Mapping a return process across the app, the email confirmation, the printed label and the courier drop-off.

PersonaInformation ArchitectureUsability

Value

Color

How light or dark a color is, independent of its hue and saturation, also called lightness or tone. Value carries most of the work of legibility and hierarchy: a design that holds up when converted to grayscale has sound value structure. Two different hues at identical value will read as indistinguishable in contrast terms.

Converting a screen to grayscale to check whether the primary button still stands out from its background.

HueContrastColor Contrast Ratio

Variable Font

Typography

A single font file that contains a continuous range of styles along defined axes — commonly weight, width, slant and optical size — rather than one fixed instance. The renderer interpolates any point along an axis, so a designer can specify a weight of 437 as easily as 400, and one file replaces a dozen.

Animating a button label smoothly from weight 400 to 600 on hover, using one variable font file.

Typeface vs FontDesign TokenResponsive Design

WCAG

Accessibility

The Web Content Accessibility Guidelines, published by the W3C, organizing requirements under four principles: content must be perceivable, operable, understandable and robust. Each criterion has a conformance level of A, AA or AAA, with AA the level most legislation references. Meeting it is a floor for accessibility, not proof of a good experience.

A site claiming WCAG 2.1 AA conformance must meet a 4.5:1 contrast minimum for body text.

Color Contrast RatioScreen ReaderSemantic HTML

Wireframe

UX

A low-fidelity layout showing structure, content priority and functionality without visual styling. Deliberately plain type and gray blocks keep review conversations on arrangement and hierarchy rather than color and typeface. Wireframes are working documents for making structural decisions, not a mandatory stage in every project.

Gray placeholder blocks and unstyled headings mapping a dashboard's regions before any visual design begins.

PrototypeInformation ArchitectureComposition

X-Height

Typography

The height of a typeface's lowercase letters without ascenders or descenders, measured from the baseline to the top of a lowercase x. It varies widely between typefaces set at the same point size, and a larger x-height generally makes text look bigger and stay legible at small sizes.

Helvetica and Garamond set at 12pt look very different in size because Helvetica has a much larger x-height.

BaselineTypeface vs FontMeasure