Resources

Community

Integrations

Conferences

Development

Agency

Hack Projects

Design

Lead Designer

Sam Leonard-Rendell

Back in 2019, we created something that resonated with designers everywhere: a series of posters bringing Jakob Nielsen's usability heuristics to life. These principles, <a href="https://www.nngroup.com/articles/ten-usability-heuristics/">originally outlined in his 1994 article for The Nielsen Norman Group</a>, struck a chord with so many people that we've given them a fresh look and a new lease of life.Here's the thing about usability heuristics, they're not rigid rules you have to follow to the letter. Think of them more as guiding principles that form the bedrock of solid usability practices. We've leaned on these time and again <a href="https://sidigital.co/services/design/digital-design">when designing interfaces</a> or digging into usability test results. They give us a clear framework to work within and align our thinking.

Totally free, no strings attached, we promise.

Download our 10 Usability Heuristics Posters

Here at the Si digital studio, we wanted our walls to reflect the work we do, so Jakob Nielsen's original article got us thinking, why not turn these "10 Usability Heuristics" into something visual and inspiring?Fast forward to today, and these posters are printed, framed, and hanging in our studio. They've become such a <a href="https://sidigital.co/services/design/digital-design">valuable part of our daily work</a> that we wanted to share them in their new form with the wider design community.This Lab Note showcases a couple of our 10 posters, and we're making them available as free downloads in PDF, PNG, and JPG formats. We hope they inspire your work as much as they've inspired ours. Feel free to share them with your team.

Bringing heuristics to life in our studio

It’s estimated that around 1 in 12 men (8%) and 1 in 200 women have some form of colour blindness. In the UK, this means that there are approximately 2.7 million people affected, a considerable amount of the population, but they are often forgotten when it comes to designing websites and user interfaces.Here at Si digital we consider user experience and accessibility throughout every project. We use a variety of tools and techniques to help us understand visual impairments and use this knowledge to make our websites more usable and less frustrating for people who are colour blind.

Who is affected?

There are many types of colour blindness with different degrees of severity. It’s a common myth that people with colour blindness only see in black and white. Although this can be true, monochromacy – also known as total colour blindness – is extremely rare, with an estimated 1 in 33,000 people affected. This severe visual impairment only allows an individual to see in greyscale.An important factor to remember is that for most people with colour blindness, distinguishing between different colours is not too difficult; it’s telling the difference between shades and brightness levels of similar colours which causes issues.The more common condition is red-green colour blindness, which is split into two groups. A person with protanomaly has reduced sensitivity to red light. Red, orange, and yellow hues tend to shift towards green and appear less saturated. A person with deuteranomaly has reduced sensitivity to green light and will have difficulty distinguishing between blue, yellow, violet, reds, blues, and greens.

What is colour blindness?

For a long time, the difficulties that arise from colour blindness have been ignored, not only in website design, but also television, movies, and especially video games. There are many cases of users not being able to play a game or being unable to progress because of essential UI elements being indistinguishable to somebody who suffers from colour blindness.Take this example from The Witcher 3...

Colour in the wild

See how the red markers on the floor become near invisible when switching to red-green colour blindness.The game features an ability to use heightened senses to follow scents, track footprints, and find clues. However, the game developers chose a deep red colour as a marker, so there have been many users complaining that they couldn’t see these markers very well (or at all). A simple colour change or the option to change colours would have made this game more accessible.Colour blindness is a matter which needs to be taken seriously due to the high percentage of the population with vision impairments. If your website or application is particularly unoptimised, you could be losing a large amount of customers. For example, if a user can’t differentiate between a series of icons because of clashing colours and lack of contrast, that user could get frustrated and find an alternate service. If that is the experience of every potential customer who suffered from colour blindness, you’re losing over 8% of potential sales – for a business with £10,000,000 in revenue, that company could potentially lose a huge £800,000 in sales.

Sign up for all the latest news and updates from Si digital.

Get the latest news and updates

Although colour blindness can cause huge problems for users, it’s actually quite simple to combat. If you’re aware of the issues, then you’re already halfway there.<h3>1. Use contrasting colours</h3>Even people who have monochromacy still have a sense of contrast – the scaled difference between light and dark. To ensure your website is readable for people with visual impairments, you must make sure your content contrasts well with your background. For example, black text on a white background will have a high level of contrast and readability. Whereas yellow text on a white background has a low level of contrast and will be barely readable, even for people with full vision!

Designing with colour blindness in mind

<h3>2. Use different shades rather than multiple colours</h3>A monochromatic colour scheme — not to be confused with full colour blindness, monochromacy – makes use of multiple shades of one colour, rather than using various different colours. This will effectively minimise colour-related frustration, and is a great way to include contrast in your designs. A monochromatic colour scheme doesn’t have to be black and white; using multiple shades of blue, we can create a visually pleasing design with complete readability.

<h3>3. Experience colour blindness yourself while designing</h3><h4>Colour blindness simulation in Adobe Photoshop</h4>There are many free tools available that can mimic the effects of colour blindness, allowing you to understand how a colour blind person would see to ensure that your user interfaces work just as you intended them to. Photoshop has its own — slightly hidden away — proof setup feature; simply go to View > Proof Setup, and then you can choose between protanopia and deuteranopia. When you’re done testing, simply switch back to monitor RGB.<h4>Colour blindness simulation in Figma</h4>Unfortunately, there is no native support for Figma colour testing; however, there are various plugins that allow you to do the exact same thing. We recommend <a href="https://www.figma.com/community/plugin/1115550442410459794/color-blind" target="_blank" rel="noopener noreferrer">Color Blind</a>, a free plugin that shows you in real time what people with common colour vision impairments will see.<h4>Colour blindness simulation in Browser</h4>We use a Google Chrome add-on called <a href="https://chromewebstore.google.com/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg?pli=1" target="_blank" rel="noopener noreferrer">Colorblindly</a> that lets you simulate colour blindness on live websites or in a testing environment. This is a handy tool for colour and contrast testing as it offers multiple viewing modes, including full monochromacy.

