Designers’ Pick: 10 Design Trends to Watch Out for in 2022
While no one would really admit to actually following trends (the ultimate “uncool” thing to do since high school mentality said so – we all want to set trends, not follow them, right?), there’s no denying that trends do matter and that we do follow them to some degree. Not only there’s nothing wrong with that, but actually quite the contrary: trends are a reflection of our collective mindset at a certain point, an expression of what’s occupying, motivating, or moving us. And there’s something really beautiful and comforting about being together like that. Especially after what we’ve been through in 2020 and 2021. So, this time around, we want to talk about design trends for the coming year.
Web design is a field that, much like graphic design, has been in a state of perpetual turmoil of styles and inspirations for a while. It seems that things have never been so exciting as they are right now. If you’re a designer looking for inspiration or just a “civilian” who enjoys looking at pretty things online, you can easily find yourself spending hours and hours online, admiring all the different directions the web design has taken lately. At least that’s what we at Qode Interactive often catch ourselves doing, with all the “oohs” and “aahs” as we stumble upon a gorgeously designed layout or a stunning new typeface.
And because we’re so keen on all the comings and goings in the design world, we’ve decided to ask our talented and hard-working design team to share their predictions of top design trends for 2022. So, jump right in as we talk about:
For our designer Milica Andjelkovic, the author of the Shoshin theme, one of the highlights for 2022 would have to be the evident rise in the use of serif display typography. For a long while, sans serif typefaces have been the golden standard in web design. They were perceived as clean, modern and sleek, while serif fonts were used mostly for designs with a strong aesthetic personality. In 2022, we are going to see more serifs in headlines of all sorts and across all niches – even in tech. Serif display fonts are expected to bring a breath of fresh air and add more character, which is definitely a welcome thing.
Louie Restaurant
The designer duo of Violaine & Jeremy were commissioned for art direction and complete visual identity for the London restaurant Louie, and they sure did a tremendous job. From the hand-drawn monograms and illustrations to beautiful color pairings, Louie’s visual identity is unmistakably chic, and a lot of it is based around the restaurant logo. The playful and elegant serif typeface evokes the classy decadence of the French court and the golden era of New Orleans, with a touch of Art Nouveau inspiration that has been having a big comeback lately.
Voyage by Viola&Jeremy
Another exciting creation by the creative duo Viola&Jeremy, Voyage is a romantic, curvy display serif font created in 2019 and packed with 55 stylistic ligatures and 26 variants. Its hairlines provide a lovely contrast and make this exciting font quite readable. Created as open-type, the variants allow the user to choose the glyph to alternate, opening up almost endless possibilities and guaranteeing maximum usability.
The Canvas Agency
The New York and Toronto-based Canvas Agency, which works with up-and-coming contemporary artists, opted for a striking logo in a custom serif typeface, with interrupted font forms that somewhat resembles the stencil technique, but with an arty flair. The logo is combined with selected images from the artists the agency represents, some of which are covering the logo, giving the layout a bit of an anarchic character.
Bit of Denim
A brand that seems to nurture equal passion for typography as it does for upcycled jeans, Bit of Denim opens with brand initials in a clean, thin, vintage font and follows up with large serif typography in the hero section. The font is equal parts playful and elegant, perhaps even a bit romantic and definitely a tad quirky – the lopsided O’s, the curvy ligatures and embellishments make for an unforgettable first impression and create an exciting contrast with the more strict Space Mono used for the navigation.
Here’s a trend we’ve already covered in detail in our article on inspiring examples of the liquid metal effect in design – chrometype and liquid metal are making a huge comeback and this year we’re bound to see more of this exciting style. Used both for typography effects and for exciting 3D and digital art, the liquid metal adds a touch of retro futurism and also serves as a great exhibition of skill and design craft. Our Marijana Obradovic, who authored the wonderful Konsept theme, picked a couple of exciting examples of this trend.
Mortar&Brick
The Danish studio Hugmun did a lovely job at highlighting some of the core values of the property consultancy agency Mortar&Brick – integrity, quality, but also femininity. This last trait is perhaps most evident in the stylized ampersand used in the logo. One of the variants of the hand-drawn symbol was designed with a beautiful liquid metal effect in glossy black. The ampersand is delicate and solid at the same time, conveying the complex and all-encompassing nature of the agency.
Henri Heymans
The talented front-end developer Henri Heymans wanted to harness the wealth of meanings that liquid metal conveys, as well as explore all the different faces of this style, through a metallic orb that serves as the centerpiece of his portfolio, with a grainy, flowing surface in black and white. The combination of the static-like texture and monochromatic gradients gives the orb a vintage feel, while its perpetual rotation adds dynamicity to the page.
Lunch Concept
The first thing that strikes us when we land on Lunch Concept’s homepage is the stunning video section with large black metallic typography. The letters are soft and pointy at the same time, with a distinct physical quality. The metallic effect here conveys a sensual character that is also perhaps a bit edgy, while the line that connects the letters L and N gives it a touch of elegance and sophistication.
Qode Themes: Top Picks
View Collection
Another thing that Marijana sees as the defining trend for 2022 ist the design that explores and utilizes the plastic quality of various materials. As new design and UX tools are developed, more and more designers venture out to explore the plasticity, moldability and fluidity of materials. The result? An exciting array of graphics, often animated, that mimic the physical qualities of materials they represent, adding a sense of innovation and skill to layouts they’re used in. Let’s take a look at some of the examples.
The Tide
The Tide is a series of flowing pathways along the Thames on the Greenwich Peninsula near London. This gorgeously designed public space, which hosts the Turning Tides festival, among other events, has a singular fluid character, which the creative team responsible for the location’s visual identity set out to reflect in the accompanying designs. Abstract shapes made of water, transparent with hints of colorful reflections, are the linchpin of the visual identity created for the location (and the festival), communicating motion and flexibility.
Montreal International Jazz Festival
Last year’s edition of the renowned Montreal International Jazz Festival was all about summer vibes. Bright, bold colors, summer motifs and illustrations and the modular nature of the design instill an unmistakable sense of optimism and joy in this light-hearted but visually masterful piece of design. Bended flip-flops, reflective sunglasses and carelessly spilt water from a glass are almost palpable, their materials easily discernible in this exploration of textures and shapes.
PolyU Fashion Show 2021
For the 2021 edition of the annual PolyU Fashion Show by the Hong Kong Polytechnic University, the Atelier Avocado came up with a visual identity based around the concept and the process of molding, resulting in a series of shapes and objects that are so “physical” in their appearance one almost wants to reach to the screen and touch them. Surfaces, textures and directions in which materials bend and come into shape are explored to the utmost detail in this skillfully executed and stylistically spotless project.
For Marina Pavlovic, the designer behind the lovely JoinUp theme, intro video sections opening homepages are going to be one of the defining trends in 2022. The days when Flash videos on pages slowed the loading down or crashed the pages so much it drove the visitors insane (and away) are, fortunately, behind us. Today, new scripts and technologies allow for more versatility, creativity and, what’s most important – better UX. With technical difficulties out of the way, more and more designers opt for strong intro or hero sections featuring exciting, inspiring and engaging video content that creates an immersive experience and can be an amazing visual storytelling tool. Let’s check out some of Marina’s picks.
Beyonity
Beyonity is a Swiss real estate company with a unique and modern approach to the business, reflected in the design of their website. It opens with a bright and exciting intro video section, featuring objects that float, move and dance around each other in an interplay between textures, surfaces and colors. The fullscreen section provides a uniquely immersive experience before the user scrolls down to more conventional parts of the page.
Abdulla Al Gurg Global Investments
For the company website, Abdulla Al Gurg Global Investments opted for an absolutely breathtaking aerial shot of Dubai at night, presented in a smooth video that looks like it was shot by someone just casually cruising in mid-air. The video background is coupled with the layout with grid lines and clean, intuitive menu and makes a nice contrast with the simpler, cleaner mid-section that follows as the visitor scrolls down to explore the website.
Sol’ace
The website of the furniture and home decor shop Sol’ace is all about softness and breathability, which is evident from the way the video is incorporated both as an intro and as a hero section. After a short and delicate dance of images in the intro, the video assumes position in the hero section – a seemingly static interior shot, except for an airy, softly moving curtain that almost makes you feel the fresh spring air on your face. Several other pages also feature a video section at the top of the page, maintaining consistency throughout the website.
Although we’ve already seen plenty of 3D graphics over the past years, the Qode Interactive designers seem to be in complete agreement that 3D will continue to be a massive 2022 trend across all niches. What started in 2020 and absolutely exploded in 2021 is going to be taken up a notch when it comes to ideas and inspirations, as we see more and more designers playing around with 3D graphics and pushing the boundaries of this medium, experimenting with textures and materials, combining illustrations and photographs, and creating everything from realistic to abstract attention-grabbing projects.
Vivid+Co
The full-service agency and strategic advisory Vivid+Co has a mission of “putting the pieces together,” which is cleverly reflected in the centerpiece of the website’s hero section – a beautiful 3D glass prism made of smaller prisms or cubes, revolving around itself as new pieces appear to complement it in a Tetris-like manner. This 3D object, with its iridescent reflections, makes a lovely contrast to the dark background and adds to the decisively modern character of the website.
Hyperframe
Hyperframe is a company that produces steel components that basically snap and click together, making the framing processes much easier. In order to illustrate the power of this astonishingly simple but innovative concept, the company website features impressive 3D renders of steel frames, beautifully photographed, that move, come closer, fit and literally snap into place as we scroll the website. It’s a simple but quite impressive design element that does an amazing job at conveying the company’s single most important selling point.
PerimeterWatch
The network infrastructure and security industry is a fast-growing one and, unsurprisingly, doesn’t lack in excellent pieces of design innovation. A great example is PerimeterWatch, a company offering network security intelligence and other digital security services. Their website features a morphing 3D animated object that is made up of smaller 3D particles, animated to fit with each other in various compositions. The animation is scroll- and drag-based and the object changes from an orb representing the planet Earth to a bug that stands for common online threats and malware. The interplay between the particles and the whole reflects the fact that online security is an all-encompassing and complex issue that needs to be tackled both on the macro and on the micro levels.
Vibor
Vibor is the Italian manufacturer of industrial sensors and pressure switchers, with a quite minimalist website based around black, white and red. The element that makes the website design really stand out is the section featuring 3D renditions of the company products – different kinds of switches doing different jobs, each designed and animated to perfection, conveying a sense of power and reliability.
Zoox
To further illustrate the trend of 3D graphics in web design, here’s one of our old acquaintances, Zoox, which we’ve covered in our article on inspiring purple websites. This mobility-as-service company develops driverless vehicles that can be rented like a taxi, and, logically, a 3D graphic rendition of the vehicle is in the spotlight of the website. The design of the vehicle instills a sense of security and trust – vital qualities for this sort of product, while the metallic reflections in dystopian colors give it a futuristic vibe. The Zoox could have been presented through a plain photograph, of course, but the choice to make it a 3D object was very clever – being an innovative and progressive project, it only makes sense for it to be featured in a way that is equally progressive and technologically advanced.
Total Property Network
The website of the Japanese real estate company Total Property Network (TPN) sports a distinctly elegant and dark mood, completed – or, rather, broken up – by a set of floating 3D objects, mostly circular and tubular, arranged in abstract forms, with no apparent functional purpose at all, except to enrich the design. These objects, with their soft floating, give the layout a certain enigmatic quality, which adds to the interest in the company and its work.
Superlist
Those who remember the good ol’ Wunderlist will be happy to hear the founders of the popular productivity app have a new product called Superlist. More than just a to-do tool, Superlist promises an array of features and a unique, personalized and collaborative approach to work. To support this effort, the company website opens with a 3D graphic representing the conglomerate of productivity tools, from a simple pen to the tablet and keyboard. The object is animated and responds to the movement of the mouse. As we scroll down the page, we encounter additional 3D objects, albeit simpler – a sphere, a cube, a set of tokens, all animated in a choreography that reflects efficient personal and collaborative work.
Another thing our design team agrees wholeheartedly on is – when it comes to colors, old rules no longer apply. You shouldn’t mix green and yellow? Says who? Magenta shouldn’t be paired with red? Just watch me do it. According to Elena Kostic, the author of the gorgeous Micdrop theme, the sense of irreverence for the old no-no’s combined with the prevailing trend of visual experimentation has led designers to discover some outstanding color combinations, and in 2022 they’re just going to keep questioning the old canons. Here are a couple of designs that should persuade even the most color-conservative designers:
Infrared Mind + Body
For their striking website we’ve already talked about in our piece on split screen layouts, the infrared sauna and spa center Infrared Mind + Body chose a fittingly fiery palette based on a gorgeous combination of coral and light pink. Additional colors include violet (another color you’re “not supposed” to mix with red) and a light gray that keeps things balanced.
Squad Capital
Purple on orange, pink on red, light gray on maroon, light yellow on lilac…the homepage and art direction for the Berlin-based venture capital company Squad Capital by Marvin Schwaibold doesn’t lack bold, daring compositions. In fact, you could say the entire identity is based around them. Each combination is just as daring as it is pleasing to the eye, proving the amazing potential that can be unleashed once we overcome the fear of chromatic experimentation.
We’ve already discussed the value of grid lines in web design in detail so we won’t go into it here, but it definitely bears mentioning that grids and borders are going to remain a massive trend in 2022 as well. Grid never really falls out of vogue, as it is one of the most elegant and convenient ways to group page content and instill a sense of order into layouts. Here are a couple of websites to remind you of all the virtues of grids and borders:
Family Type
The Family Type foundry opted for a dynamic and modern layout to display their fonts – a minimalist, black and white design in which each font has its own rectangular area, sectioned off by subtle white lines. What’s more, the left and right sections move in different directions when the page is scrolled. To add to the dynamic character of the website, certain sections contain animated letters, some individual, the others grouped together – and the borders (or grid lines) keep it all well-organized and easy to consume.
Sar Studio
The India-based furniture designers of the Sar Studio wanted to provide an airy, clean layout for their web presentation, one that would reflect their commitment to functional design with a strongly defined aesthetic personality. The content is neatly arranged in rectangular sections divided by thin lines, and the borders are used for the menu as well. The design plays with the pleasant tension between vertically and horizontally arranged elements, and the minimalist approach helps keep things clean and breathable.
Honext
The Barcelona-based company Honext, which upcycles waste fibers into eco-friendly panels, has a clear vision – to help build a world in which everything is made of reclaimed materials. The design of their website reflects this mission through the choice of palette, with prevailing gray and earthy colors in light hues. Thin lines divide the layout in asymmetric sections that convey balance and order, and the fine circular border is there to highlight the cyclical nature of their manufacturing processes.
The power of kinetic typography in drawing attention and providing delight has been proven time and time again. In 2022, we expect to see even more of it, as motion designers and creative developers gain more tools and skills required to design and animate letters that twirl, grow, shrink, rotate, slide in and out and dance around the screen on their own, or triggered by user action. Here’s a quick glimpse at just how powerful kinetic typography can be and why it’s going to mark 2022:
Safari Riot
We’ve already encountered Safari Riot back when we discussed innovative hero typography trends, and the website’s kinetic text was, in fact, the number one reason why it made our list back then. The LA-based artist development company opens its website with a bang – the opening section features massive, bold Fit Variable typography that bears links to the Artists and Depts sections. The font is animated to shrink and expand in response to the cursor. Even without the animation, the font itself is a bit hard to read, and has a somewhat grotesque character, which lends the entire page a very strong personality and leaves a lasting impression.
Markus
“Boring is bad for business,” claims the website of the Swedish creative and design agency Markus the moment we land on its homepage. And the website itself is definitely everything but boring. The designers made sure to keep us entertained and delighted using a number of tricks of the trade, but kinetic typography certainly serves as the centerpiece and main medium for conveying this anti-boredom philosophy. The irreverent, purposely imperfect Aggrandir typeface moves horizontally on the screen as if it’s shaking its hips, as the letters expand and shrink, lulling the visitor in its silent but powerful rhythm.
Better Half
Better Half is a Los Angeles-based creative agency whose website achieves that subtle balance between playfulness and professionalism, minimalism and saturation, order and creativity. The website uses the Ogg typeface, a calligraphic serif that is both decorative and readable. Quite impressive in itself, the typeface is here animated to respond to the cursor by bending and sliding sideways, as if some invisible hand was gently pushing it to the side, lightly distorting it, but never past the point of illegibility. The animation is simple and limited to just two sections of the website, assuring the usability and cleanliness of the layout are preserved.
Using all sorts of objects and shapes instead of the good ol’ arrow is not a new thing – web designers have experimented with cursors for well over a decade. However, those early pointers, shaped like pizza slices, hand gestures or rockets, were often plagued with bad UX. They were glitchy to the point of driving the visitors mad. Today, when design and development have made massive strides, a pointer that is both imaginative and fully functional is not hard to create. As designers embrace experimentation and introduce creativity way past the illustrations and animations, we’re seeing more and more websites with creative pointers in all sorts of shapes and sizes. This is going to be a continuing trend in 2022 as well, so let’s check out some of the most successful examples:
Monopo London
The London-based and Tokyo-born design agency Monopo takes the cursor design to a whole new level – shaped like a lens or a bubble, the huge circular cursor serves not only its original purpose, but also as a translation device. As we move it across the hero text in English, the lens reveals the same text in Japanese. For the sake of good UX, this effect is reserved for the hero text alone, while the rest of the page can be navigated in a usual manner, without the translation.
Myriad
The creative video agency Myriad from North Carolina has a pretty straightforward website that combines basic information with select video content, but with one element added specifically to spice things up – the cursor. It starts off as a tiny magenta triangle that transforms when hovered over certain elements. Certain links and images make it appear as a play button, indicating the elements are clickable and leading to video content, and near the menu it turns into a circle with a smaller white circle within. The magenta is reflected in several interface elements, such as the exclamation mark in the agency logo, several text underlines and the menu logo as well, tying the entire composition together.
Impero
For their website, the creative agency Impero opted for a sizable yellow dot that doesn’t necessarily work as a cursor but rather as its companion that follows the conventional arrow around the screen as the user explores the website. The circle interacts with certain elements (the wireframe 3D object, the menu items), causing them to change shape or color when hovered upon, but for the most part it serves merely as a creative addition whose color creates a welcome contrast with the background that changes from black to gray, then to green and finally to purple.
Illuminating Radioactivity
Here’s a website whose design merits are too numerous to go through in one article: Illuminating Radioactivity, a complex and important project that aims to demystify radiation using science, policy and creative expertise. The background is sprinkled with stickers or bits of paper each bearing a different myth, prejudice or buzzword related to radioactivity. As we move the cursor, shaped like a large particle, perhaps a proton, followed by a string of smaller ones, it deletes those stickers one by one, until we finally reveal the hero text – “Illuminating Radioactivity.” This way we symbolically shed off the weight of the prejudice and negative propaganda surrounding one of the potentially most beneficial sources of energy.
Innovative and inspiring scrolling effects constitute an important part of visual storytelling, as they unite interface navigation with other visual elements that communicate messages on a website. Here at Qode Interactive, we’re big fans of creative scrolling and often use it in our themes – whenever it makes sense, of course. We are generally used to seeing scrolling as a predominantly vertical event, a means for taking the user down a page. In 2022, however, we are going to be seeing a lot of scrolling that is more about the journey then about the destination, like in the examples below:
Paper Play by Moooi
Paper Play is a truly spectacular kinetic journey centered around a plissé paper lamp presented by the Dutch interior design and lighting studio Moooi. Part of a three-piece journey through the studio’s projects and pieces, Paper Play takes us through textures and colors, fan-like ornaments, flowers and birds, showcasing discretely the highlighted products – the lamp, a cabinet, a carpet and room fragrance. The journey is scroll-based, so the user can dictate the tempo in which the visuals will unfold, complete with masterfully matched music.
Bugatti Smartwatches
The Bugatti Ceramique by Bugatti Smartwatches is marketed as the world’s most luxurious smartwatch, so designing a website that unites high scale aesthetics and technology was basically a must. The website keeps in line with the design of the watch – a dark layout with red, blue, black and white as main colors, reflecting the three available bezels. Strength, resilience and class are the prevailing character traits of the watch – and the website – and the story around this luxurious item is built mainly using the scroll. After a rather cinematic opening showcase of the watch, the scroll takes us through its most important features using fullscreen sections, video, photography and animation.
No-Code Conference
For the 2021 edition of the No-Code Conference, the designers created a lovely scroll-based animated section with an illustration representing a system or a process in a rather simplified form, with levers, openings, rolls and bars, somewhat resembling those wooden toys kids use to practice building, stacking, fitting and structuring, but with colors, textures and shapes that bring some of Moebius’ work to mind. As we scroll, a couple of balls and levers move gently towards their destinations. This animation, coupled with bright but soothing colors (especially pinks and yellows) instills a sense of ease, something all of us could certainly use in these hectic times.
Bridge Tour
Finally, what better way to illustrate the predilection our team has for scroll effects than Bridge Tour, the showcase of our best-selling Bridge theme? In this endeavor, which we are particularly proud of, we set out to create an immersive, engaging narrative through one of Qode Interactive’s greatest accomplishments. For the Tour, we based the entire storytelling experience around the scroll – it pulls the visitor in as the content transforms and blends, new pieces coming in and out in a rhythm set out by the user himself. The sense of control couples with the immersiveness of the experience, creating a delightful and exciting effect, with plenty of twists, details and delightful surprises, all the while remaining clear, easily navigable and informative. The scroll is not the only user action here – certain parts of the narrative prompt the visitor to focus the cursor, wiggle the mouse or click to play a video. Still, the scroll action remains the motor of the experience and ties the entire composition together.
Wrapping It Up
That was quite a journey, wasn’t it? We’re absolutely positive that 2022 is going to be a wonderful journey too, judging from the trends and tendencies we have witnessed in the previous year. More excitement, more showing off of skills, better UX and even more experimentation – we are in for a lot of fun.
The list is far from exhaustive – we all have our own predictions and predilections and we couldn’t possibly list them all. That being said, give us a shout in the comments section and tell us about your own predictions for 2022, design-wise.
