It doesn’t look like this whole website thing is a fad. In fact, I think it might be here to stay! So with that in mind, I’d like to explore how you can get a little extra value out of your website in 2020.
I’m always a little bit at pain to create some sort of “OMG, YOU WON’T BELIEVE WHAT THE WEB TRENDS FOR 2020 ARE!” article, so I thought I’d approach the subject a little differently. I want to present the things you should consider for your website with one eye on the trends and how they could help add value to your brand or product. Let’s delve in, shall we?
We’ve seen it steadily popping up in apps, UI and now the web for a little while; the infamous “Dark Mode”. The concept is simple: a little toggle or some such button that allows you to switch between your standard site and a “dark” (i.e. black version) of the site.
A common response to this is “but why?” Well, there are actually some pretty big benefits.
First and foremost, it’s excellent for saving battery life on OLED screens. On an OLED device (which encompasses most of the recent smartphones), the black pixel draws no power, so the potential battery saving by using a dark theme is massive.
Alongside this, the darkness of the site will cause the screen to adjust its brightness to the users current lighting conditions and really help to reduce eye strain. Offering someone a break from the retina-burning whiteness could be a very welcome sight/site indeed.
It also provides improved contrast, which is awesome news for universal accessibility. Any users with impaired vision or colour blindness will immediately receive a huge boost to the usability of your site. This will increase the chances of achieving an AA rating with the Web Content Accessibility Guidelines (WCAG), which is no joke for the public sector and educational services.
Outside of that purely from a branding perspective, this extra contrast can also benefit by strengthening your brand. Your accent colours are likely to pop more and potentially create more impact on your page.
Ok, I know I just waxed lyrical about the virtues of “Dark Mode” but that doesn’t mean its white counterpart doesn’t still hold value. It might not seem like anything new to you as the use of blank space far predates Taylor Swift. But using a white border within your website offers tremendous flexibility and freedom.
As screens improve and screen resolutions have the potential to get larger and larger, we start to run into the dilemma caused by standard full-bleed websites. Our content gets stretched and spaced out in ways we hadn’t necessarily envisioned and controlling the huge swathes of negative space and gigantic images that can occur can become frustrating.
Harnessing the use of white borders allows us to regain some of that structure and order in our designs. It allows us to be considered with how our elements fit within a generous amount of space. It helps us build a stable and clean canvas for our content to jump out from in a way that full-bleed can sometimes hinder.
Obviously I’m not being so reductive as to suggest that you must ONLY use white — it will honestly work with any background colour. The focus of this message is to use the negative space as a method of framing your content.
The landscape of our devices is constantly shifting into new and unexpected sizes (I’m looking at you Apple Watch). This takes a huge toll on our navigation. Pair this with the ever-changing face of UI, especially with the prevalence of voice recognition and we start to see that users are becoming more primed towards a less descriptive form of navigation.
Enter stage left: stream-lined navigation. More and more brands are moving towards a significantly simplified form of navigation that puts meganavs out to pasture — the idea being that a handful of unobtrusive links is enough to do the task. Moreover, many brands are switching to uniform navigation across all devices — usually through a hamburger menu or something similar. But why?
Let’s face it, attention spans are definitely getting shorter. Gone are the days of where your only entertainment whilst sat on a bus was looking out of the window — we have a device with us at all times and are distracted about every 8 seconds (according to research by Microsoft). So this means we need our websites to be as easy to use as possible, now more than ever. A streamlined nav helps users get to grips with moving around our site quickly and clear signposts help keep them focused on their journey.
Purely from the design space, it also helps us display our content more cleanly so that our hero messages can breathe and our content is less likely to be pushed further below the fold line of doom!
Admittedly, this method may require a re-jig of your site map or restructure your hierarchies — but who doesn’t love a challenge?
Fine. You’ve caught me out. Interactions are hardly a trend as they’re basically the expected norm at this point. Microinteractions are EVERYWHERE. However, there are plenty of trends within this sphere that are well worth evaluating. So if you’ll indulge me…
As 2020 is trending heavily towards illustration playing a large part in the web, hand-drawn pictures and type are expected to help add a human element that can often get lost in the clinical world of grid layouts. So taking that up a notch with a little animation could be just the trick to help lift the uniqueness and personality of your site. If you’re unfamiliar, check out Airbnb’s open-source animation tool, Lottie. It could be a real game-changer for you.
On a similar track, as browser capabilities continually improve, you can expect to see more 3D interactions enter our life. That’s right, they’re no longer purely just for mobile apps and eye candy reserved for Dribbble portfolios. 3D interfaces are popping up with more and more frequency and if you’ll excuse the pun, they offer a whole new dimension of design.
Finally, I’d like to give a special mention to Neumorphism. This has the potential to be very exciting in the UI space during 2020. Thanks to the continued popularity of VR & AR, we’re seeing a return of designers trying to create interfaces to look as if they were a real object. You’re gonna need a picture for this, right?
As you can see, it’s all about trying to mimic the real world through highlights, shadows, glows, etc. It’s visually very striking and encourages us as users to want to interact in an incredibly instinctive and natural way.
Let’s not forget, trends are trends for a reason and we shouldn’t necessarily change everything based on what could be passing fads. However, I hope I’ve managed to shine a light on some of the tangible value we can draw from these trends even if we don’t fully adopt them.