Web design trends and predictions for next year

2021 web design trends

With the newly released Google Page Experience serving as a ranking factor in 2021 and upcoming algorithm updates in the middle of the year, I predict web designers will focus on creating faster-loading sites, easy to use and simple to navigate.

These are my predictions for 2021 web design trends:

SVG files

SVG is an image/illustration vector file I feel is under-used in web design. Because is made of code to form shapes, lines and colors, their size is smaller in comparison to jpeg and png files. In my own tests, I confirmed that svg files save up to 80% of file size.

What I like most about these files is the possibility of using CSS, Javascript, and HTML to transform and create interactive animations inside a website, increasing the impact and engagement with our visitors.

SVG images are made of code, using mathematical formulas to form simple and complex shapes. The more complex the shape, the more code needed, but since code is just text, is the reason SVG files are small.

Google is focusing more and more on the user, this means that light, fast-loading websites that attract and keep the user on-site more time will be the ones to get top positions in search results.

At some point, I believe SVG illustrations will be preferred over traditional jpg or png image files unless WEBP formats are optimized even more and also be more compatible with content management systems like WordPress, which only recently started being compatible with WebP images.

WebP images

The webp image format is also under-used in the web design community. It’s been around for 10 years but only until recent times is starting to become more popular.

It allows to save between 40-60% of file size without losing quality! And there are plenty of programs out there that allow you to convert your current images into webp.

Even though there are more and more resources for images with this format, WordPress, which is the most used content management system on the internet to create websites, wasn’t compatible with this type of file. (Update June 2021, WordPress announced their next release will now support WebP files)

Motion animation

Animation in a website, if used correctly, helps greatly to improve user experience.

Nowadays, most web designers follow the same boring structure: the logo at the top, carrousels, some images, and content (although sometimes this is the best way to do it). But in the last year, motion animation or scrolling animations are taking a step forward.

Big brands such as Apple and Nike have been using scroll animations for a while now. But there hasn’t been a broad adoption from the web design community.

Code libraries like Green Sock allow developers to integrate these types of animations into websites flawlessly. This is the reason I expect to see more and more the integration of scrolling animations into websites this year.

Cleaner design

Keeping up with the focus on the end-user, web designers should keep concentrating their efforts on providing the user with a flawless experience, simple to use, easy-to-understand websites, with minimalism as a trend.

White or clear backgrounds with high contrast, big fonts in titles, copy, and navigation.

Some of the top web design trends in 2021 included:

• The use of bold colors and gradients
• The use of asymmetry and broken grid layouts
• The incorporation of illustrations and animations
• The use of bold, large text
• The implementation of dark mode
• The adoption of minimalist design
• The use of micro-interactions
• The incorporation of virtual and augmented reality
• The use of authentic photography
• The adoption of mobile-first design principles.