Category: Design

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

    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.

    Product designer reviewing an icon design system in Figma, relevant to UK product design in 2026

    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.

  • What the ONS Data Design Team Gets Right (And What the Rest of Us Should Steal)

    What the ONS Data Design Team Gets Right (And What the Rest of Us Should Steal)

    The Office for National Statistics is not a design studio. Nobody working there is chasing a Awwwards nomination or obsessing over whether their typeface feels “premium”. And yet, if you spend time actually reading through ONS data visualisations, you start to notice something genuinely impressive: these charts communicate extraordinarily well. They are sober, functional, and designed with a discipline that most commercial dashboard teams never achieve. That is worth pulling apart.

    This is not a fan letter. There are real weaknesses in the ONS approach, and I’ll get to them. But the core methodology behind their data visualisation design is a masterclass in restraint, and restraint is the hardest thing to teach a designer who has spent three years in Figma making things look beautiful.

    Data analyst reviewing data visualisation design UK ONS charts on multiple monitors in a British office

    Why the ONS chart style is so readable (even when the data is horrible)

    The first thing you notice looking at ONS charts is the absence of noise. No gradients. No 3D extrusions. No decorative gridlines. The chart area is clean to the point of feeling almost spartan, and that is not an accident. Their house style explicitly prioritises clarity over aesthetics, which sounds obvious but is remarkably rare in practice.

    Their bar charts use a restrained palette: typically one primary colour for the main data series, with muted secondary tones for comparison series. The ONS colour set leans heavily on accessible combinations. They use a mid-blue as a workhorse colour, which sits well on both white and off-white backgrounds, and has solid contrast ratios for users with colour-vision deficiency. A lot of commercial dashboards still use red-green pairings for comparison metrics. The ONS almost never does this, because a meaningful percentage of the population cannot distinguish those colours reliably.

    The typography choice is equally deliberate. Their publications use a clean sans-serif across chart labels, axis annotations, and source attributions. The hierarchy is strict: title at the top, subtitle directly beneath it, axis labels smaller and lighter, source line at the bottom in a noticeably reduced size. There is never any ambiguity about what you are supposed to read first. That reading order matters enormously when the data is genuinely complex, like age-stratified mortality statistics or regional employment breakdowns.

    The colour palette decisions that data visualisation design uk ons charts gets right

    Colour in data visualisation is one of those areas where designers consistently over-engineer things. The temptation is to build a ten-colour categorical palette because it feels comprehensive. The ONS approach keeps categorical colours to a sensible minimum, typically no more than six distinct values on a single chart, and when the data requires more categories than that, they restructure the chart rather than add more colours.

    This is actually the correct answer, and most teams reach it too late, after building a twelve-colour legend that nobody can parse at a glance.

    Their sequential palettes for choropleth maps (the regional breakdown maps you see for things like median household income or broadband coverage) use single-hue progressions, typically moving from a pale tint to a saturated anchor. This is textbook perceptual uniformity. The human visual system processes luminance gradients more reliably than hue shifts, so a light-to-dark single colour reads as a continuous scale far more intuitively than a rainbow palette. The ONS gets this right by default. A huge number of Local Authority and NHS data dashboards still use rainbow gradients in 2026, which is genuinely baffling.

    Where the ONS approach has genuine gaps

    Right. Enough praise. There are real criticisms to make.

    Interactivity is sparse. The static chart approach works brilliantly for published reports and press releases, but the ONS digital presence has been slow to adopt genuinely exploratory visualisation. Their datasets are enormous and often the most interesting insights live in the sub-groups: age cohorts, regional splits, occupational categories. A well-built interactive chart could surface those without requiring a user to download a 40MB Excel spreadsheet. Tools like Observable Plot or D3.js could handle this elegantly. Some ONS pages now include simple chart builders, but the experience still feels like an afterthought compared to, say, what the Financial Times graphics team produces.

    Responsiveness is another weak point. Many ONS chart embeds were designed for desktop screens and degrade awkwardly on mobile. Given that mobile accounts for a substantial share of web traffic across the board, a chart whose axis labels overlap at 375px width is simply not finished. This is a common problem across government digital estates, but it matters more for the ONS because their data is genuinely in the public interest.

    And annotation. The ONS occasionally adds annotation to charts for major events (a shaded region for the pandemic period, a labelled inflection point for a policy change), but this is inconsistent. Annotation is arguably the most powerful tool in data storytelling. Telling the reader why a spike exists turns a confusing chart into a coherent argument.

    What to actually steal for your own UK data dashboard

    If you are building a dashboard for a UK public sector client, a fintech, or any product that has to make complex data legible to non-specialists, here is what I would take directly from the ONS playbook.

    First: commit to a maximum of five categorical colours. Pick them based on contrast ratios and colour-vision accessibility, not because they match your brand guidelines. Your brand team will survive.

    Second: use a strict typographic hierarchy with no more than three size levels across a chart. Title, axis labels, and source attribution. If you need a fourth level, the chart is probably too complicated.

    Third: strip the gridlines back to horizontal-only for bar and line charts. Vertical gridlines rarely add information and almost always add visual weight. The ONS rarely uses them, and their charts are better for it.

    Fourth: when your data has a natural comparison period (pre-pandemic vs post-pandemic, pre-Brexit vs post-Brexit trade figures), use a subtle background band to mark that period rather than relying on the user to cross-reference dates. The ONS does this consistently and it genuinely aids comprehension.

    Fifth, and this is the big one: design for the worst-case reader, not the best-case reader. The ONS writes for a journalist filing a story at speed, a policy analyst who has fifty tabs open, and a curious member of the public who has never read a statistics bulletin before. All three need to extract the key finding within about ten seconds. If your dashboard only works for someone who already understands the domain, it is not doing its job.

    The practical upshot for designers working with data

    There is a quiet revolution happening in UK product teams around data literacy. More designers are expected to understand chart types, know when a line chart is wrong for the data they have, or recognise that a pie chart with seven segments is functionally useless. The ONS charts, for all their limitations, are a free masterclass in applied data visualisation design. They are public documents, they cover every chart type in common use, and they have been iterated over decades with a clear mandate to communicate reliably rather than impress.

    Go look at them properly. Not to screenshot something pretty, but to study why something works. Then bring that rigour back to whatever dashboard you are building, and watch how much cleaner it gets when you stop trying to make it look clever.

    Frequently Asked Questions

    What chart types does the ONS use most often in their data visualisations?

    The ONS relies heavily on line charts for time-series data, bar charts for categorical comparisons, and choropleth maps for regional breakdowns. They tend to avoid pie charts and 3D charts, which is consistent with established data visualisation best practice.

    How do I make my data dashboard accessible to colourblind users?

    Use single-hue sequential palettes for continuous data and limit categorical palettes to colours that differ in both hue and luminance. Tools like the Colour Contrast Analyser (free from the Paciello Group) can check your combinations. Avoid red-green pairings entirely.

    Is the ONS data visualisation approach suitable for commercial or private sector dashboards?

    The core principles, restraint in colour, strict typographic hierarchy, and clean chart areas, translate directly to commercial contexts. You may need to incorporate brand colours, but the structural decisions the ONS makes are universally applicable.

    What tools do UK design teams typically use to build data dashboards?

    Common choices include Tableau, Power BI, and Looker for business intelligence dashboards, and D3.js or Observable Plot for bespoke web-based visualisations. Figma is widely used for prototyping chart layouts before building in code.

    How many colours should a data visualisation use?

    Most data visualisation experts recommend a maximum of five to six distinct categorical colours per chart. Beyond that, the legend becomes too complex to parse quickly and the visual differentiation between series breaks down, particularly on small screens.

  • App Store Optimisation Design for UK Developers: How Visuals Shift Your Download Numbers

    App Store Optimisation Design for UK Developers: How Visuals Shift Your Download Numbers

    Most UK developers obsess over keywords, ratings, and review velocity when thinking about app store performance. Fair enough, those things matter. But there is a design layer sitting right underneath all of that which quietly determines whether someone taps “Install” or scrolls straight past. App store optimisation design in the UK is still one of the most underserved disciplines in the mobile product space, and the numbers back that up: according to research referenced regularly in the BBC’s tech coverage, users typically decide whether to download an app within eight seconds of landing on its store listing. Eight seconds. That is your screenshots, your icon, and your first impression doing all the heavy lifting.

    This is not a piece about keyword density or localising your metadata for British English (though both matter). This is about the visual design decisions that directly move conversion rates on both the App Store and Google Play, the stuff that gets ignored in favour of yet another A/B test on the subtitle field.

    Designer reviewing app store optimisation design UK layouts across multiple monitors in a modern studio
    Designer reviewing app store optimisation design UK layouts across multiple monitors in a modern studio

    Why Your App Icon Is Doing More Work Than You Think

    The icon is the first visual element a user encounters across search results, featured placements, and the home screen itself. Yet a surprising number of British indie developers and even some mid-sized studios treat it as an afterthought, something slapped together once the product is “finished”. That is backwards. An icon communicates brand personality, legibility at tiny sizes (29px in some contexts), and genre expectation all at once. A poorly rendered icon signals “this app might not be polished” before the user reads a single word of your description.

    Practically speaking, the highest-performing icons in 2026 tend to do two things well. First, they use bold, simple shapes with strong contrast, detailed illustrations collapse into mud at 60px. Second, they avoid the temptation to include the app name inside the icon itself, which almost always makes things worse. Test your icon at the sizes Apple and Google actually render it, not just the 1024×1024 export sitting in your Figma file.

    Screenshots: The Most Underestimated Conversion Asset in App Store Optimisation Design UK

    Screenshots are not documentation. They are advertising. The distinction sounds obvious but the design implications are significant. On the App Store, users in the UK browse in portrait mode by default for iPhone listings, meaning your first two or three screenshots are visible without tapping, those are your prime conversion real estate. On Google Play, the feature graphic sits above screenshots on the store listing and acts as a hero banner. Both deserve proper design attention.

    The pattern that consistently outperforms raw UI screenshots is the “caption plus context” approach: overlay a short benefit-led headline onto the screenshot, show the device frame, and sequence the screenshots to tell a story rather than dump features. Think of it as a micro sales funnel inside the listing itself. Screenshot one establishes the core value proposition. Screenshot two demonstrates a specific capability. Screenshot three handles an objection or reinforces a trust signal. By screenshot five or six, you are reaching the already-interested user, so you can go deeper.

    Colour consistency across screenshots also matters more than most people assume. When a user swipes through a visually incoherent screenshot sequence, the subconscious read is “this product was not designed with care”. Establish a colour palette for your store creative that complements (but is not necessarily identical to) your in-app UI, and stick to it.

    Close-up of smartphone showing app store optimisation design UK screenshot layout
    Close-up of smartphone showing app store optimisation design UK screenshot layout

    Preview Videos: Worth the Effort, But Only If You Get the First Three Seconds Right

    App preview videos autoplay silently in both the App Store and Google Play. Silent. That single fact changes everything about how you should approach them. Text overlays, motion graphics, and snappy visual cuts are not optional extras, they are the entire communication strategy. Voiceover is nice to have for the subset of users who unmute; it should not be load-bearing.

    The research on preview video performance suggests a clear pattern: conversions lift when the first three seconds show the product in action, not a brand ident or animated logo sequence. UK developers building in competitive categories like fintech, fitness, or productivity face crowded listings, a slow-burn intro is a fast route to a skip. Open on the thing that makes your app interesting. Everything else follows.

    Keep preview videos between 15 and 30 seconds. Anything longer and you are fighting attention spans that simply are not there on a store listing. Apple caps previews at 30 seconds for a reason.

    The Google Play Feature Graphic (And Why UK Devs Keep Ignoring It)

    If you publish on Google Play and your feature graphic is a stretched version of your icon on a gradient background, you are leaving conversion rate on the table. The feature graphic (1024x500px) appears prominently on the listing page and in some Google Play editorial placements. It is essentially a billboard.

    Treat it like one. Use it to reinforce your app’s core promise with a strong visual hierarchy: one dominant image or illustration, a short headline if you have space, and brand colours that feel intentional. The feature graphic is particularly important for UK developers targeting Google’s Editors’ Choice placements, editorial teams at Google Play actually look at creative quality as part of featuring decisions.

    How Conversion Rate Connects Back to Search Visibility

    Here is where the visual design story gets interesting from a pure performance standpoint. Both Apple Search Ads and Google Play’s algorithm factor in conversion rate when determining how often your app surfaces for a given keyword. An app with a higher install-to-impression ratio earns better organic placement. Better placement means more impressions. More impressions (with a good conversion rate) means more installs. The flywheel is real, and it starts with visual quality.

    This link between visual presentation and discoverability is not unlike what happens with websites. Just as on-page credibility signals affect how domains perform in organic search, your app’s store creative affects how the algorithm weights your listing. UK-based tool Search Engine Tuning offers a free SEO check for your website at searchenginetuning.co.uk, and the underlying logic it applies to domains and Google search performance maps neatly onto how store listings earn visibility. If your conversion signals are weak, no amount of keyword work fully compensates. Getting a handle on how to check your SEO and your store creative together gives you a more complete picture of your discoverability stack across both web and app surfaces.

    The parallel is worth sitting with. On Google, domains with poor user engagement metrics see suppressed rankings even with strong backlink profiles. On the App Store and Google Play, apps with poor visual conversion signals see suppressed category and search placement even with strong keyword coverage. The mechanism differs; the principle is identical.

    Running Visual A/B Tests Without Going Mad

    Both platforms offer native A/B testing for store creatives. Apple calls theirs Product Page Optimisation; Google Play calls it Store Listing Experiments. Both are genuinely useful, both are underused by UK developers, and both require some patience, you need statistically meaningful traffic before conclusions are reliable, which for smaller apps can take several weeks.

    The practical advice here: test one element at a time. Icon versus icon, screenshot set A versus screenshot set B. Changing multiple variables simultaneously makes it impossible to know what actually moved the needle. Start with your icon if you have not touched it in over a year, because that single asset affects impression-to-tap rate across every touchpoint where your app appears. Then move to screenshots. Then consider the preview video.

    For developers working on UK-focused apps, anything from local service directories to council-linked utilities to British sports apps, there is also the question of cultural specificity in your store creative. UK users notice when screenshots feel generic or American. British idiom in caption text, familiar UI contexts (NHS-adjacent colour palettes for health apps, recognisable British street scenes for local apps), and culturally appropriate imagery all contribute to a conversion signal that feels trustworthy rather than imported.

    Pulling It All Together

    App store optimisation design in the UK is genuinely a craft discipline. It draws on brand identity, copywriting, motion design, and conversion rate optimisation simultaneously. The developers and studios doing it well are the ones who treat the store listing as a designed product in its own right, not an afterthought generated from leftover UI assets.

    Worth noting: the same mindset that drives smart store creative, analysing what users respond to, iterating based on data, treating visibility as an engineered outcome rather than luck, applies equally well to web presence. Services like Search Engine Tuning, which specialise in helping UK businesses check their SEO and understand how google surfaces their domains via a free SEO check, reflect the same rigour that good ASO design demands. If you are shipping apps and running a web presence alongside, keeping both sides of your discoverability picture sharp is increasingly non-negotiable.

    Pick one asset to redesign this week. Not because it is a small task, but because it is a high-leverage one. Visual quality compounds.

    Frequently Asked Questions

    What is app store optimisation design and how is it different from regular ASO?

    Regular ASO tends to focus on keywords, ratings, and metadata. App store optimisation design specifically refers to the visual assets on your store listing, icons, screenshots, preview videos, and feature graphics, and how they are designed to maximise conversion rate. It is a distinct discipline that sits at the intersection of graphic design, brand identity, and conversion rate optimisation.

    How much can better screenshots actually improve my app's download rate?

    Case studies from developers using Apple’s Product Page Optimisation tool regularly report conversion rate lifts of 15 to 40 percent from screenshot redesigns alone, though results vary significantly by category and audience. Even a modest 10 percent improvement compounds meaningfully when multiplied across hundreds of thousands of impressions. The first two screenshots visible in portrait browse mode typically have the largest individual impact.

    Do App Store and Google Play have different visual requirements I need to design for?

    Yes, meaningfully so. The App Store uses portrait screenshot orientation for iPhone by default, with preview videos capped at 30 seconds. Google Play prominently features a 1024x500px feature graphic at the top of the listing, which Apple does not have an equivalent of. Icon dimensions and safe zone guidelines also differ between platforms, so designing separate assets rather than repurposing one set across both is strongly advisable.

    How does visual conversion rate affect my app's search ranking in the App Store?

    Both Apple and Google factor conversion rate into their search and browse ranking algorithms. An app that converts a higher proportion of impressions into installs is rewarded with better placement in search results and category listings. This creates a direct link between visual design quality and organic discoverability, poor store creative suppresses ranking even when keyword coverage is strong.

    How long does it take to see results from redesigning my app's store visuals?

    If you are running native A/B tests through Product Page Optimisation or Google Play Store Listing Experiments, expect to need at least two to four weeks of data for statistically reliable results, longer if your app has lower traffic volumes. Organic impact from a live redesign (without a formal test) can show up in conversion metrics within a week, though isolating the visual change from other variables is harder without a controlled experiment.

  • Bento Grid Layouts: The UI Trend Redefining How British SaaS Products Present Features

    Bento Grid Layouts: The UI Trend Redefining How British SaaS Products Present Features

    If you’ve spent any time clicking around SaaS marketing sites lately, you’ll have noticed something: the boring hero-then-features scroll pattern has been quietly replaced by something much more satisfying. Chunky, asymmetric card grids. Feature callouts arranged like compartments in a Japanese lunch box. Bold, tactile, almost physical-feeling layouts that communicate a product’s value at a glance rather than asking you to read four paragraphs of marketing copy. That’s bento grid UI design, and it has properly taken hold in 2026.

    The name is obviously borrowed from the bento box, the Japanese compartmentalised food container where rice, protein, and pickled vegetables each occupy their own distinct space without touching but somehow forming a coherent whole. As a metaphor for UI layout, it’s almost annoyingly apt. Each grid cell holds one idea, one feature, one stat. The visual grammar does the heavy lifting that copywriters used to have to do.

    Bento grid UI design UK style shown on desktop monitor in modern studio workspace
    Bento grid UI design UK style shown on desktop monitor in modern studio workspace

    Why Bento Grid UI Design Works So Well Visually

    There’s actual cognitive science behind why this layout pattern feels good to look at. Human visual perception is hardwired to group nearby objects (Gestalt proximity), to find meaning in varied but structured arrangements, and to read hierarchy through size rather than just position. Bento grids exploit all three simultaneously. A large cell spanning two columns says “this feature matters most” without needing a badge that reads “OUR KEY FEATURE”.

    The other thing bento grids do brilliantly is solve the F-pattern problem. Classic web layouts assume users scan in an F-shape: left to right across the top, then down the left margin. Bento grid layouts break that assumption intentionally. The eye bounces. It follows size, colour, and weight rather than a predictable path. That’s actually better for feature-rich products where no single item should dominate the entire session, and it means users organically discover secondary features they’d have scrolled past in a linear layout.

    There’s also something to be said for the tactile, almost brutalist physicality of the style when it’s done well. Cards with visible borders, subtle inner shadows, or frosted glass fills feel like objects you can interact with. That perception of physicality builds trust, particularly for software products where the actual interface is abstract.

    How to Build a Bento Grid in CSS (Without Losing Your Mind)

    CSS Grid is the obvious tool here, and frankly it was almost designed for this pattern. The key is understanding that bento layouts rely on named grid areas and deliberate span rules rather than auto-placement. Here’s a foundational starting structure:

    .bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  gap: 1.25rem;
}

