Web design trends 2021: 3D effects, scrollytelling & more interaction

After a year like the one we have just experienced, it is almost utopian to venture an outlook on future trends. After all, who would have thought in 2020 how quickly the world can and will change? And how quickly we can adapt to the changes. Let’s take a look at the web design trends of 2021 together!

The new normal has us all firmly in its grip: technology has become more important to us and is more firmly integrated into our everyday lives. As a result, our technology must move in a direction that allows for more personalisation, integration and interaction. And for all of us.

Lockdown, working from home and the like have shifted our focus more towards the digital world. However, this trend is also leading to rapid growth in digital products. The same applies to e-commerce. All of this requires more individuality and skill in order to be able to position ourselves against a larger number of competitors.

Right now, it is important to focus on the end users. The aim is to amaze them, integrate them and personalise the internet. And always focussing on maximum functionality.

Between dimension and interaction

We therefore see more opportunities for personalisation in the new year. We will see more opportunities to switch between dark/light mode or even customise the colours of a design.

We are seeing designs that are more daring and less symmetrical. The counter-trend towards the integration of organic colours and elements remains. We achieve more personality through collages, mixed media and the integration of animation effects. Let’s take a look at the web design trends 2021 in detail!

Web design trends 2021: Scrolling

Parallax & Parallax Scroll Animations

We have been using Parallax, especially with simple images, for several years. Recently we have added complex Parallax scroll animations. Used correctly, these transform your website from a flat 2D-like background into an interactive digital world – comparable to a theatre stage.

Please note: For users who struggle with dizziness, too much movement on your website may cause discomfort.

A few tips for successfully integrating the Parallax effect:

• Make sure that important information is always clearly displayed and is not trumped by the effect.
• Make sure that the entire functionality of your site is maintained on all devices – even under sub-optimal conditions, such as poor internet reception.
• Minimise the use of parallax effects.
• Consider integrating an option to deactivate the effect.

The website for the game Firewatch uses eight different PNG images in the header, which are animated together to convey the feeling of a real landscape. In the mobile version, however, the parallax effect is replaced by a static image.

Scroll animations

Extensive scrolling animations are also not entirely new, but have received less attention to date – probably not least because their composition requires drawing skills. As always: less is more. Used well, scroll animations give your website a harmonious flow.

ToyFight is a creative agency based in Manchester. Through the skilful use of scroll-triggered animations, the agency adds vibrancy and personality to their website. The animations are also effective on smaller devices – even if the loading time is somewhat affected.

The company Prevint offers an overall concept against sexualised violence. The three most important precautions for prevention are visualised through the minimal use of scroll animations. A special feature here is the use of vertical and horizontal scrolling: The main navigation is on a vertical level, while horizontal scrolling goes deeper into the respective topic.

The navigation arrows at the bottom of the screen provide additional orientation. On the mobile site, navigation is done solely by tapping buttons.

Horizontal scrolling

Even though opinions on horizontal scrolling have differed widely in the past, we are seeing more and more websites using it. From a user experience perspective in particular, their use was previously considered questionable.

The Home Société website, which is designed as a one-pager, is completely horizontally orientated. The sticky navigation, which we usually find at the top, is located on the left-hand side. It works in the same way with anchor links as with a vertically orientated one-pager. On a mobile phone, the page is displayed vertically.

Kwok Yin Mak’s website is a design portfolio that scrolls horizontally through all integrated pages. The difference to Home Société here is the use of infinite scrolling: when you reach the end of a page, you are transported back to the beginning unnoticed. This site also dispenses with horizontal scrolling on mobile devices.

A few tips for the successful integration of horizontal scrolling:

• Give your users a plan B, such as arrows or a sticky menu, to navigate your site.
• Think about what content on your site will benefit from horizontal scrolling.
• Try to stick to one direction as far as possible. Switching between directions too often will confuse your users.
• Be careful with the mixture of long texts and horizontal scrolling. This layout may make your texts less legible.

Scrollytelling

Scrollytelling means visual storytelling through animated scrolling. This gives the website personality and a feeling of interactivity. Long content is presented in an easily digestible way. Stories are structured in a more interesting way and communicated in a more appealing way. The Internet is being used more and more as a medium for interactive storytelling.

The New York Times uses a relatively minimalist approach here. The header image consists of a parallax effect, followed by a lot of text. This is packed into clear paragraphs and is visually supported by Parallax sections in comic style.

Another interesting example is Webflow. The website invites you on a journey through art history in search of the web design trends of the future.

canals-amsterdam.nl combines scrollytelling with horizontal navigation, animation and parallax. A special detail: the sticky menu changes its background colour depending on the colour of the current position. You can find more information on this topic in the Scrollytelling Guide.

Scrolling Cards

By scrolling cards, we mean vertical or horizontal scrolling that snaps into the next window before we navigate further. You can emphasise this visually, for example, by using coloured separations that convey the feeling of cards, as in the example of Green Meadow.

