Books and pens on a desk

Websites change often with some trends sticking around for a while (think Hero images) and others being a bit more fly by night. Each year brings its own website trends. Here’s how the website trends are looking for 2023.

You’re going to read lots of other reports about these design elements:

Brutalism

3d

Nostalgia (think 90s and 00s websites)

They’re great trends in themselves but unless you’re in a creative industry which needs to show you have your finger on the pulse of cutting edge design then it’s not going to be relevant to you.

Here are the website trends and must haves in 2023

Accessibility

Remember 2017 when every website had to have a GDPR statement? 2023 is all about Accessibility. Think:

Text to speech

High contrast between text & backgrounds.

Adjustable text sizes

Descriptive alt tags for images

Focus indicators for links.

These are all vital components to help the disabled community access websites. Whilst we can’t cater for every single tool these communities will use to access a website, we can ensure the main frame, design and build is completely accessible so potential websites users aren’t alienated.

You can make sure your website meets accessibility requirements without spending additional money or buying software, with these simple processes:

Text Size 

Your body text should be a minimum of 17px and where possible use a flexible measurement like em so the text automatically adjusts according to the screen size/any tools working with it.

High Contrast

Subtleties in colour can be a beautiful aspect of website design, however if it means users can’t easily read it, then you’ve alienated rather than drawn in your audience. Bold designs with a high colour contrast not only look great, they’re fully inclusive for all audiences.

Alt Text

This is the text that describes an image. It’s used as a fall back if the image doesn’t display. It’s also used by screen readers when a website is being read out to the consumer. Alongside being an accessibility requirement it is a big part of SEO so if you fill in your alt text when you upload your images you’ll be boosting your website up the Google rankings at the same time.

Focus Indicators

These pop a box or a highlight around text which has links or popovers connected to them. It shows people where to click/where there’s additional information without them having to hunt for it.

Text to speech

There can be a whole lot of reasons someone may choose to have a website read to them rather than read it themselves. There are a host of Text to Speech plugins you can use for your website. Some have free versions, others are paid-for plugins. You can find out more through this article. 

Not sure where to start?

A simple, free thing to start with is a voice search plugin. Simply install the free plugin to your website, activate it and your search bar will have a microphone on it which you can use for voice searching.

If you have the budget to use additional plugins which help with accessibility that’s great, however do your research before buying as not all of them are compliant with accessibility regulations.

Want to know more about accessibility?

Scrollytelling

Every website tells a story. It’s told through the images and text. In 2023 it’s also told through the scroll of the website. Whether that’s using animation to appear as the user scrolls, or swiping side to side, bouncing around, scrollytelling is big for 2023. So when you’re planning your website build or refresh, as well as planning the text and imagery of the website, plan how it will appear to users, too.

Interactivity

The more interactive your website is, the more you’re engaging your potential customers and the more likely they are to buy from you, rather than your competitors.

There are many ways you can give your visitors the opportunity to interact with your website. Quizzes are a great way to pique their interest, have them interact with you and capture their email address in the process. You can also look at using scorecards, popups, notifications, Live Chat. Anything that encourages your visitors to interact with your website.

Instant Availability

When people have a question they want the answer straight away. Off they go to Google who brings up search results to match the questions. If customers then land on your website and want to ask you a question, being able to answer in real time is a great way to win customer loyalty and make sales.

The easiest way to do this is to have a Live Chat plugin or one that allows people to WhatsApp you. If you have an active Facebook page you can add some code to your website which puts the Messenger plugin onto your website, where you can receive and answer messages through the Messenger app.

Micro Interactions

These are fun ways people can interact with your website - think of a button shaking when you hover over it or an icon changing colour. A popover which brings up more information when you hover over text. Quick ways to engage your visitors and encourage them to explore more of the website.

Thumb Friendly Navigation

Mobiles are fast becoming the main source of viewing for websites. Website design is always created for desktops first, particularly if it’s for a service led industry but desktop design must always have mobile users in mind.

There are a lot of ways to make websites friendly for mobile view:

Disable video on mobile

Make sure text is responsive

Remove text layers on images

To name a few. What’s particularly useful is to make sure your website is ‘thumb friendly’ meaning that your navigation and Calls to Action aren’t at points which are hard to reach. If in doubt, make sure they're centred on mobile view.

Text only hero images

There are some fantastic reasons to go for a text only hero header. First, let’s break down the words:

Hero = full screen

Header = top of the page.

Alongside the logo and navigation you’d usually see an image or video alongside some sort of tagline or statement about the company here.

A trend that’s starting to catch on is using big, bold text on a contrasting colour background in this space.

I've made the top image of this post a text only hero image so you can see it for yourself.

Pros

You know exactly what the company is/does.

Speedy loading for desktop and mobile - no images slowing it down.

A striking visual without having to organise a photoshoot or use stock images.

Cons

Can feel a bit ‘off brand’

Can be viewed as basic - not so good for high value industries.

Can be tricky to get the text responsive on all mobile devices.

It’s super easy to do and works well for search engines because the text is ‘above the fold’ which means it’s within the first screen that loads on a mobile meaning you get the double whammy of a good SEO score because the text says exactly what you do, it’s using the right hierarchy of H1 tags and it’s not loading additional resources.

Negative Space

The best way to highlight an image or section is to put a space around it. The more space, the more focus on the section you’re highlighting (within reason!) This space is known as negative space. Negative because the space isn’t being filled with anything. To test this method add margins between elements and padding to existing elements.

Negative space can also work in reverse….. want to have an image cross 2 different columns - align the image to one side and set a negative margin (meaning you put a - in front of the margin number) and watch the image appear across both sections.

Pro tip: As we’re designing websites to be responsive on all devices set the negative space in percentages rather than pixels to ensure it looks as you want it to on different screen sizes.

Want to generate more leads & sales from your website?

Join 100s of small business owners taking control of their online marketing with weekly website tips delivered direct to your inbox.

Dark Mode

Dark mode adds a layer to websites which can feel intriguing and sleek. This can be fabulous for high trend websites but not so good for websites where you’re hoping to appeal to more regular customers. Whilst dark mode can feel sleek it can also feel intimidating for some. For high ticket agencies it may be a good way to go but for the more regular Joe, I’d stick to light themed websites.

Integration with CRM

People are busier than ever and a good CRM will help connect a website with the other processes used to run a business. This can be an entire database of information or Mail Software. Let your website do the heavy lifting for you and use a CRM connected to your website for your processes.

Conclusion

Website trends are just that: trends. Whether you decide to embrace a lot of what's on this list or keep with the website design that feels the most aligned to you, the choice is yours. If you'd like to embrace some of the themes above, a good starting point is to look at accessibility. Some of the changes to make your website accessible will be simple to implement and will make a huge difference to those who need extra support when using websites.

If you'd like to discuss how we can work together on your website build or existing project, book a free, no-obligation call with me using the button below and I'll look forward to meeting you on Zoom.