Interface design

The details that make an interface read as finished. These notes cover type, hierarchy, forms, empty and error states, motion, and the screens a product is used through.

29 articles

Start here

Two dark interface panels side by side: the left one uneven, with nine small white rings marking its faults, the right one the same screen aligned, with flush numbers and a lit focused button

Design

Why your UI looks unprofessional: 9 details to fix before launch

Off-scale spacing, radii that don't nest, wobbling numbers, missing focus states: nine details that make a UI look unfinished, each with its fix.

A dark form card on the left with a white button; a white line leaves the button, breaks into a dashed gap, then fans out into six quiet curves, each ending at a small dark screen lit in a different place: a field outline, a dialog, half of a split view, a countdown bar, a top banner, a single dot

Design

Error state UX design: what to show when a request fails

A request can fail six ways, from a rejected field to a dropped connection. What each needs on screen, how to make retry safe, and the copy to write.

Three identical cards in a row on a dark grid: the first drawn only by a white outline, the second lifted above the page by a soft white shadow, the third filled with solid white, each holding the same quiet lines of text

Design

Border vs shadow in UI: when each wins, and when a fill does

Shadows vanish in forced colors mode and fade in dark themes, input borders need 3:1 under WCAG 1.4.11. When to separate UI regions with border, shadow or fill.

Left, six dark cards in a grid, each with a white bar in a different corner; right, a dark table of nine rows whose white bars line up in one column, the longest one brighter

Design

Data table vs card layout: when a table beats a card grid

In a table people compare records without holding values in memory; cards make them reorient at every card. Five questions decide what a screen needs.

Left, a dark document sheet of quiet lines topped by a lit check tile; right, seven dark screen tiles climbing like steps, joined by a white thread broken in six places, each gap marked by a dashed circle

Design

EAA enforcement: 6 reasons compliant-on-paper products fail audits

WebAIM found WCAG failures on 95.9% of top home pages in 2026. Six ways an EAA statement, a Lighthouse 100 and an overlay still fail an accessibility audit.

Design

Brand motion design: how one easing curve sets a product's tone

Material 3 eases on cubic-bezier(0.2, 0, 0, 1), Carbon splits productive from expressive. How to pick one signature curve, test it and ship it as tokens.

Four dark form pages in a row, each with a section pill and three fields of different widths filled in white, joined by a lit line that ends in a lit tile with a dark check

Design

Long form UX best practices: 12 rules for forms people finish

The average checkout asks for 11.3 fields when 8 would do. Twelve rules for long forms: what to cut, how to split pages, when to validate, what to save.

Five tall screen shapes in a row, a stream of dots thinning and falling away between them, one white path reaching the lit last screen

Business

Neobank UX agency: what a real partner delivers in 2026

Digital banks hold 19% of accounts and 5% of revenues, and 67% of digital applications get abandoned. What a neobank UX partner owns in 2026.

A two-page spread laid out on a column grid: a huge headline bar, a picture with a caption, text columns, a wide margin and a white pull quote

Design

Editorial web layout: 5 magazine devices that work on screen

Five print devices that survive on screen: a real grid, scale contrast, captions, margins and pull quotes. Plus the CSS that carries them in 2026.

A paragraph of quiet text lines whose ends all fall inside one white band, with even white steps marking the spacing down the margin

Design

Optimal line length and line height: 6 steps to set both

Body text reads best at 50 to 75 characters per line. Here is how to set measure and leading in CSS, with the numbers, the WCAG floor, and real browser support.

A browser window holding a landing page, eight white markers on its parts, four parts struck through, and a pointer on the lit call-to-action button

Design

What makes a landing page convert: 8 factors and 4 killers

Median landing page conversion sits at 6.6%, SaaS at 3.8%. The top quartile wins on message match, load time and form friction, then on design.

Three screen cards: one with a composed white illustration, one with a grid of identical stock marks, one with text only

Design

Illustration systems: when to draw, when to buy, when to skip

Custom product illustrations run $300 to $1,200 each. Here is how we decide which screens earn one, which take a library set, and which need none.

A dark app window whose five lit buttons are wired through its edge to a glowing white orb on the right

WebMCP in 2026: the browser API that lets agents use your SaaS UI

WebMCP lets a web page register tools that browser AI agents call directly. Chrome 149 runs it as an origin trial. What it changes for SaaS interfaces.

A grey-only interface panel with a clear order of headline, text, buttons and cards, seven white markers in its margin pointing at the parts

Design

Visual hierarchy without color: 7 tools that replace the accent

Two greys can carry a whole interface. Size, weight, spacing and value do the work an accent color takes credit for, in the order that actually works.

