What is an editorial grid layout in web design?

An editorial grid layout is a structured design system based on columns and rows, typically 12 columns with consistent gutters, borrowed from print magazine and newspaper design. It gives every element on a page a logical position relative to a shared visual framework, creating predictable hierarchy and readable layouts.

Why are websites moving away from scroll-jacking in 2026?

Google's Interaction to Next Paint (INP) metric penalises pages where JavaScript interferes with scroll and input response. Scroll-jacking relies heavily on main-thread JavaScript, which tanks INP scores and hurts search visibility. There are also accessibility concerns under WCAG 2.2, particularly for users with vestibular disorders who find non-standard scroll behaviour disorienting.

How does CSS subgrid help with structured editorial layouts?

CSS subgrid allows child elements to align to the parent grid's column and row lines rather than creating an independent grid inside the component. This means nested modules, like article cards or media blocks, stay locked to the same column structure as the rest of the page, producing consistent typographic rhythm without any layout JavaScript.

Are column-based grids better for performance than freeform layouts?

Yes, in most practical cases. A CSS Grid layout replaces the JavaScript that scroll-jacking and animation-heavy layouts depend on. Removing that JavaScript reduces bundle size, lowers Interaction to Next Paint scores, and minimises Cumulative Layout Shift, all of which contribute to better Core Web Vitals and improved organic search performance.

How long does it take for a freelance design portfolio to rank on Google?

For a new domain with good technical foundations, expect three to six months before meaningful organic traffic appears. If you're targeting low-competition local queries like "freelance designer [UK city]", you can sometimes see results faster, particularly if you have a complete Google Business Profile and a handful of citations from UK directories.

Do I need a blog on my portfolio to rank in UK search results?

Not strictly, but it helps significantly. A blog lets you target informational keywords that your target clients search for, and it builds topical authority around your niche. Even four to six well-written posts per year can meaningfully expand the number of queries your portfolio ranks for.

What's the best platform for building a portfolio that ranks well?

Anything that gives you full control over your HTML, meta tags, and structured data. WordPress with a lightweight theme, Astro, or Framer (which now has solid SEO controls) are all solid choices. Avoid platforms that lock your content behind JavaScript rendering without server-side rendering, as Googlebot can struggle with purely client-rendered content.

Does my Google Business Profile matter if I work remotely with clients across the UK?

Yes. Even remote freelancers benefit from a GBP listing because it gives you visibility in local pack results when clients search in your city. Set your service area to the regions you actually serve. You don't have to list a physical address publicly if you work from home.

How many case studies do I need for good SEO on a freelance portfolio?

Quality beats quantity. Three to five detailed case studies, each on its own URL with a proper description of the brief, your process, and the outcome, will outperform ten brief project thumbnails on a single page. Give each case study page a unique title tag and meta description targeting the specific type of work it represents.

What is a system font stack and why should I use one?

A system font stack is a CSS font-family declaration that references fonts already installed on the user's operating system, such as San Francisco on macOS or Segoe UI on Windows. Because no files need to be downloaded, there's zero loading time and no risk of layout shift from font swapping. For body copy especially, modern system fonts are high-quality and save significant performance overhead.

Do system fonts hurt brand identity?

Not if you're strategic about where you use them. The approach most experienced product teams use is to load a single web font for display headings and marketing-facing text, while using a system font stack for body copy, labels, and UI elements. You preserve brand character where it's most visible, and avoid paying a performance cost on the parts users don't consciously notice.

What is font-display: optional and when should I use it?

The font-display: optional descriptor gives the browser a very short window (typically around 100ms) to load a web font; if it doesn't arrive in time, the fallback is used for that entire page load and no swap occurs. On subsequent visits, the cached font renders immediately with no shift. It's the best choice for body fonts because it eliminates Cumulative Layout Shift entirely whilst still serving the web font to most repeat visitors.

How do I stop my web fonts causing layout shift (CLS)?

The main cause is metric mismatch between your web font and its fallback. Use the CSS descriptors ascent-override, descent-override, and size-adjust inside a local @font-face rule to make your system fallback font metrically match your web font. This means the layout stays identical before and after the web font loads, bringing CLS close to zero. Tools like Fontaine can automate this at build time.

Is Astro faster than Next.js for production sites?

For content-heavy, mostly static sites, yes, Astro ships zero JavaScript by default, which results in dramatically smaller payloads and faster load times. For highly interactive apps like SaaS dashboards, Next.js with server components is more competitive because it's designed for that kind of complexity.

Can I host an Astro site on cheap UK hosting?

Yes, and that's one of Astro's main advantages. Because the output is static HTML, CSS, and minimal JS, you can host on Cloudflare Pages (free tier is generous), any S3-compatible storage, or a basic UK VPS for a few pounds per month. Next.js apps with server-side features need a Node runtime environment, which typically costs more.

Should I use Astro or Next.js for a SaaS product?

Next.js is the stronger choice for a full SaaS product with authenticated users, complex server logic, and real-time data requirements. That said, many SaaS teams use Astro for their public marketing site and Next.js only for the authenticated app area, which is a sensible split.

Does Astro work with React components?

Yes. Astro supports React, Svelte, Vue, Solid, and plain HTML components in the same project simultaneously. Only components that need client-side interactivity are hydrated; everything else renders as static HTML at build time.

What is offline-first app design and how is it different from just caching?

Offline-first app design means building an application where local data access is the default behaviour, and network requests are an enhancement rather than a requirement. Basic caching typically just stores static assets; offline-first goes further by persisting application data locally, queuing write operations, and syncing changes when connectivity returns.

Which UK areas have the worst mobile and broadband connectivity for app users?

According to Ofcom's Connected Nations data, large parts of rural Scotland, Wales, and Northern England have persistent 4G not-spots and below-average broadband speeds. Areas including the Scottish Highlands, mid-Wales, and parts of Yorkshire and Cumbria regularly appear in coverage gap reports, making offline-first design especially relevant for apps targeting users in these regions.

How do service workers enable offline functionality in web apps?

Service workers are background scripts that intercept network requests made by your application. They can serve cached responses when the network is unavailable, implement strategies like cache-first or stale-while-revalidate for different resource types, and queue failed write requests using the Background Sync API to replay them once connectivity is restored.

Category: Web Design

The Grid Is Back: Why British Editorial and SaaS Sites Are Returning to Structured Layout in 2026

There’s a pattern I keep noticing across British product and editorial sites this year. The scroll-jacking is gone. The parallax fever dream of overlapping sections, pinned heroes, and elements that drift sideways as you scroll has largely been replaced by something almost aggressively tidy: columns. Gutters. Baseline grids. Structure you can actually see the logic of. Editorial grid layout web design 2026 UK isn’t a niche trend, it’s quietly become the dominant aesthetic choice across everything from fintech dashboards to newspaper websites, and the reasons are both practical and, well, a bit nerdy.

Photo by Ann H on Pexels

What killed scroll-jacking (finally)

Scroll-jacking had a good run. Around 2018-2022, it was the go-to technique for agency portfolios and brand marketing sites that wanted to feel cinematic. You’d hijack the browser’s native scroll behaviour and use JavaScript to control the rate and direction of movement, triggering animations and section transitions at precise points. It looked impressive in a Behance mockup. In production, it was a mess.

The Core Web Vitals hit landed hard. Google’s Interaction to Next Paint (INP) metric, which replaced First Input Delay in 2024, measures responsiveness across the full lifecycle of a page visit. Scroll-jacking is basically an INP torture device. Hijacking scroll events means running JavaScript on every frame, which competes directly with the main thread and produces the jank that INP penalises. Sites that relied heavily on scroll-controlled animations started seeing their performance scores crater, and with them, their organic visibility.

There’s a broader accessibility argument too. The WCAG 2.2 guidelines make it increasingly uncomfortable to implement scroll-jacking in any context where you’re serving a broad audience. Users with vestibular disorders can experience genuine physical discomfort from non-standard scroll behaviour. If you’ve been thinking about your design approach for older or more diverse users, losing scroll-jacking isn’t just a trend, it’s the right call.

What “the grid is back” actually means in practice

The return to grids isn’t about making everything look like a 1980s newspaper. It’s about reintroducing constraint as a design tool. A 12-column grid with consistent gutters and a clear baseline creates a framework inside which you can be expressive without being chaotic. Elements snap. Hierarchy is legible. Whitespace is intentional rather than accidental.

The Guardian’s web redesign, which quietly rolled out properly across desktop in late 2025, is the clearest UK editorial example. Their layout uses a strict 12-column grid with clear section breaks, typographic rhythm tied to a baseline, and almost zero decorative animation. The result is genuinely fast and very readable. The Financial Times has operated on similar principles for years, and their design team publishes openly about why performance and structure are inseparable concerns.

On the product side, look at what’s happening in British SaaS. Monzo’s marketing site, Notion’s UK-facing landing pages, and several of the Gov.uk Design System derivatives all share a common visual grammar: restrained column layouts, strong typographic hierarchy, and interactions that are functional rather than theatrical. This is editorial grid layout web design 2026 UK in its most mature form, structure borrowed from print, filtered through web performance constraints.

Photo by Ann H on Pexels

The CSS behind the comeback

CSS Grid was always capable of this. The tooling just needed to catch up with the ambition. In 2026, sub-grid support is solid across all major browsers, Chrome, Firefox, and Safari all handle grid-template-rows: subgrid correctly, which means child elements can align to the parent grid without hacks. This was genuinely difficult before and explains why a lot of designers gave up on strict grids and reached for JavaScript-driven layout instead.

The practical pattern I use most often looks something like this: a top-level grid-template-columns: repeat(12, 1fr) layout with a defined gap, and then individual sections that inherit from that grid via subgrid. Editorial content modules, article cards, feature blocks, image-caption pairs, all stay aligned to the same column lines regardless of how deeply they’re nested. It produces exactly the kind of locked-in visual rhythm you see in well-produced print layouts, without any layout JavaScript at all.

If you’re already thinking about how this interacts with your framework choice, there’s a useful overlap with the Astro vs Next.js discussion, Astro’s islands architecture pairs particularly well with grid-heavy, largely static editorial layouts because you’re not shipping unnecessary client-side JavaScript just to paint a grid.

Why SaaS product teams are converging on the same patterns

SaaS dashboards and editorial sites look very different on the surface, but they share the same underlying problem: lots of information, limited screen space, users who are busy and slightly impatient. The grid solves this for both. A well-considered column structure makes data modules predictable, users learn where to look for certain types of content, and their eyes stop bouncing around looking for anchor points.

British B2B software teams in particular seem to have latched onto this. The white-labelling constraints of multi-tenant SaaS dashboards push designers toward grids almost by necessity, a layout that needs to accommodate multiple brand skins can’t rely on pixel-specific quirks. Column grids with semantic spacing tokens adapt cleanly across themes in a way that freeform layouts simply don’t.