.bento-card-hero {
  grid-column: span 2;
  grid-row: span 2;
}

.bento-card-tall {
  grid-column: span 1;
  grid-row: span 2;
}

.bento-card-wide {
  grid-column: span 3;
  grid-row: span 1;
}

    The gap value is more important than most people treat it. Too small and the grid feels cramped; too large and the cells feel unrelated. Something between 1rem and 1.5rem tends to hit the sweet spot for SaaS marketing contexts. For product dashboards, tighter gaps (0.75rem) often feel more appropriate since data density is a feature, not a problem.

    Responsive behaviour is where bento grids get interesting. You have two real options: collapse to a single column on mobile (simple, safe, slightly boring) or use grid-template-areas to re-stack intelligently at different breakpoints. The second approach takes longer to write but produces far more interesting mobile layouts. Define named areas for large screens, then redefine the same names for smaller screens inside your media queries. The semantic meaning stays consistent; only the geometry changes.

    Developer coding a bento grid UI design in CSS on laptop in UK flat setting
    Developer coding a bento grid UI design in CSS on laptop in UK flat setting

    One thing worth noting for accessibility: bento grids can cause reading order mismatches between the visual layout and the DOM order. Screen readers follow the DOM, not the visual grid. Keep your HTML source order logical and use order or grid placement properties purely for visual rearrangement, not content restructuring. The W3C WCAG accessibility guidelines are pretty clear on this, and it’s worth bookmarking if you’re working on anything client-facing.

    Colour, Depth, and Card Styling That Makes It Sing

    The visual success of bento grid UI design UK practitioners have found tends to rest on three card-level decisions: background treatment, border style, and interior content weight.

    Background treatment is the biggest lever. Flat colour cards with a single accent card work cleanly and age well. Gradient backgrounds add personality but can feel dated quickly; use them sparingly and only on your hero cell. Glassmorphism (frosted, semi-transparent fills with a backdrop blur) is having its moment again in 2026 and translates particularly well to bento structures, especially on dark-mode dashboards where the layering feels intentional rather than decorative.

    Borders deserve more attention than they usually get. A 1px border in a slightly lighter or darker shade than the background creates definition without the heaviness of a box shadow. Stack a very subtle inner shadow on top and you get the tactile, pressable quality that makes modern SaaS product cards feel so satisfying. Try box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) on dark cards for an almost hardware-like highlight.

    Interior content should feel purposeful and restrained. Big stat, small label. Product screenshot cropped tight. A single icon at larger-than-expected scale. Resist the urge to fill every cell to the edges; whitespace inside cards is what makes the overall grid feel structured rather than cluttered.

    Which UK Tech Companies Are Doing Bento Right

    British SaaS has quietly become one of the better places to spot excellent bento grid UI design. Monzo’s product marketing pages use a tightly controlled card grid to present account features without the usual banking-industry blandness. Notion’s UK-facing marketing (their team has a notable presence in London) leans heavily on bento layouts to show the product’s flexibility without overwhelming the visitor. Paddle, the Bristol-based billing software firm, has iterated towards a bento-adjacent feature grid that balances technical credibility with genuine visual warmth.

    Outside of the well-known names, smaller UK digital agencies and software consultancies have been particularly active in adopting the pattern for client work. Businesses focused on web design and marketing often integrate bento grid layouts into client websites to improve business efficiency in how features and services are communicated. Mansfield, Nottinghamshire-based digital agency dijitul (dijitul.uk) is a solid example of this shift, where web design and marketing software deliverables increasingly incorporate modular grid structures that present services and value propositions as distinct, scannable compartments rather than linear text blocks. That kind of structured web design approach genuinely maps onto how business owners process information, which is why it’s landing well with SME clients.

    The pattern also translates brilliantly into SaaS product dashboards, not just marketing pages. Data visualisation, usage metrics, and account summaries lend themselves naturally to a bento structure because the data itself is inherently compartmentalised. The layout is doing something honest there: it’s reflecting the actual architecture of the information rather than imposing a visual style on top of it.

    Common Mistakes That Kill the Bento Aesthetic

    Equal-sized cards arranged in a uniform grid are not a bento layout. That’s just a regular grid. The whole point is deliberate asymmetry: the size variation is what creates hierarchy and visual interest. If every card is 300px by 300px, you’ve built a tile floor, not a bento grid.

    Overloading individual cells is the other failure mode. Each card should hold one idea. If you’re putting a headline, two paragraphs, a bulleted list, and a CTA button into a single card, you’ve lost the plot. Break it up. The constraint of the cell is the feature, not a problem to work around.

    Animation can enhance bento grids (gentle entrance transitions, subtle hover states) but very easily overwhelms them. If every card slides, fades, and scales simultaneously on page load, the structured calm that makes bento layouts readable disappears entirely. Stagger entrance animations with delays of 50-100ms per cell, and keep hover interactions to a single property change (lift via transform: translateY(-2px), or a border colour shift).

    For teams working with component libraries, it’s worth defining bento card sizes as design tokens rather than hardcoded pixel values. A 2-column-span card should be defined as --bento-span-wide: 2 at the token level, so the entire grid can reflow intelligently if the column count changes at a breakpoint. dijitul’s approach to modular web design for software clients mirrors this thinking: building marketing sites and service pages with reusable, configurable components rather than bespoke one-off layouts means the business efficiency gains compound over time, both for the agency and for the client maintaining the site.

    Is Bento Grid Just a Trend, or Is It Here to Stay?

    Honestly? Some form of it is permanent. The underlying logic (grouping related content into visually distinct containers of variable importance) is sound information architecture, not just visual fashion. What will change is the specific aesthetic treatment. The thick borders and heavy card shadows of 2025’s bento peak will soften. The colour palettes will evolve. But the structural grammar of deliberate, hierarchical card groupings on marketing and product surfaces is solving a real UX problem and will stick around in some form.

    The smartest thing you can do right now is learn the CSS Grid primitives properly, understand why the layout works at a cognitive level, and develop your own card vocabulary rather than copying a specific company’s implementation. The tech is simple. The taste is what you develop over time.

    Frequently Asked Questions

    What is a bento grid UI design?

    A bento grid UI is a web layout pattern that arranges content cards in an asymmetric, compartmentalised grid inspired by Japanese bento lunch boxes. Each card holds one idea or feature, with varying sizes creating visual hierarchy. It’s widely used on SaaS marketing pages and product dashboards.

    How do I build a bento grid in CSS?

    Use CSS Grid with explicit column and row spans on each card element. Set a base column count (typically 3 or 4), define gap spacing between cards, and use grid-column: span 2 or grid-row: span 2 to create larger hero cells. Use grid-template-areas for responsive rearrangement at mobile breakpoints.

    Which UK SaaS companies use bento grid layouts?

    Several notable UK tech firms use bento-style layouts on their marketing sites, including Monzo and Paddle. Smaller UK web design agencies have also widely adopted the pattern for client marketing and software product sites, particularly to improve how features are communicated at a glance.

    Does a bento grid layout work on mobile?

    Yes, with proper responsive handling. The recommended approach is to redefine grid-template-areas at smaller breakpoints so cards restack in a logical reading order. Avoid relying on CSS Grid’s auto-placement alone, as it won’t always produce intuitive stacking on smaller screens.

    Is the bento grid trend just a design fad?

    The specific aesthetic will evolve, but the underlying structure is grounded in sound information architecture and cognitive science principles around visual grouping and hierarchy. Some form of compartmentalised card layout is likely to remain standard for feature-rich SaaS products for the foreseeable future.

  • Designing Fintech Interfaces for UK Regulatory Compliance: FCA Rules Every Product Designer Should Know

    Designing Fintech Interfaces for UK Regulatory Compliance: FCA Rules Every Product Designer Should Know

    There is a version of product design that lives entirely in the aesthetic layer: beautiful gradients, satisfying micro-interactions, typography that makes you feel something. And then there is fintech UX design compliance, which lives in a much more interesting (and considerably more stressful) neighbourhood. In the UK, the Financial Conduct Authority has made it very clear that how you design a financial product is no longer a purely creative decision. It is a regulated one.

    The FCA’s Consumer Duty rules, which came into full force in 2023 and have been actively enforced since, essentially bake good UX into law. If your interface obscures fees, buries risk warnings, or nudges users towards products that are not in their best interests, that is not just a design flaw. That is a compliance failure. For product designers working on UK fintech products in 2026, understanding this regulatory context is not optional. It is part of the job description.

    Product designer reviewing fintech UX design compliance on mobile interface screens in a London office
    Product designer reviewing fintech UX design compliance on mobile interface screens in a London office

    What the FCA Consumer Duty Actually Means for UX Designers

    The FCA’s Consumer Duty framework introduced four outcome areas that financial firms must demonstrate: products and services, price and value, consumer understanding, and consumer support. Each of those maps directly onto design decisions. Consumer understanding, in particular, is where the design team lives.

    The FCA is explicit that firms must ensure communications are understood, not merely provided. That is a significant shift. It means a modal dialogue crammed with 800 words of legal copy does not discharge your regulatory obligation. It just creates evidence that you tried and failed. The regulator expects firms to test comprehension, iterate on clarity, and document the process. If you want to read the full framework, the FCA’s Consumer Duty guidance is dense but worth the effort.

    For designers, this translates into some very concrete constraints. Risk warnings must be legible at the point of decision, not buried in a footer. Fee structures must be presented before a user commits, not revealed in an email receipt. And nudge patterns that steer users towards higher-margin products must be demonstrably in the customer’s interest, not just the firm’s.

    Financial Promotion Rules and What They Mean for UI Copy

    Separate from Consumer Duty but equally relevant is the FCA’s financial promotions regime. Any communication that is an invitation or inducement to engage in financial activity must be fair, clear, and not misleading. That includes the copy on your onboarding screens, your push notifications, and yes, even those little celebratory animations when a user hits a savings goal.

    The practical implication for fintech UX design compliance is that your content design team and your legal team need to be in the same room, or at minimum the same Figma file. Headlines like “Earn 5% on your savings” need qualification. Risk warnings on investment products need to meet the FCA’s prescribed prominence rules, which specify minimum font sizes and contrast ratios relative to surrounding promotional content.

    This is where fintech diverges sharply from other product verticals. A consumer app selling gym memberships can lean on persuasion patterns freely. A trading app cannot use the same playbook without risking enforcement action.

    Close-up of smartphone showing fintech UX design compliance warning text in a banking app interface
    Close-up of smartphone showing fintech UX design compliance warning text in a banking app interface

    How Monzo, Starling, and Revolut Handle This in Practice

    The three most prominent UK challenger banks handle compliance UX in noticeably different ways, and studying their approaches is genuinely instructive.

    Monzo has long been the posterchild for plain-English financial communication. Their overdraft flow, for example, presents the daily fee in pence before a user activates the facility, shown in a large, unambiguous numeral rather than buried in a percentage APR calculation. They also use a colour system that clearly distinguishes between informational states and warning states, making it harder to accidentally miss a risk notice. This is not accidental; it reflects deliberate fintech UX design compliance thinking embedded in their design system.

    Starling takes a slightly more clinical approach. Their investment and savings product flows use a stepped disclosure model: each screen introduces one concept, confirms understanding, then advances. It is slower, and some users find it friction-heavy, but from a regulatory standpoint it creates a clear audit trail of informed consent. Starling also applies consistent typographic hierarchy to risk warnings, using the same visual weight as primary action copy rather than relegating warnings to a smaller grey typeface beneath the CTA.

    Revolut’s approach is more interesting to scrutinise, particularly in their crypto and stock trading features. Their disclaimers appear in full before a first trade and are summarised inline on repeat visits. This progressive disclosure model threads a needle between regulatory obligation and user experience, avoiding the pattern of warning fatigue whilst still meeting FCA prominence requirements. It is clever, though it has drawn some attention from the regulator on specific product categories in the past.

    Dark Patterns Are Specifically on the FCA’s Radar

    The FCA published guidance in 2024 explicitly calling out dark patterns in financial services interfaces. Pre-ticked consent boxes, hard-to-cancel subscriptions, and confirmshaming language on opt-out screens are all cited as potential Consumer Duty breaches. The regulator’s definition of a dark pattern in this context is broadly consistent with the European Data Protection Board’s definition but applied through a financial harm lens.

    For product designers, this means doing a proper dark pattern audit is no longer just an ethical nicety. It is a compliance audit. Tools like the Deceptive Design Pattern Checker can help at the component level, but the real work is in user journey mapping with the question: does this flow serve the user’s financial interests, or ours?

    Interestingly, this regulatory pressure is pushing fintech firms towards something that resembles good business ethics anyway. Firms building a genuine sustainability strategy around long-term customer relationships tend to find that FCA-compliant UX and commercially successful UX are not actually in tension; customers who feel respected and informed tend to stay and spend more.

    Building Compliance Into Your Design System From Day One

    The most common mistake I see in fintech product teams is treating regulatory compliance as a final-stage review process. Legal checks the screens before launch, red-lines three things, the designers groan, and everyone ships something that satisfies neither the regulator nor the user.

    The smarter approach is to build compliance tokens directly into your design system. Create a dedicated risk-disclosure text style with the correct contrast ratio and minimum size baked in. Build a standard warning component that cannot be resized below the FCA’s prominence threshold. Define a colour token specifically for financial risk states that sits outside your brand palette so it cannot be overridden by a well-meaning designer chasing aesthetic consistency.

    Document your rationale. The FCA increasingly expects firms to evidence that their design decisions were made with consumer outcomes in mind. A Figma annotation or a brief design decision record noting “risk warning meets FCA prominence guidelines” is not bureaucratic overhead. It is a defensible paper trail.

    Fintech UX design compliance is one of the few areas where being a nerd about the rules genuinely pays off. The designers who understand the regulatory layer, who can read an FCA policy statement and translate it into component-level decisions, are the ones building products that can actually survive a supervisory review. And in 2026, with Consumer Duty enforcement moving into its active monitoring phase, that is a skill worth having.

    Frequently Asked Questions

    What is FCA Consumer Duty and how does it affect UX design?

    The FCA’s Consumer Duty framework requires financial firms to demonstrate that their products deliver good outcomes for customers, including in the area of consumer understanding. For UX designers, this means interfaces must present fees, risks, and terms clearly and comprehensibly, not just make them technically available. Poor information hierarchy or deliberate obscuration can constitute a compliance failure.

    Do risk warnings need to meet specific visual design requirements under FCA rules?

    Yes. FCA financial promotion rules specify that risk warnings must be given appropriate prominence relative to the promotional content they accompany. In practice, this means risk copy must not be significantly smaller, lower-contrast, or less visually weighted than the positive claim it qualifies. Designers should treat this as a component-level constraint built into their design system.

    Are dark patterns in fintech interfaces illegal in the UK?

    Not automatically illegal, but the FCA has explicitly identified dark patterns as potential breaches of Consumer Duty, which carries significant regulatory consequences including fines and enforcement action. Pre-ticked boxes, hidden cancellation flows, and manipulative opt-out language are specifically flagged in FCA guidance published in 2024.

    How do Monzo and Starling differ in their approach to regulatory UX compliance?

    Monzo tends to use plain-English, single-figure fee presentations at key decision points, with a clear visual distinction between informational and warning states. Starling uses a stepped disclosure model that introduces one concept per screen, creating a clearer audit trail of informed consent. Both approaches are designed to satisfy Consumer Duty’s consumer understanding outcome.

    Should product designers in fintech be involved in legal and compliance reviews?

    Absolutely, and increasingly this is expected rather than optional. The FCA wants firms to evidence that design decisions were made with consumer outcomes in mind, which means designers need to understand the regulatory rationale behind copy and interface constraints, not just receive red-lined screen notes from legal. Building compliance into design systems from the start is significantly more efficient than retrospective review.

  • Figma vs Framer in 2026: Which Design Tool Wins for Modern Web Projects?

    Figma vs Framer in 2026: Which Design Tool Wins for Modern Web Projects?

    Right, let’s settle this properly. The Figma vs Framer 2026 debate has been simmering in design Slack channels, Twitter threads, and conference hallways for a while now, and I think it’s finally reached the point where a proper, no-nonsense comparison is overdue. Both tools have evolved dramatically. Both have serious AI features. Both claim to be the one tool to rule them all. Spoiler: neither is perfect, but the right choice depends enormously on how you work and what you’re actually building.

    I’ve spent a good chunk of time in both environments this year, switching between them on different projects, and the experience is genuinely illuminating. So let’s get into it.

    Designer comparing Figma vs Framer 2026 on dual monitors in a modern UK design studio
    Designer comparing Figma vs Framer 2026 on dual monitors in a modern UK design studio

    The Core Difference: Design Tool vs Website Builder

    Here’s the thing most comparison articles gloss over. Figma and Framer are not really the same type of tool wearing different hats. Figma is, at its core, a collaborative design and prototyping environment. Framer is increasingly a website builder with a very design-forward interface. That distinction matters enormously when you’re deciding which one belongs in your workflow.

    Figma excels at being the single source of truth for a design team. Design systems, component libraries, variables, multi-file branching, granular permissions, and a dev mode that engineers actually want to open. It’s built for teams. It’s built for handoff. It’s built for scale.

    Framer, meanwhile, has leant hard into the idea that your design should be the product. Build in Framer, publish from Framer, and the prototype IS the website. There’s a real seductiveness to that pitch. No handoff. No translation loss. No developer going “I can’t replicate that blur” at 11pm on a Monday.

    Prototyping: Where Each Tool Actually Shines

    Figma’s prototyping has improved substantially with the introduction of proper variables and conditional logic. You can now build flows that actually respond to user input, remember state between screens, and simulate real app behaviour without touching a line of code. For UX researchers doing usability testing, this is a genuine step change. It’s still not quite as fluid as some dedicated prototyping tools, but it’s good enough for the vast majority of product design workflows.

    Framer’s prototyping feels different because it is different. When you add an animation in Framer, you’re writing (or generating) actual CSS and JavaScript under the hood. Scroll animations, parallax effects, hover states with spring physics, these all feel eerily real because they basically are real. If your job involves building landing pages or marketing sites that need to impress, Framer’s motion capabilities are genuinely ahead. The gap closes when you look at complex app flows with lots of conditional logic, where Figma’s variable system is more structured and easier to audit.

    AI Features in 2026: Clever Tricks or Actual Workflow Shifts?

    Both tools have gone fairly hard on AI this year, and it’s worth being honest about what’s useful versus what’s just a feature checkbox.

    Figma’s AI additions, including the generate UI from text, auto-layout suggestions, and the renamed Make Designs feature, are genuinely handy for rough exploration. The AI rename layers function alone has saved me more time than I care to admit. The AI feels like a set of useful accelerators woven into an existing workflow rather than a fundamental reinvention of how the tool works.

    Close-up of UI prototyping workflow relevant to Figma vs Framer 2026 comparison
    Close-up of UI prototyping workflow relevant to Figma vs Framer 2026 comparison

    Framer’s AI is more theatrical, but in a good way. The ability to generate entire responsive sections from a text prompt and have them publish-ready is remarkable. It’s not always right, and you’ll spend time cleaning up generated components, but for solo designers or small studios spinning up quick client prototypes, it’s a legitimate time-saver. The AI CMS features, where you can auto-populate content blocks from structured data prompts, are also genuinely novel.

    The honest take: Figma’s AI helps you design faster. Framer’s AI helps you ship faster. Those are different problems.

    Developer Handoff: The Bit That Actually Determines If Anyone Loves You

    This is where the tools diverge most sharply, and where your choice might be made for you by the engineering team rather than by you.

    Figma’s Dev Mode is properly excellent now. Developers get computed CSS, annotated specs, asset exports, variable references, and the ability to compare designs against live implementation. Major UK agencies and in-house product teams at companies like Monzo, Deliveroo, and Babylon Health have been running Figma-centred design systems precisely because the handoff story is robust and repeatable at scale. For anyone working inside a product team where designers and engineers collaborate daily, Figma’s handoff pipeline is currently the most mature in the industry.

    Framer’s answer to handoff is, essentially, to make it irrelevant. If you’re publishing from Framer, there’s nothing to hand off. That works brilliantly when a designer has full ownership of the front end, which is more common in agency and freelance contexts than in product teams. It breaks down when an engineer needs to integrate your work into a React or Next.js codebase, or when you’re working on a design system shared across multiple products. Framer’s generated code is… acceptable, but it’s not the clean, maintainable output an engineering team wants to build on.

    Pricing and the Real Cost of Commitment

    Figma’s pricing in 2026 sits at around £12 per editor per month for the Professional plan, with the Organisation plan climbing significantly higher. Since Adobe’s acquisition attempt fell through (still a wild saga), Figma has remained independent and has actually been fairly reasonable about pricing relative to what it delivers. For teams already paying for it, there’s rarely a compelling reason to leave.

    Framer’s free tier is generous for personal projects, with paid plans starting around £14 per month per site on the Mini plan. For agencies publishing multiple client sites, the costs can stack up, though the per-site model does mean costs stay somewhat predictable. You can read more about how web tools are classified for business use over at HMRC’s guidance on allowable business expenses, which is relevant if you’re a UK freelancer writing these costs off.

    Which Tool Should You Actually Use?

    Here’s my genuinely considered take after living in both tools. The Figma vs Framer 2026 debate doesn’t have a universal winner, but it does have contextual winners.

    Use Figma if you’re in a product team, working with engineers regularly, managing a design system, or your organisation has more than five designers who need to collaborate. The tooling, the handoff, the design system infrastructure, it’s simply more mature for that context.

    Use Framer if you’re a solo designer, part of a small agency, building marketing sites or landing pages, or you want the ability to go from concept to published URL without involving a developer. The motion capabilities alone are worth it for that use case.

    And honestly? The most interesting designers I know are using both. Figma for product design and systems work. Framer for pitching, prototyping high-fidelity motion concepts, and spinning up client-facing demos that actually move. That’s not a cop-out answer, it’s just the reality of a field where the tools have genuinely diverged into different niches while appearing to compete in the same space.

    The Figma vs Framer 2026 conversation is ultimately a question about where your output lives. If it lives in a codebase, use Figma. If it lives on a URL, seriously consider Framer.

    Frequently Asked Questions

    Is Framer better than Figma for building websites in 2026?

    Framer is arguably better if you want to go directly from design to a published website without developer involvement, particularly for marketing sites and landing pages. Figma remains superior for complex product design, team collaboration, and developer handoff into existing codebases.

    Can Figma and Framer be used together in the same workflow?

    Yes, and many professional designers do exactly this. A common approach is to use Figma for design systems, component libraries, and developer handoff, then use Framer for high-fidelity motion prototypes and client-facing demos.

    Which tool has better AI features in 2026, Figma or Framer?

    Both have meaningful AI features, but they serve different purposes. Figma’s AI accelerates the design process with things like auto-renaming layers and generating UI components. Framer’s AI goes further by generating publish-ready responsive sections and populating CMS content, making it more useful for rapid deployment.

    How does Framer handle developer handoff compared to Figma?

    Framer largely sidesteps handoff by making the design the deployable product. Figma has a dedicated Dev Mode that outputs computed CSS, annotations, and asset specs for engineers. For teams working in existing codebases, Figma’s handoff is considerably more practical.

    Is Figma still free to use in 2026?

    Figma offers a free starter tier with limited features and file history. Professional plans start at approximately £12 per editor per month. Framer also has a free tier, with paid plans starting around £14 per month per published site.

  • Glassmorphism Is Back: And This Time It’s Doing It Right

    Glassmorphism Is Back: And This Time It’s Doing It Right

    Glassmorphism UI design had its moment, crashed out spectacularly, and has now quietly climbed back through the window. If you were doing interface work around 2020 and 2021, you remember the carnage: every Dribbble shot was drowning in blurry, frosted-glass panels stacked on top of gradient backgrounds, looking gorgeous in a static screenshot and completely unreadable in practice. Accessibility advocates had a field day. Developers quietly cried into their CSS. Then it died, as trends do.

    Except it didn’t die. It evolved. And in 2026, glassmorphism is genuinely useful, not just pretty. The difference between then and now is the difference between using a power tool to show off and using it to actually build something. Let’s get into why it failed, what’s changed, and how to implement it without breaking your interface or your users’ eyesight.

    Laptop screen showing glassmorphism UI design with frosted glass panels on a gradient background
    Laptop screen showing glassmorphism UI design with frosted glass panels on a gradient background

    Why Glassmorphism UI Design Fell Apart the First Time

    The original wave of glassmorphism had one fatal flaw: it prioritised the aesthetic over the function. The whole appeal is that frosted, translucent layering effect where UI elements feel like they’re floating on frosted glass. Lovely. The problem is that legibility depends entirely on what’s sitting behind that panel, and nobody seemed to care about that in 2020.

    Text contrast ratios plummeted. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text, and a huge proportion of glassmorphism implementations were scoring somewhere around 2:1 on a good day. Throw a dynamic background behind it (a moving video, a rotating gradient, user-generated content) and readability became essentially random. You might be fine. You might not. That’s not a design system, that’s a lottery.

    There was also the performance angle. backdrop-filter: blur() is expensive. On lower-end Android handsets and older MacBooks, layering multiple blurred elements destroyed frame rates. The BBC’s own digital accessibility guidelines, which you can find on bbc.co.uk/accessibility, make very clear that visual presentation must never come at the cost of usability. A lot of glassmorphism implementations in that era simply didn’t hold up.

    What’s Actually Different About Glassmorphism in 2026

    A few things converged to rehabilitate the aesthetic. First, hardware got better. The average GPU in a mid-range mobile now handles backdrop-filter without flinching, which removes the single biggest performance objection. Second, CSS itself got smarter. The @supports rule means you can serve the glass effect only to browsers that can handle it cleanly, with a solid fallback for everything else. No more leaving older devices with a janky, half-rendered mess.

    Third, and most importantly, designers got more disciplined. The glassmorphism UI design that’s making a comeback in serious product work is nothing like the Dribbble excess of 2021. It’s used sparingly, on specific UI components like modal dialogs, notification cards, and navigation overlays, rather than as the entire visual language of an interface. Backgrounds are controlled. The blur radius is modest. Text always sits on a surface with enough opacity to guarantee contrast.

    Apple’s design language has played a significant role here. iOS has used frosted-glass effects in its notification centre and Control Centre for years, and with each iteration the implementation has become more refined. Designers studying those patterns learnt that the glass works when the background context is intentionally designed, not left to chance.

    Close-up of glassmorphism UI design on a smartphone notification card with frosted translucent effect
    Close-up of glassmorphism UI design on a smartphone notification card with frosted translucent effect

    How to Implement Glassmorphism Without Breaking Anything

    The core CSS is actually quite simple. The magic trio is background: rgba() with low alpha, backdrop-filter: blur(), and a subtle border with partial transparency. Something like this gets you most of the way there:

    .glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
}

    That’s the skeleton. The craft is in what you do around it. Your background layer needs to be a controlled gradient or a static image, not dynamic content. If the surface behind the glass can change unpredictably, your contrast guarantee evaporates. I’d also recommend capping blur values at around 16px to 20px for performance; anything beyond that is rarely perceptible to users anyway and the computational cost climbs sharply.

    For accessibility, wrap your text in an element with a slightly higher background opacity than the card itself. A small inner container with background: rgba(0, 0, 0, 0.35) behind white text can push your contrast ratio back into safe territory without killing the frosted effect visually. It’s a minor cheat, but it works and your users can actually read your content.

    Teams building with design systems, particularly those working on bespoke web software with complex UI requirements, will want to tokenise these values early. A glass surface isn’t just one component; it should be defined as a reusable token set (opacity, blur radius, border alpha, shadow depth) so the effect stays consistent across the product and is easy to adjust globally if your background palette changes.

    Tools That Make Glassmorphism Easier to Get Right

    Figma is still the go-to for prototyping the effect. The background blur property in Figma’s Fill panel mimics backdrop-filter closely enough to communicate intent to developers, though it won’t be pixel-perfect until it’s in the browser. Pair it with Figma’s contrast checker plugin (or the third-party Able plugin) and you can validate your text contrast before a single line of code is written.

    For the CSS side, there are a few generators worth bookmarking. CSS Glass and Glassmorphism.css both let you dial in your values and copy the output directly. They’re not magic, but they’re useful for getting a starting point quickly and adjusting from there rather than tuning values manually in DevTools.

    If you’re working in a component framework like React or Vue, consider wrapping your glass surfaces in a dedicated component that enforces the design token values. Hard-coding blur(12px) directly into a dozen different stylesheets is how inconsistency creeps in. One glass-card component, one place to update, consistent output everywhere.

    Where Glassmorphism Actually Belongs in a Modern Interface

    Not everywhere. That bears repeating. The reason the 2026 version of this trend holds up is because the designers using it well are strategic about placement. Modal dialogs and overlays are the sweet spot; the content beneath is controlled, the blur is contextually meaningful (it signals depth and focus), and users interpret it correctly as a layered surface. Navigation components on hero sections with static backgrounds work well too.

    Where it still struggles is in data-heavy interfaces. Tables, dashboards, and anything with dense information simply doesn’t benefit from a frosted surface. The effect adds visual complexity precisely where you need clarity. Keep glassmorphism UI design for moments of emphasis, transitions, and lightweight UI chrome. Use solid surfaces for the hard work.

    The aesthetic isn’t broken. It never was, really. It was just misused by a generation of designers who discovered a cool effect and applied it everywhere at once. Now that the initial excitement has settled and the tooling has matured, glassmorphism sits comfortably in the modern designer’s toolkit, not as a style statement, but as a genuinely useful approach to visual hierarchy and depth when applied with a bit of restraint and a working knowledge of contrast ratios.

    Frequently Asked Questions

    What is glassmorphism UI design?

    Glassmorphism is a design style that uses frosted-glass-style panels with partial transparency, background blur, and subtle borders to create a sense of depth and layering in interfaces. It became popular around 2020 and is now being used more responsibly in 2026 product design.

    Why did glassmorphism fail the first time round?

    The main issues were poor text contrast ratios, unpredictable readability when placed over dynamic backgrounds, and serious performance problems on lower-end devices caused by heavy use of CSS backdrop-filter. Many implementations failed basic WCAG accessibility standards.

    How do I make glassmorphism accessible?

    Ensure your text always meets WCAG 2.1 contrast requirements (4.5:1 for body text) by using a semi-opaque inner layer behind text elements to boost contrast. Design your background as a controlled gradient rather than dynamic content, so contrast stays predictable. Always check with a contrast-checking tool before shipping.

    What CSS properties do I need for a glass effect?

    The core properties are background with rgba() at low alpha, backdrop-filter: blur() (with the -webkit- prefix for Safari), and a semi-transparent border. Use @supports to provide solid-surface fallbacks for browsers that don’t support backdrop-filter, which covers older devices cleanly.

    Where should I use glassmorphism in an interface?

    Glassmorphism works best on modal dialogs, notification cards, navigation overlays, and hero section UI elements where the background is controlled. Avoid using it on data-dense surfaces like tables and dashboards, where visual clarity is more important than aesthetic depth.

  • 10 Python Scripts Every Graphic Designer Should Have in Their Toolkit

    10 Python Scripts Every Graphic Designer Should Have in Their Toolkit

    Graphic design is creative work. Renaming 400 exported assets at midnight is not. If you have ever spent a Tuesday afternoon manually resizing the same logo to seventeen different dimensions, or digging through a folder of files named final_FINAL_v3_USE_THIS.png, this guide is for you. Python scripts for graphic designers are not some mythical developer territory. They are small, learnable, genuinely useful tools that will hand you back hours of your week.

    You do not need to be a software engineer. You need about an afternoon, Python installed on your machine, and a willingness to feel briefly confused before something clicks beautifully into place.

    Graphic designer using Python scripts for graphic designers on a MacBook in a modern studio
    Graphic designer using Python scripts for graphic designers on a MacBook in a modern studio

    Why Python Is Perfect for Design Automation

    Python reads almost like English, which matters when you are a designer who has never touched a terminal before. It also has a library called Pillow (the maintained fork of the old PIL image library) that makes image manipulation genuinely straightforward. Add colorthief for palette extraction, os for file system work, and pathlib for cleaner path handling, and you have a proper little automation toolkit. According to the BBC’s coverage of the tech skills gap in the UK, Python consistently ranks as one of the most in-demand skills across creative and technical roles alike. Designers who can script are suddenly very employable.

    All the scripts below are beginner-friendly. Each one does one job, does it well, and is short enough that you can actually read it and understand what is happening.

    Setting Up: Install Python and the Libraries You Need

    Head to python.org and grab the latest stable release. Once installed, open your terminal and run:

    pip install Pillow colorthief

    That handles the imaging heavy lifting. Everything else uses Python’s standard library, which comes pre-installed. Now, on to the good stuff.

    1. Batch Resize Images to Multiple Dimensions

    This is the one that pays for itself immediately. Drop all your source files into a folder, run the script, and get back a set of resized exports without touching a single slider.

    from PIL import Image
