Website Design Trends for 2020

Web design Trends 2020

“New Year, New Me”, we’ve all been there with good intentions, but it quickly fades, and we’re back into our old ways before the end of January. This is the year to change all those missed resolutions, see 2020 in with a clear vision 🤓, staying up-to-date and getting ahead of the curve with our expected website design trends.

01. Dark Mode

Hello darkness, my old friend. There are many reasons why people prefer dark mode, some for aesthetic reasons and easier on the eyes, some for power saving on the latest AMOLED screens and others for being an accessibility tool for those with low/impaired vision.

YouTube

YouTube has found that using their dark theme can help reduce battery life by up to 50%

Dark Mode has become increasingly popular predominantly through social media apps and Android/Windows/Apple devices promoting better well-being by helping to reduce eyestrain and limiting blue light in the evenings. The web world appears to be following suit by inviting dark mode into web designs, something we’ve loved here at BLT for some time. Web browsers are also enabling the preference for dark mode with the CSS prefers-color-scheme media-query

Welcome dark mode into your next project by including a dark theme option or completely embrace the elegant darkness.

Linear

Linear App is another platform embracing the dark side

Marvel

Marvel show how dark mode can make other elements stand out

 

02. 3D & Realism

From large sophisticated graphics to interactive videos that play whilst scrolling, 3D visuals were originally only seen in entertainment and games, but website design has taken this concept to boost interactivity and add a sense of realism.

Pitch

These modern 3D renders add something extra to this very minimalist showcase website.

With support ever increasing, developers are able to utilise these technologies without the fear of needing to build additional fallbacks. Popular 3D frameworks such as three.js will continue to evolve and aid this technology to unfold throughout 2020.

Plink

Adding an animated 3D render keeps you engaged and wanting to learn more about the product offering

FPP

This simple but effect style makes FPP stand out from their competitors

 

03. Illustrations & Authentic imperfections

Illustrations on websites made a large impact towards the end of 2019, and we’re not finished with them yet. Almost a countermovement to the pixel perfect flat design trend we’ve become accustom to these imperfect, fluid elements that inject humanity and emotion into any design.

Daniela And Moe

These hand-drawn style illustrations adds a level of humanity to them adding to that natural feel

Don’t feel the need to add illustrations into your website if they don’t fit your current brand, but they’re a great way to build on your brand personality, whether it’s a charity looking to build optimism or a health food brand adding a more natural feel.

Folk

The sketchy illustrations help add a friendly and playful effect to Folk’s softeware offering

The Hoxton

The addition of the imperfect illustration aid the friendly and welcoming appearance The Hoxton is going for

 

04. Oversized Text, Bold Type

Hero headlines aren’t a new trend at all, but sites are favouring prominent, bold typography to grab the user’s attention and help the user understand what the website is about straight from the get-go.  Bold, clean typefaces are going to be on the increase. The increased contrast, visual hierarchy and visual weight combined with short snappy headlines will improve content understanding.

AllPress

This large, oversized menu is a prime example of what we can expect this year

For this trend to really shine we need to reduce the number of overall elements, keep the font simple and typically look to pair this with a large image or video. Remember that too many grand gestures can be overbearing and will lose their effect.

Spotify Wrapped

Spotify grabs your attention and keeps it with their bold striking headlines.

Crappy Explanation

Crappy Explanation utilizes strong oversized headlines to pack a punch

 

05. Hero Video Headers

Video has been on the rise throughout 2019 and it’s here to stay in 2020. With support for high-quality video formats such as H.265, WebM and AV6, paired with better high-speed connections, we can be sure to expect even more immersive movie style video experiences in the upcoming year.

Lalo

Lalo quickly capture you attention and showcase their product inaction with this great hero video

Video can help make the experience more dynamic and take that idea to the next level. Short, looped video clips used as hero images will be on the rise to capture users attention and quickly give them an insight to the brands product or service.

MyBillie

This large hero video instantly tells you a story

MisfitsMarket

The subtle hero video keeps you engaged for longer

 

06. Design Systems

Modern design is all about enabling teams to work quickly without losing quality, keeping in mind most products/websites have to be viewable on multiple different platforms. Introducing the design system, a systematic approach to design. A design system incorporates all of the design and processes involved in creating new content via reusable elements and is often accompanied by a style guide and/or a pattern library.

Material Design System

The Material design system by Google

These systems will continue to grow with brands realising the benefits of making every element of their digital brand scalable and reusable. Building a comprehensive and consistent design across all platforms.

Uber Design System

