10 Web Trends for 2022

It’s that time of year again, when we dust the cobwebs off and start the new year taking a look at what web design trends we think will be prominent in the year ahead.

Web Sustainability

Did you know that the data centres used for the internet have the same carbon footprint as the world’s air travel industry? And use more electricity than the whole of the UK.

Towards the end of 2021 the UK hosted COP26, the UN Climate Change Conference, the aim of which is to limit the temperature increase of the planet to 1.5 degrees. To do this, the aim is to achieve ‘net zero’, when the amount of carbon emissions we add to the atmosphere are no more than the amount we remove from it.

The carbon footprint of websites is something being brought sharply into focus, especially when you consider the emissions numbers for the web are only rising. If you wanted to see how your website is impacting the planet, try this Website Carbon Calculator.

A lot of brands are taking this on board and looking for ways to neutralise their contribution to carbon emissions, planting trees to offset their usage, using hosting providers that use sustainable energy, (see Etsy’s 100% renewable electricity commitment below). But the design and performance of the webpage plays the biggest part in how big the CO2 usage is.

Green coding, cutting down the number of lines of code needed, and removing any unwanted or old code from websites, is another way the industry is making the web more sustainable. Mailchimp famously made their codebase smaller by 20kb, which seems like it won’t make much difference, but when you consider it is used by 2 million people, the total added up to a massive saving on CO2 emissions worldwide.

Screenshot showing Etsy's renewable energy notice

Reducing animations and making video content play on demand rather than autoplay, decreasing the size of your files and the number of tracking scripts can all help to minimise emissions. Ensuring the SEO and user journey for your site is performing well, so users find the information they need from your site quickly and don’t end up loading pages unnecessarily trying to find the content they require is vital too.

Inclusivity

In the same way that making your website accessible means it’s available to all people, regardless of any physical limitations they may have, making your website inclusive extends this sentiment to ensuring anyone accessing your site feels included, be it through your choice of pronouns or the images of people you use on screen.

If you’ve filled out a web form in the past year you may have noticed it has become standard to include more options when asking for a person’s gender, or simply not ask at all if there is no need to know this information.

Many brands are consciously becoming more inclusive, like Adidas for example. They have unisex and gender-neutral items/categories in their online store – a hoody is a hoody after all, anyone can wear it, and ensure images of these products have models of different races, body sizes, and genders.

They also have no gender field on their signup form.

Screenshot of Adidas website showing diverse use of models in product shots

Copy is another key area when it comes to inclusivity, with importance on the choice of pronouns. As a female web developer, who has read countless tech books where the developer or engineer is only ever referred to as ‘he’, I can tell you using ‘they’ rather than ‘she’ or ‘he’ when a gender doesn’t need to be specified can go a long way to making your audience feel included.

It’s important that this isn’t done as a ‘box-ticking’ exercise however, it’s obvious when something is shoe-horned in, or overdone, to try and make a point rather than naturally as part of the design process.

Performance / Page Speed Optimisation

As we talked about last year when Google put their new algorithm into play, focusing on their ‘Core Web Vitals’, page performance on websites is now a key metric, not only in the user experience of a website, but also towards it’s SEO and Google ranking performance.

Since it’s introduction last year, Google says “20% more page visits in Chrome meet the recommended Core Web Vitals thresholds”, additionally the CMS and Website Builder platforms they sampled all showed a significant improvement in their code bases’ Core Web Vitals.

Additionally, as we mentioned earlier, the impact of asset heavy websites and the excess load effort they require, from an environmental point of view, is another reason many are looking to lighten the load of their webpages and optimise that performance.

The biggest culprit of this is the large number, and high file sizes, of images and videos in webpages, and so one trend that will become more noticeable is around how these are reduced or replaced with smaller impacting alternatives.

Reduced Images

A lot of sites are turning to text only components, and focusing on the use of bolder, oversized typography, and more experimental fonts, to show some creativity as well as animations and hover state interactions.

Screenshot of lunchbox website to showcase oversized text implementation

Also a trend towards ‘no-image homepages’ or singular image homepages, again focusing on the bold, impactful typography and creative text animations, as seen below on Be Dandy’s website.

Screenshot of be dandy website to showcase reduced number of images in use

Illustrations

In most cases illustrations have a smaller file size compared to a photo equivalent, so replacing some photos with illustrations is a way of decreasing the page size without losing any content. There have been some really nice examples of this recently, like the website shown below.

Screenshot of humble team website to demonstrate illustration usage

Blur / Glassmorphism

A very nice way of adding a 3D feel to your site is to use the glassmorphism effect, which is a combination of blur, transparency and shadow to give a glass-like style to an element.

This has become more popular recently, and as it can be achieved using straight CSS, it’s very flexible and gives the opportunity for nice micro-interactions, as seen on the website below.

Screenshot of Decimal website demonstrating glassmorphism effect

Mega Footers

Large footers containing multiple groups of links and creative layouts and typography have become increasingly popular recently. From a user point of view, if the aim is to have a user read the whole length of your page, having a lot of options in the footer as the user’s next step makes perfect sense.

The key is to make sure the layout is organised, links are grouped and it’s clear to the user – it shouldn’t be a confusing mess of links.

You can see a few different examples below which show columns and large logos becoming a reoccurring theme.

Screenshot of sol'ace website to showcase mega footer implementation
Screenshot of colors studios website to showcase mega footer implementation
Screenshot of lunchbox website to showcase mega footer implementation

Scavenger Hunt Websites

We could all do with a little fun right? The return of the scavenger hunt website is one that can be used to great effect, for all audiences. This great website below reveals the location of its company retreat to their employees.

Screenshot of ThreeSixtyEight's scavenger hunt website

And Klarna created this mythbusting challenge to eradicate the myths surrounding their services to potential customers.

Screenshot of Klarna scavenger hunt website

Dark Mode

One that has been on the rise over the past few years is offering a ‘Dark Mode’ option to view your website, if a user prefers that option. There are a number of ways to do this, some sites use the user’s setting in their operating system to show them the same choice on their site as default, others allow users to set their preference as part of their account on that particular site.

The most common for sites who don’t generally have registered users with accounts is to offer a toggle, and many of the sites used as examples above include this option – you can see the toggle in the footer for Be Dandy, Colors and Sol’ace.

Positivity and Optimism

Finally, after two very tough years living through a pandemic, the message and feel being conveyed through websites is generally one of optimism and positivity. Whether this is through copy and imagery, or the use of positive colour palettes, this is a very welcomed message.

Clean designs with lots of whitespace, using more earthy tones, or a black and white/monochromatic colour scheme – to reduce the noise and distractions and focus on the content you are bringing to the user, enhancing their time on your site and providing a more rewarding experience.

Our work for Adobe’s #My2022Vision captures this feeling of optimism through design and creativity, setting high expectations for 2022. Let’s hope its a brighter year for us all.

Want to discuss further?

Get in touch.