Agencies that work at the intersection of web design and business software are noticing the same convergence. Based in Mansfield, Nottinghamshire, dijitul, a digital agency with a focus on web design, SEO, and software-driven business efficiency, has seen client briefs shift markedly toward structured, grid-first layouts over the past 18 months. The reasoning their clients give tends to be practical: structured layouts are faster to build, easier to maintain, and perform better in marketing contexts where page speed directly affects conversion. You can find more about their approach at dijitul.uk.

Grids, typography, and the system-font connection

You can’t really talk about editorial grid layout web design 2026 UK without touching on typography, because the two are inseparable. A grid that isn’t tied to a typographic baseline is just a set of invisible lines. The real magic happens when your type sizes, line heights, and spacing units all derive from a common base unit, typically 4px or 8px, so that every element in the layout sits on a predictable rhythm.

This is a big part of why the system font trend and the grid revival are happening simultaneously. System fonts have known metrics. You know Inter’s cap height, you know how SF Pro behaves at different weights, and you can build a baseline grid around those measurements with confidence. Custom web fonts introduce variables, FOUT, layout shift, inconsistent x-heights across weights, that make locking to a baseline harder. The typography stack choices you make in 2026 have direct implications for whether your grid actually holds at render time.

What this means for performance budgets

The performance case for structured grids is genuinely compelling, and I think it’s the argument that’s landed hardest with UK product teams who might otherwise have resisted the aesthetic shift. A CSS Grid layout with subgrid alignment replaces an enormous amount of JavaScript that was previously being used to calculate positions, trigger animations, and manage scroll states. Less JavaScript means smaller bundles, lower INP scores, faster Time to Interactive, and fewer opportunities for layout shift.

For a typical UK editorial site serving, say, 500,000 sessions a month, a 15% improvement in INP (which is not an unrealistic gain from removing scroll-jacking JavaScript) translates to a measurable reduction in bounce rate and a modest but real improvement in Core Web Vitals scores. Those improvements compound into organic visibility gains over time. dijitul, whose web design work is closely tied to marketing performance and client business efficiency, makes exactly this point when positioning structured layouts to clients, the aesthetic choice and the commercial outcome are aligned, which is a rare and useful position to be in for any agency doing web design in a performance-conscious market.

Is this a permanent shift or another cycle?

Honestly, I think it sticks this time. Previous grid revivals in web design were often aesthetic statements, designers who’d grown tired of the dominant trend reaching for the opposite. This one has structural reasons behind it. WCAG compliance, Core Web Vitals, CSS subgrid maturity, and the operational reality of maintaining large design systems all point in the same direction. Structure wins on multiple fronts simultaneously.

There’s also a generational factor. A lot of the designers now in senior positions at UK product companies trained on print or motion backgrounds where grids were non-negotiable. They always knew how to use them, they just needed the browser tooling to catch up. Now it has. The grid was never really gone. It was just waiting for CSS to be ready.

Frequently Asked Questions

What is an editorial grid layout in web design?

An editorial grid layout is a structured design system based on columns and rows, typically 12 columns with consistent gutters, borrowed from print magazine and newspaper design. It gives every element on a page a logical position relative to a shared visual framework, creating predictable hierarchy and readable layouts.

Why are websites moving away from scroll-jacking in 2026?

Google’s Interaction to Next Paint (INP) metric penalises pages where JavaScript interferes with scroll and input response. Scroll-jacking relies heavily on main-thread JavaScript, which tanks INP scores and hurts search visibility. There are also accessibility concerns under WCAG 2.2, particularly for users with vestibular disorders who find non-standard scroll behaviour disorienting.

How does CSS subgrid help with structured editorial layouts?

CSS subgrid allows child elements to align to the parent grid’s column and row lines rather than creating an independent grid inside the component. This means nested modules, like article cards or media blocks, stay locked to the same column structure as the rest of the page, producing consistent typographic rhythm without any layout JavaScript.

Are column-based grids better for performance than freeform layouts?

Yes, in most practical cases. A CSS Grid layout replaces the JavaScript that scroll-jacking and animation-heavy layouts depend on. Removing that JavaScript reduces bundle size, lowers Interaction to Next Paint scores, and minimises Cumulative Layout Shift, all of which contribute to better Core Web Vitals and improved organic search performance.

September 2, 2026
Designing Multi-Tenant SaaS Dashboards: The White-Labelling Patterns UK B2B Teams Need in 2026

There’s a very specific kind of design hell that UK B2B SaaS teams walk into when a sales director announces: “We’ve landed a white-label deal. Can you just swap out the logo and change the colours?” The answer is technically yes. The better question is whether your design system was ever built to support it. In most cases, it wasn’t. And that’s what white label SaaS dashboard design in the UK has quietly become in 2026: a structural problem dressed up as a branding request.

I’ve spent a fair amount of time pulling apart multi-tenant dashboard architectures, both at the design token level and in Figma component libraries, and the patterns that separate teams who cope from teams who spiral into duplication nightmares are pretty consistent. This is what actually works.

Photo by Egor Komarov on Pexels

Why most SaaS design systems aren’t white-label ready out of the box

The problem usually starts at the colour layer. A team builds a design system around a single brand: one primary palette, one set of semantic colour names, one font stack. Everything works beautifully until tenant two shows up with a completely different brand identity, different primary colours, and a typeface that isn’t Inter. Suddenly you’ve got a choice: fork the entire component library, or retrofit a theming layer that the system was never designed to accommodate.

The fork path is where most teams end up, and it’s slow, expensive, and creates ongoing maintenance debt every time a core component changes. If you’ve got six tenants and three engineers, forking is how you spend your entire sprint cycle keeping six slightly different versions of a button component in sync. No one wants that.

The better path is design tokens, specifically a three-tier token structure that separates raw values, semantic meaning, and component-level application. This isn’t a new idea, but the W3C Design Tokens Community Group‘s draft specification has given it enough formal grounding that it’s worth implementing properly now rather than cobbling something together.

The three-tier token structure that makes multi-brand manageable

Tier one is your primitive tokens: raw values with no meaning attached. colour-blue-500: #2563EB. That’s it. No context, no semantic weight. Just a value in your design system’s vocabulary.

Tier two is semantic tokens. These reference primitives but give them meaning: colour-brand-primary: {colour-blue-500}. This is where the tenant swap actually happens. When tenant B comes in with their own brand colour, you’re changing only this layer. Tier three is component tokens, which reference semantic tokens: button-background-colour: {colour-brand-primary}.

What this means practically: swapping a tenant’s brand requires changing roughly 15 to 30 semantic tokens. Not 400 individual component properties. I’ve seen UK fintech teams get a new tenant’s dashboard looking correct in under two hours using this structure properly. Without it, the same job takes days and breaks something unrelated every time.

This also connects nicely to the work I’d recommend reading on icon systems in UK product design, because icon colour inheritance is one of the sneakier places where teams hardcode values instead of pulling from semantic tokens, and it creates silent inconsistencies the moment you apply a tenant theme.

Figma component strategies for multi-tenant dashboards

Figma’s variables system (now properly mature after a rocky 2024 rollout) is the most practical way to manage multi-tenant theming at the design stage. The approach that works: one base component library, one set of variable collections per tenant, and a simple variable swap to preview any tenant’s brand in the same file.

Set up your variable collections to mirror your three-tier token structure exactly. Primitives collection, semantic collection, component collection. When onboarding a new tenant, you’re creating a new semantic collection that maps to different primitives, and that collection swap is all it takes to see the entire dashboard re-skin in Figma. This matters beyond aesthetics: it means your handoff documentation is always correct, because the component specs are pulling live values from the right collection rather than being annotated by hand.

One thing I’d flag specifically for UK B2B contexts: accessibility compliance. The WCAG 2.2 guidance on GOV.UK is increasingly being referenced by enterprise procurement teams when evaluating SaaS products, especially in public sector adjacent markets. When a tenant swaps their brand colours in, your semantic token structure needs to preserve contrast ratios, which means building contrast validation into your token system, not treating it as an afterthought. Figma’s built-in contrast checker helps here, but I’d also run token exports through a script that validates WCAG AA thresholds automatically before a new tenant theme goes live.

Logo swapping and asset management across tenants

Logo swapping sounds like the easy part. It’s not, because logos aren’t just image files, they carry implicit sizing assumptions, clear space requirements, and colour mode variants that most teams don’t standardise. A tenant hands you their logo as a 2MB PNG with a white background and you’re suddenly in a conversation about SVG conversion and dark mode variants that no one budgeted for.

The pattern that saves time: define a logo slot specification upfront. Decide the maximum and minimum dimensions, require SVG with transparent background, specify which colour modes need variants (light background, dark background, monochrome), and document this as an onboarding requirement for every tenant. This turns an ad-hoc request process into a predictable intake checklist. It also means your Figma library has a proper logo component with defined constraints rather than a free-floating image that someone will inevitably resize incorrectly.

Typography is the other asset dimension people underestimate. If your product uses a licensed typeface, you cannot simply apply it to a white-label tenant without checking the licence covers redistribution and sub-licensing. I covered the landscape of usable typefaces in some depth in the piece on open source font pairing for UK web design, and that’s genuinely worth reading if you’re specifying fonts for a multi-tenant product, because the safe defaults there are exactly the ones that won’t land you in a licence dispute when a tenant insists on their brand typeface.

Building the dashboard layout layer that works for every tenant

Theming handles colour and typography. Layout is a different layer entirely, and it’s where white-label dashboards often feel slightly wrong even when the colours are correct. The issue is density assumptions baked into the layout that suit one type of user but not another.

If your SaaS product serves both a small UK accounting firm and a large property management group, the data they want to see on their dashboards is different, the density they’re comfortable with varies, and the navigation hierarchy that makes sense for one makes no sense for the other. Token-based theming solves the brand problem; what solves the layout problem is a modular panel architecture where tenants can configure which panels are visible without requiring you to build a custom layout per client.

This is really a product decision as much as a design one, but the Figma implication is worth spelling out: build dashboard layouts using an auto-layout grid of configurable panel components rather than fixed-position screens. Each panel is self-contained. A tenant configuration sets which panels are active. The design system handles spacing and sizing tokens. You never hardcode a dashboard layout in a static frame again. It’s a bit more upfront work, maybe two or three additional sprints to build the panel abstraction properly, but it makes every subsequent tenant onboarding genuinely faster.

The same thinking applies to accessibility across different user demographics. If you’re building for tenants whose end users skew older, the considerations I wrote about in the piece on designing for older users in UK product teams become tenant-level configuration concerns: default font size tokens, touch target size tokens, reduced motion preferences. These are all design token decisions, which means a well-structured system can accommodate them per-tenant without forking the component library.

When to build this properly vs. when to ship something scrappy

