The order in which elements are noticed, controlled by size, weight, colour, position and space.
UI foundation · Visual design
Type, color, layout, space, motion and the rest of the craft
UI Design
The making layer. Concrete guidance on the visual decisions that carry most of the weight in a finished interface.
54 entries across 7 categories
UI foundations54
Category
Level
54 entries
Difference is what makes anything perceivable, and it is measurable for text against its background.
UI foundation · Visual design
Shared edges create invisible lines that organise a layout and make it feel deliberate.
UI foundation · Visual design
Things placed close together are read as belonging together, before anything is read.
UI foundation · Gestalt principles
Elements that look alike are assumed to behave alike, which makes visual language a promise.
UI foundation · Gestalt principles
A shared boundary or background binds elements together more strongly than proximity does.
UI foundation · Gestalt principles
The eye completes incomplete shapes, which is why a partially visible item signals that there is more.
UI foundation · Gestalt principles
Elements arranged along a line or curve are read as a connected sequence.
UI foundation · Gestalt principles
The eye separates an object from its background, and interfaces use that separation to signal layers.
UI foundation · Gestalt principles
Repeating visual treatments builds a language users learn once and apply everywhere.
UI foundation · Visual design
Distributing visual weight so a composition feels stable, whether or not it is symmetrical.
UI foundation · Visual design
Relative size is the fastest signal of importance and the easiest one to overuse.
UI foundation · Visual design
Consistent ratios between sizes make a layout feel considered, without needing any particular mystical ratio.
UI foundation · Visual design
How the parts are arranged on the whole surface, which determines where the eye goes and in what order.
UI foundation · Visual design
Empty space is a design element that groups, emphasises and sets pace, not leftover area.
UI foundation · Visual design
How much information occupies a given area, which should follow the user's expertise and task rather than a house style.
UI foundation · Visual design
Repeating spacing intervals create a pulse that makes long pages feel ordered.
UI foundation · Visual design
Making one thing stand out, which only works if most things do not.
UI foundation · Visual design
The working subset of colour theory for screens: three dimensions, a handful of harmonies, and perceptual colour spaces that behave predictably.
UI foundation · Color
The attribute that names a colour, and the one that carries cultural and semantic meaning.
UI foundation · Color
How pure a colour is, and the dial that most often needs turning down in interface work.
UI foundation · Color
The dimension that determines contrast, hierarchy and whether text can be read at all.
UI foundation · Color
Colours assigned a fixed meaning, which only works if the assignment is consistent and never the only signal.
UI foundation · Color
A brand colour chosen for a logo usually needs adjustment before it can survive as an interface accent.
UI foundation · Color
Most of an interface is neutral, which makes the grey ramp the most used and least discussed part of a palette.
UI foundation · Color
A structured palette of ramps and semantic aliases, so colour decisions are made once rather than per screen.
UI foundation · Color
Not an inversion. A second theme with its own contrast, elevation and saturation rules.
UI foundation · Color
Around one in twelve men has a colour vision deficiency, so colour has to be reinforced by something else.
UI foundation · Color
Charts need three kinds of palette, and the choice between them is determined by the data, not by taste.
UI foundation · Color
Interface typefaces are chosen for legibility at small sizes and complete character coverage, not for character.
UI foundation · Typography
A fixed set of sizes derived from one ratio, so type decisions become selections rather than inventions.
UI foundation · Typography
Using size, weight, colour and space to make the structure of text visible before it is read.
UI foundation · Typography
The most space-efficient hierarchy lever, and the one most often limited by the typeface.
UI foundation · Typography
The space between lines, which governs whether a paragraph is readable and is a WCAG requirement.
UI foundation · Typography
Small adjustments that matter most at the extremes of size, and that should be left alone in between.
UI foundation · Typography
How easily continuous text can be read, governed mostly by size, line length, leading and contrast.
UI foundation · Typography
One file containing a continuous range of weights and widths, usually smaller than the static weights it replaces.
UI foundation · Typography
Type that adapts to viewport and container without breaking user zoom or the accessible minimum.
UI foundation · Typography
A shared structure that makes alignment automatic and layout decisions repeatable.
UI foundation · Layout
How many vertical divisions the content occupies, which affects scanning as much as it affects fit.
UI foundation · Layout
The constraint that stops content spreading to unusable widths, and increasingly the unit that components respond to.
UI foundation · Layout
A fixed set of spacing values, so every gap in the product comes from the same vocabulary.
UI foundation · Layout
One layout that reflows across sizes, ideally driven by content limits rather than by device categories.
UI foundation · Layout
Distinct layouts for distinct contexts, justified when the task genuinely differs rather than merely the screen size.
UI foundation · Layout
The widths at which the layout changes, chosen from where the content breaks rather than from a device list.
UI foundation · Layout
Corner treatment and silhouette carry tone, and a product should commit to one system rather than mixing several.
UI foundation · Form and depth
Lines that separate, which should be the second choice after space rather than the first.
UI foundation · Form and depth
A system of layers that says what sits above what, expressed visually and enforced in code.
UI foundation · Form and depth
Simulated light, which reads as physical only when it follows one consistent light source.
UI foundation · Form and depth
Icons speed recognition for concepts users already know and create guesswork for everything else.
UI foundation · Form and depth
Images either carry information or they do not, and the ones that do not are costing you load time.
UI foundation · Form and depth
Animation should explain a change, and anything that does not explain something is delay.
UI foundation · Form and depth
Every interactive element needs a defined appearance for every state it can be in, and most designs specify only two.
UI foundation · Form and depth
Speed is a usability property, and the metrics that matter are the ones measured on real devices.
UI foundation · Performance
Everything in UI Design, by category
The full contents of this section, so you can see the shape of it rather than only what a filter returned.