Community

Integrations

Conferences

Development

Agency

Hack Projects

Design

Founder & Managing Director

Steve Piper

For the last few years, we’ve been using a relatively new headless Content Management System (CMS) called Payload. <a href="https://sidigital.co/lab-notes/why-weve-swapped-wordpress-for-payload">We made the shift from traditional CMS</a> options, like WordPress, so we can provide our clients with a modern, more secure way to manage their website content. Our move across to Payload is about more than just keeping up-to-date; it’s about ensuring our client projects are built using the most robust CMS available.But, for a lot of our clients, it can be a difficult decision to move away from a familiar CMS like WordPress, so to help make the decision easier, we’ve built our own Payload demo. We call it our Payload Playground. <a href="https://sidigital.co/payload-playground">Book your 1-2-1 tour here</a>.

Payload is a modern CMS option, first launched in 2022, and is a modern-day answer to the historic problems of older CMS platforms like WordPress and Drupal. Payload is streamlined, secure, and scalable, giving you the peace of mind that it’ll last for years to come.It’s also very user-friendly. The admin area is clear, concise and well structured, allowing for quick and easy page building, image uploads, and content changes. It’s a big step forward from traditional CMS user interfaces, with near-instant load times, live previewing, and so much more. There’s a familiar look to Payload, too. The admin area follows a similar structure to the likes of WordPress, so it’s quick and easy to pick up and learn.

What is Payload?

We’ve covered a <a href="https://sidigital.co/lab-notes/the-benefits-of-choosing-payload-cms-for-your-next-website">whole host of benefits in a separate Lab Note</a>, but here’s a quick look at our top three reasons to move to Payload.

Why Payload?

With cyber attacks and hacks becoming an <a href="https://aag-it.com/the-latest-cyber-crime-statistics/" target="_blank" rel="noopener noreferrer">increasingly serious problem in recent years</a>, the importance of keeping your website and its data secure couldn’t be more essential. Unlike a lot of alternative CMS options, Payload is designed to be a self-hosted CMS, so you have complete oversight and control of the data the website contains and accesses.Self-hosting a website means you have control over where the site is installed, so you can choose your own servers, databases, and infrastructures. This means you control the data, not a third-party company. This is especially important for companies and businesses that handle sensitive user data like payment details or personal information.Self-hosting can be a huge benefit when it comes to data security, but we also offer hosting and data security here at Si digital too, using Amazon Web Services (AWS) and Cloudflare. <a href="https://sidigital.co/services/support/hosting-and-data-security">Find out more here</a>.

1. Data Security

Older CMS options like WordPress can often hold back the growth of your website. As the site expands and you add in new pages and introduce more content, it can become slow and clunky. Eventually, this will reach a point where it becomes too much of a chore to maintain the website.Thankfully, Payload uses the latest TypeScript and Node technology, which helps keep everything ticking over smoothly in the background. It’s also regularly updated with bug fixes and new features that ensure your site will stay running for years to come.Payload also features flexible content modelling, which makes it easy for our developers to add new features, so your website is always scaling and flexing as your business grows.

2. Scalability

If, <a href="https://www.saasacademy.com/blog/saas-statistics" target="_blank" rel="noopener noreferrer">like most businesses</a>, you use SaaS systems like Salesforce, HubSpot, and Monday.com, we can work with you to integrate these systems with your website, portal, or app for seamless data exchange between your various systems and your digital endpoint. We do this using our Si Middleware, which lets us connect multiple systems together for a completely bespoke solution for you and your business.

3. Integration

<a href="https://sidigital.co/work/harwin">We’ve done exactly this for Harwin</a>, a world-leading electrical connector manufacturer. Not only did we move them over from WordPress to Payload, we integrated their Salesforce system, Bynder asset management system, and various other systems with their website. Not only does this mean their data is up-to-date across the board, it’s also streamlined many of their internal processes, saving them countless hours of valuable time.Find out more about our <a href="https://sidigital.co/services/integrate">integration services here</a>.