<h3>4. Choose colour combinations carefully</h3>Unfortunately, as designers, we don’t always get to choose the colours that we use in our designs; sometimes, we’re limited by brand guidelines. But where possible, it’s wise to choose and test your primary and secondary colours before you establish a brand. Below is a chart of colour combinations that you should avoid using.If in doubt, avoid colour altogether and go for a simple black/white, high-contrast colour scheme!

<h3>5. Use texture in place of colour</h3>When designing things like graphs and infographics, consider making use of texture or visual patterns to help differentiate between two colours. For example, take the pie chart below. A user with protanopia would find it hard to differentiate between the different slices due to the colours being too similar. However, if we simply add some texture or patterns, the graph is 100% more readable.

<h3>6. Avoid using colour alone as an indicator</h3>When designing elements like forms and complicated interfaces, you shouldn’t use colour alone as an indicator. Take the forms below as an example. The one on the left only uses colour as an indicator that something went wrong. A person with normal vision will be able to see that the email field has turned red, indicating there has been some kind of error. However, to a person with deuteranomaly, the green of the success field is indistinguishable from the red of the error field. The best way to combat this issue is to use some kind of icon, symbol, or label to indicate that an error has occurred, as seen on the right.

The most important lesson to learn here is that unless you’re absolutely certain that somebody with colour blindness can differentiate between the colours you have chosen, then you should never use colour alone to indicate something important. Where possible, use icons, text, shapes, textures, or other visual cues as well as colour when communicating information to users.There are many ways to test for accessibility; however, these tools aren’t always fully accurate – ultimately, the best way to see if your design is suitable is to perform real UX audits. It’s likely that you know somebody who is colour blind; why not get them to review your design?What we see as designers and developers isn’t always what your users see; they could be colour blind, using a screen reader, or looking at your website on a 3″ smartphone from 2007. Creating websites that are accessible to everyone is essential and should be part of any good design process.If you would like to speak to us about your new project and how we ensure we always deliver the ultimate, accessible user experience, please <a href="https://sidigital.co/contact">get in touch</a>.

Conclusion

Have a read of some of our other articles

How to design for colour blindness: best practices for accessibility

There’s a lot to organise and the pressure’s on to get things right. With all this to contend with, it’s important to accurately identify the key insights. This improves efficiency and provides value to your clients with clear feedback.We have tried many different ways of recording feedback with participants. Each method became convoluted, making it harder to analyse data at the end of a test. So, we began looking for ways to improve our process.

User tests can be full-on

We have recently been looking at <a href="https://www.youtube.com/watch?v=8AKWYH1EzJI" target="_blank" rel="noopener noreferrer">Design Sprints and how user testing is compressed into one day</a>. This technique is simple in its approach and has been successful for us. It removes the bloat and keeps the work focussed. Today, we want to share and break down this way of working.

Stay simple and don’t over complicate

Before starting a user test, you will need:<ul class="list-bullet"><li value=1>Whiteboard / whiteboard wall</li><li value=2>Whiteboard markers</li><li value=3>Sharpies</li><li value=4>A pad of blue Post-its</li><li value=5>A pad of pink Post-its</li></ul>Now that you have your equipment, you can begin to record your user feedback. We usually test with 5 participants as this tends to be the sweet spot of not too many or too few. <a href="https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/" target="_blank" rel="noopener noreferrer">What Nielsen Norman Group wrote about testing with 5 users still holds true</a>. You can find up to 85% of usability issues with 5 participants. ‘Add more and more users, you learn less and less’.Before the first person arrives, you will need to divide up your whiteboard. Using a whiteboard marker, split the board into 5 columns. Add the names of your participants across the top. Down the left-hand side, add rows and label each according to the task or page you are looking to test.

Preparing for user testing feedback

As you do your user tests, it is important to make quick notes as you go. We tend to analyse our user tests in pairs to prevent any misinterpretation of comments. This is where we use our post-its to record different types of feedback. However, make quick, rough notes before transferring them to post-its at the end. We use blue post-its for positive comments and pink post-its for negative. A negative comment could mean a participant struggles or has to think about what to do next. Or they might communicate their problem out loud. Write these down as they are super important.Once you have your feedback, stick the post-its into the relevant row for that participant. As you do this, discuss and compare the feedback received and see where there is overlap.

Recording user testing feedback

Repeat this process for each of your user testing participants. Making notes as you go, then writing down the feedback on the relevant post-its at the end of each test. Once you have all five up on the board, you’re ready to begin looking for patterns. They should really jump out at you!If you take a step back from the board, it should become quite clear where the problem areas are. Look closer and you should be able to group specific insights. This will help you to build a picture of where the most common issues are.

Repeat for each user test

This is a simple and quick technique to record user testing feedback that a group of you can do together. It helps improve collaboration and the process of gathering insights.

That’s it

A simple way to record your user testing feedback

The 10 Usability Heuristics – updated for 2026