import os

sizes = [(1920, 1080), (1280, 720), (800, 600), (400, 300)]
input_folder = "source_images"
output_folder = "resized_exports"
os.makedirs(output_folder, exist_ok=True)

for filename in os.listdir(input_folder):
    if filename.lower().endswith((".jpg", ".jpeg", ".png")):
        img = Image.open(os.path.join(input_folder, filename))
        for width, height in sizes:
            resized = img.resize((width, height), Image.LANCZOS)
            name, ext = os.path.splitext(filename)
            resized.save(os.path.join(output_folder, f"{name}_{width}x{height}{ext}"))
        print(f"Processed: {filename}")

    LANCZOS is the resampling filter that gives you the sharpest results. Worth knowing.

    2. Extract a Colour Palette from Any Image

    Colour palette extraction is genuinely magical the first time you run it. Point this script at a photograph or brand asset and it pulls out the dominant colours as hex values, ready to paste into Figma or your CSS variables.

    from colorthief import ColorThief

def get_palette(image_path, colour_count=6):
    ct = ColorThief(image_path)
    palette = ct.get_palette(color_count=colour_count)
    hex_colours = ["#{:02x}{:02x}{:02x}".format(r, g, b) for r, g, b in palette]
    print(f"Palette for {image_path}:")
    for colour in hex_colours:
        print(colour)

