“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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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%.
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.
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.
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.
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.
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.
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!
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.