When it comes to branding, colour accuracy matters. When we’re <a href="https://sidigital.co/services/design/branding">building brands</a> for our clients, we can’t afford to rely on guesswork and varying colour profiles on different displays. Pantone guides give us a definitive, real-world reference point that ensures our colours are consistent across the board.It’s the kind of investment that reflects our focus on quality. We’ve been doing this for over two decades, and we know that the detail makes a difference. When a client’s brand guidelines specify Pantone 185 C, we want to show them exactly how that looks across print, not as an approximation on screen.

Why we made the investment

Pantone actually covers everything from print through to textiles, so it can be tricky knowing which guides to buy. <a href="https://sidigital.co/services/design/graphic-design">For graphic design</a>, there are Formula guides, Colour Bridge guides, Pastels & Neons, Metallics, and CMYK guides.We were torn between Formula Guides and Colour Bridge guides. Formula Guides simply show the Pantone colour in its pure form, printed on coated or uncoated paper. Colour Bridge guides show the Pantone colour, as well as its process CMYK match. It also gives us breakdowns of the Pantone colour in RGB and as a HEX code <a href="https://sidigital.co/services/design/digital-design">for digital, too</a>.We went with Colour Bridge guides rather than Formula guides as we can see the Pantone colour directly next to its process equivalent. This is really useful when we’re working on projects that cover both print and digital, or when a client’s budget means digital printing rather than spot colour.The majority of our print work ends up being produced using CMYK, so having that direct comparison helps us manage expectations and make informed decisions about colour reproduction. We can have honest conversations with clients about how their brand colours translate across different printing methods.

The guide dilemma

Here's something many people don't realise: Pantone guides have a shelf life. The colours fade and shift over time, especially when exposed to light. Here’s how you can help keep your Pantone guides in peak condition:<ul class="list-bullet"><li value=1>Replace them every 12 to 18 months to ensure colour accuracy.</li><li value=2>Keep them in their original sleeves when you’re not using them.</li><li value=3>Avoid leaving them in direct sunlight.</li></ul>It might seem over the top, but if we’re going to rely on these guides for accurate colour matching, they need to stay accurate.

Keeping them fresh

Given the investment (and yes, Pantone guides aren’t cheap), we’ve designated a specific home for our new guides in the studio. They live in a drawer, in their protective sleeve, away from coffee cups, curious hands, and the general chaos of a busy creative studio.We’ve also made sure the whole team knows they’re there, and how to use them properly. No bending pages, no leaving them open on desks, and definitely not lending them out. These are tools, not coffee table books.

Safe & secure 

It’s a pretty small purchase in the grand scheme of things, but it’s one of those investments that quietly improves the quality and accuracy of our work. Better colour accuracy means fewer surprises during print, happier clients, and a happy design team.If you’re curious about how we approach colour in your project, or you’d like to see your brand colours in the Pantone flesh, just ask. We’re always happy to geek out about this stuff.

The bottom line

Since its announcement at WWDC in June, Apple’s new Liquid Glass UI design for its 2026 (and beyond) operating systems has proved polarising. With its transparent, content-manipulating effects and reactive components, it’s a bold step away from the flat, static look we’ve grown accustomed to since Apple launched iOS 7 back in 2013, and an even bolder progression from the skeuomorphic designs we were used to before that.But what if we’ve been looking at Apple’s Liquid Glass in the wrong way? This isn’t about surface-level design trends or flashy animations. It’s about the future of technology and how we interact with it.

Apple’s Liquid Glass design language was launched yesterday with iOS 26, and as the world installs this new design system onto their phones, watches, headsets, tablets, laptops, and TVs, it’ll take time for users to adjust to this new look and way of interacting with their devices.What many people haven’t yet realised is that the way we interact with our devices is changing. With virtual reality (VR) and augmented reality (AR) becoming more prevalent, the line between the real world and the digital world is beginning to blur more and more. The <a href="https://www.fortunebusinessinsights.com/industry-reports/infographics/virtual-reality-market-101378" target="_blank" rel="noopener noreferrer">VR industry is expected to be worth $123bn</a> by 2032. To put that into context, it was only worth $16.32bn in 2024. So, the transition in UI design as we focus more on VR & AR is inevitable, and likely for the good of the usability of those devices in the future.When Apple launched the iPhone in 2007, we were at a similar juncture for UI and UX, but we didn't realise it at the time. We’d been using clunky phones with physical keyboards and untouchable content for decades, and suddenly we had a device where we could touch the content we were interacting with. Note-taking, calendars, compasses, and more. Getting users to understand this resulted in skeuomorphic design – a style that brought relatable, understandable, real-world context to digital applications and interactions. It was about educating users in a manageable way that didn’t feel a million miles away from using a real notepad or a real calendar.

A new era for UI design begins today

After six years of training us, Apple made the move away from skeuomorphic design across to flat design with iOS 7. That style has developed, changed, and grown into what we’ve now become familiar with in iOS 18, macOS Sequoia, and visionOS 2. Liquid Glass might look like pure visual polish, but it’s doing something much more important: teaching us a new way to interact. Just as skeuomorphism helped us move away from physical buttons to touchscreens, Liquid Glass is quietly preparing us for a future that isn’t restricted to screens at all. We’re moving into a new era where digital worlds are layered over the real world, and how we interact with it depends on more than just our fingertips. This shift needs a different kind of interface. One that listens, watches, and responds. It feels alive. This is where multimodal UI design comes in.

