{"id":34059,"date":"2022-01-28T15:00:03","date_gmt":"2022-01-28T14:00:03","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=34059"},"modified":"2022-01-28T13:22:30","modified_gmt":"2022-01-28T12:22:30","slug":"design-trends-to-watch-out-for","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/design-trends-to-watch-out-for\/","title":{"rendered":"Designers\u2019 Pick: 10 Design Trends to Watch Out for in 2022"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]While no one would really admit to actually following trends (the ultimate \u201cuncool\u201d thing to do since high school mentality said so &#8211; we all want to set trends, not follow them, right?), there\u2019s no denying that trends <em>do<\/em> matter and that we <em>do<\/em> follow them to some degree. Not only there\u2019s nothing wrong with that, but actually quite the contrary: <strong>trends are a reflection of our collective mindset at a certain point, an expression of what\u2019s occupying, motivating, or moving us.<\/strong> And there\u2019s something really beautiful and comforting about being together like that. Especially after what we\u2019ve been through in 2020 and 2021. So, this time around, we want to talk about design trends for the coming year.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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\u2019re a designer looking for inspiration or just a \u201ccivilian\u201d 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\u2019s what we at Qode Interactive often catch ourselves doing, with all the \u201coohs\u201d and \u201caahs\u201d as we stumble upon a gorgeously designed layout or a stunning new typeface.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And because we\u2019re so keen on all the comings and goings in the design world, we\u2019ve 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:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#serif-display-fonts\">Serif Display Fonts<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#chrome-and-liquid-metal\">Chrome and Liquid Metal<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#plastics-fluids-and-moldables\">Plastics, Fluids and Moldables<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#hero-video-sections\">Hero Video Sections<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#3d-graphics\">3D Graphics<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#daring-colors-and-combinations\">Daring Colors and Combinations<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#borders-and-grids\">Borders and Grids<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#kinetic-typography\">Kinetic Typography<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#creative-pointers\">Creative Pointers<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#scrolling-effects\">Scrolling Effects<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"serif-display-fonts\"><\/a>Serif Display Fonts<\/h2>\n<p>[\/vc_column_text][vc_column_text]For our designer Milica Andjelkovic, the author of the <a href=\"https:\/\/shoshin.qodeinteractive.com\/landing\">Shoshin<\/a> theme, one of the highlights for 2022 would have to be <strong>the evident rise in the use of serif display typography<\/strong>. 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 <strong>more serifs in headlines of all sorts and across all niches &#8211; even in tech<\/strong>. Serif display fonts are expected to bring a breath of fresh air and add more character, which is definitely a welcome thing.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Louie Restaurant<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Louie-Restaurant.jpg\" class=\"attachment-full size-full\" alt=\"Louie Restaurant\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Louie-Restaurant.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Louie-Restaurant-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Louie-Restaurant-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Louie-Restaurant-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The designer duo of Violaine &amp; Jeremy were commissioned for art direction and complete visual identity for <a href=\"https:\/\/www.behance.net\/gallery\/126747981\/Louie-Restaurant\" target=\"_blank\" rel=\"noopener\">the London restaurant Louie<\/a>, and they sure did a tremendous job. From the hand-drawn monograms and illustrations to beautiful color pairings, Louie\u2019s visual identity is unmistakably chic, and a lot of it is based around the restaurant logo. The playful and elegant serif typeface evokes the <strong>classy decadence of the French court and the golden era of New Orleans<\/strong>, with a touch of Art Nouveau inspiration that has been having a big comeback lately.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Voyage by Viola&amp;Jeremy<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"551\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Voyage-by-ViolaJeremy.jpg\" class=\"attachment-full size-full\" alt=\"Voyage by Viola&amp;Jeremy\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Voyage-by-ViolaJeremy.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Voyage-by-ViolaJeremy-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Voyage-by-ViolaJeremy-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Voyage-by-ViolaJeremy-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Another exciting creation by the creative duo Viola&amp;Jeremy, <a href=\"https:\/\/violaineetjeremy.fr\/project\/voyage\" target=\"_blank\" rel=\"noopener\">Voyage<\/a> is <strong>a romantic, curvy display serif font created in 2019 and packed with 55 stylistic ligatures and 26 variants.<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">The Canvas Agency<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/The-Canvas-Agency.jpg\" class=\"attachment-full size-full\" alt=\"The Canvas Agency\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/The-Canvas-Agency.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/The-Canvas-Agency-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/The-Canvas-Agency-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/The-Canvas-Agency-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The New York and Toronto-based <a href=\"https:\/\/thecanvasagency.com\/\" target=\"_blank\" rel=\"noopener\">Canvas Agency<\/a>, 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.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Bit of Denim<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Bit-of-Denim.jpg\" class=\"attachment-full size-full\" alt=\"Bit of Denim\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Bit-of-Denim.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Bit-of-Denim-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Bit-of-Denim-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Bit-of-Denim-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]A brand that seems to nurture equal passion for typography as it does for upcycled jeans, <a href=\"https:\/\/www.bitofdenim.com\/\" target=\"_blank\" rel=\"noopener\">Bit of Denim<\/a> opens with brand initials in a clean, thin, vintage font and follows up with large serif typography in the hero section. The font is <strong>equal parts playful and elegant, perhaps even a bit romantic and definitely a tad quirky<\/strong> &#8211; the lopsided O\u2019s, 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"chrome-and-liquid-metal\"><\/a>Chrome and Liquid Metal<\/h2>\n<p>[\/vc_column_text][vc_column_text]Here\u2019s a trend we\u2019ve already covered in detail in our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/captivating-examples-of-liquid-metal-effect-in-web-design\/\">inspiring examples of the liquid metal effect in design<\/a> &#8211; chrometype and liquid metal are making a huge comeback and this year we\u2019re bound to see more of this exciting style. Used both for typography effects and for exciting 3D and digital art, the liquid metal adds <strong>a touch of retro futurism and also serves as a great exhibition of skill and design craft.<\/strong> Our Marijana Obradovic, who authored the wonderful <a href=\"https:\/\/konsept.qodeinteractive.com\/landing\">Konsept<\/a> theme, picked a couple of exciting examples of this trend.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Mortar&amp;Brick<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/MortarBrick.jpg\" class=\"attachment-full size-full\" alt=\"Mortar&amp;Brick\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/MortarBrick.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/MortarBrick-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/MortarBrick-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/MortarBrick-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Danish studio Hugmun did a lovely job at highlighting some of the core values of the property consultancy agency <a href=\"https:\/\/www.behance.net\/gallery\/130556633\/Mortar-Brick\" target=\"_blank\" rel=\"noopener\">Mortar&amp;Brick<\/a> &#8211;<strong> integrity, quality, but also femininity.<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Henri Heymans<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Henri-Heymans.jpg\" class=\"attachment-full size-full\" alt=\"Henri Heymans\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Henri-Heymans.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Henri-Heymans-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Henri-Heymans-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Henri-Heymans-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The talented front-end developer <a href=\"https:\/\/henriheymans.com\/\" target=\"_blank\" rel=\"noopener\">Henri Heymans<\/a> 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 <strong>static-like texture and monochromatic gradients<\/strong> gives the orb a vintage feel, while its perpetual rotation adds dynamicity to the page.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Lunch Concept<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Lunch-Concept.jpg\" class=\"attachment-full size-full\" alt=\"Lunch Concept\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Lunch-Concept.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Lunch-Concept-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Lunch-Concept-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Lunch-Concept-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The first thing that strikes us when we land on <a href=\"http:\/\/www.lunchconcept.com\/\" target=\"_blank\" rel=\"noopener\">Lunch Concept\u2019<\/a>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 <strong>a sensual character that is also perhaps a bit edgy<\/strong>, while the line that connects the letters L and N gives it a touch of elegance and sophistication.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"plastics-fluids-and-moldables\"><\/a>Plastics, Fluids and Moldables<\/h2>\n<p>[\/vc_column_text][vc_column_text]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 <strong>mimic the physical qualities of materials they represent, adding a sense of innovation and skill to layouts they\u2019re used in<\/strong>. Let\u2019s take a look at some of the examples.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">The Tide<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/The-Tide.jpg\" class=\"attachment-full size-full\" alt=\"The Tide\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/The-Tide.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/The-Tide-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/The-Tide-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/The-Tide-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.behance.net\/gallery\/88371173\/The-Tide\" target=\"_blank\" rel=\"noopener\">The Tide<\/a> 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\u2019s visual identity set out to reflect in the accompanying designs.<strong> Abstract shapes made of water, transparent with hints of colorful reflections<\/strong>, are the linchpin of the visual identity created for the location (and the festival), communicating motion and flexibility.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Montreal International Jazz Festival<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Montreal-International-Jazz-Festival.jpg\" class=\"attachment-full size-full\" alt=\"Montreal International Jazz Festival\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Montreal-International-Jazz-Festival.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Montreal-International-Jazz-Festival-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Montreal-International-Jazz-Festival-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Montreal-International-Jazz-Festival-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.behance.net\/gallery\/133563001\/Montreal-International-Jazz-Festival-2021\" target=\"_blank\" rel=\"noopener\">Last year\u2019s edition<\/a> 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 <strong>sense of optimism and joy in this light-hearted but visually masterful piece of design<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">PolyU Fashion Show 2021<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/PolyU-Fashion-Show-2021.jpg\" class=\"attachment-full size-full\" alt=\"PolyU Fashion Show 2021\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/PolyU-Fashion-Show-2021.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/PolyU-Fashion-Show-2021-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/PolyU-Fashion-Show-2021-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/PolyU-Fashion-Show-2021-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For the 2021 edition of the annual <a href=\"https:\/\/www.behance.net\/gallery\/129679743\/PolyU-Fashion-Show-2021\" target=\"_blank\" rel=\"noopener\">PolyU Fashion Show<\/a> 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 \u201cphysical\u201d 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"hero-video-sections\"><\/a>Hero Video Sections<\/h2>\n<p>[\/vc_column_text][vc_column_text]For Marina Pavlovic, the designer behind the lovely <a href=\"https:\/\/joinup.qodeinteractive.com\/landing\/\">JoinUp<\/a> 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, <strong>new scripts and technologies allow for more versatility, creativity and, what\u2019s most important &#8211; better UX<\/strong>. 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 <strong>an amazing visual storytelling tool<\/strong>. Let\u2019s check out some of Marina\u2019s picks.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Beyonity<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Beyonity.jpg\" class=\"attachment-full size-full\" alt=\"Beyonity\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Beyonity.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Beyonity-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Beyonity-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Beyonity-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/beyonity.ch\/\" target=\"_blank\" rel=\"noopener\">Beyonity<\/a> 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 <strong>interplay between textures, surfaces and colors<\/strong>. The fullscreen section provides a uniquely immersive experience before the user scrolls down to more conventional parts of the page.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Abdulla Al Gurg Global Investments<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Abdulla-Al-Gurg-Global-Investments.jpg\" class=\"attachment-full size-full\" alt=\"Abdulla Al Gurg Global Investments\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Abdulla-Al-Gurg-Global-Investments.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Abdulla-Al-Gurg-Global-Investments-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Abdulla-Al-Gurg-Global-Investments-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Abdulla-Al-Gurg-Global-Investments-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For the company website, <a href=\"https:\/\/aggi.ae\/\" target=\"_blank\" rel=\"noopener\">Abdulla Al Gurg Global Investments<\/a> opted for an <strong>absolutely breathtaking aerial shot of Dubai at night<\/strong>, 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.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Sol\u2019ace<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Solace.jpg\" class=\"attachment-full size-full\" alt=\"Sol\u2019ace\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Solace.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Solace-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Solace-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Solace-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The website of the furniture and home decor shop <a href=\"https:\/\/solace-store.com\/\" target=\"_blank\" rel=\"noopener\">Sol\u2019ace<\/a> 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 &#8211; <strong>a seemingly static interior shot, except for an airy, softly moving curtain<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"3d-graphics\"><\/a>3D Graphics<\/h2>\n<p>[\/vc_column_text][vc_column_text]Although we\u2019ve 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, <strong>experimenting with textures and materials, combining illustrations and photographs<\/strong>, and creating everything from realistic to abstract attention-grabbing projects.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Vivid+Co<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/VividCo.jpg\" class=\"attachment-full size-full\" alt=\"Vivid+Co\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/VividCo.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/VividCo-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/VividCo-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/VividCo-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The full-service agency and strategic advisory <a href=\"https:\/\/vividand.co\/\" target=\"_blank\" rel=\"noopener\">Vivid+Co<\/a> has a mission of \u201cputting the pieces together,\u201d which is cleverly reflected in the centerpiece of the website\u2019s hero section &#8211; <strong>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<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Hyperframe<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Hyperframe.jpg\" class=\"attachment-full size-full\" alt=\"Hyperframe\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Hyperframe.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Hyperframe-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Hyperframe-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Hyperframe-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.hyperframe.com\/\" target=\"_blank\" rel=\"noopener\">Hyperframe<\/a> 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<strong> impressive 3D renders of steel frames, beautifully photographed, that move, come closer, fit and literally snap into place<\/strong> as we scroll the website. It\u2019s a simple but quite impressive design element that does an amazing job at conveying the company\u2019s single most important selling point.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">PerimeterWatch<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/PerimeterWatch.jpg\" class=\"attachment-full size-full\" alt=\"PerimeterWatch\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/PerimeterWatch.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/PerimeterWatch-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/PerimeterWatch-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/PerimeterWatch-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The network infrastructure and security industry is a fast-growing one and, unsurprisingly, doesn\u2019t lack in excellent pieces of design innovation. A great example is <a href=\"https:\/\/www.perimeterwatch.com\/\" target=\"_blank\" rel=\"noopener\">PerimeterWatch<\/a>, a company offering network security intelligence and other digital security services. Their website features <strong>a morphing 3D animated object that is made up of smaller 3D particles, animated to fit with each other in various compositions<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Vibor<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Vibor.jpg\" class=\"attachment-full size-full\" alt=\"Vibor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Vibor.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Vibor-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Vibor-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Vibor-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.vibor.it\/\" target=\"_blank\" rel=\"noopener\">Vibor<\/a> 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 <strong>3D renditions of the company products<\/strong> &#8211; different kinds of switches doing different jobs, each designed and animated to perfection, conveying a sense of power and reliability.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Zoox<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Zoox.jpg\" class=\"attachment-full size-full\" alt=\"Zoox\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Zoox.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Zoox-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Zoox-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Zoox-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To further illustrate the trend of 3D graphics in web design, here\u2019s one of our old acquaintances, <a href=\"https:\/\/www.zoox.com\/\" target=\"_blank\" rel=\"noopener\">Zoox<\/a>, which we\u2019ve covered in our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/beautiful-purple-websites\/\">inspiring purple websites<\/a>. 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. <strong>The design of the vehicle instills a sense of security and trust<\/strong> &#8211; 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 &#8211; 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.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Total Property Network<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Total-Property-Network.jpg\" class=\"attachment-full size-full\" alt=\"Total Property Network\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Total-Property-Network.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Total-Property-Network-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Total-Property-Network-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Total-Property-Network-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The website of the Japanese real estate company <a href=\"https:\/\/total-pr.net\/\" target=\"_blank\" rel=\"noopener\">Total Property Network (TPN)<\/a> sports <strong>a distinctly elegant and dark mood, completed &#8211; or, rather, broken up &#8211; by a set of floating 3D objects<\/strong>, 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.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Superlist<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Superlist.jpg\" class=\"attachment-full size-full\" alt=\"Superlist\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Superlist.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Superlist-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Superlist-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Superlist-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Those who remember the good ol\u2019 Wunderlist will be happy to hear the founders of the popular productivity app have a new product called <a href=\"https:\/\/superlist.com\/\" target=\"_blank\" rel=\"noopener\">Superlist<\/a>. 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 <strong>a 3D graphic representing the conglomerate of productivity tools, from a simple pen to the tablet and keyboard.<\/strong> 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 &#8211; a sphere, a cube, a set of tokens, all animated in a choreography that reflects efficient personal and collaborative work.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"daring-colors-and-combinations\"><\/a>Daring Colors and Combinations<\/h2>\n<p>[\/vc_column_text][vc_column_text]Another thing our design team agrees wholeheartedly on is &#8211; when it comes to colors, old rules no longer apply. You shouldn\u2019t mix green and yellow? Says who? Magenta shouldn\u2019t be paired with red? Just watch me do it. According to Elena Kostic, the author of the gorgeous <a href=\"https:\/\/micdrop.qodeinteractive.com\/landing\/\">Micdrop<\/a> theme, <strong>the sense of irreverence for the old no-no\u2019s combined with the prevailing trend of visual experimentation<\/strong> has led designers to discover some <a href=\"https:\/\/qodeinteractive.com\/magazine\/color-combinations\/\">outstanding color combinations<\/a>, and in 2022 they\u2019re just going to keep questioning the old canons. Here are a couple of designs that should persuade even the most color-conservative designers:[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Infrared Mind + Body<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Infrared-Mind-Body.jpg\" class=\"attachment-full size-full\" alt=\"Infrared Mind + Body\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Infrared-Mind-Body.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Infrared-Mind-Body-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Infrared-Mind-Body-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Infrared-Mind-Body-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For their striking website we\u2019ve already talked about in our piece on <a href=\"https:\/\/qodeinteractive.com\/magazine\/split-screen-layout-in-use-best-examples\/\">split screen layouts<\/a>, the infrared sauna and spa center <a href=\"https:\/\/infraredmindbody.com\/\" target=\"_blank\" rel=\"noopener\">Infrared Mind + Body<\/a> chose <strong>a fittingly fiery palette<\/strong> based on a gorgeous combination of coral and light pink. Additional colors include violet (another color you\u2019re \u201cnot supposed\u201d to mix with red) and a light gray that keeps things balanced.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Squad Capital<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Squad-Capital.jpg\" class=\"attachment-full size-full\" alt=\"Squad Capital\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Squad-Capital.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Squad-Capital-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Squad-Capital-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Squad-Capital-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Purple on orange, pink on red, light gray on maroon, light yellow on lilac\u2026the homepage and art direction for the Berlin-based venture capital company <a href=\"https:\/\/dribbble.com\/shots\/16660673-Squad-Capital-Color-Exploration#\" target=\"_blank\" rel=\"noopener\">Squad Capital<\/a> by Marvin Schwaibold doesn\u2019t lack bold, daring compositions. In fact, you could say the entire identity is based around them. <strong>Each combination is just as daring as it is pleasing to the eye<\/strong>, proving the amazing potential that can be unleashed once we overcome the fear of chromatic experimentation.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"borders-and-grids\"><\/a>Borders and Grids<\/h2>\n<p>[\/vc_column_text][vc_column_text]We\u2019ve already discussed <a href=\"https:\/\/qodeinteractive.com\/magazine\/web-design-grid-lines\/\">the value of grid lines in web design<\/a> in detail so we won\u2019t 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 <strong>one of the most elegant and convenient ways to group page content and instill a sense of order into layouts<\/strong>. Here are a couple of websites to remind you of all the virtues of grids and borders:[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Family Type<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Family-Type.jpg\" class=\"attachment-full size-full\" alt=\"Family Type\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Family-Type.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Family-Type-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Family-Type-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Family-Type-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <a href=\"https:\/\/familytype.co\/\" target=\"_blank\" rel=\"noopener\">Family Type<\/a> foundry opted for a dynamic and modern layout to display their fonts &#8211; a minimalist, black and white design in which each font has its own rectangular area, sectioned off by subtle white lines. What\u2019s more, <strong>the left and right sections move in different directions when the page is scrolled<\/strong>. To add to the dynamic character of the website, certain sections contain animated letters, some individual, the others grouped together &#8211; and the borders (or grid lines) keep it all well-organized and easy to consume.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Sar Studio<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Sar-Studio.jpg\" class=\"attachment-full size-full\" alt=\"Sar Studio\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Sar-Studio.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Sar-Studio-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Sar-Studio-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Sar-Studio-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The India-based furniture designers of the <a href=\"https:\/\/sar-studio.com\/\" target=\"_blank\" rel=\"noopener\">Sar Studio<\/a> wanted to provide <strong>an airy, clean layout for their web presentation<\/strong>, one that would reflect their commitment to<strong> functional design with a strongly defined aesthetic personality<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Honext<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Honext.jpg\" class=\"attachment-full size-full\" alt=\"Honext\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Honext.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Honext-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Honext-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Honext-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Barcelona-based company <a href=\"https:\/\/honextmaterial.com\/\" target=\"_blank\" rel=\"noopener\">Honext<\/a>, which upcycles waste fibers into eco-friendly panels, has a clear vision &#8211; to help build a world in which everything is made of reclaimed materials. The design of their website <strong>reflects this mission through the choice of palette<\/strong>, 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"kinetic-typography\"><\/a>Kinetic Typography<\/h2>\n<p>[\/vc_column_text][vc_column_text]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 <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-online-courses-for-creative-developers\/\">creative developers<\/a> gain more tools and skills required to design and animate<strong> letters that twirl, grow, shrink, rotate, slide in and out and dance around the screen on their own, or triggered by user action.<\/strong> Here\u2019s a quick glimpse at just how powerful kinetic typography can be and why it\u2019s going to mark 2022:[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Safari Riot<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Safari-Riot.jpg\" class=\"attachment-full size-full\" alt=\"Safari Riot\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Safari-Riot.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Safari-Riot-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Safari-Riot-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Safari-Riot-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve already encountered <a href=\"https:\/\/safaririot.com\/\" target=\"_blank\" rel=\"noopener\">Safari Riot<\/a> back when we discussed <a href=\"https:\/\/qodeinteractive.com\/magazine\/innovative-typography-hero-trends\/\">innovative hero typography trends<\/a>, and the website\u2019s 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 &#8211;<strong> the opening section features massive, bold Fit Variable typography that bears links to the Artists and Depts sections<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Markus<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Markus.jpg\" class=\"attachment-full size-full\" alt=\"Markus\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Markus.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Markus-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Markus-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Markus-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]\u201cBoring is bad for business,\u201d claims the website of the Swedish creative and design agency <a href=\"https:\/\/markus.se\/\" target=\"_blank\" rel=\"noopener\">Markus<\/a> 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 <strong>kinetic typography certainly serves as the centerpiece and main medium for conveying this anti-boredom philosophy<\/strong>. The irreverent, purposely imperfect Aggrandir typeface moves horizontally on the screen as if it\u2019s shaking its hips, as the letters expand and shrink, lulling the visitor in its silent but powerful rhythm.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Better Half<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Better-Half.jpg\" class=\"attachment-full size-full\" alt=\"Better Half\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Better-Half.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Better-Half-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Better-Half-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Better-Half-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/bttrhlf.com\/\" target=\"_blank\" rel=\"noopener\">Better Half<\/a> 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, <strong>the typeface is here animated to respond to the cursor by bending and sliding sideways<\/strong>, 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"creative-pointers\"><\/a>Creative Pointers<\/h2>\n<p>[\/vc_column_text][vc_column_text]Using all sorts of objects and shapes instead of the good ol\u2019 arrow is not a new thing &#8211; 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, <strong>a pointer that is both imaginative <em>and<\/em> fully functional is not hard to create<\/strong>. As designers embrace experimentation and introduce creativity way past the illustrations and animations, we\u2019re 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\u2019s check out some of the most successful examples:[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Monopo London<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Monopo-London.jpg\" class=\"attachment-full size-full\" alt=\"Monopo London\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Monopo-London.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Monopo-London-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Monopo-London-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Monopo-London-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The London-based and Tokyo-born design agency <a href=\"https:\/\/monopo.london\/\" target=\"_blank\" rel=\"noopener\">Monopo<\/a> takes the cursor design to a whole new level &#8211; shaped like a lens or a bubble, <strong>the huge circular cursor serves not only its original purpose, but also as a translation device<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Myriad<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Myriad.jpg\" class=\"attachment-full size-full\" alt=\"Myriad\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Myriad.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Myriad-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Myriad-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Myriad-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The creative video agency <a href=\"https:\/\/myriad.video\/\" target=\"_blank\" rel=\"noopener\">Myriad<\/a> 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 &#8211; the cursor. It starts off as<strong> a tiny magenta triangle that transforms when hovered over certain elements<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Impero<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Impero.jpg\" class=\"attachment-full size-full\" alt=\"Impero\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Impero.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Impero-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Impero-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Impero-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For their website, the creative agency <a href=\"https:\/\/www.weareimpero.com\/\" target=\"_blank\" rel=\"noopener\">Impero<\/a> opted for a sizable yellow dot that doesn\u2019t necessarily work as a cursor but rather as its<strong> companion that follows the conventional arrow around the screen as the user explores the website<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Illuminating Radioactivity<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Illuminating-Radioactivity.jpg\" class=\"attachment-full size-full\" alt=\"Illuminating Radioactivity\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Illuminating-Radioactivity.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Illuminating-Radioactivity-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Illuminating-Radioactivity-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Illuminating-Radioactivity-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Here\u2019s a website whose design merits are too numerous to go through in one article: <a href=\"https:\/\/illuminating-radioactivity.com\/\" target=\"_blank\" rel=\"noopener\">Illuminating Radioactivity<\/a>, 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 <strong>each bearing a different myth, prejudice or buzzword related to radioactivity<\/strong>. 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 &#8211; \u201cIlluminating Radioactivity.\u201d This way we <strong>symbolically shed off the weight of the prejudice and negative propaganda<\/strong> surrounding one of the potentially most beneficial sources of energy.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"scrolling-effects\"><\/a>Scrolling Effects<\/h2>\n<p>[\/vc_column_text][vc_column_text]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\u2019re big fans of creative scrolling and often use it in our themes &#8211; 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 <strong>more about the journey then about the destination<\/strong>, like in the examples below:[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Paper Play by Moooi<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Paper-Play-by-Moooi.jpg\" class=\"attachment-full size-full\" alt=\"Paper Play by Moooi\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Paper-Play-by-Moooi.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Paper-Play-by-Moooi-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Paper-Play-by-Moooi-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Paper-Play-by-Moooi-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/moooi.com\/en\/paper-play#intro\" target=\"_blank\" rel=\"noopener\">Paper Play<\/a> is a truly spectacular kinetic journey centered around a pliss\u00e9 paper lamp presented by the Dutch interior design and lighting studio Moooi. Part of a three-piece journey through the studio\u2019s projects and pieces,<strong> Paper Play takes us through textures and colors, fan-like ornaments, flowers and birds, showcasing discretely the highlighted products<\/strong> &#8211; 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.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Bugatti Smartwatches<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Bugatti-Smartwatches.jpg\" class=\"attachment-full size-full\" alt=\"Bugatti Smartwatches\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Bugatti-Smartwatches.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Bugatti-Smartwatches-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Bugatti-Smartwatches-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Bugatti-Smartwatches-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Bugatti Ceramique by <a href=\"https:\/\/bugatti-smartwatches.com\/\" target=\"_blank\" rel=\"noopener\">Bugatti Smartwatches<\/a> is marketed as the world\u2019s most luxurious smartwatch, so designing<strong> a website that unites high scale aesthetics and technology<\/strong> was basically a must. The website keeps in line with the design of the watch &#8211; 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 &#8211; and the website &#8211; 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.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">No-Code Conference<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/No-Code-Conference.jpg\" class=\"attachment-full size-full\" alt=\"No-Code Conference\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/No-Code-Conference.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/No-Code-Conference-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/No-Code-Conference-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/No-Code-Conference-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For the 2021 edition of the <a href=\"https:\/\/webflow.com\/nocodeconf\" target=\"_blank\" rel=\"noopener\">No-Code Conference<\/a>, the designers created a lovely scroll-based animated section with an illustration representing <strong>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,<\/strong> but with colors, textures and shapes that bring some of Moebius\u2019 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.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Bridge Tour<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"548\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/01\/Bridge-Tour.gif\" class=\"attachment-full size-full\" alt=\"Bridge Tour\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, what better way to illustrate the predilection our team has for scroll effects than <a href=\"https:\/\/bridgelanding.qodeinteractive.com\/tour\/\">Bridge Tour<\/a>, the showcase of our best-selling <a href=\"https:\/\/bridgelanding.qodeinteractive.com\/\">Bridge<\/a> theme? In this endeavor, which we are particularly proud of, we set out to create <strong>an immersive, engaging narrative through one of Qode Interactive\u2019s greatest accomplishments<\/strong>. For the Tour, we based the entire storytelling experience around the scroll &#8211; 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. <strong>The sense of control couples with the immersiveness of the experience, creating a delightful and exciting effect<\/strong>, 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 &#8211; 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Wrapping It Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]That was quite a journey, wasn\u2019t it? We\u2019re 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 &#8211; we are in for a lot of fun.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The list is far from exhaustive &#8211; we all have our own predictions and predilections and we couldn&#8217;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.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>What does 2022 have in store for us, design-wise? If you ask us &#8211; a lot of exciting things! This year is going to be marked by an overall sense of experimentation and playfulness, as the latest tech developments enable us to create incredible things. Check out our design team&#8217;s predictions for the coming trends. <\/p>\n","protected":false},"author":3,"featured_media":34180,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[207,40,44],"class_list":["post-34059","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-design","tag-inspiration","tag-trends"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/34059","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=34059"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/34059\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/34180"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=34059"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=34059"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=34059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}