Uber’s in-depth design system

Polaris

The Polaris design system by Shopify

 

07. Frosted Effects

With support increasing for new CSS properties such as backdrop-filter, we can see a rise in some effects that we’re previously quite difficult to render on the web. The frosted, semi-transparent style which was previously only seen on Apple and Windows OS will make more of an appearance on website this year, commonly on navigations bars. The frost effect is a newcomer for website design trends 2020 as it can also have a graceful fallback with transparent background if required.

RGB

RGB Mobile navigation bar adds another level with this frosted effect

Apple

Apple lead the way with these new effects with their navigation bar

Yahoo!

Yahoo! utilizing the frosted effect on their news column

 

08. Motion & Micro-interactions

Animation and interactivity isn’t anything new in the world of web design, from subtle animations such as hover states or marque scrolling text, to full screen animations and parallax effects as you scroll. Motion is engaging, and we can use this when designing to grab visitor’s attention quickly with our eyes gravitating towards moving elements.

Micro-interactions are fairly new and help play a significant role in playing on the audiences’ emotions and giving a more human feel to interfaces. These small but powerful sensory interactions are going to be on the increase, from liking a post on Facebook to watching an upload status bar go from 0% to 100%.

Twitter Like

Twitter showing beautiful micro-interactions can evoke a sense of feeling to digital interactions

To make this work for you, think about what areas you want to draw the most attention to on your site. Keep in mind that overuse or misuse can be distracting. For micro-interactions, you need to think “what do I want the user to feel” and how to make interactions more palpable, providing the user with instant feedback and emotional validation.

Femme & Fierce

Quirky animations from Femme & Fierce inspires delight from user interaction

Camberwell Festival

A simple yet effective use of motion and interactivity from Camberwell Festival

 

09. Bold Colours & Simplicity

As we head into 2020, we’ll be seeing a more simplistic duotone approach to colour pairings, with rise in strong pastels, combined with bold saturated colours for a contrasting colour palette. This upcoming style has a retro feel to it, but rather than a full throwback to a pre-internet era, we can expect to see a nostalgic vintage-influenced scheme infused with strong typography and bold imagery to give a new modern aesthetic.

Lalo

Lalo using pastels and saturated colours for a bold duotone colour palette

Bold neon colour schemes will also play a vital role in web design trends. Pairing with the new dark mode, this cyberpunk inspired style will see designs jump off the screen and have a luminous feel. Going against the grain, this attention-grabbing style can help brands appear daring and even eccentric. With consumer technology becoming more sophisticated, strong beautiful imagery has become the norm and will be embraced as we head into a new decade.

Whirli

Whirli showcasing their vibrant and playful colour palette

Whereby

Whereby embracing the vintage pastel colour palette

 

10. Augmented Reality

Augmented Reality (AR) has been floating around for a little while now but has yet to make a real breakthrough. You’ve probably seen it being used already on mobile phones, think Pokémon Go or Snapchat/Instagram filters where images, sounds and text are overlaid into the real world via your camera.

We will start to see are bigger uptake in brands offering their customers the chance to virtually ‘try on’ their products such as jewellery and clothing, or being able to virtually place products into the users home space, such as furniture or electronics. Taking away the mystery of online shopping will only increase customer confidence and convenience.

Ditto

Ditto – AR technology for eyewear

As web design continues to move towards a mobile-first world, integrating AR becomes more likely. Do you have a product that users could virtually place either on themselves or in their home? Maybe you’re an architect who wants to be able to showcase their work more via an immersive and augmented 3D render.

IKEA Place

IKEA’s Placement App

L'Oreal Make Up

L’Oréal’s Makeup App

 

Bonus: Voice

With more of us relying on technologies such as Siri and Google Assistant, voice search is set to become a $40 billion industry by 2022. With this in mind website content need to be optimised for natural language processing such as voice search if you want to be ranking high in search results in 2020. SEO is moving away from the keyword cramming days and more towards experience and creating content around how real humans would talk, with voice powering 50% of all searches by the end of 2020!

Siri

Conclusion

Our website design trends 2020 are embracing the future like never before, with attention grabbing headlines and 3D visuals, extending beyond the screen with augmented reality, voice search and even more focus on the end user, we’re keen to see what this year brings!

Keeping an eye on the trends we’ve outlined above (and plenty of others), doing so you’ll have the best chance of staying ahead of the curve. But remember, no matter how impressive some of these trends appear to be, the end goal should remain the same; help the user achieve their goal by improving the user experience and creating more usable products.