Multimodal UI design language relies on more than just a single input, like touch. It’s built around voice, gaze, movement, and touch. It’s this that bridges the gap between what we know as an OS, and what an OS will become. Take visionOS, or Meta Horizon OS. Both are examples of multimodal interfaces. Not only is the content overlaid onto the real world, it’s controlled by the direction you’re looking, or by your voice as you ask it to perform an action or task. And, especially in vision OS, these overlaid interface elements are designed to interact and work with the world around them, rather than just sitting on top.

Liquid Glass isn’t just multimodal, it’s reactive. Built around a system of free-floating elements and components, the interface dynamically adjusts to how you use it. These elements aren’t locked to a fixed screen either; they appear when you need them and fade away when you don’t.It’s this fluidity that makes Liquid Glass the ideal UI for overlaying on the real world. Elements can subtly sink into the surroundings when idle and reappear when they’re relevant. If your environment changes, the UI responds and reveals what’s behind it by taking a step back. It’s a design system that’s as understanding and perceptive as you are.Apple’s approach is also about unifying an experience across their device ecosystem. As all these devices begin to merge into a spatial realm, consistency will be key. Liquid Glass isn’t limited to iPhones; it’s become the universal design language used across all of Apple’s devices. This is an important shift. Historically, Apple has tended to update the iPhone and iPad visual designs ahead of the Mac. For example, when Apple launched its flat design system with iOS 7, macOS Mavericks still maintained its skeuomorphic design. The fact Apple is rolling Liquid Glass out across its entire suite of operating systems sends a clear message: this is the future, and it’s starting now.

In contrast, Google has taken a <a href="https://blog.google/products/android/material-3-expressive-android-wearos-launch/" target="_blank" rel="noopener noreferrer">very different approach</a> with its latest design system, Material 3. Its punchy colours, expressive typographic treatments, and bold graphic devices feel optimised for rectangular screens. Perfect for phones and tablets. But as we move into a world where interfaces begin to extend beyond the screen, this look and feel will quickly fall behind and become limiting.Material 3 is firmly rooted as a visual language for traditional devices. It’s difficult to imagine these vibrant, highly-saturated colours and decorative sticker-like layers translating to spatial environments or multimodal interfaces where the UI has to adapt to different lighting, varying depths, and real-world context.Compared to Apple’s Liquid Glass design system, Material 3 feels like it was designed solely for mobile-era aesthetics. We imagine it’ll only be a matter of time before Android follows suit.

Material 3: Beautifully screen-bound

Despite its future-focussed foundations, Liquid Glass is a polarising design language, and this is primarily for two reasons: accessibility and its association with past design trends. Stylistically, it’s been compared to Windows Vista, which launched in 2007 with a <a href="https://en.wikipedia.org/wiki/Windows_Aero" target="_blank" rel="noopener noreferrer">new design style called Aero</a>. Aero marked a dramatic move away from the blocky era of Windows XP, and just like Liquid Glass today, it divided opinion. But the intent behind Liquid Glass is very different to Windows Vista. Windows Vista was about reskinning a system users were already very familiar with to make it feel more modern. Liquid Glass is about the shift from screens to spatial, immersive experiences.Accessibility is a much bigger concern. With its glassy, translucent design, Liquid Glass definitely poses some issues with legibility and contrast, especially against high-contrast backgrounds. This is surprising coming from Apple. They’ve long been seen as leaders when it comes to inclusive design; <a href="https://www.apple.com/uk/accessibility/" target="_blank" rel="noopener noreferrer">it’s one of their core values</a>.However, it’s important to remember that Apple gives users a deep level of accessibility customisation so they can hone their devices to work for them. And Apple has always made iterative improvements as time goes on. Remember when iOS 7’s animations were <a href="https://abcnews.go.com/Technology/apple-ios-literally-making-users-sick/story?id=20385379" target="_blank" rel="noopener noreferrer">making users motion sick</a>? Or when users said the <a href="https://www.nbcnews.com/tech/tech-news/fonts-dont-lie-thin-ios-7-os-x-flna6c10245346" target="_blank" rel="noopener noreferrer">system typefaces were too thin</a>? Apple responded by adjusting the design language.Liquid Glass is following a similar path. We’re entering uncharted territory with spatial, multimodal user interfaces. There will be missteps. But just as with past transitions, refinement will come with time, and with real-world feedback from users pushing the boundaries of how we interact beyond screens.

Growing pains

While <a href="https://www.techtimes.com/articles/309937/20250409/apple-vision-pros-sales-flop-theyre-rushing-out-new-one-m5-chip-before-2025-ends.htm" target="_blank" rel="noopener noreferrer">Apple Vision Pro has been a slow burner</a>, it’s still early days for spatial and multimodal UI design, but one thing is clear – the UI of tomorrow won’t live on screen. We’re moving into a new era where interfaces live around us, watching, listening, and responding as we interact with them and the world around us. And design systems won’t just be about aesthetics or branding; they’ll need to feel native and reactive to real-world environments, natural movement, and human behaviour.Liquid Glass is the start of a much bigger shift in design and how we interact with our devices. By introducing translucency, depth, and movement into today’s rectangular screen boundaries, it’s preparing us all for a world where interfaces are responsive and immersive, and not restricted to a glass rectangle.Brands that embrace multimodal, spatial design languages now will be the ones who lead in the years ahead as our digital and physical worlds blend together. And users will expect that to feel natural. As for designers and developers, those of us who understand this early and adopt this design ethos will define what’s coming next.