Not every white-label deal justifies a full three-tier token refactor. If you’ve got one tenant, a simple CSS variable override at the root level might be genuinely sufficient. But if your sales pipeline has more than two potential white-label clients, and especially if those clients are enterprise contracts where your product will be embedded in their internal tools under their brand, the upfront investment in a proper token architecture pays back within the first two onboardings. The maths isn’t complicated.

The UK B2B SaaS market in 2026 is structurally pushing more products toward multi-tenancy. Procurement consolidation, budget pressure, and the growth of platform-first business models all mean your product is more likely than ever to end up underneath someone else’s logo. Building a design system that handles that gracefully isn’t a nice-to-have, it’s table stakes for products that want to scale.

August 31, 2026
Open Source Font Pairing in 2026: The Combinations UK Designers Are Actually Using to Replace Paid Typefaces

Adobe’s price hikes have focused a lot of minds. When Creative Cloud moved to a subscription model that charges separately for fonts, and when licensing costs for premium typefaces started appearing as actual line items in client budgets, designers started asking a question they’d previously avoided: what’s actually good in the free tier? The answer, in 2026, is: quite a lot. Open source font pairing for UK web design has moved well past the Roboto-and-Open-Sans era. The combinations available now are genuinely typographically interesting, and several of them are holding up at serious scale.

I’ve spent a fair amount of time testing these in real projects, SaaS dashboards, brand identity work, high-traffic editorial sites, and the gap between paid and free has closed considerably. Not entirely. But enough that the default answer is no longer “just buy the licence.”

Photo by cottonbro studio on Pexels

Why open source typography is a serious option now

The Google Fonts library has around 1,500 font families at this point, and the quality distribution has shifted. The bottom half is still mediocre. But the top tier, Inter, DM Sans, Fraunces, Instrument Sans, Hanken Grotesk, Be Vietnam Pro, these are professionally designed typefaces with full variable font support, extensive glyph coverage, and active maintenance. The Google Fonts Knowledge section has become a genuinely useful resource if you want to understand the design intent behind each family before you commit.

Beyond Google Fonts, Fontshare (by Indian Type Foundry) is worth bookmarking. Their releases are fewer but consistently higher quality, Satoshi, Clash Display, Cabinet Grotesk. All free for commercial use. For UK SaaS teams that are burned out on Adobe dependencies, this is real breathing room.

For the variable font angle specifically, I’d point you to the typography stack deep-dive already on this blog, it covers system font decisions and loading strategy in detail. This piece is specifically about pairing logic and which combinations are working in practice.

Pairing one: Inter + Fraunces

This is the one I keep coming back to for SaaS interfaces that want to feel considered rather than corporate. Inter handles everything at UI scale, labels, body copy, navigation, with the kind of legibility that makes it feel almost invisible in the right way. Fraunces is the contrast: a variable optical-size serif with a slightly quirky warmth to it, designed specifically to work at display sizes.

The pairing works because they share nothing in common except quality. Inter is rational and neutral; Fraunces has personality. Use Fraunces for hero headings and pull quotes, Inter for everything functional. I’ve seen this combination in production at a Bristol-based HR tech firm and it reads as confident without trying too hard.

Pairing two: DM Sans + DM Serif Display

The DM family was designed by Colophon Foundry for DeepMind and then open-sourced, which is a remarkable bit of typographic history. DM Sans is clean and geometric; DM Serif Display is sharp, high-contrast, and genuinely elegant at large sizes. Because they share a design lineage, the pairing is almost unfairly harmonious.

I’d use this for fintech or professional services interfaces, anywhere that needs to read as authoritative. If you’re building anything that touches financial regulation, the FCA compliance design guide here covers how typography choices intersect with readability requirements. DM Serif Display at the heading level passes contrast and legibility checks without needing tweaks.

Photo by Ann H on Pexels

Pairing three: Instrument Sans + Playfair Display

Instrument Sans came out of the Figma design team’s internal tooling and was released free on Google Fonts in 2023. It’s precise, slightly condensed, and works beautifully at smaller UI sizes. Playfair Display is the more established name here, it’s been around for over a decade, but it still delivers at hero scale, especially for editorial and media brands.

A Manchester-based digital publisher I know switched to this combination after dropping their Adobe Fonts dependency, and the brand read as sharper afterwards. Sometimes the constraint forces the right decision.

Pairing four: Hanken Grotesk + Lora

Hanken Grotesk is underused. It’s a geometric sans with slightly softer terminals than Inter, which makes long-form body copy more comfortable to read. Lora is a well-kerned serif with roots in calligraphy, excellent for editorial pull quotes and subheadings in content-heavy interfaces.

This combination suits content platforms, newsletter tools, and any interface where users are reading rather than scanning. The tonal warmth of both typefaces makes it feel less like software and more like a publication. For UK teams building for older demographics, pairing choices like this matter more than you’d expect, there’s a useful perspective on that in the guide on designing for over-55 users if that’s your audience.

Pairing five: Cabinet Grotesk + Satoshi

Both from Fontshare, both from the Indian Type Foundry. Cabinet Grotesk has a distinctive high-x-height and slightly retro feel at display sizes, good for startups that want personality. Satoshi is cleaner, more neutral, and handles UI body text comfortably.

I’d use this for consumer apps and B2C SaaS where the brand is trying to feel approachable. It’s not a combination you’d reach for if you need to look like a bank. But for a fintech challenger brand, or a UK health app, the personality reads as intentional rather than accidental.

What actually matters when testing pairings at scale

Pairing lists are only useful if you test them in real conditions. A few things I’ve learnt from production use:

Contrast ratio between the two typefaces needs to be perceptible but not jarring. If both fonts are grotesques, the pairing needs a clear size and weight differential or it collapses into sameness. Serif and sans combinations earn their contrast structurally, which is why they’re popular, but a poorly weighted serif at body size will destroy readability on mobile displays.

Variable font axes matter more than you’d think. If both typefaces in your pairing support a weight axis, you can create a coherent weight scale across the whole interface. Fraunces, DM Sans, and Instrument Sans all support variable weight. Locking in a consistent optical weight across heading and body is the difference between a pairing that looks designed and one that looks assembled.

Performance is the other variable. Google Fonts serves from a CDN and has good caching behaviour, but if you’re self-hosting (which you probably should be for GDPR compliance, UK ICO guidance on third-party font requests is worth reading), use font subsetting via tools like glyphhanger or the pyftsubset utility. Only serve the characters you actually need.

Open source fonts and site visibility: a quick note

Typography affects Core Web Vitals, and Core Web Vitals affect how Google ranks your pages. Font loading strategy, preconnect hints, font-display: swap, subsetting, directly impacts Largest Contentful Paint. If you’re doing solid typographic work but your site is still losing ground on search, it’s worth checking the technical side of your setup. Designers building sites for UK clients occasionally ask me whether there’s a quick way to audit the full picture without commissioning a formal technical SEO report. Search Engine Tuning, a UK-based free SEO check service, lets you run a check against your domains to see how Google is reading your site from a signals perspective, including page speed issues that font loading can trigger. The free SEO check at searchenginetuning.co.uk covers the fundamentals: Core Web Vitals, indexing status, and on-page signals that affect how your pages perform in search.

It’s a useful sanity check, particularly if you’ve recently migrated fonts or restructured your type stack, and the result gives you something concrete to work from rather than guessing which change caused a rankings shift.

On the topic of checking your SEO: if you’re using Google Fonts via the standard CDN import, you’re making a third-party request that can flag in an audit. Self-hosting your open source fonts and serving them from your own domain sidesteps that issue entirely, keeps your font loading predictable, and removes any ambiguity around data transfer to Google’s servers, which matters for UK clients operating under UK GDPR.

A word on licensing confidence

The SIL Open Font Licence (OFL) covers virtually everything in the Google Fonts library and all Fontshare releases. It’s permissive: you can use the typefaces commercially, embed them in products, and modify them (with some restrictions on reselling the fonts themselves). For UK agencies worried about client contracts, the OFL is clean, no per-seat restrictions, no web impression limits, none of the complexity that comes with commercial type licences. Check the licence file in the repository regardless, but in practice OFL is the safest free licence in the industry.

The case for open source font pairing in UK web design has been building for years. In 2026, it’s no longer a compromise position. The pairings above hold up in production, pass accessibility checks, and carry none of the overhead that comes with managing a paid type licence across a client base. That’s not a small thing.

August 31, 2026
The Principles Behind BBC iPlayer’s UI: What Every British Product Designer Can Learn From It

I’ve spent more time than is professionally advisable picking apart how the BBC iPlayer interface works. Not watching content on it, mind you. Actually staring at hover states, tab-order behaviour, loading skeletons, and the way the navigation rail collapses on a 40-inch telly versus a 320px mobile viewport. The BBC iPlayer UI design principles UK product teams should be studying are genuinely embedded in every screen of that product, and I want to drag them out properly.

This is a teardown, not a fan letter. Where iPlayer does something brilliantly, I’ll say so. Where there’s a head-scratching inconsistency, that’s going in too. Either way, there’s a stack of transferable thinking here that most UK product teams would benefit from nicking.

Photo by https://kaboompics.com/ on Pexels

How iPlayer handles content discovery without overwhelming you

Content discovery is probably the hardest design problem in streaming. You have thousands of titles, a user with forty-five seconds of patience, and a recommendation system that may or may not know them well yet. iPlayer’s solution is surprisingly restrained given the scale of the BBC’s catalogue.

The homepage is structured as a progressive hierarchy. The hero slot anchors attention, but it’s not auto-advancing like Netflix’s carousel assault on your focus. Below it, content rows are labelled with actual editorial intent: “Catch Up”, “Recommended for You”, “New Arrivals”. These are not clever algorithmic names. They’re plain English labels that tell you immediately what logic organised them. That’s a design decision, not a default.

I’d argue the most important part of the discovery UI is what iPlayer refuses to do. There are no autoplay trailers on hover in the web interface. There’s no “you have 5 seconds before the next episode starts” pressure mechanic unless you’ve opted into it. That restraint lowers cognitive load measurably, and it respects the fact that a significant portion of the BBC’s audience, covered thoroughly in the over-55 audience design piece on this blog, find high-density motion interfaces actively hostile.

Accessibility as a structural decision, not a retrofit

The BBC publishes its own accessibility standards, the BBC Accessibility Standards and Guidelines, which sit alongside WCAG 2.2. That’s not marketing copy. You can see the results of it directly in iPlayer’s codebase: focus states that are actually visible (not that 1px dashed outline browsers default to), semantic HTML that makes keyboard navigation feel deliberate rather than accidental, and live subtitle rendering that works across every surface including smart TVs where most streaming services just… don’t bother.