If your current website CMS is slow, insecure, and always needing plugin updates, now is the right time to move to Payload. But before you make the jump, book a 1-2-1 tour with us to see what Payload could mean for your website.When you book your tour, we’ll take you on a guided tour of the CMS to show you the key benefits, answer any of your questions, and much more. You’ll also get the opportunity to try Payload out for yourself. We’ll give you exclusive access to our demo so you can see the benefits for yourself.<a href="https://sidigital.co/payload-playground">Book your 1-2-1 tour here.</a>

Book your 1-2-1 tour of our Payload Playground

Lead Frontend Developer

Danny Walker

Payload is a modern headless CMS that uses powerful technologies like TypeScript, Node.js, and React—technologies that form the core of our frontend development stack. Its endless customisation options enable us to build tailored APIs and flexible content structures that perfectly match our clients' specific requirements.

What is Payload CMS?

We’ve seen countless benefits from Payload since we’ve been using it, and they’re benefits to both us and our clients. We’ve picked out our top seven benefits below:

The benefits of Payload CMS

A lot of our clients often come to us with a website and a few third-party SaaS systems they want to speak to their website, portal, or app, like <a href="https://sidigital.co/services/integrate/salesforce">Salesforce</a> or a <a href="https://sidigital.co/services/integrate/payment-gateways">payment gateway</a>. Payload’s headless CMS features an Application Programming Interface (API) endpoint, and when paired with our Si Middleware, we can integrate systems into websites, portals, or apps with ease. It means data can be fetched, updated, and created quickly and easily, so our clients can access their data from the CMS anywhere they like.<a href="https://sidigital.co/services/integrate">We integrate all sorts of third-party systems</a> into our client websites, and Payload makes the process a lot quicker and easier for both our clients and us. It’s a win-win situation.

1. Integration

Nobody wants to have to rebuild their website every year. Not only would it be costly and time-consuming, but it can be a jarring experience for your users too. Payload is a future-proofed CMS option. Using the latest TypeScript and Node technology, Payload is built to be secure and reliable. It receives regular updates as well, keeping everything running smoothly on your site.

2. Longevity

Websites can often be left in the same state for long periods of time, and this is often due to the pain of trying to get changes and code updated. Payload is built around flexible content modelling, which means it’s easier for our developers to quickly add features and fields to your website. This means websites can grow and scale at the same rate as your business, so your website never falls behind.

3. Flexibility

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

Get the latest news and updates

Security is normally our clients’ top priority. Over the last few years, cyber attacks and hack rates have rocketed, meaning there’s more focus than ever before on keeping your website’s sensitive data safe and secure.Payload is self-hosted, which means you have control and oversight of all the data that the website holds and accesses. This is a huge benefit for companies that have websites that contain sensitive user data such as personal information. Your data is fully controlled by you, not a third-party service.

4. Security

Website performance is essential for success in the world of digital. Studies have found that around <a href="https://prerender.io/blog/page-speed-tips-and-statistics/" target="_blank" rel="noopener noreferrer">40% of desktop users</a> will leave a website if it takes more than three seconds to load - and this number rises to 53% for mobile users. It’s also worth noting that search engines like Google <a href="https://www.debugbear.com/docs/page-load-time#what-is-a-good-page-load-time" target="_blank" rel="noopener noreferrer">penalise websites that take over 4 seconds to load</a>, pushing you further down the results list. The message is clear: the faster your website performs, the better chance you have of keeping visitors engaged with your content.Payload's headless CMS is optimised to load content and images quickly, especially when combined with Next.js static site generation. Users expect to find content quickly and easily—it's a fundamental UX principle that leads to higher conversion rates, and this performance boost ensures your users are getting to where they want to be quickly.But it’s not just your website’s users that can benefit from the performance boost. The backend of the CMS is lightning quick as well. Building out new pages can take a matter of minutes. Adding in blocks is instant, uploading images is rapid, and saving your page between edits is speedy, meaning clients spend less time waiting around for content and blocks loading in.

5. Performance