The UI of tomorrow won’t live on screen

Why you’re looking at Apple’s Liquid Glass UI the wrong way

Our new Pantone guides have arrived

Lead Frontend Developer

Danny Walker

It’s been a rough <a href="https://www.theverge.com/2024/9/27/24256361/wordpress-wp-engine-drama-explained-matt-mullenweg" target="_blank" rel="noopener noreferrer">couple of weeks for WordPress</a>—it’s found itself at the centre of <a href="https://www.theverge.com/2024/10/12/24268637/wordpress-org-matt-mullenweg-acf-fork-secure-custom-fields-wp-engine" target="_blank" rel="noopener noreferrer">quite a big a media storm</a>. We’ve gradually been moving away from WordPress to <a href="https://sidigital.co/services/develop/payload" target="_blank" rel="noopener noreferrer">Payload</a> over the last year or so, and in this Lab Note we take a look at why we’re making the move and how it benefits both us and our clients.

We’re always looking for new and exciting ways to improve our development processes and provide clients with the absolute best quality product we can. Part of this has involved transitioning our choice of content management system (CMS) from WordPress to Payload.Payload is a <a href="https://www.sanity.io/headless-cms" target="_blank" rel="noopener noreferrer">headless CMS</a> built using <a href="https://www.typescriptlang.org/" target="_blank" rel="noopener noreferrer">TypeScript</a>, <a href="https://nodejs.org/en" target="_blank" rel="noopener noreferrer">Node.js</a> and <a href="https://react.dev/" target="_blank" rel="noopener noreferrer">React</a>—all of which we’re familiar with. It’s also highly customisable, which means we can create custom APIs and very flexible content models that adapt to whatever our clients need.When we first began looking into moving beyond WordPress, we researched a few different options, including Contentful and Sanity. We knew what we were looking for, and had a few criteria to meet. Firstly, we wanted a platform that’s reliable, secure and well maintained. These are all core values that benefit both us and our clients.Secondly, whatever platform we chose needed to be scalable across sites large and small. We didn’t want to choose a platform that might limit us in the future.This is where Payload really came into it’s own. So let’s take a look at some of the benefits of Payload in a bit more detail.

Why Payload?

When it comes to our clients, as an agency we like to make sure we’re offering the absolute best solution to their problems. And Payload definitely helps with this. There’s a few key areas that Payload really excels in…<h3>Performance</h3>Every website should perform well, especially when it comes to site speed. On average, <a href="https://prerender.io/blog/page-speed-tips-and-statistics/" target="_blank" rel="noopener noreferrer">around 40% of desktop</a> users will leave a website if it takes more than three seconds to load. That jumps up to 53% for users on mobile devices.This is where Payload’s headless CMS comes into play. Because it’s so streamlined, it’s typically faster at loading content and images, especially when paired with Next.js static site generation. This is a huge benefit to our clients. Getting users to the content they want quickly and seamlessly is a key UX principal, and ultimately results in higher conversions.<h3>Same Flexibility</h3>Payload offers the same flexibility as WordPress. Being able to easily adapt and add to our sites is an important part of what we offer to our clients. Payload’s flexible content modelling allows us to quickly and easily add features and fields to any site, meaning it can scale and grow quickly and smoothly.<h3>Modern</h3>Payload is built with the very latest versions of TypeScript and Node. This means it’s updated regularly with security and bug fixes to keep your site and data safe. It also means it integrates well with other Javascript frameworks, like Next.js.<h3>Self-hosted</h3>Payload is self-hosted, meaning we have control over and oversight of all the data the site contains and accesses. This is crucial for companies and sites that contain sensitive user data.<h3>APIs</h3>When it comes to Application Programming Interface (API) integration, Payload’s headless CMS features an API endpoint. This means we can quickly and easily fetch, update and create data from any website or app. It also means our clients can use the data from the CMS anywhere they like.<h3>Familiarity</h3>Moving to a new CMS can be a bit daunting, but Payload brings with it a familiar way of working when compared to the likes of WordPress. It’s a field-based CMS, so building pages and adding content is an experience a lot of our clients are already familiar with.<h3>Version control</h3>Version control allows us to track and manage changes to our code over time. Every time we make a change to the codebase, we push this up to GitHub where it’s reviewed before being pushed to live. It’s an extra level of safety that means everything is sense-checked before it goes out into the world.<h3>Customisable</h3>It might seem trivial, but the Payload CMS can be fully customised and branded up to match your company’s brand identity.<h3>Quality</h3>Quality is what drives us as an agency. Thanks to TypeScript, we know we’re writing quality code every time. TypeScript is a superset of JavaScript, designed and developed by Microsoft. But, when compared to JavaScript, TypeScript provides us with more consistency and reliability thanks to it’s stricter rules. This means less room for error and a high-quality output.

Endless benefits

<a href="https://sidigital.co/services/develop/payload">Since we’ve started working with Payload</a>, we’ve seen countless benefits. From its customisation and flexibility through to its integrations and security, we’re loving developing and building with it. If you want to take a look at an example of a site we’ve built using Payload, head over to <a href="https://www.harwin.com/" target="_blank" rel="noopener noreferrer">the Harwin site we built</a>. In contrast, our own website is also built with Payload. It’s much smaller than the Harwin website, but still offers the same Payload perks that we love. This is a great example of how scalable and flexible Payload is, and how adaptable it is depending on the size of the site.We’re really looking forward to seeing what more we can do with Payload in the future and how we can pass on the benefits to our clients. If you’re looking for a website rebuild, give us a shout to arrange a consultation.