The subtitle implementation is worth a short paragraph on its own. iPlayer’s subtitles render as HTML text overlaid on the video container rather than burned into the video stream. That means font size, colour, and background opacity are all user-adjustable. It also means the subtitle DOM is accessible to screen readers in certain configurations. That’s technically more complex to implement than a static .vtt file being displayed, and the BBC chose to do it anyway. That’s what “accessibility as infrastructure” looks like rather than accessibility as checkbox.

If your product team is still treating accessibility annotations as a final design-handoff step, iPlayer is a case study in why that approach breaks down. The accessibility behaviour here is inseparable from the component architecture. You can’t retrofit it cleanly. Build it in or spend twice the effort later. This connects to the same reasoning I wrote about in the icon design system teardown, where icon meaning and accessibility labelling need to be decided at the system level, not icon by icon.

Multi-device consistency and where it gets complicated

iPlayer runs on an extraordinary range of surfaces. A 2013 Samsung smart TV, a current-gen PlayStation, a 320px Android handset, a desktop browser, and an iPad all need to present the same content catalogue through fundamentally different interaction paradigms. That is an engineering and design problem most product teams never encounter at this scale, but the principles iPlayer uses to solve it are still directly applicable.

The key move is abstracting the design system away from the input model. The layout responds not just to screen size but to inferred input type: pointer (mouse/trackpad), touch, or remote/d-pad. The navigation rail behaviour changes meaningfully between these modes. On a remote-controlled TV interface, every interactive element needs to be reachable via directional navigation without any pointer. iPlayer’s focus management logic handles this without the user ever thinking about it.

For most product teams the relevant principle is this: design for your secondary device first. iPlayer’s constraints from TV remote navigation have made the whole interface more keyboard-accessible by necessity. That’s a good trade. If you’re building a web app and keyboard navigation is an afterthought, try designing the component interaction model for a d-pad first and then add pointer support on top. The resulting component will be cleaner.

Performance design and the perception of speed

iPlayer’s actual page performance is not perfect. Run it through WebPageTest on a throttled 4G connection and you’ll see a real-world LCP that could be sharper. But the perceived performance is well managed, and that distinction matters more to users than a 100/100 Lighthouse score.

The loading skeleton UI is implemented with care. Skeletons match the aspect ratios of the content cards they’re replacing, including the 16:9 thumbnail, the title line, and the metadata line. When content loads, there’s no layout shift. The skeleton was drawn to the correct dimensions. This is a WCAG-adjacent win but also just good engineering; it prevents the cascading reflows that trash Core Web Vitals scores and make pages feel broken to users even when the content eventually renders correctly.

Image delivery on iPlayer also uses responsive sizing properly. The BBC’s image service appends dimension parameters to thumbnail URLs so the browser receives an image at the correct resolution for the current viewport. I’ve seen mid-sized UK product teams serving 1200px wide thumbnails inside 240px card slots. That’s not just a performance problem; it’s a data usage problem for mobile users on capped plans, which the Ofcom Connected Nations report consistently shows is still a significant real-world concern in the UK outside major city centres.

The design system thinking underneath it all

The BBC’s GEL (Global Experience Language) design system is public, and it’s worth reading even if you’re not building a product that touches the BBC at all. GEL is the spine of iPlayer’s consistency. Components are defined with explicit spacing, type scales, and interaction states at the system level. Individual feature teams don’t design new card components from scratch; they pull from GEL.

That’s the transferable bit. The specific components in GEL don’t matter to your product. The structure of the thinking does. When a design decision is made once at the system level and then pulled into features rather than reinvented per screen, you ship faster, the product feels more coherent, and edge cases (like that 320px viewport on a cheap Android handset) get solved once and inherited everywhere.

If your team is still at the stage of building a design system, the TypeScript for designers piece is worth reading alongside this one, because codifying your tokens and component contracts in a typed system is what prevents GEL-style consistency from decaying over time as teams grow.

The BBC iPlayer UI design principles UK teams should extract aren’t magic. They’re the result of treating design constraints as opportunities, building accessibility into architecture, and refusing to optimise for engagement metrics that make interfaces worse. That combination is rarer than it should be, and iPlayer is one of the cleaner examples of it on any screen in the country.

August 31, 2026
How to Build a Freelance Design Portfolio That Ranks on Google in 2026: A UK-Specific SEO Breakdown

Most freelance design portfolios are beautiful and invisible. The designer has spent weeks obsessing over the grid, the typeface, the hover states, and the case study photography, and then published it to a domain that Google has essentially never heard of. I’ve seen this pattern so many times it’s almost a genre. The portfolio exists; it just doesn’t rank. And if it doesn’t rank, UK clients pitching briefs into Google, which most of them are, will never find it.

This guide is a proper technical walkthrough for getting your freelance design portfolio to show up in organic search in 2026. Not vague advice about “posting on LinkedIn”. Actual site architecture decisions, Core Web Vitals targets, schema markup you can implement today, and the local signals that genuinely differentiate you for UK clients. Let’s get into it.

Photo by ready made on Pexels

Why freelance design portfolio SEO UK 2026 is a different problem to generic SEO

Portfolio SEO has a structural problem that most tutorials skip. You’re not an e-commerce site with thousands of product pages, and you’re not a blog with 200 posts. You have maybe six case studies, an about page, a contact page, and a services page if you’re organised. That’s a thin site, and Google treats thin sites with suspicion unless you compensate with strong signals elsewhere.

The UK angle compounds this. If you’re a UX designer in Bristol or a brand identity designer in Leeds, you’re not trying to rank globally. You want to appear when someone in your target geography types “freelance UX designer Bristol” or “brand designer for fintech startups UK”. That’s local SEO intersecting with professional services SEO, and the signals that matter are slightly different from what a generic content-farm guide will tell you.

The good news: the competition is weak. The overwhelming majority of freelance portfolios have no structured data, poor Core Web Vitals, zero local signals, and a flat site structure. Doing the basics well puts you ahead of most of the field.

Site architecture: stop building a single-page portfolio

Single-page portfolios are a death sentence for organic search. If everything lives on one URL, you have one chance to rank, and that one page has to fight for attention across every keyword simultaneously. Google can’t index what it can’t differentiate.

The architecture I’d recommend is simple but specific. Give each major service its own page. If you do brand identity, UX design, and motion graphics, those are three pages with three distinct keyword opportunities. Give each case study its own URL, not a modal or a lightbox. Give your about page real content, not two sentences. And if you serve specific geographies or industries, build pages for those too: “UI design for fintech” or “brand identity for London startups” are genuinely searchable.

Internal linking matters here. Each case study should link to the relevant service page. Your service pages should link to each other where they’re related. This is the same logic I covered in the piece on bento grid layouts for SaaS product pages, where the content hierarchy directly affects how users (and crawlers) understand what you do.

Core Web Vitals targets for 2026

Core Web Vitals are a confirmed ranking signal, and portfolio sites have an ironic tendency to fail them badly because designers love large images and JavaScript-heavy animations. Google’s PageSpeed Insights tool is free, takes thirty seconds, and will tell you exactly where you’re losing points. Run it on your homepage and every case study page.

The three metrics to hit: Largest Contentful Paint (LCP) under 2.5 seconds, Cumulative Layout Shift (CLS) under 0.1, and Interaction to Next Paint (INP) under 200 milliseconds. LCP is usually your biggest problem because hero images and full-bleed case study photography are heavy. Fix it by serving images in WebP format, using loading="lazy" on below-the-fold images, and using fetchpriority="high" on your actual LCP element. CLS failures almost always come from images without explicit width and height attributes or from web fonts loading late and shifting text. Fix the first with explicit dimensions; fix the second with font-display: swap and preloading your critical fonts.

INP is newer and measures responsiveness. If you’re running a React or Next.js portfolio (which many developers do after reading our Astro vs Next.js breakdown), watch your JavaScript bundle size. Unnecessary client-side hydration is the usual culprit. Astro’s partial hydration model is genuinely excellent for portfolio sites for exactly this reason.

Schema markup that actually moves the needle

Almost no freelance portfolios implement structured data. This is a free win.

For a freelance design portfolio, three schema types are genuinely useful. First, Person schema on your about page: name, job title, description, and crucially sameAs linking to your LinkedIn, GitHub, Dribbble, and any other authoritative profiles. This helps Google build a knowledge graph entity around you as a professional, which strengthens trust signals across your whole site.

Second, LocalBusiness schema if you work with local clients. Yes, you can use this as a freelancer. Include your city, your service area, and your contact details. Make sure these match exactly what you have on your Google Business Profile. Consistency between your schema and your GBP listing is a genuine local ranking signal.

Third, CreativeWork or WebPage schema on case study pages, with author referencing your Person entity. This connects your work back to you as the creator in a machine-readable way. None of this is technically difficult: it’s JSON-LD you drop into a <script> tag in the <head>, and Google’s Rich Results Test will validate it in seconds.

Local SEO signals for British designers

If you want to rank for location-specific queries, which you absolutely should if you’re pitching to UK clients, you need to treat your portfolio like a local business online. Set up a Google Business Profile under your name or your trading name, categorised as “Graphic Designer” or “Web Designer”. Add your city to your page titles, your H1s, and your meta descriptions. Not stuffed; just present. “Freelance brand designer, Manchester” in your title tag is perfectly natural.

Get citations. In the UK, the useful ones are Yell.com, Bark.com, Clutch.co (which has a strong UK presence), and FreeIndex. These are directories that Google actually pays attention to for local professional services. Your name, trading name, and contact details need to be consistent across all of them. Use the same format every time: same spelling, same phone number format, same postcode.

Reviews matter more than most designers think. Even five genuine Google reviews from past clients will give you star ratings in local search results. Ask clients directly after a project wraps. Most won’t think to do it unprompted, but most are happy to write one if you send them a direct link.

Content that supports your portfolio without bloating it

A small blog or insights section can do serious work for your portfolio’s organic visibility without requiring you to become a content machine. The trick is to write for the intersection of what you know and what your target clients are searching for. A post about “how to brief a brand designer” written from a designer’s perspective will rank for searches that UK marketing managers and founders actually type. A post about your process for UX audits will attract clients who already know they need one.

This is also where you can build topical authority. If your case studies are all fintech work, a few posts about designing for financial services, FCA compliance in UI, or what good fintech onboarding looks like will cluster your site around that niche. Google’s understanding of what your site is about is built from the whole, not just the homepage. I’d keep each post genuinely useful: 600 words of real expertise beats 1,500 words of padding every time. And if you’re the kind of designer who also codes, pieces like our TypeScript introduction for UK designer-developers suggest the territory worth covering, where technical specificity is the differentiator.

The technical checklist before you publish

A few things to verify before you consider the site ready. Your robots.txt should allow crawling; it sounds obvious but I’ve seen portfolios inadvertently blocking Googlebot from staging configs carried over to production. Submit an XML sitemap via Google Search Console and verify your domain there: both the www and non-www versions if you haven’t explicitly chosen one and set a canonical. Make sure your HTTPS is properly configured with no mixed content warnings, since Google has treated HTTPS as a lightweight ranking signal for years. Check that your canonical tags point to the right URLs and that you’re not accidentally indexing paginated or filtered views that duplicate content.

