The web has changed; web design has caught up unevenly
"Web design" used to be about layout and aesthetics. In 2026, performance and accessibility are first-class design constraints — not "we'll add them later" engineering tasks.Performance as a design constraint
- LCP < 2.5 s, INP < 200 ms, CLS < 0.1 — Core Web Vitals
- The hero image, the font choice, the JavaScript footprint — these are design decisions with measurable performance cost
- Designers should know the cost of their choices
- Performance budgets per page type, agreed with engineering
Accessibility as a design constraint
- Colour contrast — minimum 4.5:1 for body text, 3:1 for large text
- Focus states designed, not auto-generated
- Touch target size minimum 44×44 px
- Text scales reasonably (zoom to 200 % without breaking)
- Alt text for images embedded in design hand-off
- Motion respects
prefers-reduced-motion - Form labels persistent, not just placeholders
Responsive — mostly settled, occasionally weird
- Mobile-first is the default
- Container queries widely supported in 2026 — design components by their context
- Fluid typography (clamp + viewport units) replaces breakpoint-driven type
- Aspect ratios reserved with
aspect-ratio - Logical properties (margin-block, padding-inline) for RTL/LTR neutrality
Dark mode
- Token-based dark mode — colours mapped from a single palette
- Image and illustration handling — some assets need dark variants
- Brand colour adjustments — primary brand colour often needs adjustment for dark backgrounds
- System preference + user override
Motion: subtle, purposeful, optional
- Motion conveys state changes
- Avoid decorative motion that distracts from task
- Test with
prefers-reduced-motion - Don't animate the user's attention to where it doesn't need to go
Type on the web
- Self-hosted webfonts via
@font-face, not Google Fonts (privacy + performance) - Variable fonts where applicable
- Subset to reduce file size
- font-display: swap
Imagery
- AVIF first, WebP fallback, JPEG / PNG last
- Responsive images via srcset + sizes
- Lazy loading below the fold
- LQIP or BlurHash for perceived load speed
- Image CDN (Cloudflare Images, Bunny Optimizer, ImageKit)
Forms — the part that converts (or doesn't)
- One column, top-aligned labels
- Inline validation with helpful messages
- Avoid unnecessary fields
- Auto-fill / autocomplete attributes correctly set
- Mobile keyboards triggered correctly
- Errors at the field, not in a banner
- Success states — confirm submission with a clear next step
Privacy by default
- No third-party trackers without explicit consent
- Analytics that respects DNT / GPC
- Embeds (YouTube, Vimeo, Twitter) lazy-loaded with click-to-load placeholder
- Cookies minimised; first-party where possible
One pattern we'd warn about
Designing for the design portfolio rather than the user. The designer-of-the-year showpiece site is often impractical to use, slow to load, and brittle.One pattern that always pays off
Designing the empty state, the error state, and the loading state alongside the success state.What's the highest-impact design decision you've made in the last year?