Moving forward with Payload

Why we’ve swapped WordPress for Payload

Last year was a tough year for WordPress, with seemingly never-ending dramas, publicity nightmares and websites going down all over the web. So, in 2025, we think we’ll begin to see a shift away from WordPress over to more modern, more secure content management system (CMS) options like Payload.WordPress has definitely had its place in the digital world over the last 20 years or so, and is used for just over <a href="https://w3techs.com/technologies/details/cm-wordpress" target="_blank" rel="noopener noreferrer">43% of all sites you see on the web</a>. But, it’s become outdated, difficult to manage and insecure. A lot of clients that come across to us here at Si digital often bring their old WordPress builds with them, and they’re often blown away by their new site and CMS when we’ve finished the build and launched. From improved site speed to the simplicity of the CMS to the enhanced site security, CMS’ like Payload are advancing in areas that WordPress has fallen behind in.We made the move across from WordPress to Payload back in 2023, and throughout 2024 we saw the rewards of the move for our clients. You can learn <a href="https://sidigital.co/lab-notes/why-weve-swapped-wordpress-for-payload">more about our move here</a>.

Content Management Systems

Motion UI design is an upcoming 2025 digital trend that we think will take off throughout the year. It’s designed to improve website usability through subtle animation cues, and can help to guide users through a website or user flow with more ease. Animations can help to draw attention to key elements like buttons, or enhance user engagement through dynamic experiences. A few websites are already utilising motion UI design. Take <a href="https://www.apple.com/uk/airpods-pro/" target="_blank" rel="noopener noreferrer">Apple’s AirPod Pro 2 landing page</a>.

Motion UI

This is a great example of how to draw a user to your page through subtle and dynamic animation and motion. While motion UI design can be time consuming, the rewards for the user can be worth it, especially when it helps users get to the content you want them to see.

90% of people say that using <a href="https://www.demandsage.com/voice-search-statistics/#:~:text=Voice%20Search%20Statistics%202024%20(Top,anticipated%20to%20use%20voice%20assistants." target="_blank" rel="noopener noreferrer">voice search is easier than searching online</a>, and with voice assistants like Siri and Alexa becoming increasingly integrated with AI, businesses will need to ensure their websites are optimised for voice search. Throughout 2025, we expect to see websites adapting their content to make it suitable for voice search.This involves some work from both developers and copywriters. Content needs to be clear, direct and optimised for natural language processing (NPL) for voice assistants to be able to return useful results to users.It’s also worth remembering that <a href="https://www.demandsage.com/voice-search-statistics/" target="_blank" rel="noopener noreferrer">27% of users use voice search on mobile devices</a>, so ensuring your site is optimised for mobile is also an important factor when it comes to voice search

Voice Search

The market for virtual reality (VR) and augmented reality (AR) devices <a href="https://www.fortunebusinessinsights.com/industry-reports/infographics/virtual-reality-market-101378" target="_blank" rel="noopener noreferrer">gradually picked up throughout 2024</a>, and it’s expected to be a $244 billion industry by 2032. In 2025, we’re expecting to see some exciting new VR and AR experiences launching. From entertainment to healthcare to education, VR will begin to integrate into new areas of life, bringing with it new accessible, user-friendly experiences.We also think the line between AR and VR will begin to blur, as both technologies begin to share more and more features.We’re just down the road from one of the <a href="https://www.port.ac.uk/research/research-groups-and-centres/ccixr" target="_blank" rel="noopener noreferrer">UK’s first VR & AR facilities</a> at the University of Portsmouth, so we’ll be testing out some experiences throughout the year.

Virtual & Augmented Reality

With cyber threats and hacking becoming increasingly sophisticated, digital security will be a top priority for web developers in 2025. With so many potential security threats, developers and businesses will need to introduce more robust security measures, like AI-powered security detection, stronger encryption and two-factor authentication. This is especially important for business that collect sensitive user data.General Data Protection Regulations (GDPR) are also <a href="https://www.formiti.com/preparing-for-uk-and-eu-gdpr-compliance-in-2025-navigating-post-brexit-changes/" target="_blank" rel="noopener noreferrer">becoming stricter worldwide</a> in 2025, so staying ahead of the game could be key to ensuring your website’s security this year.

Cybersecurity

We can’t really talk about 2025 digital trends without mentioning AI. We’re excited to see how AI progresses over the next year. As a company, we are investigating the different ways we think we can leverage AI in the future to help both us and our clients, so watch this space.

2025 looks to be an exciting year for digital trends. From Payload through to voice search, it’s going to be a year of exciting opportunities for the world of digital. Keep up to date with our latest news and updates <a href="https://links.sidigital.co/socials">on our socials</a>.

You may have heard the phrase ‘cobblers shoes’—this was definitely the case for us. We had been head down, full steam ahead on client work and had somewhat neglected our own brand and website.But we realised this was affecting how we were being viewed by potential clients.When you’ve been going for as long as we have, you’ll find your logo in loads of places. From the usual LinkedIn, Instagram etc. to Jira Helpdesk, Google, Email footers, Xero invoices and so on. Across all the touchpoints, multiple variations of our logo were being used.So we decided to treat ourselves like a client and get going on a full audit of where we were.

How we got here

Sam joined Si digital recently, bringing with him a fresh perspective on the agency’s brand. This sparked a wider conversation about rebranding the agency. Sam’s experience with brand design put him in the perfect position to look at our brand objectively and without any prior knowledge or prejudice.So, Sam got to work rebranding us.

