The order in which elements are noticed, controlled by size, weight, colour, position and space.
FND·001UI foundation · Visual design
Region II · UI Design54 entries across 7 categories
UI Design
The making layer. Concrete guidance on the visual decisions that carry most of the weight in a finished interface.
UI foundations54
Category
Level
54 entries
Difference is what makes anything perceivable, and it is measurable for text against its background.
FND·002UI foundation · Visual design
Shared edges create invisible lines that organise a layout and make it feel deliberate.
FND·003UI foundation · Visual design
Things placed close together are read as belonging together, before anything is read.
FND·004UI foundation · Gestalt principles
Elements that look alike are assumed to behave alike, which makes visual language a promise.
FND·005UI foundation · Gestalt principles
A shared boundary or background binds elements together more strongly than proximity does.
FND·006UI foundation · Gestalt principles
The eye completes incomplete shapes, which is why a partially visible item signals that there is more.
FND·007UI foundation · Gestalt principles
Elements arranged along a line or curve are read as a connected sequence.
FND·008UI foundation · Gestalt principles
The eye separates an object from its background, and interfaces use that separation to signal layers.
FND·009UI foundation · Gestalt principles
Repeating visual treatments builds a language users learn once and apply everywhere.
FND·010UI foundation · Visual design
Distributing visual weight so a composition feels stable, whether or not it is symmetrical.
FND·011UI foundation · Visual design
Relative size is the fastest signal of importance and the easiest one to overuse.
FND·012UI foundation · Visual design
Consistent ratios between sizes make a layout feel considered, without needing any particular mystical ratio.
FND·013UI foundation · Visual design
How the parts are arranged on the whole surface, which determines where the eye goes and in what order.
FND·014UI foundation · Visual design
Empty space is a design element that groups, emphasises and sets pace, not leftover area.
FND·015UI foundation · Visual design
How much information occupies a given area, which should follow the user's expertise and task rather than a house style.
FND·016UI foundation · Visual design
Repeating spacing intervals create a pulse that makes long pages feel ordered.
FND·017UI foundation · Visual design
Making one thing stand out, which only works if most things do not.
FND·018UI foundation · Visual design
The working subset of colour theory for screens: three dimensions, a handful of harmonies, and perceptual colour spaces that behave predictably.
FND·019UI foundation · Color
The attribute that names a colour, and the one that carries cultural and semantic meaning.
FND·020UI foundation · Color
How pure a colour is, and the dial that most often needs turning down in interface work.
FND·021UI foundation · Color
The dimension that determines contrast, hierarchy and whether text can be read at all.
FND·022UI foundation · Color
Colours assigned a fixed meaning, which only works if the assignment is consistent and never the only signal.
FND·023UI foundation · Color
A brand colour chosen for a logo usually needs adjustment before it can survive as an interface accent.
FND·024UI foundation · Color
Most of an interface is neutral, which makes the grey ramp the most used and least discussed part of a palette.
FND·025UI foundation · Color
A structured palette of ramps and semantic aliases, so colour decisions are made once rather than per screen.
FND·026UI foundation · Color
Not an inversion. A second theme with its own contrast, elevation and saturation rules.
FND·027UI foundation · Color
Around one in twelve men has a colour vision deficiency, so colour has to be reinforced by something else.
FND·028UI foundation · Color
Charts need three kinds of palette, and the choice between them is determined by the data, not by taste.
FND·029UI foundation · Color
Interface typefaces are chosen for legibility at small sizes and complete character coverage, not for character.
FND·030UI foundation · Typography
A fixed set of sizes derived from one ratio, so type decisions become selections rather than inventions.
FND·031UI foundation · Typography
Using size, weight, colour and space to make the structure of text visible before it is read.
FND·032UI foundation · Typography
The most space-efficient hierarchy lever, and the one most often limited by the typeface.
FND·033UI foundation · Typography
The space between lines, which governs whether a paragraph is readable and is a WCAG requirement.
FND·034UI foundation · Typography
Small adjustments that matter most at the extremes of size, and that should be left alone in between.
FND·035UI foundation · Typography
How easily continuous text can be read, governed mostly by size, line length, leading and contrast.
FND·036UI foundation · Typography
One file containing a continuous range of weights and widths, usually smaller than the static weights it replaces.
FND·037UI foundation · Typography
Type that adapts to viewport and container without breaking user zoom or the accessible minimum.
FND·038UI foundation · Typography
A shared structure that makes alignment automatic and layout decisions repeatable.
FND·039UI foundation · Layout
How many vertical divisions the content occupies, which affects scanning as much as it affects fit.
FND·040UI foundation · Layout
The constraint that stops content spreading to unusable widths, and increasingly the unit that components respond to.
FND·041UI foundation · Layout
A fixed set of spacing values, so every gap in the product comes from the same vocabulary.
FND·042UI foundation · Layout
One layout that reflows across sizes, ideally driven by content limits rather than by device categories.
FND·043UI foundation · Layout
Distinct layouts for distinct contexts, justified when the task genuinely differs rather than merely the screen size.
FND·044UI foundation · Layout
The widths at which the layout changes, chosen from where the content breaks rather than from a device list.
FND·045UI foundation · Layout
Corner treatment and silhouette carry tone, and a product should commit to one system rather than mixing several.
FND·046UI foundation · Form and depth
Lines that separate, which should be the second choice after space rather than the first.
FND·047UI foundation · Form and depth
A system of layers that says what sits above what, expressed visually and enforced in code.
FND·048UI foundation · Form and depth
Showing 48 of 54
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.