Run Screaming Frog on your domain (the free version handles up to 500 URLs, which is plenty for a portfolio) to catch broken links, missing meta descriptions, and duplicate title tags. Fix those before you build links or push for rankings. The foundation has to be solid or the rest of the work is wasted.

Freelance design portfolio SEO in the UK isn’t glamorous work. It’s structured data in a text editor, image compression, and directory submissions. But it compounds. The designer who does this in January and publishes two genuinely useful blog posts a quarter will be fielding inbound enquiries by the end of the year from clients they never had to cold-pitch. That’s the whole point.

Frequently Asked Questions

How long does it take for a freelance design portfolio to rank on Google?

For a new domain with good technical foundations, expect three to six months before meaningful organic traffic appears. If you’re targeting low-competition local queries like “freelance designer [UK city]”, you can sometimes see results faster, particularly if you have a complete Google Business Profile and a handful of citations from UK directories.

Do I need a blog on my portfolio to rank in UK search results?

Not strictly, but it helps significantly. A blog lets you target informational keywords that your target clients search for, and it builds topical authority around your niche. Even four to six well-written posts per year can meaningfully expand the number of queries your portfolio ranks for.

What's the best platform for building a portfolio that ranks well?

Anything that gives you full control over your HTML, meta tags, and structured data. WordPress with a lightweight theme, Astro, or Framer (which now has solid SEO controls) are all solid choices. Avoid platforms that lock your content behind JavaScript rendering without server-side rendering, as Googlebot can struggle with purely client-rendered content.

Does my Google Business Profile matter if I work remotely with clients across the UK?

Yes. Even remote freelancers benefit from a GBP listing because it gives you visibility in local pack results when clients search in your city. Set your service area to the regions you actually serve. You don’t have to list a physical address publicly if you work from home.

How many case studies do I need for good SEO on a freelance portfolio?

Quality beats quantity. Three to five detailed case studies, each on its own URL with a proper description of the brief, your process, and the outcome, will outperform ten brief project thumbnails on a single page. Give each case study page a unique title tag and meta description targeting the specific type of work it represents.

August 30, 2026
Designing for Older Users: What UK Product Teams Get Wrong About the Over-55 Audience Online

Ofcom’s 2024 Online Nation report put a number to something most product teams already suspect but rarely act on: the over-55 demographic is one of the fastest-growing online cohorts in the UK. Not just growing. Growing fast. And yet, if you spend an afternoon watching someone in that age group try to use a typical SaaS product or a government-adjacent web app, you will feel genuine embarrassment at the assumptions baked into our interfaces. I’ve sat in enough usability sessions to know that the gap between what designers think older users can handle and what actually happens on screen is enormous.

This isn’t an accessibility checkbox article. It’s about the specific, recurring design decisions that make products hostile to people over 55, and what switching those decisions actually looks like in practice. The fix is almost never a separate “accessibility mode”. It’s just better design.

Photo by Marcus Aurelius on Pexels

Why the over-55 audience is not who you think it is

The lazy mental model of an older user is someone confused by technology. That model is outdated and statistically wrong. Many people in the 55-75 bracket have been using the internet since the late 1990s. They have more disposable income than younger demographics, they shop online, they bank digitally, they stream. According to Ofcom’s internet use research, broadband penetration among over-65s in the UK has risen significantly year on year. These are not digital novices. They are experienced users dealing with interfaces built by people who did not design with them in mind.

The actual challenges are specific. Contrast sensitivity changes with age. Motor precision decreases. Reading speed slows when type is small or poorly spaced. Working memory means multi-step flows with no persistent progress information are genuinely harder to complete. None of these things mean someone is bad at technology. They mean the technology is bad at accommodating normal human variation.

The contrast and type size failures that are everywhere

Grey text on a white background is the single most common UI failure I see when looking at products aimed at a general UK audience. Designers use it because it looks refined. WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text. The trendy light-grey placeholder text in form fields routinely fails this. The secondary text on pricing pages fails this. The fine print on checkout screens absolutely fails this.

Type size is the other obvious one. A base font size of 14px or 15px might render acceptably on a 27-inch monitor at your desk. On a tablet held at arm’s length by someone whose near vision has shifted, it is punishment. Sixteen pixels should be the floor. Eighteen is more honest for body copy. Line height below 1.5 compounds the problem by collapsing the space between lines that lets the eye track correctly.

If you’ve been reading my earlier piece on choosing and pairing system fonts for the web, you’ll know that system fonts carry genuine legibility advantages at body size, particularly because they’ve been hinted and rendered for the OS they live on. That advantage matters more for older users than it does for anyone else.

Touch targets and motor precision

A 24px icon button that expands a menu is fine when you’re 29 and have the fine motor control of someone who grew up texting on a glass screen. It’s a genuine barrier when your hands are less precise. Apple’s Human Interface Guidelines recommend a minimum touch target of 44 by 44 points. Google’s Material Design says 48 by 48dp. Most production UIs I audit for clients are hitting 32 by 32 on interactive elements, sometimes less.

The fix is not complicated. Add padding. Use larger hit areas than the visible icon. Space interactive elements so that missing one doesn’t accidentally trigger another. These are also excellent improvements for mobile users on a bumpy train, so they help everyone. Good accessibility decisions usually do.

Related to this: hover states that only appear on desktop are not a navigation strategy. Dropdown menus that require hovering and then moving precisely into a sub-menu without the menu disappearing are a known usability failure for everyone, but disproportionately so for users with slower or less precise cursor movement. The solution is click-to-open behaviour or a transition delay on the menu close.

Cognitive load and the multi-step flow problem

The pattern I see causing the most drop-off with older UK users in usability research is multi-step flows with no persistent progress indicator and no ability to go back without losing state. Checkout flows. Application forms. Account setup wizards. The assumption is that a user will hold the full mental model of where they are in the process. That assumption is wrong for many users, and increasingly wrong as the complexity of the task increases.

Persistent breadcrumbs on long forms. Clear step indicators that say “Step 3 of 5”. Save and return later functionality for longer forms. Autofill that actually works correctly with UK address formats. These are table stakes that many products have not implemented.

Error messages deserve their own mention. Generic messages like “An error occurred” or “Invalid input” with a red border and no further context are genuinely useless. Precise errors that say “Your sort code should be six digits with no spaces” or “Your date of birth should be in DD/MM/YYYY format” are what accessibility looks like in practice.

The icon-only interface trap

Icon-only navigation has been creeping into UK product design for years. It looks clean in Figma mockups at 100% zoom. It is confusing in practice for a significant portion of users. My piece on how product teams are getting their icon systems wrong covers this at length, but the short version is: icons without labels are only clear when the iconography is universal and learnt. Most product icons are neither. Older users who didn’t grow up with a particular design language’s conventions find ambiguous icons significantly harder to decode. Add labels. Combine the icon with text. It adds a few pixels of height to your nav and it eliminates a major source of confusion.

Designing for older users UK accessibility in real product decisions

The design decisions that actually fix these issues are not a separate track from good design. They’re the same decisions. High contrast ratios look more professional, not less. Larger text with good line height reads better for everyone. Clear error messages reduce support tickets. Persistent progress indicators reduce abandonment. These are all wins on metrics that product teams already care about.

If your team hasn’t done usability testing with participants over 55, do it. Recruit through local community organisations, Age UK, or digital inclusion programmes. Watch what happens. I guarantee you will find at least three things to fix before the session ends, and you will fix them faster than any other research you’ve done, because the problems are visible and the solutions are concrete.

One practical first step: run your existing UI through a contrast checker (there are browser extensions for this) and sort the failures by page priority. Fix the worst offenders on your homepage and primary conversion flows first. That alone will move your accessibility score and your conversion numbers simultaneously.

The broader point is that designing for older users in the UK isn’t a niche concern or an edge case. It’s designing for a large, growing, and financially significant audience that is currently being failed by most of the interfaces they encounter. Fix the contrast. Fix the type size. Fix the touch targets. Fix the error messages. Then actually test with the people you’re designing for. The rest follows from there.

August 30, 2026
The Typography Stack in 2026: How to Choose and Pair System Fonts Without Looking Cheap
Here’s the thing that nobody says out loud: most web font implementations are a performance tax in disguise. You add a Google Fonts <link> in the <head>, you pick something that looks nice in Figma, and then you wonder why your Largest Contentful Paint is a disaster. I’ve watched this play out on dozens of projects, and the pattern is almost always the same. The typography looks considered, the loading experience does not.

Building a solid system font stack in 2026 isn’t about giving up on brand expression. It’s about being smarter with what you load, when you load it, and how you fall back gracefully when things go wrong. This guide walks through the actual mechanics of doing that, from stack construction to subsetting to font-display strategy, with enough detail to be genuinely useful rather than just vaguely inspirational.

Photo by Miguel Á. Padriñán on Pexels

Why system fonts deserve more respect than they get

The reputation of system fonts is stuck somewhere around 2014, when using them felt like admitting defeat. That narrative is outdated. The current default system stacks are genuinely good. Apple’s San Francisco is a masterclass in legibility at small sizes. Segoe UI Variable (shipping with Windows 11) is properly optical-size aware. Inter, whilst technically a web font, ships natively in several Linux environments and is increasingly used as a system default in design tools.

A well-constructed system font stack in CSS looks something like this:
```
font-family:
  system-ui,
  -apple-system,
  BlinkMacSystemFont,
  'Segoe UI Variable',
  'Segoe UI',
  Roboto,
  Oxygen,
  Ubuntu,
  sans-serif;
```
That stack costs zero bytes, loads in zero milliseconds, and renders without layout shift. On a content-heavy site, that’s worth a lot. The Core Web Vitals improvement alone can be significant, particularly for Cumulative Layout Shift (CLS) and LCP, both of which get hammered by render-blocking font requests.

When you actually need a web font (and when you don’t)

I’d argue the honest answer is: less often than you think, and almost never for body copy. System fonts at 16px with sensible line-height and letter-spacing are perfectly readable. The use cases where a web font genuinely earns its keep are narrower than most designers admit.

Genuine reasons to load a web font include: a logotype-adjacent display face that’s core to the brand identity, a distinctive serif for editorial contexts where the personality of the letterform matters, or a monospaced font for code samples where system options (Courier New, I’m looking at you) are visually terrible. Body copy at 16–18px? The system font stack wins almost every time.

The question I ask on every project is whether a user could actually tell the difference between the web font and a well-configured system font at reading distance. More often than not, the answer is no. What they will notice is a flash of invisible text or a layout jump. That’s the trade you’re making.

Photo by Pixabay on Pexels