Quality is at the heart of everything we do here. Payload supports TypeScript, a powerful enhancement of JavaScript created by Microsoft, to ensure our code meets the highest standards. Its strict typing system helps us catch errors early and write more reliable code, resulting in robust and maintainable websites for our clients.

6. Quality

It’s important as ever to ensure your site performs well from an SEO perspective to ensure the correct users are finding your site. Improving rankings on Google and other search engines means more traffic to your site. Payload comes with a whole host of SEO tools built-in as standard, and they’re super easy to use.Its visual-led design tells you how your meta descriptions and images are performing, as well as giving you an SEO check score out of three. You can upload a custom meta image too to maximise impact. Payload will even give you a preview of how your page will look when it shows up on search listings.

7. SEO

Thanks to Payload’s flexibility, it’s a great option for many different types of websites across all sorts of industries. We’ve built massive websites with complex SaaS integrations like Harwin, to smaller brochure sites like our own. But Payload CMS is also a great option for content-rich websites and blogs, membership platforms, internal enterprise tools, and much more.

What type of site would benefit from a Payload CMS?

From flexibility to security to SEO, Payload excels at being a slick, optimised CMS for our clients that lets them reap the rewards of a fully optimised website. Moving CMS is never an easy decision, and usually involves a full website rebuild and redesign, but the benefits can be huge. Payload is an excellent example of how a CMS should be, and as a modern agency, we’ve loved every minute of our move across to Payload.If you’ve got a website you’re thinking of rebuilding and want to move across to Payload, <a href="https://sidigital.co/contact">get in touch</a>.

Conclusion

Have a read of some of our other articles

The benefits of choosing Payload CMS for your business’s next website

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://payloadcms.com/" 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.

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

Since we’ve started working with Payload, 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

Is your website CMS holding you back? Try our Payload Playground

Lead Designer

Sam Leonard-Rendell

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

You may have <a href="https://slate.com/technology/2024/10/wordpress-wpengine-matt-mullenweg-drama-explained.html" target="_blank" rel="noopener noreferrer">seen the news surrounding WordPress</a> lately. If you haven’t, WordPress has been at the centre of a media storm, causing confusion and concern amongst developers, as well as people who have sites built on WordPress.In September, WordPress CEO, Matt Mullenweg, went after WP Engine (WPE), calling it a “cancer to WordPress”, accusing WPE of taking hundreds of millions of dollars from the WordPress platform. WordPress then sent cease and desist letters to WPE before banning it from accessing WordPress.com entirely. This move has left significant numbers of websites vulnerable to cyberattacks or left them completely unusable.As a result of the issues with WordPress, we’ve been exploring some CMS alternatives. Here’s our top five:

The WordPress whirlwind

Created in 2021, Payload was designed to showcase what can be done when using modern frameworks to build a CMS. Payload can be used for any type of website thanks to it’s easy to use application programming interface (API). It also integrates seamlessly with popular frameworks like Next.js, so it’s a good all-round solution. Here at Si digital, Payload empowers us to create beautiful websites that are fast, easy to manage and highly customisable. If you want to find out more about why we’ve moved to Payload, <a href="https://sidigital.co/lab-notes/why-weve-swapped-wordpress-for-payload" target="_blank" rel="noopener noreferrer">have a read of this Lab Note</a>.Advantages:<ul class="list-bullet"><li value=1>It’s simple layout makes its easy to built new pages and navigate</li><li value=2>It’s very fast—creating new pages is rapid, a real time-saver</li><li value=3>Excellent SEO tools make it easy to use and its visual aides help you determine whether your SEO content is working to its full potential</li><li value=4>eCommerce product management means running your online store is simple</li><li value=5>Live previews, see the page you’re building as you build it</li><li value=6>Create your own forms directly in the CMS—really powerful</li><li value=7>Top-quality editorial tools make your content stand out</li></ul>Disadvantages:<ul class="list-bullet"><li value=1>It’s plugin ecosystem is quite small at the moment, and they have to be installed manually rather than through a user interface, meaning development time is required</li><li value=2>Due to its infancy there are some features which require plugins or modification, where other CMSs have these as native features</li></ul>

