Let’s get rid of these web design trends in 2021
By: Paul Attard
Tags: Illustration, Website Design, Trends, User Experience, Typography

Following trends might seem like the most logical option. It helps you to fit in, takes less time to decide on what to do, and it feels like a guaranteed win for your website because other professionals are also doing it so it should be good, shouldn’t it? There can be many sides to this argument — a standardised web is easier for the user and copying others makes you blend in rather than stand out.

Choosing a side for this argument implies that you can only choose to be in one of those camps while denouncing the other side. As with everything else in life, there should be balance. One that follows industry standards for user accessibility and contains healthy experimentation of design and layout.

I’ve listed three trends that the digital world will be better off without, so let’s hope for a 2021 void of them.

Scroll hijacking

Hijacking a user’s scroll means that the content moves across the web page differently to how you triggered it with your input device (i.e. trackpad or mouse). There are some valid and even more invalid uses for it.

One valid implementation is for horizontal scrolling websites that use the vertical scroll to shift horizontally. This is because scrolling horizontally can cause the browser to navigate to the previous page in the user’s history. A great example of scroll hijacking for horizontal scrolling can be found on Polygon Design’s website.

Polygon Design’s website with scroll hijacking

Implementations of scroll hijacking are more common, for example snapping sections of the page to the browser’s viewport (visible screen area), triggering unnecessary interactions, and adding momentum to the scroll similar to touch devices.

I can understand why some developers, or the designers who request it, might be inclined to implement such features. But if done without concern as to how this will affect the user then you might end up with an unusable experience for the audience, something that Zara has unfortunately managed to do with their new website.

Blue and purple people

Have you noticed the prevalence of illustrations with oversized limbs and indistinct characters on today’s websites. There is now a blue tint to the web due to these characters. For a small fee, or nothing at all, you too can populate your website with these politically correct individuals.

The reason for this trend is likely due to the moving away from stock photo libraries, but has created the same result — all websites looking the same.

Text only websites might seem cold or unfinished to some. If done correctly then there will be no need to fill the white space with irrelevant illustrations, giving your brand a more unique image than they ever could.

This is not to say that illustrations don’t belong on websites. There are great examples of websites that have managed to incorporate illustrations and create a distinct style that enhances the brand. Epicurrence does a fantastic job, albeit hijacking the scroll; Spicy No Spicy uses a distinct style of illustration; Although Baunfire’s illustration are quite similar to the trend, they are used in a clever enough way to fit their brand.

Bad typography

This doesn’t sound like something designers would do intentionally. With so many websites unable to follow so many fundamental rules of typography I don’t see any other possible explanation.

By bad typography I mean text that is not properly set in the layout. This could be text that is too small, too wide, not having enough contrast to the background, or set over complex images. All these make the text more difficult to read and creates a worse experience for the user.

“Typography in practice is not choosing fonts or making fonts, it’s about shaping text for optimal user experience.” — Oliver Reichenstein

Because I’ve already insulted Zara’s new website I’ll continue to use it as an example. How they decided that the text should be 60% of the width of the browser, centre-aligned, and have a narrow line-height is beyond me.