As we fast approach the end of 2019, we want to take a look back at some recent website design trends that we have both loved and loathed over the past 10 months; as well as look at some trends that we expect to dominate web design in 2020.

Our main objectives when we take on a project is to build a website that users can engage with. So if you’re looking to increase traffic to your website or improve user engagement, some of these tips may be for you.

Overlapping design elements

Now that we have a lot more freedom when it comes to front-end web development, designers and developers are allowing ourselves to become far more creative and push the boundaries in terms of design. One of the most prominent design trends that we’ve noticed popping up again and again throughout the past year has been overlapping design elements.

CSS grids are becoming increasingly popular with web developers, meaning that it has never been easier to be creative with website layouts and making your page responsive without an absolute element destroying your whole layout when doing responsive styling.

Website with overlapping design elements

Vibrant gradients and duotones

A great website isn’t just about the written content, it’s about the visuals. Visitors are going to be far more interested in a website design that really speaks to them as an audience, with bright colours and contrasting schemes that will make your website and company memorable. A single colour on a web page can appear rather samey and dull, but use of gradients and a mix of duotones can help your website look far more engaging, encouraging users to stay longer and click through more pages.

Whether it’s a more bold and vivid or subtle and understated design, over the next 12 months we are definitely expecting to see far more websites using this kind of scheme; mixing together dark backgrounds and bright images and text to engage their customers and turning previously rather static, drab pages into fun mood boards that bring across a sense of personality to your company.

Website design with vibrant gradients and duotones

Creative hero banners

Over the past couple of years in the digital creative sector, we’ve really been able to have fun with designing website banners, moving on from the old-hat image-slider trend that has populated the top of our websites for many years.

Known as ‘hero banners’, these animated banners are often the first thing you see when entering a website; showing the company logo, name or even an image or animation that sums up the company’s personality. While some hero banners take over the screen with large stock images, they are by no means confined to that.

We love how creative agency Alfa Charlie has used the hero banner for their website. By incorporating overlapping design elements, including a creative logo transition and text that pops out at you when you first load the website, they’ve achieved an effective and simplistic way to represent their brand.

HTML canvas has come on leaps and bounds in the past few years with creativity at its centre. While a generous budget is required, the simplistic look and classy feel that it wins your website is definitely worth the investment.

Creative hero banner website design

Video banners using 3D modeling

3D modeling and rendering has been around for years, so we’re certainly not calling this a new thing. However, while this technology has previously been rather closed off to most companies, in 2020 we expect a significant rise in this medium for websites across the internet.

To date, 3D modeling and rendering has mainly been used by people who have the advanced skills and know-how of using these technologies, or a budget large enough to outsource this kind of work. But with the costs of these technologies on the decline, plus the creation of more design software tools aimed for general users, almost anyone can create professional-looking 3D models.

When used correctly, 3D modeling can achieve an incredibly high end for a website with a look feel that is at the forefront of technology and design.

Brilliant and creative video banner on a website

More use of white space

It’s often said that ‘less is more’ and with website design, this is becoming increasingly apparent as well. When it comes to design, minimalism is one of the major principles that can give a website that modern and cutting edge appearance, instead of flooding your customers with lots of images and text that can risk drowning your message and USP.

Although content is, of course essential for SEO performance, large paragraphs of text and overuse of images can be off-putting to site visitors. It’s essential to plan strategically what and where you place content on your website to help visitors focus on the important things you want them to remember. This can be achieved through short sentences, popping images and bright colour highlights to your scheme.

White space brings clarity and focus to a user journey. Instead of firing several messages to a visitor in one go, the design should funnel a user through a particular journey and land them to what they are looking for as quickly as possible. This is where white space is incredibly beneficial.

Website design with a good use of white space

Design elements we didn’t like so much

There’s been plenty of great design trends so far that we love, but then there’s some we didn’t like too much as well – either because they are proven to be ineffective in their objectives, off-putting or just plain irritating. Here are a few 2019 trends that we hope don’t stick around for long in the new decade.

Push Notifications

Like all kinds of pop-ups, they are irritating and go a long way to giving a visitor a bad experience on their website journey. This isn’t limited to things like cookie policy agreements, but also seemingly helpful invitations to share, sign up or even apply for a discount can really put you off a website. These are especially frustrating on poorly designed websites and mobile users when the ‘X’ to close the pop up is terribly small and or hard to see. If you can’t close the box, you leave the site, simple.

Material Design

Material Design is a design language developed by Google in 2014. It brings a cleaner design and consistent look to mobile apps and web pages across different platforms, using bold and colourful graphics. Don’t get us wrong, when used correctly it can look very smart however, this fashion is beginning to become incredibly overused. We initially quite liked it, but the rise of companies using it without tailoring it to their own sense of branding has just made them all look the same.

Material web design website

Design trends we’re predicting to see a lot more of in 2020

So, what kind of new web design technology and trends can we expect to see emerging into the new decade of 2020?

More chatbots – Chatbots are a great way of engaging the visitors to your website to ask questions and send queries, taking over from the rather detached contact forms that often take the place of email enquiries through your website. They can be used for anything from answering questions, offering advice and assistance, making bookings and even dealing with complaints, without having someone manning the phones or email inbox all hours of the day.

Ask your website developer to include a chat box for your website homepage (or research how to implement one yourself if you have built your own website instead).

Minimalism isn’t just black and white. – Minimalism really is the fashion of the day when it comes to website design, we touched on this above where we talked about the much loved ‘white ‘used in design. However, when we talk about minimalism in website design, we don’t just mean black and white empty pages. The key to minimalism for design is the use of solid colours that stand out against one another, plus the use of space around the content; bold fonts in contrasting colours and images that make a site pop out against its competitors.

Colourful minimalistic web design website

Micro Animation and interactions – Small areas of animation and interactive elements within a website can go a long way in terms of both accessibility and charm. Micro animations can be used to help guide a visitor around a page, while others are there to simply add personality and reinforce their brand. Whether it’s an arrow pointing in the right direction for a query, or a simple yet helpful animation of your logo, mascot or background image that brings a smile to your customers’ face. Micro animations have been popping up rather a lot over recent years to help websites to stand out against their static competitors, but in 2020 we expect to see a lot more of them.

While these animations are small (as the name implies), their impact is big. It gives users feedback when they interact with something like a button, or tells a user something is happening with a loading screen. This moving feedback is appreciated by users as it helps to know that the website is ‘working’ and their action has been received, it’s amazing what an extra bit of movement can do for a page.

Conclusion

The first impression of a website is critical, not just how it looks but how it engages. It determines whether a visitor is going to continue their journey on your website, or leave and click on the next search result for their query. This is why ensuring a website is up to date, on brand and designed and built using best practices all round is essential.

While we continue to always be at the forefront of design and technology we only put into practice for our websites what will work for that individual client. As much as we love seeing new design trends emerge, what is right for one website may not be right for another (just because a crop top is in fashion, not everyone should wear one, you know!) See more about designing for the right audience in our previous blog post.

Written by Lucid Digital in Design