01. Payload

Released in 2001, Drupal is a developer-focused CMS known for its scalability and customisation capabilities. Drupal has an extensive library of plugins, making it a good option for large or complex websites. It can take time to master due to its complexity, but it allows for granular content management, user roles and internationalisation.Advantages:<ul class="list-bullet"><li value=1>Large plugin library</li><li value=2>Enterprise backing—Drupal is used by lots of government websites and non-profits</li><li value=3>Drupal offers out-of-the-box user and permission management tools, providing security from the get-go</li><li value=4>Large online community makes it easy to get support if you need it</li></ul>Disadvantages:<ul class="list-bullet"><li value=1>It’s a steep learning curve for both developers and users. Its complex CMS can be quite complicated in places</li><li value=2>Hosting can be expensive compared to other options</li><li value=3>Performance is slower than many alternatives</li></ul>

02. Drupal

Craft CMS is similar to both Drupal and WordPress, but it’s much newer, so it has more modern features such as multiple post authors, in-editor live preview and headless support. It also features a fairly neutral user interface, meaning that you’ll feel right at home if you’re moving from other CMS’s. It’s built using PHP, just like WordPress and Drupal, meaning developers can get up to speed quickly and easily.Advantages:<ul class="list-bullet"><li value=1>Easy-to-use user interface makes it easy to pick up if you’re moving from another CMS</li><li value=2>Large plugin directory</li><li value=3>Extremely customisable fields make the CMS a breeze to use</li><li value=4>Easy localisation makes your website accessible anywhere in the world</li></ul>Disadvantages:<ul class="list-bullet"><li value=1>Not free for commercial use, creating an additional cost to your business</li><li value=2>Relies heavily on plugins for what would be considered standard features in other CMSs, such as forms and SEO</li><li value=3>Multiple users are only supported in paid versions</li></ul>

03. Craft CMS

Contentful is a headless CMS, meaning your website and CMS are kept separate, rather than being kept together like the other CMSs we’ve looked at so far. Contentful is hosted in the cloud, so your content is highly available all over the globe.Its headless CMS structure is ideal if you have a fully custom website. Decoupling the CMS and frontend offers countless benefits, including improved security, speed and flexibility. However, it does require a bit more work in the project build phase.Advantages:<ul class="list-bullet"><li value=1>Simple, easy to use user interface</li><li value=2>Fast, and globally available</li><li value=3>AI integration makes for easy content generation and automated routine tasks</li><li value=4>Highly customisable</li><li value=5>It's low maintenance thanks to its cloud-based hosting. Contentful manage and maintain the platform</li></ul>Disadvantages:<ul class="list-bullet"><li value=1>Contentful’s free tier is quite restrictive, which limits what you can achieve without paying</li><li value=2>Interface usability is dependant on how you chose to structure your data, so it can become messy without proper upfront planning</li><li value=3>Standalone CMS which requires an entirely separate frontend build</li></ul>

04. Contentful

While MDX is not a CMS, it’s a different approach to managing website content. With MDX, you edit your content by editing files, like a Word or Notion document, making it a familiar and easy experience for editors to add or change content. MDX extends the functionality provided by Markdown, allowing the addition of custom blocks in and around content. It is also super fast and can be embedded directly into your Next.js project. MDX is best suited for technical marketing teams, developers and solo maintainer projects.Advantages:<ul class="list-bullet"><li value=1>Content loads very quickly</li><li value=2>Pages and posts are editable in a familiar document style, so it is quick and easy to update content</li><li value=3>Not reliant on a separate CMS stack, so less to maintain</li></ul>Disadvantages:<ul class="list-bullet"><li value=1>No user interface whatsoever—you can only edit a file</li><li value=2>If there’s an error in the file, the page won’t load on the frontend</li><li value=3>No user or permissions management</li></ul>

05. MDX