Four empty screens in a grid, each with one quiet sign (an empty slot, a search that found nothing, a finished check, a broken piece) and one lit button

Design

Empty state design: the 4 states every screen needs

A screen needs four empty states: first use, no results, cleared, and error. Baymard finds close to half of sites leave the no-results screen a dead end.

A film strip of seven frames, the picture in each more composed and brighter than the last, the seventh framed by white viewfinder corners

Design

Website photography for software: the 7-step shot list

Software has no object to photograph, so most product sites default to stock. The 7 steps we use to pick, grade and ship a set of 8 to 12 images.

$Seven lit shapes on two rows of guide lines, each over a dashed ghost of its mathematical position, circles and points overshooting the lines$ Design

Optical alignment in UI: 7 spacing fixes math gets wrong

Round letters overshoot flat ones by 1% to 3% of cap height, and UI inherits the same problem. Seven optical fixes, and what CSS now handles for you.

Three pricing cards side by side, the middle one raised and white with six ticked rows, the outer two dark and quiet

Design

SaaS pricing page design: 6 fixes that stop losing deals

Gartner puts 67% of B2B buyers on a rep-free path, and rep-free buyers report 23% more purchase regret. Six fixes that make a pricing page decide.

Left, a stack of identical grey page layouts; right, the same page with an oversize headline and a large white circle running off its edge

Design

SaaS Art Direction: How a Product Stops Looking Like a Template

SaaS art direction is the deliberate visual point of view that separates a product from the template it launched on. Here is where to push and where to leave the conventions alone.

A phone, a tablet and a monitor side by side, each holding the same eight rows of text in stepped sizes, white guide lines running level through all three

Design

Typographic scale for product UI: sizes that hold on every screen

Build a product type scale of 7 to 9 sizes, named as tokens, that holds from a 320px phone to a 1440px monitor and survives 200% zoom. The exact numbers and the floors.

Six lit steps rising from left to right toward a large lit tile, dots of users standing on each step, a few faded dots falling below the first ones

Design

SaaS onboarding UX patterns that cut first-week churn

Median SaaS activation sits at 37.5%. Six onboarding patterns, from empty states to role-based checklists, move new users to first value faster.

A large circle split down the middle: its left half a loose mosaic of small dark and white tiles scattering outward, its right half one smooth glowing white surface

Design

Hybrid craft: the AI-and-human design workflow in 2026

Figma's 2026 survey puts generative AI in 72% of design workflows. Hybrid craft splits the work: AI drafts, humans own taste, brand, and the final finish.

Left, three lit tiles each shown sliding, scaling and fading as faint copies; right, a glowing white wireframe surface of many points in a wave

Web

WebGL vs CSS animation: when to use each (2026)

CSS animates transform and opacity off the main thread for free. WebGL hands you the raw GPU. Here is the line between them, with the bundle and battery costs.

A clean dashboard window with three summary cards and one lit chart, folded rows beneath, and a crowd of faint widget shapes behind it

Design

SaaS dashboard design: show data without drowning users

Most SaaS dashboards fail by showing everything at once. Here is the summary-first layout, the widget limit, and progressive disclosure that keeps users oriented.

A dim interface screen on the left wired by white lines to a lit, indented tree of nodes on the right

Designing for AI agents: building a UI the non-human user can read

AI agents read your site through the accessibility tree, the structure screen readers use. In a 2026 study, agent task success fell from 78% to 42% on a degraded one.

Two columns of seven tracks: on the left white dots easing to a stop, on the right grey dots jerking past the end of the track to a barred ring

Design

Functional UI animation in 2026: the checklist before it ships

The 7 do, 7 don't checklist we apply on every product we ship: durations from 100 to 500ms, opacity and transform only, prefers-reduced-motion honored at the root.

Seven phone screens in a row shading from light to dark in steps, under an arc of dots from a glowing sun to the horizon

Design

Dark mode is not a toggle: context-aware theming in 2026

Dark mode adoption hit 82% on mobile in 2025, but a header toggle still ignores ambient light, time of day, and task. Here is the fix.

On a white ground, a ring of twelve black dots around a black form card whose fields are joined by a dashed keyboard path ending in a white focus ring on the button

Design

Accessibility-first design after the EU Accessibility Act

The EAA became enforceable on 28 June 2025. Here is what changes for product teams shipping to the EU and what accessibility-first design actually means.

Grey tiles tumbling along a wide wave on the left that dies away to a flat line, ending in one still white tile on the right

Design

Calm UI in 2026: the shift away from animation theatrics

Calm UI keeps interface motion in the user's periphery, animates only when state changes carry meaning, and treats animation as a cost not a default.

Back to Field notes