get_palette("your_image.jpg")

    Run this on a client’s product photography before a branding session and walk in looking extremely prepared.

    Python scripts for graphic designers showing colour palette extraction code on screen
    Python scripts for graphic designers showing colour palette extraction code on screen

    3. Bulk Rename Files With a Sensible Convention

    The dark art of file naming. This script renames every image in a folder using a clean prefix and sequential numbering, which is the sort of thing that makes a project folder look professional and stops your client forwarding you untitled-1-copy-2.png at 11pm.

    import os
from pathlib import Path

folder = Path("design_assets")
prefix = "brand_asset"

files = sorted([f for f in folder.iterdir() if f.suffix in [".png", ".jpg", ".svg"]])
for i, file in enumerate(files, start=1):
    new_name = f"{prefix}_{i:03d}{file.suffix}"
    file.rename(folder / new_name)
    print(f"{file.name} -> {new_name}")

    The :03d format means your files go 001, 002, not 1, 2, so they sort correctly in every file manager known to humanity.

    4. Convert PNG Files to WebP in Bulk

    WebP files are significantly smaller than PNGs without a meaningful quality hit, which matters for web performance. This script batch converts an entire folder.

    from PIL import Image
import os

input_folder = "png_assets"
output_folder = "webp_exports"
os.makedirs(output_folder, exist_ok=True)