While PHP-based CMSs like WordPress and Drupal have become the go-to option, they are gradually being replaced by faster, lighter and more modern CMSs like Payload and Contentful. PHP based CMSs have shaped the way we build websites over the last 20 years, and have allowed marketeers to independently manage website content without having to continually turn to developers for basic updates. They’ve also allowed people to install themes to start building a site through a ‘full-site editor’ experience without the need to write any code. This is really useful for small companies and individuals, but often come at the cost of flexibility, customisation and site speed, all of which are vital for a website’s success.On the flip-side, setting up a headless CMS will require technical ability, but in return you’ll have a flexible, fully-bespoke website with better security and quicker page load speeds. Our own website, and the <a href="https://www.harwin.com/" target="_blank" rel="noopener noreferrer">website we’ve designed and built for Harwin</a> are both built using Payload and Next.js. The speed of both the frontend and CMS for these sites is unmatched when compared to traditional CMS options.If you’ve got an existing site that uses a traditional CMS, it might be a good time to start thinking moving across to something more modern. So <a href="https://sidigital.co/contact" target="_blank" rel="noopener noreferrer">get in touch</a> if you’re ready to make the jump from WordPress to a new, drama-free CMS.

Time to move from WordPress?

The best WordPress alternatives for your website and why you should switch

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.

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>.

How to Design for Colour Blindness: Best Practices for Accessibility

<a href="https://teamtreehouse.com/" target="_blank" rel="noopener noreferrer">Treehouse is an online learning platform</a> that teaches coding, web development, design, AI, and data science. With over 1.2 million students worldwide, it's helping people gain in-demand tech skills and launch careers in tech, regardless of their background, skillset, or where they're based.

What is Treehouse?

We ran a giveaway offering three Silver annual Treehouse memberships to people we felt would benefit the most.We didn't set any strict criteria. We simply asked people to tell us in 140 characters how a Treehouse subscription would help them. And the response was overwhelming. We had hundreds of stories pouring in, each one more compelling than the last. Narrowing it down to three was tough, but we wanted to make sure these memberships genuinely made a difference.One story stood out.

Our Treehouse giveaway

Casey (<a href="https://www.instagram.com/misteroptimist" target="_blank" rel="noopener noreferrer">@misteroptimist</a>) is a volunteer in Battambang, Cambodia, teaching two web development classes, CSS and HTML Foundations, plus Ruby on Rails and basic web application development.We caught up with Casey to see how the Treehouse membership was going. Here's what he told us: “The Treehouse membership has opened up a lot of opportunities to learn, for both my students and myself. Being a self-taught developer, I find myself researching hours each night for the following day to be able to teach my students what I’m learning or what I’ve learned so far. Treehouse has answered so many questions for me, making my job a little bit easier. I’ve also been able to play different videos during our class, and the students are loving it. Currently, I’ve been picking and choosing between the different CSS videos depending on what we’re teaching that day.I received the Treehouse membership right near the end of our teaching quarter, but this upcoming quarter I plan to follow the lesson plans that Treehouse has set up with my new class. I’m very excited, and so are my students. The videos really help them visualise what they’re doing and why they’re doing it – there’s also always a confused laugh when Jason Seifer does that goofy little smile at the end of the videos.Si digital and Treehouse, you guys have made it possible to help better educate youth in the area of Web Design/Development in developing countries. On behalf of me and my students, we thank you!”

Meet Casey Dierking

Supporting our industry and emerging talent matters to us. Hearing that Casey and his students are loving Treehouse, and that we could help make it happen, is exactly why we did this.Those three memberships were just the beginning. We want to do more to help our industry grow, and we're always looking for new ways to make an impact.

Why this matters

He is a robotic arm that sits in our office and is controlled over the internet by players from around the globe, all in realtime.We quietly launched Sid on 20th November and before we knew it the traffic started to pour in. Players were submitting Sid to some of the big news sites like Reddit and Hacker News. Fast Company tweeted a link to their 936,000 followers and traffic surged again.At one point we had 701 simultaneous viewers with a wait time of nearly 4 hours, and yes, some people did wait that long to play! Players started creating YouTube videos about Sid and some even set up Twitter accounts just so they could Tweet their score.

Meet Sid