How to load web fonts without destroying your performance scores

When a web font is genuinely justified, the loading strategy matters as much as the font itself. There are three levers that make the biggest difference: self-hosting, subsetting, and font-display.

Self-host everything

Stop using Google Fonts via CDN. It creates a cross-origin request that costs you a DNS lookup, a TCP connection, and potentially a TLS handshake before a single byte of font data arrives. Self-host the files on your own domain instead. Tools like google-webfonts-helper generate the CSS and font files you need in seconds. Your font is now one fewer external dependency, and you have full control over caching headers.

Subset aggressively

A full variable font file can be 200–400KB. For a UK-facing site serving primarily Latin-script content, you need maybe 20% of that. The unicode-range descriptor in your @font-face rule tells the browser which characters are actually in each file, so it only downloads the subset it needs. Use pyftsubset from the fonttools library to strip everything you don’t need. A Latin subset for English content typically covers U+0020–U+00FF, plus U+2013–U+2122 for typographic punctuation. That’s it.

For a typical paragraph-weight subset, I regularly get files under 20KB. That’s a very different conversation than serving 300KB of font data for characters your users will never see.

Use font-display correctly

The font-display descriptor controls what happens whilst your web font loads. The options matter:
- swap renders immediately in a fallback, then swaps when the web font arrives. Fast but causes layout shift.
- optional gives the browser a very short window to load the font; if it doesn’t arrive in time, the browser uses the fallback for the entire page load. Zero layout shift, and on repeat visits the cached font renders immediately. This is my default for body fonts.
- block renders invisible text for up to 3 seconds. Avoid it. It’s what’s killing your LCP on slow connections.
For display fonts where the visual difference genuinely matters, swap is acceptable if you’ve done the work to minimise the metric mismatch between your web font and fallback. Which brings us to the next bit.

Matching your fallback metrics to eliminate layout shift

The biggest cause of font-related CLS is metric mismatch: your web font has different line-height, letter-spacing, or ascender/descender values than the system font rendering in its place. When the web font arrives, everything reflows. That’s the jump users hate.

CSS now has size-adjust, ascent-override, descent-override, and line-gap-override descriptors inside @font-face, and they’re specifically designed for this. You apply them to a local fallback font definition to make it metrically equivalent to your web font. The Malte Ubl approach of using the Font Style Matcher is worth reading, and the Fontaine library automates this for build pipelines.

A simplified example for matching Inter with a system fallback:
```
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}

body {
  font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif;
}
```
The layout is now almost identical before and after the web font loads. CLS drops to near zero. This is the kind of detail that separates a properly engineered typography stack from one that just happens to look okay in Figma. Incidentally, if you want to see this principle applied at scale, the approach connects directly to the same performance discipline I mentioned in our variable fonts deep dive, which covers how font axes interact with rendering at different viewport sizes.

Pairing system fonts with brand type: a practical approach

The pairing model I’ve settled on for most UK product work is a single web font for display headings (H1, H2, hero text) and a system font stack for everything else: body copy, UI labels, form inputs, navigation. This gives you brand personality where it’s visible, and zero performance cost where it isn’t.

For display type, a variable font is almost always the better choice over a static weight. You get the full weight and width axis with a single file. Fonts like Cabinet Grotesk, Fraunces, or Anybody Variable cover a huge range of expressive territory at roughly 40–80KB subsetted. Pair that against system-ui for body and the contrast is actually better than two web fonts fighting for attention.

The same principle applies to design systems built in Figma. If your design system is using a bespoke web font for every text style, someone on the engineering side is eventually going to raise a performance ticket. Getting ahead of that in the design phase, by deliberately scoping which styles use the web font and which defer to system defaults, is much cleaner than retrofitting it later. The same discipline that makes a good design system in Figma applies here: decide at the token level which typefaces are brand-critical and which are functional.

On a practical note: some niches have specific loading constraints that make this even more pressing. Anyone building content-heavy landing pages under heavy traffic, whether that’s e-commerce, media, or specialist verticals like vape seo where organic performance is critical, will feel font loading overhead in real conversion metrics. It’s not an abstract concern.

Preloading the right files

If you’ve subsetted correctly, you can preload your critical font files without much guilt. The pattern is a <link rel="preload"> in the document <head>, pointing at your subset WOFF2 file with as="font" and crossorigin. This tells the browser to fetch it as early as possible, even before the CSS is parsed.

Only preload what’s above the fold. Preloading three font weights because they all appear somewhere on the page is still a mistake. For most sites, one or two files is the right ceiling. The web.dev font best practices guide covers the nuances of preload priority, and it’s worth reading alongside your Lighthouse report rather than in isolation.

The goal isn’t a font system that’s technically impressive. It’s one that users never think about because the text was simply there, readable and on-brand, from the first paint. That’s harder than it sounds, but the tooling in 2026 makes it genuinely achievable without exotic build steps or compromising visual quality.

Frequently Asked Questions

What is a system font stack and why should I use one?

A system font stack is a CSS font-family declaration that references fonts already installed on the user’s operating system, such as San Francisco on macOS or Segoe UI on Windows. Because no files need to be downloaded, there’s zero loading time and no risk of layout shift from font swapping. For body copy especially, modern system fonts are high-quality and save significant performance overhead.

Do system fonts hurt brand identity?

Not if you’re strategic about where you use them. The approach most experienced product teams use is to load a single web font for display headings and marketing-facing text, while using a system font stack for body copy, labels, and UI elements. You preserve brand character where it’s most visible, and avoid paying a performance cost on the parts users don’t consciously notice.

What is font-display: optional and when should I use it?

The font-display: optional descriptor gives the browser a very short window (typically around 100ms) to load a web font; if it doesn’t arrive in time, the fallback is used for that entire page load and no swap occurs. On subsequent visits, the cached font renders immediately with no shift. It’s the best choice for body fonts because it eliminates Cumulative Layout Shift entirely whilst still serving the web font to most repeat visitors.

How do I stop my web fonts causing layout shift (CLS)?

The main cause is metric mismatch between your web font and its fallback. Use the CSS descriptors ascent-override, descent-override, and size-adjust inside a local @font-face rule to make your system fallback font metrically match your web font. This means the layout stays identical before and after the web font loads, bringing CLS close to zero. Tools like Fontaine can automate this at build time.
August 27, 2026
Astro vs Next.js in 2026: Which Framework Should UK Web Developers Actually Build With?

The framework debate has a new shape in 2026. A couple of years ago, the conversation was basically “are you using Next.js or are you wrong?” That’s no longer the case. Astro vs Next.js is now a genuine technical decision, and if you’re a UK freelancer or small agency picking a stack for a new project, getting it wrong costs you real time and money. I’ve spent a fair chunk of the last year shipping with both, and I have opinions.

This isn’t a “both are great in their own way” fence-sit. I’ll tell you which one wins for which type of work, what the hosting implications look like on UK infrastructure, and why the choice matters more than most tutorials let on.

Photo by Alicia Christin Gerald on Pexels

What each framework actually is

Next.js, maintained by Vercel, is a React-based full-stack framework. It does server-side rendering, static generation, incremental static regeneration, API routes, middleware, edge functions, the lot. It’s been the default choice for serious React projects for years, and the ecosystem around it is enormous.

Astro is something different. It’s an islands-architecture framework that ships zero JavaScript to the browser by default. You write components in whatever flavour you fancy (React, Svelte, Vue, or plain HTML) and Astro only hydrates the interactive bits. The result is pages that are genuinely fast in a way that feels almost unfair. For content-heavy sites, the Lighthouse scores are embarrassing compared to a typical Next.js build.

These two frameworks are not really competing for the same use case. The problem is that a lot of developers reach for Next.js out of habit, even when Astro would be the smarter pick.

Build performance: where Astro genuinely wins

For a marketing site, a blog, a documentation hub, or a portfolio, Astro is faster to build with and faster to serve. Full stop. The islands architecture means your pages arrive in the browser as HTML with CSS, and only the components that need interactivity (a search bar, a contact form, a live pricing widget) get JavaScript injected. Everything else is static.

I rebuilt a client’s agency site last autumn, previously on Next.js with a bloated component tree, and the move to Astro dropped Time to First Byte from around 800ms to under 120ms on a cold UK edge. The Core Web Vitals went green across the board without any heroics. If you’ve been wrestling with layout performance issues at the CSS level, the framework layer matters even more than you might think.

Next.js, by contrast, carries React into the browser on every page by default. Even with server components (which are genuinely clever and have improved things substantially), you’re shipping more JavaScript than Astro would. For a SaaS dashboard, a social platform, or anything with heavy real-time state, that’s a reasonable trade. For a brochure site? It’s not.

Hosting costs on UK providers

This is where the decision gets practical and where UK developers often get stung. Next.js is heavily optimised for Vercel’s own infrastructure. That’s not a criticism, Vercel is a good product, but their free tier has limits that bite fast, and their Pro tier at roughly £17 per user per month adds up for a small agency with multiple projects running.

Alternatives like Netlify or UK-adjacent providers such as Cloudflare Pages handle Next.js, but you lose some features (middleware running on Vercel’s edge, ISR at the granular level) or find workarounds necessary. The Vercel lock-in is real, even if the company insists otherwise.

Astro sites, because they’re largely static output, deploy anywhere. Cloudflare Pages for free. An S3-compatible UK bucket behind a CDN. Your client’s existing cPanel host, if it comes to that. I’ve run Astro sites on Hetzner VPS instances in their UK datacentre (Falkenstein is technically Germany, but their London presence is growing) for under £5 per month including everything. Next.js apps with server-side requirements need a Node runtime, which means either a managed platform with associated costs or your own self-hosted VPS setup that you need to maintain.

For UK freelancers billing smaller clients, the hosting cost difference can genuinely affect whether a project is profitable at the price point the client expects.

Which projects actually suit each framework

Astro wins for: marketing sites, landing pages, blogs, documentation, portfolios, news sites, e-commerce storefronts where the cart is a third-party embed, and any project where content is the primary product. If the page is mostly read, not interacted with, Astro should be your first choice.

Next.js wins for: SaaS products with authenticated dashboards, apps with real-time data requirements, anything with complex server-side logic that needs to live close to the data layer, and projects where the team is already deep in the React ecosystem and moving away would cost more than it saves. It’s also the better pick when you’re building something that will grow into a full application, because its routing and API layer scale well.

A pattern I see constantly in UK agency work: someone specs a Next.js build for a 12-page product site because the team knows React. The site ends up with a bundle size north of 800KB for pages that are basically text and images. Then they spend a sprint optimising what the framework choice created. Astro wouldn’t have done that.

There’s also a middle path worth mentioning. Some teams are now running hybrid setups: Astro for the public-facing marketing and content pages, Next.js (or a lighter alternative like Remix) for the authenticated product area. The two can coexist on subdomains or subdirectories, and if you’re thoughtful about the split, you get the best performance characteristics of both without too much architectural overhead.

