Much of web design can be thought of as principles of graphic design and (usually visual) communication being adapted to the internet age. Let’s take a look at some web design trends for 2020.
Here’s a quick summary:
1 - Colour
1-1 Dark mode
1-2 Black and white
1-3 Gradients
2 - Graphic Design
2-1 Minimalism
2-2 Mixing photography and graphics / illustration
2-3 Layers, floating elements, and shadows
3 - D Elements
4 - Accessibility
1 - Colour
1-1 Dark mode
Dark mode certainly is not a new concept. Dark colour themes have long been in use by programmers in code editors, and are also popular in applications for gamers such as Discord and Twitch. These personality archetypes work and play in low-light environments for extended periods of time, and the darker themes provide less strain on the eyes. The stereotype is so strong that there are legions of developers and gamers who swear by dark mode no matter what.
More recently, dark mode as an optional aesthetic theme is gaining popularity as major tech companies are embracing and implementing it into their software. Among these are Microsoft for Windows 10 and YouTube in 2018, Apple for iOS in 2019, Facebook and WhatsApp in 2020.
With the increasing prevalence of dark mode applications comes a new wave of articles singing the praises of dark mode, articles which raises counterpoints to its benefits, and (surprisingly) some balanced discussions on whether users should use dark mode or not.
There are pragmatic reasons to use dark mode. These include reduced energy consumption on OLED screens, reducing eye strain by using lower-contrast elements, and making page elements pop out more against a dark background. However, light characters on a dark background are not strictly “better” for readability, and astigmatism is a real problem for many people.
Ultimately, whether or not to use dark mode (or other available colour themes) is still very much a matter of personal preference. However, with more applications implementing it, it may very well become a standard user expectation that a dark mode option is available for any website and app.
Having the choice of colour theme certainly allows for personalisation and earns points for user satisfaction, to some extent.
This article by UX Collective gives an outline of the history of dark mode and guidelines for implementing it in an app, touching on colour and contrast.
Google’s Material Design guidelines also go into extraordinarily specific details on designing for dark mode.
From a developer’s perspective, you would still have to think about maintaining brand identity in a dark themed website. Avoid using too much contrast that causes eye strain. Also consider whether your website or app will actually benefit its users with a dark mode option.
That said, there are a growing number of learning resources and CSS frameworks coming out every few weeks that are making it easier to implement different colour themes for websites. If it doesn’t take too much effort, why not give it a shot?
1-2 Black and white
You don’t get any higher contrast than black and white. Not only is it highly readable, when used carefully, this can draw attention to specific parts of the page you want users to look at. Setting a website in greyscale can give a strong, modern edge, or a timeless, classy design, depending on the emotion you want to create.
You can also consider a monochromatic design, using a single colour outside of the greyscale. With a majority of the page being black and white, any colour you do use will stand out even more against the background, so you need to use them smartly.
1-3 Gradients
In some kind of antithesis to an overdone, minimalist flat design trend of the past few years, there is a counter-trend of using multi-coloured, non-linear gradients, from backgrounds to hover effects and icons, adding a different kind of depth and character to the website compared to a “clean” monotone design.
Designs with gradients range from subtle shades to not-so-subtle cyberpunk-esque luminous colours. This article from Awwwards showcases a wide variety of examples of websites implementing gradients.
A splattering of hues may not be the best design for a productivity application, but for a website selling a product or promoting a brand, gradients are certainly something to consider.
2 - Graphic Design
2-1 Minimalism
Minimalism is commonly associated with clean graphics and elements, limited colour palettes, and sometimes more superficially, with elegance and simplicity. Flat design is one design philosophy related to minimalism. It places emphasis on having clear hierarchical relationships between elements, and removing excess features deemed unnecessary for functional usage (such as shadows, bevels, and gradients).
What makes minimalism such an attractive design approach is a clean, sleek visual style, clear typography, and clear navigation cues, which tends to work quite well on mobile devices with smaller screens. Proper use of white space or negative space is important here, in order to guide the viewer’s eyes where you want it to go. When there’s less to see on the page, attention to detail becomes even more crucial.
Web developers may find that creating flat minimalist interfaces becomes much faster and easier with frameworks such as Bootstrap and Semantic UI, but it also potentially makes a website appear bland and lacking in personality, especially when you’ve seen too many of the same components and colour palettes.
2–2 Mixing photography and graphics / illustration
Integrating photos with illustration is a popular trend in graphic design, but we are also seeing it more in web design. These illustrations can manifest as geometric shapes or text, or unique hand-drawn graphics and animations, icons, or words.
Illustration has the potential to express ideas and concepts in (sometimes exaggerated and metaphorical) ways that photos have more difficulty doing.
You can make objects stand out more than they normally would using outlines and bright colours. You can generate emotional responses in the viewer with hand-drawn elements, and create a sense of humanity and authenticity through its imperfections. This can provide the perception of a personal touch to what may otherwise be a soulless corporate identity.
While illustration has a high ceiling of potential for creativity and inventiveness, the designer should still be mindful of whether having illustrations benefits the website, and if it services the identity or brand it is depicting. You wouldn’t want to unintentionally diverge from “unique and emotional” to the realm of “outlandish and eccentric”.
2-3 Layers, floating elements, and shadows
Overlapping layers and elements can create a sense of depth in an otherwise two-dimensional webpage. This is a departure from flat design, where typically everything on the page is laid out as if on a single plane surface.
You can overlap images, text, buttons, and icons, making a less grid-like, asymmetrical design to create visual interest and draw the eye to certain areas on the page. Done correctly, it can be a nice way to group different elements together compactly — being economical with screen space is useful for mobile sites as well.
Shadows can also create apparent depth between page elements. Google’s Material Design guidelines have very sophisticated principles on how to represent depth through “elevation”— check it out here.
3 - D
Layers and shadows can give an illusion of depth, but three-dimensional imagery can bring that realism one step further. Rendering technology and hardware capabilities are constantly improving, and no doubt some designers will be using and abusing 3D elements to value-add to the user experience.
Static 3D models and pre-rendered animations can give a clean, modern feel to a minimalist website, or can display hyper-realist, high-resolution detail to a product.
3D elements can also be incorporated with dynamic scrolling effects to create a seamless showcase of 3D rendered objects. I was particularly impressed with Ferrumpipe’s desktop website, which shows the process of their security fence production and installation services through pristine 3D animations.
Fully interactive 3D models can also engage the user on a deeper level. A potential use-case is in product showcases, where the user can examine a product from any angle and in finer detail than a slideshow of images.
While 3D elements can be fun and exciting, they can still be quite slow to load. Not everyone has the latest specs on their desktop, and the mobile user demographic is not to be underestimated. One workaround is by presenting static images in place of the embedded 3D object for mobile devices.
Remember, just because you can do it doesn’t mean you should.
4 - Accessibility
Accessibility may not be the most glamorous part of web design compared to glitzy 3D dark mode gradients, but an integral part of improving the user’s experience is by making sure the website is usable. Increasingly, designers are put to task to ensure accessibility for people with vision impairments and other disabilities, such as colour blindness, seizures, and cognitive or motor disabilities.
This article by Avinash Kaur gives her version of the W3C Web Content Accessibility Guidelines, which are probably easier to digest to a casual reader than the original document.
This article by Pablo Stanley introduces a few easy ways to begin making a website more accessible, including avoiding using colour as the only visual cue to communicate critical information, and avoiding the use of placeholder text in forms (turns out that it can cause a lot of problems you may not expect).
Other rising technologies such as chatbots, voice user interface, and screen readers can improve the usability experience for people with disabilities. Nevertheless, designers should still strive to incorporate accessibility considerations within their design process.
Concluding thoughts
The list above is by no means exhaustive. Ideas new and old are constantly being invented and re-invented; trends rise and fall, as tastes and preferences change and technology advances. As a designer, some of the ideas shown here may be good to explore and add to your knowledge bank, even if you end up never using them.
Ultimately, design has an aspect of empathy to it. It’s involves understanding the user, finding out what they want, and finding out how best you can give it to them. Look around, see what other people are doing and ask why they’re doing it, and get inspired.