The scoring system consists of push switches under each hole, when the ball falls through a hole it triggers the switch which tells everyone the player has scored. We found a rare angle of ball entry into one of the holes that meant the ball got stuck holding the switch down. The moment your go started you were then continually awarded points every couple of seconds! We found the issue and re-seated one of the switches in under 30 minutes and bought Sid back online. For similar applications we would definitely choose some form of motion detection rather than physical switches which can degrade over time with so many people playing.

Highscores for everyone

One afternoon we saw a rise in traffic from <a href="http://boards.4chan.org/" target="_blank" rel="noopener noreferrer">boards.4chan.org</a>. A referring domain in your logs that instantly raises the heart rate and gives you that feeling in the pit of your stomach. Anonymous, rapid-fire imageboard 4chan has a reputation for a reason, some of their members are behind some of the biggest high profile attacks on websites in the past 5 years including the public facing website of the CIA. So naturally, when we started seeing a surge of visitors we knew something bad was no doubt on its way.

Enter 4chan

Luckily we built Sid with the mindset of abuse and he had plenty of motor limit protection to stop the arm hitting the staging area or moving “out of bounds”. After 3 hours Sid was still standing and they’d been unable to wreck any havoc, until we suddenly saw a message appear on screen that wasn’t sent by us… We built in a global notification system so we could send messages to players and give them updates when required. A clever 4channer had found a logic bug in the code and was able to send 3 admin messages before we detected the issue, fixed it and closed him off! Thankfully 3 unsolicited messages were the only damage and the next 24 hours were business as usual. 4chan even started tweeting with the hashtag #freesid2013 to spur efforts to “free” Sid from his human masters! On reflection, we’re glad 4chan paid us a visit. We are confident in the security and reliability of the systems we build and it was reassuring to see Sid hold up against the worst.

What amazed us the most about this experiment was the response we had on social channels. Although we “gamified” Sid we never really considered him a full-blown web game, but that’s not how our visitors saw it. We saw people challenging each other for top scores over Twitter, YouTubers with millions of subscribers were uploading videos about Sid and 2 months on we are still receiving thousands of visitors from these videos every day.They say practice makes perfect, according to our database @lancethackeray played 330 times to achieve his high score. He recorded a video of his victory which you can watch. Now that’s dedication!

YouTube Gamers

After 130,000 plays one of Sid’s motors finally gave in. One afternoon he was unresponsive to left and right movements, after taking him offline to investigate we found one of the motors had completely burnt out and the cog’s teeth threaded. We placed an order for a replacement motor and within 24 hours Sid was once again online. For future hardware projects we will definitely have spares on hand, and would recommend metal gears rather than plastic for longevity.

Burnt motors

When dealing with user generated content — in this case player names — you always have to be aware of both security and profanity. We are all grown ups here but we were wary that young children might enjoy playing with Sid, so we wanted to keep our leaderboard as PG as possible. We knew using Twitter usernames would help the issue of security — if the username is deemed safe for storage and display by Twitter than it must be for us — but we naively thought they used some form of profanity filter for usernames. That was a bad assumption of course, especially when 4chan joined the party. However, we now have a reasonable <a href="https://pastebin.com/iyq6eNT1" target="_blank" rel="noopener noreferrer">list</a> (NSFW) of “bad” Twitter accounts we came across if it’s of any use. Some usernames aren’t bad, but their avatars are!

Relying on Twitter to restrict profanity

Sid was the third in a series of digital marketing initiatives we’ve worked on. The last two of these have combined the digital and physical world to engage on a deeper level with our audience. Each marketing campaign has seen a vast increase in traffic and interest for us.We’ve invested the time and energy in honing the technology, providing video streaming with less than a second lag and the hardware skills to keep Sid going with almost 100% uptime for 2 months solid and over half a million visitors during that time.There is a huge potential for this kind of digital marketing campaign. We are now looking to work with a like-minded brand who sees the potential in engaging with its audience in a unique way.To discuss the opportunities, <a href="https://sidigital.co/contact">drop us a line</a>.

Lab Notes