The developer experience difference

Next.js has the larger ecosystem, more Stack Overflow answers, and a bigger community in the UK dev scene. If you’re hiring or collaborating, finding someone familiar with Next.js is easier. The Astro community is growing fast, and the documentation is genuinely excellent, but it’s still smaller.

Astro’s component model, where you can mix React, Svelte, and vanilla components in the same project, sounds chaotic but is surprisingly workable. For a freelancer who has built up a library of components across different frameworks, it’s actually liberating. I’ve pulled in a React data-viz component alongside a Svelte interactive widget and it just worked. That flexibility is part of why Astro suits project-based freelance work so well.

One thing I’ve noticed: clients who care about their web presence (the ones spending money on cookie free display advertising UK services and similar performance-focused digital channels) are increasingly asking specific questions about page speed. Astro makes it much easier to hit those targets without a performance engineering sprint at the end of every project.

For teams already building design systems or working across multiple products, the framework choice also interacts with your component architecture. If you’re maintaining icon systems or a full icon design system across multiple surfaces, understanding how your framework handles component hydration will affect how you structure those shared resources.

My actual recommendation

Default to Astro for anything content-first. The performance advantages are real, the hosting costs are lower, and the developer experience is genuinely good. You won’t spend three hours debugging why your bundle includes a library you imported once in a layout file.

Use Next.js when the project genuinely needs it: persistent server-side state, complex auth flows, real-time features, or a codebase that’s going to grow into something an engineering team maintains long-term.

The Astro documentation is worth an afternoon of your time even if you’re not planning to use it immediately. You’ll come away with a much clearer sense of what “islands architecture” actually means in practice, which makes the Next.js vs Astro decision far more intuitive when a new project lands on your desk.

Both frameworks are mature, production-ready, and supported well enough that you won’t be stranded. The choice is about fit, not about quality. Pick the tool that matches the problem, not the one you’re most comfortable with.

Frequently Asked Questions

Is Astro faster than Next.js for production sites?

For content-heavy, mostly static sites, yes, Astro ships zero JavaScript by default, which results in dramatically smaller payloads and faster load times. For highly interactive apps like SaaS dashboards, Next.js with server components is more competitive because it’s designed for that kind of complexity.

Can I host an Astro site on cheap UK hosting?

Yes, and that’s one of Astro’s main advantages. Because the output is static HTML, CSS, and minimal JS, you can host on Cloudflare Pages (free tier is generous), any S3-compatible storage, or a basic UK VPS for a few pounds per month. Next.js apps with server-side features need a Node runtime environment, which typically costs more.

Should I use Astro or Next.js for a SaaS product?

Next.js is the stronger choice for a full SaaS product with authenticated users, complex server logic, and real-time data requirements. That said, many SaaS teams use Astro for their public marketing site and Next.js only for the authenticated app area, which is a sensible split.

Does Astro work with React components?

Yes. Astro supports React, Svelte, Vue, Solid, and plain HTML components in the same project simultaneously. Only components that need client-side interactivity are hydrated; everything else renders as static HTML at build time.

August 26, 2026
Designing Offline-First Apps: Why UK Developers Should Be Building for Patchy Connectivity

Britain has a connectivity problem it keeps pretending it doesn’t have. You can be forty minutes outside Leeds, somewhere sensible and entirely on the map, and your mobile signal will flatline completely. According to Ofcom’s Connected Nations reports, significant portions of rural England, Scotland, and Wales still experience 4G not-spots or broadband speeds that make a dial-up modem look ambitious. If you’re building apps for a UK audience and you’re not thinking about offline-first app design UK, you’re quietly breaking the experience for a chunk of your users every single day.

The good news: the web platform caught up. Service workers, IndexedDB, the Cache API, and background sync have matured considerably. Building an offline-capable application in 2026 is no longer a heroic engineering effort reserved for Google and large infrastructure teams. It’s a design and architecture decision you can make at the start of a project, and one that pays compounding dividends in user trust.

What Does Offline-First Actually Mean?

Offline-first doesn’t mean your app works exclusively without a connection. It means the app treats network availability as an enhancement rather than a prerequisite. The mental model shifts: instead of “assume connected, handle errors when not”, you build for “assume nothing, sync when possible”. That inversion changes almost everything about your data flow, your UI states, and your error handling strategy.

Compare this to the more common “offline-tolerant” approach, where developers bolt on a friendly error screen and call it done. That’s not offline-first. That’s just dressed-up failure. Proper offline-first means a user in a Snowdonia valley or on a Highland train can read their data, create new records, and edit existing ones. When connectivity returns, the app catches up. The user never stares at a spinner waiting for permission to use their own software.

Service Workers: The Engine Room of Offline Capability

Service workers are background scripts that sit between your app and the network, intercepting requests and deciding what to do with them. They’re the backbone of any serious offline-first architecture. A service worker can cache your app shell on first load, serve stale content when the network is unavailable, and queue outgoing requests to replay once connectivity resumes.

The setup is conceptually straightforward. Register your service worker in your main JavaScript entry point, then implement a fetch event listener to define your caching strategy. For static assets (your JS bundles, CSS, fonts), a cache-first strategy is sensible. For API calls, a stale-while-revalidate approach gives you speed plus freshness: serve what’s cached immediately, then fetch and update in the background. For write operations, background sync via the SyncManager API queues failed requests and retries them automatically when the connection recovers.

Libraries like Workbox (from Google, but widely used in UK product teams) abstract much of this boilerplate. You define your caching strategies declaratively, and Workbox handles the plumbing. For most teams, this is the pragmatic starting point rather than hand-rolling everything.

Local Storage Strategies: IndexedDB Is Where You Actually Live

The localStorage API gets reached for instinctively, but it’s synchronous, limited to roughly 5MB, and stores only strings. For any serious offline data layer, IndexedDB is the right tool. It’s asynchronous, stores structured data including blobs, and has no practical size ceiling for most use cases (browsers impose soft limits, but you’re typically looking at hundreds of megabytes).

Working with raw IndexedDB is famously verbose, which is why wrapper libraries exist. Dexie.js is my personal favourite for this: clean promise-based API, excellent TypeScript support, and an active community. You define your schema as a simple object, run version migrations, and query with a syntax that looks almost like SQL’s friendlier sibling. For React-based projects, RxDB adds reactive querying on top of IndexedDB, which pairs nicely with component-driven UIs.

One design decision worth spending time on: what do you actually persist? You don’t want to naively dump your entire server state into the client. Think about the user’s current session, their most recently accessed records, and anything they’d need to do their core job. A field-based app, for instance, might cache the last thirty jobs rather than the full historical archive. Scope your local database to what’s genuinely useful offline, and you’ll save yourself a world of pain later.

This is exactly the kind of consideration that matters for industries operating in physically demanding or remote environments. Construction and building services firms, for example, need site workers to log inspection data, capture photos, and update compliance records even in basements and rural plots with no signal. Asbestos Compliance Solutions Ltd, a specialist asbestos services provider based in Mansfield, Nottinghamshire, is precisely the type of operation where offline-first app design becomes business-critical rather than a nice-to-have. A surveyor working on a construction site or inside a building earmarked for demolition needs an app that saves their asbestos survey data locally and syncs it to the back end once they’re back in signal. You can find more about their specialist services at https://asbestoscompliancesolutions.co.uk/, the point being that the field-to-office data flow is one of the strongest real-world arguments for building offline-first.

Sync Conflict UI: The Design Problem Nobody Wants to Talk About

Here’s where offline-first gets genuinely hard, and where most tutorials quietly stop. If two users edit the same record while both are offline, and then both sync at the same time, you have a conflict. Last-write-wins is the laziest resolution strategy. It works sometimes. It silently discards data the rest of the time.

A more robust approach is a CRDT (Conflict-free Replicated Data Type) model, where data structures are designed to merge without conflicts by their mathematical nature. Libraries like Automerge and Yjs implement CRDTs in JavaScript and are increasingly viable for product-scale applications. For simpler scenarios, you can track vector clocks or timestamps and surface conflicts explicitly to the user.

That last option is a UI design challenge as much as an engineering one. When a conflict exists, your interface needs to show the user what happened in plain language, present both versions of the record, and let them choose or merge. This is not glamorous design work. It won’t win you a Webby Award. But it’s the difference between an app that’s trustworthy in the field and one that occasionally loses data in ways users can never quite prove.

For building and construction-adjacent tools, where compliance records and specialist services data carry regulatory weight, a sync conflict that silently overwrites an asbestos survey result could have consequences well beyond a frustrated user experience. The design of conflict resolution UI should be proportional to the stakes of the data.

Offline UX Signals: Telling Users What’s Actually Happening

Beyond the technical architecture, offline-first has a UX communication layer that often gets undercooked. Users need to know when they’re offline, when their actions have been queued rather than confirmed, and when the sync has completed. The navigator.onLine API gives you a basic boolean, though it’s worth knowing this can give false positives (a device connected to a router with no internet access will report online). Listening to the online and offline window events is more reliable in practice.

Visually, a persistent but unobtrusive status indicator works well: something in the interface chrome that shows “Saving locally” or “Syncing” without interrupting the user’s flow. Avoid modal alerts for this. Nobody wants a dialogue box telling them they’re in a tunnel. The app should handle it quietly and surface the status when the user actually looks for it.

Pending action queues deserve visibility too. If a user has submitted three records while offline, a small badge or count somewhere accessible gives them confidence their work hasn’t vanished. When sync completes, a brief toast notification closes the loop. These are small interactions, but they’re the entire psychological foundation of trusting an offline-first system.

Progressive Web Apps and the UK Distribution Opportunity

One last thought: PWAs (Progressive Web Apps) are the natural delivery vehicle for offline-first experiences on the web. They install to the home screen, run in a standalone window, and unlock the service worker capabilities described above. For UK developers building field tools, B2B utilities, or anything serving users in connectivity-challenged environments, a PWA sidesteps app store friction entirely.

Asbestos Compliance Solutions Ltd and similar specialist services businesses in the building and construction sector represent a whole category of professional tools that would benefit enormously from this model. A well-built PWA for asbestos survey management, distributed directly via a URL, updated silently in the background, and fully functional on a construction site with no signal, is a genuinely better product than a native app requiring Play Store or App Store submission cycles.

The technical foundations are solid. Service workers are supported across all modern browsers. IndexedDB is ubiquitous. Background sync has broad coverage. The remaining barrier is mostly cultural: the assumption that “proper” apps need a server call for every interaction. Rural Britain, and the millions of professionals who work in basements, tunnels, and remote sites, would politely like you to rethink that assumption.

Frequently Asked Questions

What is offline-first app design and how is it different from just caching?