Say hello to Sam

The first step we took was to look at our positioning. This was an important part of the branding process as it allowed us to pick apart our values, define the agency’s personality and work out how we want to communicate as a brand.Our brand proposition—We create digital chemistry—was the first part we settled on. This has actually been our proposition for years, but we know it’s catchy and it works well at reflecting our innovative, creative nature. It also gets across the chemistry we have with our clients. It plays well into our wider brand too.When we explored our values and personality, things got a little more exciting. We defined our brand archetype, <a href="https://www.lairedigital.com/blog/the-creator-brand-archetype" target="_blank" rel="noopener noreferrer">The Creator</a>, which informed our new brand values.

Positioning

Our values run through into our personality. We’re confident, authentic and ambitious, always looking to improve and grow. We’re not arrogant or over-confident. And we’re sitting on a strong foundation of over two decades of expertise, making us a great choice for our clients.This all gave us a good starting point to begin some design work.

A brand is never created from one idea, so we pulled together three unique conceptual routes. Each route played into our newly established brand position, but in a different way. <h3>Route One – Something Familiar</h3>Our first route took our existing identity and tidied it up, bringing sense to the brand. We kept our iconic beaker but broke it out of the hexagon and paired it with a new typeface—Mori. This was a natural progression for the brand, and maintained a level of familiarity.Beyond the new logo, we kept our punchy pink brand colour, but introduced a neon green and a graphite grey to give us a bigger palette to work with. We selected some contemporary typefaces and developed some ‘liquid gradients’ that played into the liquid in the beaker of our logo.All of this was capped off with a unique type-style, called ‘Progressive Type’—repeated headline words that are sliced in half horizontally. This was a way of highlighting key words and phrases in a visually engaging way, allowing us to create high impact type-led designs.

Concepting

<h3>Route Two – Something Different</h3>The second route took a totally new approach to our brand. As a creative and innovative brand, we aimed to get this across through an expressive and imaginative look and feel. We gave our beaker a little tilt, giving it a more energetic look and sat it next to a new typeface, PP Right Grotesk (check out those <a href="https://fonts.google.com/knowledge/glossary/ink_trap" target="_blank" rel="noopener noreferrer">ink traps</a>).We blew up our brand palette, introducing six new colours to the mix on top of our original pink. The palette was designed to let us flex our creativity and use colour pairings to convey our experimental and creative side. Some bold new typefaces were introduced too. Designed to allow us to really shout about what we do, the headline typeface could be used big, bold and cropped, really allowing the brand to lead with type.We introduced a set of doodles that we could use to further emphasise our text and layouts. Designed to integrate and play with type, the doodle would loop and overlap words to give designs depth as well as drawing the eye to key words.

<h3>Route Three – Something Daring</h3>We really pushed the boundaries here. Leaning into our passion for experimentation, this route pushed our brand into a completely new area.Our beaker remained, but in an inverted form, creating a clear difference between our old logo and our new logo. This was shifted to the right and floated upwards, allowing the eye to naturally move across the logo. We sat this alongside GT Flexa—an edgy, tech-centric typeface.We introduced a set of textural images that could be pulled through headlines. Based on macro photography of bubbles, the petrol-like texture worked well to represent the liquid in the beaker, and gave us an eye-catching graphic device we could pair with our typefaces. The brand also used ‘bubbles’ that slot into text lockups to provide structure and a more detailed look at the textural images.

Once we’d finished up creating our concepts, we began refining. This stage essentially brought us to our finalised brand identity. Route one was the direction to go, with a few bits carried across from routes two and three.We landed in a great place with it all, so let’s take a closer look at what gets us excited about our new brand.

Refinement & Launch

Our beaker has become an iconic part of the agency over the last two decades, and our new inverted beaker brings with it a familiar but fresh look. Moving the beaker out of the hexagon gave us the power to use the beaker more freely as well, so we can capitalise on space when it comes to social media avatars and small space applications.Our beaker balances perfectly against our new logotype. Designed using a custom cut of PP Right Grotesk, our new logo is fresh and bold, but still feels very Si digital. The structure and type give us the opportunity to go big and bold, too—just check out our footer 👀

Logo

Our brand pink has become a recognisable part of our identity over the years, and it’s something we wanted to keep as part of our new look. But we didn’t want to limit ourselves to pink, so we’ve introduced a new neon green and graphite grey to sit alongside our vibrant pink.We’re still leading with the pink as our primary colour but you’ll be seeing a lot more of our neon green. It’s a statement colour, and we’ll be using it as an accent colour to bring a bit more vibrancy to the brand. Both these colours are balanced against our new graphite grey along with black and white too.

Colour

We’re now a type-led brand thanks to our beautiful new typefaces. Our lead typeface is the same as our logotype—PP Right Grotesk. It’s a really flexible typeface with over 130 different weights and structures, but we’ll be using the Wide family. Designed by <a href="https://pangrampangram.com/" target="_blank" rel="noopener noreferrer">Pangram Pangram</a>, PP Right Grotesk works really well at larger scales, which helps to highlight its unique ink traps.Alongside our lead typeface are two typefaces, Aeonik and Aeonik Fono.Aeonik Fono is a mono-esque typeface, and reflects the software we use to code our websites and apps. It’s got a techy look about it, and works well for larger body copy. We use Aeonik for everything else.

Type

