Web Design Trends For 2021
Now that 2020 is disappearing in the rearview mirror, we look forward to smoother times ahead. Endless Zoom meetings and cabin fever will fade into distant memories.
Here are some of the web design elements and techniques we expect to see this year.
There was a time when this could have gotten you fired at some web design agencies. But we look for a renewed use of this feature, implemented sensibly. You would not want to use it to get to the next body of text – that would not be a pleasant experience for the user. But it works nicely as a visually efficient way to point users along with a series of large images. We also expect designers always to include alternative ways to advance horizontally, such as clickable buttons. In general, scrolling is a subtle interaction, and designers will be incorporating more visual feedback elements for a better user experience.
Grainy and Muted
Crisp images and bold colors are great for grabbing attention. But for a longer, more relaxed time on a given site, pulling down the saturation and going lower res on the graphics can ease the tension out of a page. A “low-fi” approach to visual presentation demands less energy from the viewer and feels more natural than the highly produced perfection found on many sites. Muted colors and images that are a little grainy at the edges can make the whole design feel more alive.
Sure, it has been around for a long time, but expect it to appear more prominently this year. As a gauzy background behind crisp text, it provides an interesting contrast to emphasize the words. A colorful smudge with no discernible edges can be used to tie into a company’s official logo colors or upcoming images. It will be a favorite mechanism to create a subtle atmosphere.
Old School Fonts
From the “everything old is new again” file, retro typography styles are making a comeback. We see this cycle periodically and expect this iteration to include style cues from old font varieties while maintaining a focus on legibility. We are not talking about the 90s heavy metal band logos that looked like a pointy Rorschach inkblot. Instead, some of the flows and dynamics from old banner fonts – sometimes artistically assigned to a single letter within a header.
Apple jumped into the augmented reality scene back in 2017, and AR achieved national prominence with the Pokémon Go craze. It is used to allow you to “build” your car on dealership websites and see how different glasses will look on your own head from any angle. Look for AR to be incorporated into many more web designs this year, sometimes utilizing geolocation to create a whole new category of web experiences, such as using a Chacmool sculpture.
In a world of bright images and light backgrounds, expect to see many web designers giving in to the power of the dark side. Facebook’s “dark mode” has ignited an upcoming trend in black backgrounds and very dark themes. As long as it remains a surprise and out of the ordinary, it will have its moment. When enough sites have had their go at it, expect the darkness to settle back into a smaller presence.
It is the single most ubiquitous component of your computer environment, anywhere you go – the humble cursor. It is a little black arrow, or if you have played with your settings, a slightly bigger black hand. But some sites are changing the viewer’s cursor into all sorts of things, from a bouncy ball to animated shapes. Check out the animated, rotating, text-filled cursor from The Pen Tool, as it also changes a site’s background colors when you hover.
Removing all the color from a site presents an artistic, formal, or sparse feel. But in this example from Latinxs Who Design, hovering over an image restores the color and magnifies it. The overall black and white motif is preserved, and the color-restored image draws extra focus. This micro-interaction holds the viewer’s attention and provides a satisfying, interactive experience.
Print Media Emulation
Building on the retro font aesthetic, as well as the old-as-new sensibility, expect this year’s graphic web design to reproduce the look and feel of older print media. Drawing inspiration from risograph and silkscreen methods, print-media emulation yields layered ink’s organic, tactile look on paper. These images from Foundamour are excellent examples. (Triple bonus: Custom cursor and horizontal scrolling are included!)
A modern throwback to Walt Disney’s enormous multiplane camera, first used in Snow White’s production, parallax animation can be used to create the illusion of 3-dimensional movement and rotation. Yes, we are familiar with the gritty, slowly lurching Netflix screensaver images. But recent examples such as this one show some beautiful, supportive presentations. Modern, high-res monitors allow minute details to be used effectively.
A Return To 3D
In the 2010s, flat design replaced the 3D elements of skeuomorphism, making web pages less captivating. (Look at the upper left corner of your Mac window, at the three red, yellow, and green dots, and remember when they were not flat but 3D in appearance.) Expect to see flat icons turned back into realistic, 3D versions, in a coming trend of neumorphism. In the same way that fake wood sides graced the station wagons of the 1960s, neumorphism seeks to emulate the organic 3D look of old familiar icons. The color scheme from Apple’s Big Sur OS signals a return to 3D color schemes.
Further down the road, we will be looking for ever-faster loading speeds for web pages, as impatient users bounce back from pages that fail to load in the blink of an eye.
Content will become extremely personalized as users become less concerned about websites using their personal data to customize the web experience.
Popup notifications will become better engineered to be less annoying and more welcome.
Finally, AR will continue to grow and increase its presence in the web experience as it gets better and better at emulating and enhancing the real world.
Photo credit: Ibrahim Boran