Offline-first app design means building an application where local data access is the default behaviour, and network requests are an enhancement rather than a requirement. Basic caching typically just stores static assets; offline-first goes further by persisting application data locally, queuing write operations, and syncing changes when connectivity returns.

Which UK areas have the worst mobile and broadband connectivity for app users?

According to Ofcom’s Connected Nations data, large parts of rural Scotland, Wales, and Northern England have persistent 4G not-spots and below-average broadband speeds. Areas including the Scottish Highlands, mid-Wales, and parts of Yorkshire and Cumbria regularly appear in coverage gap reports, making offline-first design especially relevant for apps targeting users in these regions.

How do service workers enable offline functionality in web apps?

Service workers are background scripts that intercept network requests made by your application. They can serve cached responses when the network is unavailable, implement strategies like cache-first or stale-while-revalidate for different resource types, and queue failed write requests using the Background Sync API to replay them once connectivity is restored.

August 2, 2026
Icon Design in 2026: Why Most UK Product Teams Are Getting Their Icon Systems Completely Wrong

There is a particular kind of design debt that nobody talks about in sprint retros. It lives in your Figma file, buried three pages deep. It is inconsistent stroke widths, a random mix of filled and outlined icons, one set from Heroicons, another ripped from Material Design, and a couple of bespoke ones drawn by a contractor in 2022 who has long since moved on. This is the state of icon design in a depressing number of British SaaS and fintech products right now, and it matters far more than most teams acknowledge.

Across the UK’s product landscape, from challenger banks to B2B SaaS tools built in Leeds and Edinburgh, the icon layer is treated as an afterthought. And that is a serious problem, because icons are the nervous system of any interface. They carry meaning at a glance, reduce cognitive load, and signal whether a product feels polished or patched together. When your icon system is incoherent, users feel it even if they cannot name it. The trust erodes quietly.

Why Lazy Icon Choices Are So Common

The root cause is almost always speed. A team picks a free icon library early in the product’s life because something needs to ship. Heroicons is solid. Lucide is solid. Phosphor is genuinely excellent. The problem is not the library itself; the problem is never graduating beyond it. Products grow, brand guidelines get written, a design system gets built, and the icon layer just… never gets revisited.

Then there is the “bespoke one-off” problem. A product manager wants a specific icon for a new feature that does not exist in the library. A designer draws it quickly. Now you have 80 icons from Phosphor at 1.5px stroke and one custom icon at 2px stroke with rounded joins, sitting right next to each other in your nav bar. Nobody notices until a sharp-eyed user or a new senior designer joins and immediately clocks it.

Fintech interfaces in particular suffer from a third issue: regulatory screen clutter. FCA-compliant products often carry a lot of required information and iconography for warnings, risk levels, and disclosures. Teams bolt icons onto these elements ad hoc, sourced from wherever is convenient, which means the most legally sensitive parts of your interface often have the most visually chaotic iconography. That is a branding and a trust problem wrapped in a compliance wrapper.

What a Coherent Icon Design System Actually Looks Like

Building a proper icon design system for UK product design in 2026 is not as complex as some teams fear, but it does require deliberate decisions made up front. Here is the framework I find most useful.

Step 1: Define Your Icon Grammar

Before you draw a single icon, you need a written grammar. This means committing to: a single stroke weight (1.5px or 2px, not both), corner radius (sharp, slightly rounded, or fully rounded), fill style (outlined only, filled only, or a deliberate mixed system with semantic rules), and a grid (typically 24×24 with a 2px inner padding creating a 20×20 optical field). Monochrome or two-tone? That decision needs to happen now, not mid-sprint.

The grammar is your constraint document. Without it, every new icon becomes a judgment call. With it, a new designer can add an icon six months from now and have it look like it belonged from day one.

Step 2: Audit and Cull Your Existing Set

Run a full audit. Export every icon currently in your product, lay them side by side, and apply your new grammar as a filter. Some will pass. Some will need redrawing. Some need removing entirely because the feature they represent was deprecated in 2024 and the icon is still floating around in three screens. Yes, this actually happens.

Tools like Figma’s component analytics (available via the Org and Enterprise plans) can surface how many times a component is used, which makes this audit dramatically faster. If an icon has zero instances, archive it. If it has 400 instances and does not match your grammar, it goes into the redraw queue.

Step 3: Build in Figma With Dark Mode Baked In From the Start

This is where a lot of teams make a costly mistake. They build their icon system for light mode, then try to adapt it for dark mode later using colour overrides. By then, some icons have hard-coded fill colours, some use current colour correctly, and the whole thing becomes a maintenance nightmare.

The correct approach: all icons should use currentColor as their fill or stroke value from the beginning. In Figma, this maps to “Use as mask” or, more precisely, building icons as fully monochromatic components where the colour is inherited from the parent frame or a semantic colour token. If you are using Tokens Studio (which pairs beautifully with Figma), your icon colour tokens can reference your semantic palette, so icon/primary resolves to #1A1A1A in light mode and #F5F5F5 in dark mode automatically. No overrides, no separate dark mode icon set required.

Step 4: Scalability Means Naming Conventions Matter

A naming convention sounds boring. It is actually the difference between a system that scales and one that collapses under its own weight eighteen months later. Use a consistent taxonomy: [category]/[name]/[variant]. So action/download/outline, status/warning/filled, navigation/home/outline. Every icon findable by category. Every variant predictably named.

This also feeds directly into your front-end implementation. If you are exporting to SVG sprites or using a tool like SVGR to generate React components, a consistent naming convention means your component names are predictable too. <IconActionDownload /> is infinitely more maintainable than <DownloadIcon2New />, which is a real component name I have seen in production code.

Step 5: Document Intent, Not Just Appearance

The icon design system for UK product design in 2026 needs to go beyond a grid of icons in a Figma page. Each icon, or at minimum each category, needs usage notes. What is the difference between status/warning and status/error? When do you use the filled variant versus the outline? Are there contexts where icons should never appear without a text label (hint: for accessibility, the answer is almost always yes).

The UK government’s accessibility requirements for public sector websites and apps are instructive here even if you are building a private SaaS product. WCAG 2.1 AA is the benchmark, and icons that carry meaning without a text alternative fail it. Documenting which icons are decorative and which are informational, and what the accessible label should be, is part of the system.

The Brand Alignment Layer

A coherent icon design system should feel like an extension of your brand, not a neutral utility grafted onto it. If your brand uses geometric, modernist typography and sharp angles, your icons should share that character. Soft, rounded icons in a brand that communicates precision and authority create a subconscious mismatch that users pick up on, even if they cannot articulate why something feels slightly off.

This is why picking an off-the-shelf library and calling it done is always a partial solution at best. Libraries like Phosphor or Lucide are excellent starting points and perfectly valid for early-stage products. But a mature product with a defined brand identity, especially one competing in UK fintech where trust signals are everything, should have icons that were either drawn to the brand’s geometric character or significantly adapted from a base library.

The practical route for most teams: start with a base library that is closest to your brand’s visual character, establish your grammar document, and then redraw any icons that deviate or that your product requires specifically. Over time, the bespoke set grows and the dependency on the base library shrinks. That is a healthy progression.

Consistency as a Product Value

Here is the thing that is easy to miss when you are deep in delivery cycles: icon consistency is not a nice-to-have design detail. It is a product quality signal. Users who encounter a polished, coherent icon set are building a subconscious model that this product was made carefully, by people who sweat the details. That trust compounds. It affects retention, it affects willingness to enter payment information, and in regulated sectors like fintech, it affects whether a user completes onboarding or bounces at the first moment of uncertainty.

A proper icon design system for UK product design in 2026 is not about aesthetics for aesthetics’ sake. It is about building a product that communicates competence at every pixel.

July 31, 2026

Category: Web Design

What killed scroll-jacking (finally)

What “the grid is back” actually means in practice

The CSS behind the comeback

Why SaaS product teams are converging on the same patterns

Grids, typography, and the system-font connection

What this means for performance budgets

Is this a permanent shift or another cycle?

Frequently Asked Questions

What is an editorial grid layout in web design?

Why are websites moving away from scroll-jacking in 2026?

How does CSS subgrid help with structured editorial layouts?

Are column-based grids better for performance than freeform layouts?

Why most SaaS design systems aren’t white-label ready out of the box

The three-tier token structure that makes multi-brand manageable

Figma component strategies for multi-tenant dashboards

Logo swapping and asset management across tenants

Building the dashboard layout layer that works for every tenant

When to build this properly vs. when to ship something scrappy

Why open source typography is a serious option now

Pairing one: Inter + Fraunces

Pairing two: DM Sans + DM Serif Display

Pairing three: Instrument Sans + Playfair Display

Pairing four: Hanken Grotesk + Lora

Pairing five: Cabinet Grotesk + Satoshi

What actually matters when testing pairings at scale

Open source fonts and site visibility: a quick note

A word on licensing confidence

How iPlayer handles content discovery without overwhelming you

Accessibility as a structural decision, not a retrofit

Multi-device consistency and where it gets complicated

Performance design and the perception of speed

The design system thinking underneath it all

Why freelance design portfolio SEO UK 2026 is a different problem to generic SEO

Site architecture: stop building a single-page portfolio

Core Web Vitals targets for 2026

Schema markup that actually moves the needle

Local SEO signals for British designers

Content that supports your portfolio without bloating it

The technical checklist before you publish

Frequently Asked Questions

How long does it take for a freelance design portfolio to rank on Google?

Do I need a blog on my portfolio to rank in UK search results?

What's the best platform for building a portfolio that ranks well?

Does my Google Business Profile matter if I work remotely with clients across the UK?

How many case studies do I need for good SEO on a freelance portfolio?

Why the over-55 audience is not who you think it is

The contrast and type size failures that are everywhere

Touch targets and motor precision

Cognitive load and the multi-step flow problem

The icon-only interface trap

Designing for older users UK accessibility in real product decisions

Why system fonts deserve more respect than they get

When you actually need a web font (and when you don’t)

How to load web fonts without destroying your performance scores

Self-host everything

Subset aggressively

Use font-display correctly

Matching your fallback metrics to eliminate layout shift

Pairing system fonts with brand type: a practical approach

Preloading the right files

Frequently Asked Questions

What is a system font stack and why should I use one?

Do system fonts hurt brand identity?

What is font-display: optional and when should I use it?

How do I stop my web fonts causing layout shift (CLS)?

What each framework actually is

Build performance: where Astro genuinely wins

Hosting costs on UK providers

Which projects actually suit each framework

The developer experience difference

My actual recommendation

Frequently Asked Questions

Is Astro faster than Next.js for production sites?

Can I host an Astro site on cheap UK hosting?

Should I use Astro or Next.js for a SaaS product?

Does Astro work with React components?

What Does Offline-First Actually Mean?

Service Workers: The Engine Room of Offline Capability

Local Storage Strategies: IndexedDB Is Where You Actually Live