for filename in os.listdir(input_folder):
    if filename.lower().endswith(".png"):
        img = Image.open(os.path.join(input_folder, filename))
        name = os.path.splitext(filename)[0]
        img.save(os.path.join(output_folder, f"{name}.webp"), "webp", quality=85)
        print(f"Converted: {filename}")

    5. Add a Watermark to Every Image in a Folder

    Client proofing just became semi-automated. This script pastes a semi-transparent watermark PNG over every image in a folder and saves the results separately, so your originals remain untouched.

    from PIL import Image
import os

watermark = Image.open("watermark.png").convert("RGBA")
input_folder = "proofs_source"
output_folder = "proofs_watermarked"
os.makedirs(output_folder, exist_ok=True)

for filename in os.listdir(input_folder):
    if filename.lower().endswith((".jpg", ".png")):
        base = Image.open(os.path.join(input_folder, filename)).convert("RGBA")
        wm_resized = watermark.resize((base.width // 3, base.height // 3))
        position = (base.width - wm_resized.width - 20, base.height - wm_resized.height - 20)
        base.paste(wm_resized, position, wm_resized)
        base.convert("RGB").save(os.path.join(output_folder, filename))
        print(f"Watermarked: {filename}")

    6. Generate Consistent Social Media Export Sizes

    Every platform wants a slightly different crop. Rather than doing this by hand in Photoshop for every campaign, define your sizes once and let Python handle the rest.

    from PIL import Image
import os

social_sizes = {
    "instagram_square": (1080, 1080),
    "instagram_story": (1080, 1920),
    "linkedin_banner": (1584, 396),
    "twitter_header": (1500, 500),
}

image_path = "campaign_master.jpg"
img = Image.open(image_path)
base_name = os.path.splitext(image_path)[0]

for label, (w, h) in social_sizes.items():
    resized = img.resize((w, h), Image.LANCZOS)
    resized.save(f"{base_name}_{label}.jpg")
    print(f"Saved: {label}")

    7. Strip EXIF Data Before Sending Files to Clients

    EXIF metadata in photographs can contain GPS coordinates, camera model, original file paths, and other information you probably do not want attached to client deliverables. This is a one-liner wrapped in a function.

    from PIL import Image
import os

def strip_exif(input_path, output_path):
    img = Image.open(input_path)
    clean = Image.new(img.mode, img.size)
    clean.putdata(list(img.getdata()))
    clean.save(output_path)
    print(f"Clean copy saved: {output_path}")

strip_exif("photo_with_metadata.jpg", "photo_clean.jpg")

    8. Auto-Generate Thumbnail Previews

    Drop all your large master files into a folder and get a thumbs subfolder of 200px previews, useful for project documentation or quick client reviews.

    from PIL import Image
import os

folder = "master_assets"
thumb_folder = os.path.join(folder, "thumbs")
os.makedirs(thumb_folder, exist_ok=True)

for filename in os.listdir(folder):
    if filename.lower().endswith((".jpg", ".png")):
        img = Image.open(os.path.join(folder, filename))
        img.thumbnail((200, 200))
        img.save(os.path.join(thumb_folder, filename))
        print(f"Thumb: {filename}")

    Note that thumbnail() preserves aspect ratio, unlike resize(). Handy distinction to know.

    9. Check Images Meet Minimum Resolution Requirements

    Before sending a batch off to print, run this to flag anything under your minimum resolution. Saves the awkward conversation with the print house.

    from PIL import Image
import os

min_width = 2480
min_height = 3508  # A4 at 300dpi
folder = "print_ready"

for filename in os.listdir(folder):
    if filename.lower().endswith((".jpg", ".png")):
        img = Image.open(os.path.join(folder, filename))
        w, h = img.size
        if w < min_width or h < min_height:
            print(f"WARNING - Too small: {filename} ({w}x{h})")
        else:
            print(f"OK: {filename} ({w}x{h})")

    10. Build a Colour Palette HTML Swatch Sheet

    Extract a palette and immediately generate an HTML file showing the swatches, which you can drop straight into a client presentation or design brief document. This is the one that impresses people.

    from colorthief import ColorThief

def generate_swatch_html(image_path, output_html="swatches.html", count=8):
    ct = ColorThief(image_path)
    palette = ct.get_palette(color_count=count)
    hex_list = ["#{:02x}{:02x}{:02x}".format(r, g, b) for r, g, b in palette]
    
    swatches = "".join(
        f'
    '
        for c in hex_list
    )
    html = f"
    Colour Palette
    {swatches}"
    
    with open(output_html, "w") as f:
        f.write(html)
    print(f"Swatch sheet saved: {output_html}")

generate_swatch_html("brand_photo.jpg")

    Where to Go Next With Python Scripts for Graphic Designers

    These ten scripts are the gateway. Once they feel comfortable, look into watchdog for scripts that trigger automatically when files land in a folder, and reportlab for generating PDFs programmatically. If you want structured learning, the UK Government Digital Service competency framework includes scripting and automation as valued technical skills across digital roles, which tells you something about where this is all heading.

    The bigger point is this: repetitive tasks are not part of your job description. They are friction. Python scripts for graphic designers exist specifically to remove that friction, and the learning curve is genuinely shallower than most designers expect. Ten scripts, one afternoon, and suddenly your workflow is a different creature entirely.

    Frequently Asked Questions

    Do I need to know how to code to use Python scripts for graphic design tasks?

    Not really. The scripts in this guide are written to be readable even if you have never coded before. Start by copy-pasting and running them as-is, then gradually tweak the folder names and settings to match your workflow. That is how most designers get started.

    What Python libraries do I need for image automation?

    Pillow is the essential one, handling resizing, format conversion, watermarking, and thumbnail generation. For colour palette extraction, add colorthief. Both install in seconds with pip and are well-documented with active communities.

    Will these scripts work on a Mac and Windows?

    Yes. Python and Pillow run on both platforms without modification. The file paths in the scripts use Python's os and pathlib modules, which handle the differences between operating systems automatically.

    How long does it take to batch resize 500 images with Python?

    Typically under a minute for 500 standard JPEG or PNG files, depending on the output sizes and your machine's specs. Compared to doing it manually in Photoshop or Affinity Photo, it is essentially instant.

    Can I automate Figma or Adobe tasks with Python?

    Figma has a REST API that Python can talk to, so yes, things like exporting frames or reading file data are possible. Adobe's Creative Cloud apps support scripting via their own tools, though Python integration there is less direct. For file-level work like the scripts in this guide, Python works independently of any design app.

  • The Best Graphic Design Software in 2026: Figma vs Adobe vs the New Challengers

    The Best Graphic Design Software in 2026: Figma vs Adobe vs the New Challengers

    The graphic design software landscape has shifted more in the past two years than it did in the previous decade. That’s not hyperbole. Between Adobe’s aggressive AI push, Figma surviving its blocked acquisition and coming back swingier than ever, and a wave of genuinely capable AI-native tools muscling into the market, designers in 2026 have more choice than at any point in the industry’s history. Which is brilliant, slightly overwhelming, and occasionally maddening depending on which way you’re leaning on any given Tuesday.

    This is a proper rundown of the best graphic design software 2026 has on offer, from the incumbents defending their territory to the scrappy newcomers that are actually worth your time. Whether you’re a freelancer watching your pennies or an agency looking to standardise a team toolkit, there’s something here for you.

    Designer working with best graphic design software 2026 on a large studio monitor setup
    Designer working with best graphic design software 2026 on a large studio monitor setup

    Figma: Still the Collaborative Powerhouse

    Figma remains the go-to for UI and product design, and with good reason. The browser-based model is just sensible, your team is always on the same version, branching keeps workflows clean, and the component system is genuinely excellent once you’ve invested the time to build it properly. In 2026, Figma has doubled down on its AI features, with smart layout suggestions, auto-generated component variants, and a reasonably impressive natural language design prompt that lets you sketch ideas before committing pixels.

    Pricing sits at around £12 per editor per month on the Professional plan, with organisations paying significantly more for enterprise compliance features. Free tier is still generous, which matters a lot for indie designers just building their process. The one genuine criticism? Figma is still not great for print work. If your output ever ends up on a physical page, Figma is going to leave you a bit cold.

    Adobe Creative Cloud: The Bloated Empire That Still Wins on Raw Power

    Say what you want about Adobe’s pricing strategy (and people do, loudly), the Creative Cloud suite is still unmatched for certain workflows. Photoshop’s generative fill has gone from novelty to actually-useful in the span of eighteen months. Illustrator’s vector tools are still the industry benchmark. InDesign remains the only sensible option for anything involving long-form print layout. And Premiere Pro, if you’re doing motion work, is still the professional standard.

    The all-apps subscription sits at roughly £60 per month for individuals as of 2026, which is the number that makes every freelancer re-examine their life choices. It’s a lot. Adobe knows it’s a lot. They’re betting that Firefly’s AI features and deep integration across apps will justify the cost, and for studios doing varied, high-volume work across print and digital, that bet probably lands. For someone who only needs one or two apps? The maths doesn’t hold up as neatly.

    Adobe Express, their lighter browser-based tool aimed at social and marketing content, has improved substantially and is worth a look if you’re not doing complex work. It’s not Photoshop, but it’s not trying to be.

    Close-up of graphic design tools and tablet used with best graphic design software 2026
    Close-up of graphic design tools and tablet used with best graphic design software 2026

    Canva Pro: The Tool Professionals Love to Dismiss and Keep Using

    The design community’s complicated relationship with Canva is fascinating to watch. Every six months someone writes a serious piece about how it’s ruining the profession; every six months it gains another ten million users. Canva in 2026 is a genuinely capable tool for a specific class of work: fast-turnaround social assets, presentation decks, simple brand collateral, and anything that needs to be handed off to a non-designer without causing chaos.

    At around £13 per month for Pro, the template library, brand kit functionality, and Magic Studio AI tools are all included. It’s not built for pixel-perfect UI work or complex illustration, but for marketing and communications output it’s extremely efficient. Agencies handling content-heavy clients often maintain Canva alongside their heavier tools precisely because it removes the bottleneck of routing every quick social post through a senior designer.

    Businesses in the UK that invest in proper web design and brand software tend to see compounding returns on their marketing efficiency. Mansfield, Nottinghamshire-based digital agency dijitul, which specialises in web design, SEO, and website hosting for businesses across the East Midlands, has noted this pattern consistently across client work. The right software stack (dijitul.uk works with a range of tools depending on client need) reduces friction across the whole business efficiency chain, from brand creation through to published web pages. Their specialism in web design means software choices have a direct bearing on project delivery speed and output quality.

    The AI Challengers: Midjourney, Runway, and Adobe Firefly’s Rivals

    This is where things get genuinely interesting. The best graphic design software in 2026 no longer sits in a tidy bracket of traditional vector and raster tools. A clutch of AI-native platforms are doing real work now, not just demo-reel work.

    Midjourney v7 has reached a level of photographic fidelity and stylistic range that makes it a legitimate part of concepting and mood-boarding workflows. It’s not going to replace a skilled illustrator for anything requiring brand consistency, but for rapid ideation and client presentations where you need to communicate a visual direction quickly, it’s extraordinary. Pricing is around £8–£25 per month depending on usage tier.

    Runway Gen-3 is the motion design wildcard. If you’re doing video content or animated assets for web and social, Runway’s text-to-video and image-to-video capabilities have moved well past the uncanny valley stage for short-form content. Agencies producing branded content have started factoring it seriously into their estimates.

    Recraft is the sleeper pick few people outside the design community are talking about yet. It’s a vector-first AI image tool, proper SVG output, editable paths, brand colour locking, and it solves a genuine problem that Midjourney can’t: getting AI-generated visuals that fit inside a design system. Worth watching closely.

    Affinity Designer 2: The Serious Alternative for Price-Conscious Pros

    Serif’s Affinity suite continues to hold a very solid position as the sensible, one-time-purchase alternative to Adobe. Affinity Designer 2 handles both vector and raster work in a single environment, the performance on Apple Silicon is genuinely quick, and the £69.99 one-off licence (or £16.99/month for the whole suite) is a different conversation entirely to Adobe’s subscription. It lacks some of the ecosystem depth and third-party plugin support of the Adobe suite, but for freelancers doing brand and print work who don’t need the full CC stack, it’s a completely professional-grade option. According to BBC Technology coverage of the indie software market, tools like Affinity have genuinely disrupted the assumption that Adobe is the only credible option.

    Which Tool Actually Wins in 2026?

    There isn’t a clean answer, and anyone who gives you one is probably trying to sell you something. The best graphic design software 2026 has on offer depends almost entirely on what you’re actually building.

    UI and product design: Figma. Print and complex image editing: Adobe CC. Fast marketing content: Canva. Budget-conscious brand and print work: Affinity. AI-assisted concepting: Midjourney. Motion and video assets: Runway. Vector AI output: Recraft. These aren’t arbitrary recommendations; they reflect where each tool genuinely excels rather than where the marketing says it should.

    Agencies and freelancers making software decisions in 2026 increasingly treat their tool stack as an infrastructure choice. The shift matters because, as web design work has grown to encompass content systems, brand assets, and digital marketing material under one roof, the software used upstream affects everything downstream. Teams at digital agencies, the kind of operation handling SEO, web design, and business efficiency for multiple clients simultaneously, often run three or four tools in parallel rather than trying to force a single platform to cover every use case. That’s not inefficiency; it’s the right call given how specialised each tool has become.

    Pick the right tool for the actual job. Audit what you’re actually producing week to week. And probably stop paying for the full Adobe CC stack if you’re only ever opening Photoshop.

    Frequently Asked Questions

    What is the best graphic design software for beginners in 2026?

    Canva Pro is the most accessible starting point for beginners, with an intuitive interface and a massive template library. For those who want to progress toward professional-grade tools, Affinity Designer 2 offers a one-off purchase and a lower learning curve than Adobe Illustrator.

    Is Figma still worth using in 2026 or have competitors caught up?

    Figma remains the strongest option for collaborative UI and web design work. Its browser-based model, shared component libraries, and improved AI layout tools keep it ahead for teams working on digital products. Competitors have narrowed the gap in some areas, but nothing has overtaken it for collaborative interface design.

    How much does Adobe Creative Cloud cost in the UK in 2026?

    Adobe Creative Cloud’s all-apps plan costs approximately £60 per month for individuals in the UK. Single-app plans are cheaper, typically around £23–£28 per month. Adobe also offers discounted plans for students, teachers, and businesses on multi-seat licences.

    Are AI graphic design tools like Midjourney good enough for professional work?

    For specific tasks, mood boarding, concept art, social media visuals, and rapid ideation, AI tools like Midjourney v7 are genuinely professional-grade in 2026. However, they still require human oversight for brand consistency, accuracy, and anything needing precise editable assets. Most professionals use them alongside traditional tools rather than instead of them.

    What is the best graphic design software for freelancers on a budget?

    Affinity Designer 2 offers a one-off licence at £69.99, making it the strongest value option for freelancers who need professional vector and raster tools without a monthly subscription. Figma’s free tier also covers a lot of ground for UI-focused work, and Canva Pro at around £13 per month suits those doing primarily marketing and social content.

  • Spatial Design for UI Designers: How to Adapt Your Skills for Mixed Reality

    Spatial Design for UI Designers: How to Adapt Your Skills for Mixed Reality

    Right, so the headsets are no longer just a tech demo at trade shows. Apple’s Vision Pro has been in people’s living rooms, Meta Quest 3 is being handed out at Christmas, and developers across the UK are quietly panicking because their entire skill set is built around a flat rectangle. If you’ve spent years perfecting pixel-perfect layouts on 1440p screens, the shift to volumetric, three-dimensional interface design feels like someone changed the rules mid-game. Which, to be fair, they have.

    Spatial design for UI designers isn’t some distant futurism anymore. It’s a present-tense career skill. And the good news is that your existing knowledge doesn’t get binned. It gets extended, sometimes stretched uncomfortably, but extended nonetheless.

    Designer using a mixed reality headset to explore spatial design for UI designers in a London studio
    Designer using a mixed reality headset to explore spatial design for UI designers in a London studio

    What Spatial Design Actually Means (Not the Buzzword Version)

    Let’s be precise. Spatial design, in the context of mixed reality and extended reality (XR), refers to the practice of designing interfaces, information, and interactive elements that exist within three-dimensional space, rather than constrained to a flat screen surface. Instead of a canvas with X and Y axes, you’re working with X, Y, and Z. Depth is now a design variable.

    In a mixed reality headset like Vision Pro, a UI panel doesn’t sit inside a monitor. It floats in your kitchen. Users can walk around it, look at it from an angle, or physically reach out to interact. That changes almost everything about hierarchy, readability, affordance, and spatial audio as a design layer. The BBC’s technology coverage has tracked how these devices are moving from novelty to genuine productivity tools, which tells you the design profession needs to catch up quickly.

    The Core Principles That Actually Transfer From Screen Design

    Here’s what I’d tell any screen-based UI designer who’s feeling overwhelmed: your instincts about hierarchy, contrast, and cognitive load are still completely valid. Spatial design doesn’t throw those out. It complicates them.

    Visual hierarchy still matters enormously. In fact, it matters more, because users can now look in any direction. You can’t assume their gaze is somewhere in the centre-top third of a fixed canvas. Designing for spatial environments means thinking about where attention naturally falls in three-dimensional space, which ties directly to concepts from environmental design and wayfinding, disciplines that graphic designers have largely ignored until now.

    Typography principles carry over too, but with major caveats. Text rendering in XR headsets is improving fast, but legibility at distance and from off-angles is genuinely different from screen typography. Font weights that work at 16px on a Retina display can fall apart when a text panel is floating 1.2 metres away from a user’s face. You need to think in angular resolution, not pixels. That’s a mindset shift.

    Colour and contrast remain critical. In passthrough mixed reality, your UI layers over a real physical environment that you can’t control. That cream-coloured wall behind a floating button might destroy your contrast ratio entirely. Designing for spatial contexts requires building in far more contrast tolerance than you’d typically use on a screen.

    Floating spatial UI panels demonstrating depth and hierarchy principles in spatial design for UI designers
    Floating spatial UI panels demonstrating depth and hierarchy principles in spatial design for UI designers

    What Doesn’t Transfer and What You Need to Learn Fresh

    Scrolling is mostly dead, and that’s going to take some unlearning. The entire paradigm of infinite scroll, long-form vertical layouts, sticky navigation, all of it maps poorly to spatial interfaces. Instead, spatial design favours panels, contextual layers, and proximity-based information reveal. Content appears because you looked at something, moved towards it, or reached for it. The interaction model is fundamentally gestural and gaze-driven.

    Depth management is a new discipline you’ll need to build from scratch. Which elements sit in the foreground? Which recede? How do you communicate to a user that a control is behind them without a minimap? These problems don’t have twenty years of design pattern libraries behind them. You’re in early-explorer territory, which is either thrilling or terrifying depending on your disposition.

    Scale is genuinely strange in spatial design. Objects in XR have real-world scale. A modal dialogue that’s 600px wide on a web page becomes something you have to define in centimetres or metres in a volumetric environment. Too large and it’s overwhelming; too small and it’s fiddly. Ergonomic comfort zones, the angles and distances at which interaction feels natural, become a design constraint in the same way that viewport sizes are on the web.

    Audio as a design layer is also something screen-based designers rarely touch but spatial designers use constantly. Positional audio tells users where elements are, confirms interactions, and creates environmental feedback. If you’ve never thought about sound design, that gap needs filling.

    How to Actually Start Practising Spatial Design for UI Designers

    You don’t need to own a headset to start developing spatial intuition, though access to one obviously accelerates things. Here’s a more pragmatic path.

    Start by studying game UI design. Games have been solving volumetric interface problems for decades. Head-up displays in first-person games, diegetic interfaces that exist within the game world, contextual menus that appear near objects. Dissecting how studios like Rare or Rocksteady handle in-game UI teaches you a tremendous amount about designing for spatial contexts without writing a single line of Unity code.

    Learn the basics of Apple’s visionOS Human Interface Guidelines and Meta’s Presence Platform design principles. Both are publicly available and represent the current best thinking on spatial interface patterns. They’re genuinely well-written, even if parts of them feel like you’re reading from the future.

    Figma isn’t the right tool for spatial work, full stop. You’ll eventually need to get comfortable with either Unity, Unreal Engine, or a prototyping tool like ShapesXR or Gravity Sketch. Unity in particular has strong UK community support, with groups active in cities like London, Manchester, and Edinburgh. Getting into those communities early puts you in rooms where the practical knowledge actually lives.

    Why This Matters for Your Career Right Now

    The UK’s XR industry is not tiny. According to research from Immerse UK, the country’s immersive technology sector has been growing consistently, with significant investment going into training, healthcare, architecture, and retail applications. These sectors need designers who understand both screen conventions and spatial interaction. That intersection is currently occupied by very few people.

    Spatial design for UI designers isn’t a replacement specialism, it’s an extension. The designers who move first, who build even a basic working vocabulary in volumetric interfaces, are going to be substantially more valuable over the next five years than those who wait until the tooling is more mature. The tooling is mature enough now to learn from. It’s not mature enough yet that the patterns are locked in, which means there’s still room to help define them.

    If you’ve got strong screen design fundamentals, a willingness to unlearn a few assumptions, and even a passing interest in how spatial computing actually works, the transition is more achievable than the headset marketing makes it seem. Start small. Study the principles. Get hands-on when you can. The flat rectangle has had a good run, but design doesn’t stop at the edge of a screen.

    Frequently Asked Questions

    What is spatial design for UI designers?

    Spatial design for UI designers refers to the practice of designing interfaces and interactive elements that exist in three-dimensional space, as used in mixed reality and XR headsets, rather than on flat screens. It extends traditional screen design skills into volumetric environments where depth, scale, and physical ergonomics become core design constraints.

    Do I need a mixed reality headset to learn spatial design?

    Not initially. You can build foundational spatial design skills by studying game UI design, reading Apple’s visionOS and Meta’s Presence Platform guidelines, and learning tools like Unity or ShapesXR. That said, hands-on headset time accelerates your understanding of scale and ergonomics significantly, so getting access to a device as soon as you can is worthwhile.

    Which tools do spatial designers use instead of Figma?

    Figma is largely unsuitable for volumetric spatial design work. Common tools include Unity, Unreal Engine, ShapesXR, and Gravity Sketch. Unity is particularly well-supported in the UK, with active developer and design communities in cities like London and Manchester.

    How is spatial design different from regular UX design?

    Regular UX design operates on a fixed two-dimensional canvas with defined viewport sizes and predictable user gaze. Spatial design introduces a third axis of depth, variable real-world scale, gaze and gesture-based interaction, and the challenge of overlaying interfaces on uncontrolled physical environments. Many familiar patterns like vertical scroll and sticky navigation map poorly to spatial contexts.

    Is spatial design a good career direction for UK designers in 2026?

    Yes, and increasingly so. The UK’s immersive technology sector, tracked by organisations like Immerse UK, is growing across healthcare, retail, architecture, and training. Designers who combine strong screen-based fundamentals with spatial design knowledge are in relatively short supply, making it a genuinely valuable skill combination right now.

The Latest