It can be difficult to visualise the <a href="https://sidigital.co/services">services</a> we offer. A lot of our services are within a similar field, so trying to differentiate between these can be tricky. So, we created a bespoke set of icons. Each icon is designed to abstractly represent its service. From UI & UX Design through to Middleware Development, our icons are unique, clean, and a little playful.We've animated each icon too, giving it a bit of movement. Whether it's a little rotation of one of the elements, or a line growing and shrinking, these movements are designed to give each icon its own personality.

Icons

All of this came together on our snazzy new website. From our bold new typefaces to our vibrant new colour palette, our new look really comes to life online. There’s some quirky new features too, like our vertical inverting breadcrumb.

Website

We’ve also introduced ‘mini case studies’. These sit alongside our larger case studies and allow us to show off some of our more technical work in a succinct way. You’ll find these dotted around the site in relevant places.Our new Behind the Scenes (BTS) social feed gives you a glimpse into what goes on day-to-day in—and out of—the studio. From summer parties to LAN parties, you’ll find it all in here.

We’re really happy with our new look, especially how it’s all come together on our new website. Our new brand not only showcases us as an agency, but it also reflects how we want to move forward into the future. Our innovation and creativity are pushing us forward so we can bring you creative and well designed digital solutions.If you’ve got a project in mind, or just want to have a chat, <a href="https://sidigital.co/contact">get in touch</a>.

Final thoughts

A closer look at our shiny new brand

The 2025 digital trends to look out for

Founder & Managing Director

Steve Piper

Quite a few of us in the Si digital studio are keen cyclists. We noticed a regular topic of conversation though the more we chatted about our cycling experiences—close passes. So, we began to think, how can we help cyclists keep track of close pass hot spots. And Close Pass was born.Originally a standalone <a href="https://closepass.cc/" target="_blank" rel="noopener noreferrer">website</a>, Close Pass launched in Autumn 2017 and works by taking crowdsourced data to highlight close pass hot spots in your local area. But, a website isn’t too practical to use if you’re mid-cycle. So we developed our very own Close Pass mobile app for iOS and Android.Designed and built to be quick and simple to use, the brand new Close Pass app allows cyclists to log their close pass rapidly. Simply move the pin on the map, select the date and time and log your close pass. It’s that simple. The close pass is then highlighted on the map as a hot spot. And if other users experience close passes there too, the hot spot gets bigger. This acts as a way for other cyclists to avoid close pass hot spots.We launched the Close Pass mobile app in September 2024 after nearly six months design, development and refinement and we’re looking forward to seeing how it takes off in the cycling community.

The origins of Close Pass

When it comes to developing mobile apps, there’s a few different ways to go about it. Native apps are built using each operating systems (OS) own programming language. For Android, it’s <a href="https://kotlinlang.org/" target="_blank" rel="noopener noreferrer">Kotlin</a>. For iOS, it’s <a href="https://developer.apple.com/swift/" target="_blank" rel="noopener noreferrer">Swift</a>.The trouble with native app builds is developers end up duplicating lots of code, which then has to be supported post-launch. This means there’s a lot of time and resource spent essentially maintaining two app builds.Close Pass is built using a framework called React Native. React Native was developed by Meta, and is a universal language used to create apps and software for iOS, Android, Mac and Windows, making it perfect for apps that need to work on multiple platforms.For Close Pass, using React Native means we don’t have to double up on code, resulting in less for us to maintain in the background. We can code it once and it works across both Android and iOS—which ultimately means less time spent squashing bugs. React Native is also sharable across our own development team, so it’s quick and easy for others to pick up if there’s urgent bugs that need fixing.Close Pass is written in <a href="https://www.typescriptlang.org/" target="_blank" rel="noopener noreferrer">TypeScript</a> using the React Native framework. Designed and developed by Microsoft, TypeScript is a superset of Java Script. But, compared to Java Script, TypeScript provides more consistency and reliability across the board thanks it’s slightly stricter rules.Ultimately, the language choice for an app is based on what you’re building. If it’s only being used on one OS, native is probably the way to go. But if you want your app working across various different systems and devices, React Native might be the best option.

Built in React Native

Close Pass is a unique idea, built with some unique features. As a map based app, there’s a lot of complexity around pulling in map and location data. We looked at a few options for our mapping system, but we went for <a href="https://www.mapbox.com/" target="_blank" rel="noopener noreferrer">Mapbox</a>. Mapbox is a fully customisable mapping system, allowing us to brand up and tailor our maps however we liked. There was only one problem—Mapbox doesn’t currently support React Native.After a bit of digging around online, we found a solution—a third party, community run version of Mapbox that does support React Native. This actually worked out better than using Mapbox directly. Where it’s community run, there’s a whole host of people on hand to give us support where we need it. And it’s still fully customisable. A win win situation.

Unique Features

With everything digital, there’s always room for growth. We’ve got big plans for Close Pass, like introducing 3D maps to see close pass hot spots in more detail, GPS turn-by-turn navigation for cycling routes, health data and social sharing to name a few. So watch this space, there’s plenty more to come.

Future Plans

If you’re a cyclist, Close Pass is a must-have app. So if you fancy tying Close Pass out, download it on the <a href="https://apps.apple.com/gb/app/close-pass/id6450953209" target="_blank" rel="noopener noreferrer">App Store for iOS</a> or <a href="https://play.google.com/store/apps/details?id=com.closepass&pcampaignid=web_share" target="_blank" rel="noopener noreferrer">Google Play Store for Android</a>.

Lab Notes