Other special features here are the text animations, which are constantly reloaded, and the infinite scrolling, which gives us the feeling of an infinite website.

Web design trends 2021: Exciting layouts

Integration of the physical properties of the product to be sold

Ora London sells nail varnish, among other things. They use the texture of their product for the design layout of their website.

On the Main Squeeze Juice website, there are splashes of colour that could resemble a washed-out version of their fruit juices. This effect is also used for some headings.

Ora The Floral Agency has visually emphasised its website with flowers from its range.

Neomorphism

Neumorphism has long been declared a trend. But why minimalist designs have so far been treated with aversion in the creative scene is primarily due to these two reasons:

1. Neumorphism is difficult to reproduce. If not created correctly, the design quickly looks rather unprofessional.
2. Due to soft shadows and low contrast, elements in the Neumorphism design can certainly cause problems for end users.

The Neumorphism trend is set to take off in 2021. The Neu Vision template shows an everyday-friendly integration of Neumorphism.

Abstract compositions, collage & mixed media

As previously mentioned, websites can show more personality. One way to achieve this is through abstract compositions or collages. Mixing different media – be it hand-drawn illustrations paired with perfect geometric shapes – is also allowed.

City Circus uses collages everywhere on its website.

Blurring and frosted glass effect

The Frosted Glass Effect is ideal for making text on images legible. The effect is also equally suitable as a hover effect. You can find instructions on how to implement the frosted glass effect in CSS here.

Web design trends 2021: Colours

Organic and unobtrusive

The pureorganix.ca website tends to use few and bright, natural colours. Organic colours have been on the rise for some time and will continue to be a topic in 2021.

Black White

The complete absence of colour gives your website a minimalist, uncluttered and clear look. UX Database has balanced out the serious touch created by the absence of bright colours with the use of illustrations.

Web design trends 2021: 3D effects

Icons and images

As with virtual reality (VR), we have been waiting a long time for 3D objects to finally experience their big breakthrough. As at the beginning of every year, 3D elements and VR are expected to play a greater role from now on. This is not expected to be any different in 2021.

3D elements will be increasingly used in 2021: for example, as a replacement for 2D icons and illustrations, to visualise products and as geometric design elements.

We will also see 3D as an interactive component of the website, as with the Dogstudio agency.

Or as a static, more precisely animated element, as shown in the next example.

E-Commerce

Augmented reality has already been used occasionally for e-commerce purposes in the past.

Diesel, on the other hand, favours the interactive 3D version.

Both approaches make sense for the product in question. Being able to test furniture virtually in your future home not only reduces the chances of a bad purchase. The app is also fun and provides incentives for decorating and shopping.

Diesel, on the other hand, is trying to create a kind of 3D feel by allowing end users to examine and virtually feel the product before they buy it.

In the past, the integration of augmented/virtual reality elements and 3D elements was often very expensive and therefore reserved for larger companies. With the new tools, the integration of augmented reality (AR) is now also possible for smaller companies.

Here are two examples:

• https://www.scapic.com/ar3d
• https://immersiveweb.dev/

Web design trends 2021: Content

The web is becoming more personal, more interactive and is adapting to us

Google offers an example of interactivity with its Blob Opera. Your own creations can also be recorded and shared with everyone.

Every graphic element on Madwell’s contact page is interactive.

Sennep offers its services with a lot of personality.

Webdesign for Causes

What’s more, 2020 has shown that we can all network with each other and even have to do so to some extent. The web has become more human. Web design for causes is becoming more and more relevant. Ethical websites, green websites, websites to stand up for ourselves and our fellow human beings (to name just a few topics) have become much more important in the past year. We can expect this trend to continue strongly in 2021 at least.

Conclusion on the web design trends 2021

Staying in touch with friends from all over the world, working remotely, marketing products and services online – these are nothing new. And yet, until now, it has tended to be the reality for a minority of the population.

Many companies and people in this country have taken a more traditional approach to the topic: Although we have the opportunities for a web presence and networking, we only use them to a secondary extent. Personal contact took centre stage.

The functionality of our online products is therefore particularly important – also because the competition is much bigger. And we can no longer afford to ignore issues such as accessibility in the future.

Of course, a video call cannot replace an important face-to-face meeting. But perhaps the current situation is helping us to learn to differentiate between what are really important meetings and what can be done with a phone call. This approach is often reflected in the quality of the digital presence.

When planning online projects in the past, I often heard phrases like “If someone wants to know, they’ll call us or ask us”. With the new focus on isolation and working from home, we no longer have this luxury.

That’s why mobile design, performance, usability etc. will remain important factors when creating your website in 2021.

People often forget about cognitive impairment. No, that's not an intentional pun.
Nice extension of @microsoft inclusive design we did at the @MoJGovUK. (apologies to larry miles, tomasz kolecki, jen lemon et al can't find you on twitter!) pic.twitter.com/sdSHP04Fyf

— Marq McElhaw (@markmcelhaw) April 25, 2018