Web design trends for 2020: Welcome to the dark site

year 2020 written on top of the dark background full image

Many thanks to Evgeny Rugalev for helping me put together this list 😉

While some of the trends remain from last year, let’s see what is gaining popularity/traction as this year comes to a close and the year 2020 emerges on the horizon.

1. Monochrome websites

We’re seeing more monochrome homepages towards the end of the year. Some web designers seem to prefer clean-looking light mode, while others place their bets on the classy, impactful dark. Lighter websites appear to be outnumbered by darker ones, hence the title of this article.

a screenshot of jetbrains.com
Source: https://www.jetbrains.com
a screenshot of backforce.gg
Source: https://www.backforce.gg/de/home#
a screenshot of rocketmill.co.uk
Source: https://www.rocketmill.co.uk

2. Distraction-free first screen

Never before have we seen so many websites that put a bare minimum of words and elements on the first screen (the area one sees “above the fold,” that is, before they scroll down to learn more about the website).

a screenshot of tywenzel.com
Source: https://tywenzel.com (note the bottom menu)
a screenshot of petiolevase.com
Source: http://petiolevase.com
a screenshot of kota.co.uk
Source: https://kota.co.uk

3. Hand-crafted feel

Heavy use of illustration continues, but with a twist. The latest trend is to superimpose hand-drawn-looking doodles on top of images. In general, many visuals bear a custom-made, hand-crafted feel.

a screenshot of dose.media
Source: https://dose.media
a screenshot of comptoirlibanais.com
Source: https://www.comptoirlibanais.com/souk-shop
a screenshot of netdreams.co.uk
Source: https://www.netdreams.co.uk/web-design/

4. Gifs and animation

If we look at how animation is being used, last year, it was mostly abstract shapes and geometry. This year, things get real with photo gifs and animated illustrations of real-world things.

a screenshot of en.autonomy.finance
Source: https://en.autonomy.finance/ (try scrolling down the page)
a screenshot of deep.co.uk
Source: https://deep.co.uk (scroll down to see their “a thousand TVs” effect)

5. Line art: static and animated

The term “line art” refers to simplified illustrations created by using lines only and leaving the shapes empty. It became a distinct trend in 2018 and has been gaining traction ever since.

a screenshot of art by Universal Favourite on Behance
Art by Universal Favourite on Behance
a screenshot of metamusic.ca
Source: https://metamusic.ca

6. Experience design

Even more websites now offer immersive, video game-like experiences. This means heavier use of 3D and animated graphics design.

a screenshot of soletanche-bachy.com
Source: https://experience.soletanche-bachy.com/en/aguadulce-port-colombia
a screenshot of https://w-wired.com/ww/
Source: https://w-wired.com

7. Negative space

So-called “negative space” is nothing new. However, as the pursuit of noiseless, minimalist websites continues, we’re seeing ever more web pages where scarce bits of information are surrounded by vast volumes of distraction-free background.

The trend could be driven by the fact that the world’s average attention span is shrinking, as the media and advertisers try to cramp an ever increasing amount of information into people’s minds. Negative space drives one’s focus to things that are truly important.

a screenshot of esperanto.design
Source: https://esperanto.design
a screenshot of allofloride.com
Source: https://allofloride.com/live-dance/ (The website uses negative space quite wisely, with a lot of information fitted nicely onto limited real estate.)

8. Page-wide UI elements

Many websites sport page-wide menus, forms, and dialog boxes this year. The trend is not completely new, but it seems to have spread out from involving mostly menus to also including cookie popup notifications, contact forms, and other UI elements.

a screenshot of jellyfish.com
Source: https://www.jellyfish.com/en-gb/
a screenshot of allofloride.com
Source: https://allofloride.com
a screenshot of kota.co.uk
Source: https://kota.co.uk/contact

9. Creative navigation and microactions

Creative scroll effects and microactions are all the rage now. They also seem to be better thought-out and less glitchy than last year. Scrolling down the page can lead to anything these days – it’s bad tone to simply let the user go down the page the good old-fashioned way.

a screenshot of wedze.com
Source: http://lookbook.wedze.com
a screenshot of petiolevase.com
Source: http://petiolevase.com

10. Vibrant gradients and colored shadows

The trend is to use gradients and colored shadows in various UI elements from sections to buttons. This appears to be a counter-trend that is supposed to add some vibrancy to otherwise “calm” pages.

Some buttons on ObjectStyle’s website now have colored shadows – see for yourself! (And do remember to get in touch if you think you’re interested in doing business with us 😉 )

a screenshot of objectstyle.com
Source: www.objectstyle.com - (note the colored shadow around the button)
a screenshot of smashingmagazine.com
Source: https://www.smashingmagazine.com/membership (note the use of color gradient in buttons)

TL; DR

The main web design trends for 2020 are: the use of monochrome themes, especially dark ones; mixing photos and illustrations; line art; surrounding concise bits of information with plenty of negative space; being creative with your navigation and microactions; and using color gradients and colored shadows in various UI elements.

Digitize

with ObjectStyle

Digitize with ObjectStyle See our work