If you want to stay current and start the year with your homework done, I wrote this article especially for you. I’m going to break down the web design trends for 2020 that are going to be everywhere.
Read it carefully and you may well come away an expert in web design trends, at least for 2020.
You can read the extended post on Code Barcelona, where I’ve gone into each point in more depth: Web design trends for 2020
Web design trends for 2020, be ahead
Even bigger type
One of the main web design trends for 2020 will undoubtedly be the use of large type fully integrated into the web design.
It’s a device we won’t only find in headlines — it’ll be present throughout the body text too.
Large-format screens are everywhere; with their high specs and low prices, they make it possible for some designs to take advantage of this.
Which web designs can I use this in?
- When the design is highly visual and high-impact.
- Web designs with few images where you want to reinforce the message without loading the site with text.
- Web designs aimed at a bold audience.
- Web designs aimed at an audience with big screens.
Remember:
- You’ll have to adjust sizes for the various screen resolutions by creating responsive breakpoints.
- You’ll have to pay close attention to the responsive mobile version.
Sites using this trend
Rogue Studio
A web design where you’ll clearly see this web design trend in action: here the author has used type ranging from large to gigantic.
Granyon Summer Party
Another example of extra-large type in a web design with a perfect result.
Team Elite Kickboxing
One last example of big type in a web design.
Contrast, negative colours and loud colours
This device has a long history and has been appearing in web design trends for several years now, and it’s being applied better all the time.
Contrast and negative colours and shapes are going to land hard during 2020, the year we’ll see this web design device polished to perfection.
Which web designs can I use this in?
- In highly visual web designs.
- Aimed at the boldest audiences.
- When you want to leave people open-mouthed.
Remember:
- Corporate projects for conservative companies aren’t ready for this yet.
- Use this device coherently with the company’s image and its colours.
- Keep the visual harmony of the colour set.
Sites using this trend
Ninja guru
In this web design we can see this device used superbly. Negative colours and loud contrast have been used for a web design that scores a 10.
Festa da Francofonia 2019
In this example there are vivid colours, contrast and geometric elements in motion — a web design that could easily earn a place among the best web designs of 2020.
Kombu
In this site’s design we can see the contrast from the brand’s packaging; we can also see the «wavy» effect on the diagonal lines that match and stay coherent with the whole brand identity.
Mobile experience, more important still
Nobody doubts any more that responsive web design has to be present in all our web designs, since adaptive web design has been a «must» among web design trends ever since it became clear that most users go online through their mobile devices or tablets.
Which web designs can I use this in?
- All of them, without exception.
Remember:
- You have to look after content load speed across all devices.
- The infrastructure still isn’t ready to load video on mobile versions.
- You’ll need to optimise images.
- Use the burger menu.
Websites using this trend
Nicholas Munt
This site’s design uses ajax to load the page and the result is very mobile friendly, with navigation that feels very app-like.
Salmoon & Sons
In this example, what stands out in the mobile version is the slider with fully mobile-friendly swipe functionality.
Volia
This example is very useful for seeing large type used in the mobile version along with a burger menu.
Custom cursors and scrolls
Another web design trend that’s going to be everywhere during 2020 is building custom cursors and scrolls into the design; the result is a far more personal user experience, since they bring in a degree of interaction.
Which web designs can I use this in?
- In a web design that needs extra personality.
- For users with plenty of hours online behind them.
Remember:
- Before putting the site live you’ll have to check the scroll works across different browsers.
- Mobile devices tend to have problems with scrolls, so bear that in mind when planning the design.
Websites using this trend
Aluxion
An example with a custom cursor made of two circles; the cursor moves with a slight delay and a very appealing hover. We can also see the custom scrollbar.
Joseph Berry
Another example of this 2020 web design trend, similar to the previous one.
Matt VBRG
In this web design the cursor interacts with all the page’s content, changes the colour of elements and applies very appealing effects to the images.
Canvas and 3D elements with Three.js
Using Canvas in the trendiest web designs is a web design trend that has firmly established itself on this list. With Canvas, together with OpenGL, we can create experiences that literally go beyond plain HTML.
Which web designs can I use this in?
- For web designs where we want to create a sense of depth.
- In web designs with 3D objects to interact with.
- In high-impact web designs.
- A bold audience.
Remember:
- With great power comes great responsibility.
- Not every device is ready for this, so you’ll need to pay special attention.
DMC2019
Three.js was used to build this web design, with a very special result.
Hack Wired
Using this technique to create a moving, shape-shifting chewing-gum effect that responds to the cursor.
Vladimir Gruev
This web developer has chosen Canvas technology to show off their full creative potential and give us a thoroughly cutting-edge browsing experience.
Canvas and image distortion effects
This web design trend for 2020 nests inside the previous one, since it uses Canvas technology to distort the images we place in the web design. The result is highly transgressive.
Which web designs can I use this in?
- For highly creative web designs.
Remember:
- As before: with great power comes great responsibility.
- You’ll need to pay attention to how it behaves on different devices.
Websites using this trend
Francesco Michelini
This developer shows us how this groundbreaking technique is used and what it produces.
Julio Cesar
Another example of using Canvas to distort images with a highly striking, creative result.
Violence
The last example on this list of web design trends for 2020, where the image distortion effect is very «grunge».
Conclusions and a summary for the lazy
As you’ll have guessed, the web design trends of 2020 increasingly take personalisation into account and pay special attention to the user experience.
We’re all special and we want to be made to feel that way.
Full post
You can read the extended post on Code Barcelona, where I’ve gone into each point in more depth: Web design trends for 2020
Related work
This edition is from 2020. The current one, and how I apply all of it:
