{"id":34483,"date":"2022-02-04T15:00:38","date_gmt":"2022-02-04T14:00:38","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=34483"},"modified":"2022-02-04T14:11:23","modified_gmt":"2022-02-04T13:11:23","slug":"websites-illustrating-power-of-interactive-links-in-design","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/websites-illustrating-power-of-interactive-links-in-design\/","title":{"rendered":"18 Websites Illustrating the Power of Interactive Links in Design"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]For the last couple of years, we\u2019ve been witnessing a rising trend of interactive links in web design. Large, often kinetic typography that shifts and transforms when clicked or hovered upon can be seen on everything from portfolio websites to online shops. Screen is a fluid medium, and interaction between different design elements on a page is critical to its success in terms of UX and, by extension, brand perception.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Certain interactions, as part of the <a href=\"https:\/\/qodeinteractive.com\/magazine\/functional-animation-in-ux\/\">functional animation<\/a>, have essentially become a must. It\u2019s important to remember that the web today is inherently interactive in itself. With the rise of apps, online experience is predominantly designed to take the user from point A to point B through a series of interactions on the screen. Good UX practices dictate that these interactions should feature some degree of animation in order to let the user know the desired action has indeed taken place. Loading, progress, action complete &#8211; these are the animations that not only help liven up a design, but serve a very specific practical purpose.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Sometimes, though, interactions serve as a design embellishment, an exciting display of creativity and innovation both in style and in coding. Take interactive text, for example. In most cases, it\u2019s simply a link. It works just fine without animation. The users click on it and are taken to their desired destination. Action complete, conversion achieved, if you wish. But is it really that simple? Can dull, static text be just as successful in providing good UX as text that transforms, bends, shifts, dances around the screen ? Well, today we\u2019re here to argue in favor of the opposite, using some of the most exciting examples of interactive links on the web. Stay tuned as we walk you through: [\/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=\"#fils-de-graphiste\">Fils de Graphiste<\/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=\"#french-but-nice\">French But Nice<\/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=\"#bullion-productions\">Bullion Productions<\/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=\"#charlie-montagut\">Charlie Montagut<\/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=\"#transformations-of-the-year\">Transformations of the Year<\/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=\"#van-holtz-co\">Van Holtz Co<\/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=\"#web-graphic-experiments-by-keita-yamada\">Web Graphic Experiments by Keita Yamada<\/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=\"#isabel-moranta\">Isabel Moranta<\/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=\"#decoded-advertising\">Decoded Advertising<\/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=\"#nahel-moussi\">Nahel Moussi<\/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=\"#david-kirschberg\">David Kirschberg<\/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=\"#metrica\">M\u00e9trica<\/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=\"#henge\">Henge<\/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=\"#omotesando\">Omotesando<\/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=\"#active-theory\">Active Theory<\/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=\"#we-make-fab\">We Make Fab<\/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=\"#8-design-trends-by-red-collar\">8 Design Trends by Red Collar<\/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=\"#qode-interactive-catalog\">Qode Interactive Catalog<\/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=\"fils-de-graphiste\"><\/a>Fils de Graphiste<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#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\/02\/Fils-de-Graphiste.jpg\" class=\"attachment-full size-full\" alt=\"Fils de Graphiste\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Fils-de-Graphiste.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Fils-de-Graphiste-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Fils-de-Graphiste-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Fils-de-Graphiste-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]These days, there seems to be no shortage of websites with innovative design solutions that stun and delight the visitor. Sometimes the designers take it a bit too far and create overbearing UIs, other times, though, the creation is so interesting and exciting we\u2019re willing to turn a blind eye to some downsides. That\u2019s precisely the case with <a href=\"http:\/\/www.filsdegraphiste.fr\/selected-projects\" target=\"_blank\" rel=\"noopener\">Fils de Graphiste<\/a>, the portfolio website of Lionel Taurus, a talented, multiple award-winning designer and interactive art director hailing from the French Caribbean. The website is replete with <strong>interesting details, nautical and mathematical motifs, hints to his Caribbean origin<\/strong>. The cursor is shaped like a triangle on the homepage and as a little palm tree on the About page, and that\u2019s one of the things that the website could have perhaps done without, as it moves a bit awkwardly and damages the UX. But our focus here is interactive text, and it\u2019s one of the things that were carried out to perfection. It is<strong> a precise and clean section of the Projects page, divided into slightly curved, numbered rows with striking black Lyyra Extended typography<\/strong> on a light grey background, with thin separator lines. When hovered upon, each row expands and exposes an image representing the project in question. The interaction is well-coded and smooth, without the glitches that sometimes haunt these types of interactive sections.[\/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=\"french-but-nice\"><\/a>French But Nice<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#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\/02\/French-But-Nice.jpg\" class=\"attachment-full size-full\" alt=\"French But Nice\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/French-But-Nice.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/French-But-Nice-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/French-But-Nice-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/French-But-Nice-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In one of the excellent examples of the recent trend of <a href=\"https:\/\/qodeinteractive.com\/magazine\/beautiful-gradient-websites\/\">gradients used in web design<\/a>, the French creative director Olivier Gillaizeau made himself a website that reflects his <strong>versatile and modern approach to work and his humorous and slightly (auto)ironic disposition<\/strong>, just like the site name, <a href=\"https:\/\/frenchbutnice.design\/\" target=\"_blank\" rel=\"noopener\">French But Nice<\/a>, suggests. The color gradient that evokes cinematic California sunsets makes up the background for a project list in large retro typography which, when hovered upon, switches from black to very light lilac while a popup simultaneously appears to the left, displaying a video or a still from the project, as sort of a sneak peek. The style and the aesthetics of the projects vary between each other and are not necessarily in line with the overall character of the website, but since they are presented as a sort of a window or an interlude, this inconsistency is actually no inconsistency at all, but rather<strong> an interplay between different instances of design and creative direction.<\/strong>[\/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=\"bullion-productions\"><\/a>Bullion Productions<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"549\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Bullion-Productions.jpg\" class=\"attachment-full size-full\" alt=\"Bullion Productions\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Bullion-Productions.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Bullion-Productions-300x170.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Bullion-Productions-768x435.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Bullion-Productions-620x351.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.bullionproductions.com\/directors\/\" target=\"_blank\" rel=\"noopener\">Bullion Productions<\/a> is a creative studio and film production company working with a wide roster of directors across various genres and disciplines. The <em>Directors<\/em> section of the website is particularly interesting in terms of design. It features an interactive text section with the names of the directors serving as a link to the respective project pages. The section is curved and, when scrolled, resembles<strong> a wheel where each director occupies an equal place<\/strong> &#8211; the wheel being a circular shape, all of the points of it bear equal rank and importance. This is a wonderful way of saying that all directors on the roster are equally relevant and that the studio is equally proud of all its projects. The cursor is a white dot that grows bigger when it hovers upon a name in the list of links. The outlined typography becomes filled and an arrow appears, pointing to the clips from the project that appear to the right. These interactive effects not only serve <strong>as navigational hints to the visitors, letting them know the text is linked and can be navigated further<\/strong>, but also serve as a smart, modern design element.[\/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=\"charlie-montagut\"><\/a>Charlie Montagut<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#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\/02\/Charlie-Montagut.jpg\" class=\"attachment-full size-full\" alt=\"Charlie Montagut\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Charlie-Montagut.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Charlie-Montagut-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Charlie-Montagut-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Charlie-Montagut-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.charlie-montagut.com\/projects\" target=\"_blank\" rel=\"noopener\">Charlie Montagut<\/a> is a French creative and art director with a strong background in UX\/UI design, also working with motion design and directing film and video projects. He has received a number of recognitions for his work, from Awwwards and Webbies to FWA SOTD awards, and has served as a member of the jury for several design recognitions. For his website, Charlie opted for a simple, monochromatic scheme, with <strong>an interesting Projects page &#8211; seemingly nothing but text in large Object Sans typography, except the central part is actually interactive<\/strong>. It consists of a dense list of projects which, when hovered upon, reveal an image or a video related to the project. The selected project remains in focus, while the rest of the list fades in the background. The imagery adds color to the layout, showing that the monochromatic palette of the website was a good choice. The animation is simple and well-executed, and the entire section, with short and quick mouse-driven passages between project previews, is dynamic and modern.[\/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=\"transformations-of-the-year\"><\/a>Transformations of the Year<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#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\/02\/Transformations-of-the-Year.jpg\" class=\"attachment-full size-full\" alt=\"Transformations of the Year\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Transformations-of-the-Year.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Transformations-of-the-Year-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Transformations-of-the-Year-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Transformations-of-the-Year-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Vintage is a renowned web production company from Ukraine that underwent some changes in direction over the course of 2020, taking up brand creation, production of television commercials and digital expositions. So, to mark those changes, the company created <a href=\"https:\/\/2021.vintage.com.ua\/en\" target=\"_blank\" rel=\"noopener\">Transformations of the Year from Vintage<\/a>, a website that serves as a showcase of the projects completed during that year, as well as those to come. A short digest is presented in the form of rotating reels &#8211;<strong> several \u201cstacks\u201d with four reels each, and each reel standing for a particular project<\/strong>. The reels offer basic information about the project while a huge \u201cSee More\u201d button prompts the visitor to click and explore the project. Clicking on the button opens a larger semi-circular section with text, images, numbered sections and links. <strong>The reels rotate in opposite directions, which just adds to the dynamicity of the website.<\/strong>[\/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=\"van-holtz-co\"><\/a>Van Holtz Co<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#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\/02\/Van-Holtz-Co.jpg\" class=\"attachment-full size-full\" alt=\"Van Holtz Co\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Van-Holtz-Co.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Van-Holtz-Co-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Van-Holtz-Co-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Van-Holtz-Co-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Another excellent example of interactive links is the website of the <a href=\"https:\/\/vanholtz.co\/\" target=\"_blank\" rel=\"noopener\">Van Holtz Co<\/a>, a web development studio led by Eric Van Holtz from Portland, Oregon. The first thing that strikes the visitor upon landing on the website is the architecture of the page, with a lot of empty space on the left and <strong>a section with links in parallax perspective on the right, which lends the page a realistic 3D effect<\/strong>. The text in large Druk Wide Web typography is slightly inclined and, when hovered upon, swings a bit to the front as the lettering changes from filled to outlined. Each link represents the name of a project, with the year it was carried out in small numbers, and, when clicked, takes to the designated project page. The section is animated with a discrete floating effect when scrolled, which just adds to the <strong>physical quality of the text, making it appear quite life-like<\/strong>. The choice of the typography and the way the section is positioned on a vibrant blue background also bear a bit of a \u201870\u2019s film aesthetic. It is a striking, very well-executed homepage that testifies to the studio\u2019s skill and talent.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;interactive-links-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=\"web-graphic-experiments-by-keita-yamada\"><\/a>Web Graphic Experiments by Keita Yamada<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#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\/02\/Web-Graphic-Experiments-by-Keita-Yamada.jpg\" class=\"attachment-full size-full\" alt=\"Web Graphic Experiments by Keita Yamada\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Web-Graphic-Experiments-by-Keita-Yamada.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Web-Graphic-Experiments-by-Keita-Yamada-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Web-Graphic-Experiments-by-Keita-Yamada-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Web-Graphic-Experiments-by-Keita-Yamada-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]These days, it\u2019s not that common to see a website that can only be viewed on desktop &#8211; because of the modern web browsing habits, most websites are available in versions for smaller screens, too. However, there are cases when a designer decides that all the effort is going to be put in the desktop version and that the design creations merit a \u201cproper\u201d large screen. That is most likely the case with Keita Yamada and his showcase of <a href=\"https:\/\/experiments.p5aholic.me\/\" target=\"_blank\" rel=\"noopener\">Web Graphic Experiments<\/a>, only available in a desktop version. The Japanese designer, developer and generative artist created a stunning and innovative display of 34 projects in which polishes his own coding skills and explores the expressive limits of the modern web. The projects are listed in the reverse order, from 34 to 1. These interactive links turn from filled to outlined when hovered upon, and the circular cursor emulates a spotlight that changes the color of the field it covers. <strong>The background is in perpetual, gentle motion<\/strong>, and features a subtle shifting animation when the mouse is moved around the screen. What\u2019s particularly interesting about this website is<strong> the color switcher with seven options, which can be used to change the theme color.<\/strong> Animation is also present on the transition from the homepage to the individual project pages. In fact, nothing about this website is static or straightforward &#8211; <strong>motion and interactivity are present throughout, drawing the visitor deeper into Kaita\u2019s vision.<\/strong>[\/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=\"isabel-moranta\"><\/a>Isabel Moranta<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#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\/02\/Isabel-Moranta.jpg\" class=\"attachment-full size-full\" alt=\"Isabel Moranta\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Isabel-Moranta.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Isabel-Moranta-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Isabel-Moranta-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Isabel-Moranta-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:\/\/qodeinteractive.com\/magazine\/how-to-choose-website-fonts\/\">The choice of the typeface<\/a> is vital in designing sections with interactive text. Some websites seem to prove this point particularly well, and <a href=\"https:\/\/isabelmoranta.com\/\" target=\"_blank\" rel=\"noopener\">Isabel Moranta\u2019s portfolio<\/a> is one of them. The Spanish-born, Montreal-based digital designer, art director and creative strategist has won several accolades for her work, and her website features some of her most notable projects. Opening with a fine example of <a href=\"https:\/\/qodeinteractive.com\/magazine\/innovative-typography-hero-trends\/\">hero text<\/a> in the Antiqua Roman typeface that gives the design an elegant character, the homepage proceeds with <strong>a series of numbered interactive links &#8211; the first of which is more prominent and reserved for the featured project<\/strong>. In this larger section, the cursor turns into a circle with the word \u201cView\u201d in it, inviting the visitor to explore the project. In the following rows of interactive links, the interaction is different &#8211; the text (i.e. the title of the project) rolls over itself and an image from the project appears across it, following the cursor. While most interactive links sections involve a couple of animated and interactive solutions that are repeated uniformly, <strong>what sets this one aside is the featured section, animated with different transformations, with a different cursor and in a larger, more prominent format.<\/strong>[\/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=\"decoded-advertising\"><\/a>Decoded Advertising<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#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\/02\/Decoded-Advertising.jpg\" class=\"attachment-full size-full\" alt=\"Decoded Advertising\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Decoded-Advertising.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Decoded-Advertising-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Decoded-Advertising-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Decoded-Advertising-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:\/\/decodedadvertising.com\/work\" target=\"_blank\" rel=\"noopener\">Decoded Advertising<\/a> is a full-funnel marketing, advertising and design company from New York. Their focus is on building brands that don\u2019t compromise creativity for performance, and they don\u2019t shy away from experimentation. The company\u2019s spirit is youthful and innovative, sometimes flirting with pop culture, but with a strong emphasis on professionalism and quality. The website, particularly the <em>Work<\/em> page, is a colorful, interactive display of the work the company is most proud of. More than just interactive links, the showcase features<strong> a fullscreen horizontal slider with an image or a video as the background and a central banner with the name of the project in a large pixelated font and arrows that link to the project page.<\/strong> When the page is scrolled, the carousel turns, the background image\/video and the banner change to display the next project. The color palette is bold and bright, with saturated pinks, blues and purples. The palette, along with the pixelated font, may appear to be in discordance with the \u201cseriousness\u201d of the major brand names the projects were done for, but this sort of playfulness and even irreverence actually leaves a positive impression, one of <strong>a brand that is confident enough to indulge in this sort of experimentation.<\/strong>[\/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=\"nahel-moussi\"><\/a>Nahel Moussi<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#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\/02\/Nahel-Moussi.jpg\" class=\"attachment-full size-full\" alt=\"Nahel Moussi\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Nahel-Moussi.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Nahel-Moussi-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Nahel-Moussi-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Nahel-Moussi-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:\/\/nahelmoussi.com\/\" target=\"_blank\" rel=\"noopener\">Nahel Moussi<\/a> is an up-and-coming multi-skilled product designer whose work extends to visual design, UX, prototyping and motion design. Her website is a flattering example of all these skills &#8211; it is a lovely designed showcase with a strong personal aesthetics combined with appropriate project-related visuals. The projects, which include <strong>big game names like Google, Mailchimp and Aldo<\/strong>, are presented in a scrollable list that occupies the entire homepage. When each of the items comes into central position, <strong>the entire page changes color to reflect the project design, with selected design elements from the project floating gently around<\/strong>. As we scroll, the projects transition smoothly since they are listed according to the way their visual traits fit with each other. A project with a gentle, feminine design in a warm pink or purple palette is followed by a sandy, beige one, turning to warm orange, and so on. The website is also a fine example of <a href=\"https:\/\/qodeinteractive.com\/magazine\/examples-of-imaginative-mouse-cursor-design\/\">innovative cursor design<\/a> &#8211; it features a hollow circle that follows the dot but when it hovers over project titles, the central dot turns into an eye, indicating that the title is clickable and leads to the project page.[\/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=\"david-kirschberg\"><\/a>David Kirschberg<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#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\/02\/David-Kirschberg.jpg\" class=\"attachment-full size-full\" alt=\"David Kirschberg\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/David-Kirschberg.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/David-Kirschberg-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/David-Kirschberg-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/David-Kirschberg-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=\"http:\/\/www.kirschberg.co.nz\/\" target=\"_blank\" rel=\"noopener\">David Kirschberg<\/a> is an art director and multidisciplinary designer from New Zealand, currently based in Berlin. David has a particular penchant for interactive web design and animation, which is evident from his portfolio website, based on smoothly animated and visually well-crafted interactive text. The entire page has a distinct, familiar feel, achieved by <strong>a subtle noise effect both on the background and on the images<\/strong>. The clean serif typography introduces the names of the projects and is coupled with selected project imagery. There is no hover effect this time, and instead<strong> the animation is triggered upon scroll, when one project seems to dissipate like sand to give room to the next one<\/strong>. This effect fits particularly well with the grainy texture of the page, and the chromatic atmosphere of the images is coordinated so that the entire page feels coherent and balanced. Interactive text can also be found, albeit in a different form, on the About page, where the large letters in Canela Text font disappear when hovered upon, and appear again when the cursor is moved elsewhere. It\u2019s a more subtle interaction effect that is definitely suitable for a page that is supposed to have a primarily informative character.[\/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=\"metrica\"><\/a>M\u00e9trica<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#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\/02\/Metrica.jpg\" class=\"attachment-full size-full\" alt=\"M\u00e9trica\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Metrica.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Metrica-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Metrica-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Metrica-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.metrica.us\/\" target=\"_blank\" rel=\"noopener\">M\u00e9trica<\/a> is an international studio based in Seattle, Bogota and Barcelona, focused on creating inspired working and living spaces and buildings of various purposes. The studio places a particular emphasis on their love for the design craft, the principal driving force behind everything they do, a force perhaps most responsible for their remarkable results, together with a spirit of innovation and a proactive approach. Their homepage, which bears a strong architectural inspiration, is <strong>clean and modern, divided into two asymmetrical sections<\/strong> &#8211; to the left, an airy white area with the names of the projects, and to the right, a larger portion containing project images. When the name of the project is hovered upon, the image to the right changes and the text holder changes as well &#8211; the white space moves to the side, revealing that the image actually lies beneath it. It is a very modern, smart and clean design that executes smoothly thanks to the quality of the code. As such, it <strong>exudes professionalism and knowledge and complements the reputation of the studio quite well.<\/strong>[\/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=\"henge\"><\/a>Henge<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#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\/02\/Henge.jpg\" class=\"attachment-full size-full\" alt=\"Henge\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Henge.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Henge-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Henge-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Henge-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.henge07.com\/\" target=\"_blank\" rel=\"noopener\">Henge<\/a> is an Italian luxury interior design brand working with natural materials and creating handmade, unique furniture and home decor. Their website opens with an elegant video section, after which we get to explore the product categories presented through interactive links. The elegant Neue Montreal typography in light grey turns white when hovered upon, with<strong> an image of one of the pieces from the category that appears discreetly on the back background, dimly lit, in an almost ghost-like fashion<\/strong>. The brand has developed a unique aesthetic, with toned down colors based on natural materials, and the website keeps perfectly in line with it. Even the product and category pages, which are usually bright and focused on practicality and convenience, are here quite dark and aestheticised.[\/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=\"omotesando\"><\/a>Omotesando<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#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\/02\/Omotesando.jpg\" class=\"attachment-full size-full\" alt=\"Omotesando\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Omotesando.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Omotesando-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Omotesando-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Omotesando-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:\/\/omotesando.eu\/\" target=\"_blank\" rel=\"noopener\">Omotesando<\/a> is a creative duo developing both fiction and commercial projects with a strong artistic direction. Consisting of the director Maximiliano Larruy and the multimedia artist Berta-Blanca T. Ivanow, the duo works with a large team of collaborators and performers to carry out complex and visually stunning projects. Their website is a beautiful piece of modern web design, opening with <strong>a fullscreen slider consisting of vertical columns with interactive links<\/strong>. Each column of the slider stands for one project, whose name is typed out sideways in letters that flicker and change from the sans serif Grotesk font to a serif one. When a section is hovered upon, images or videos from the project appear across other sections or in the corner of the screen, offering a brief preview of the project. Each column of the slider takes the visitor to the relative page with additional information and imagery from the project. With the<strong> transforming letters and the visual content appearing and disappearing as we move the mouse across the page<\/strong>, the entire composition carries a fluttering, perhaps even a tad nervous vibe.[\/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=\"active-theory\"><\/a>Active Theory<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#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\/02\/Active-Theory.jpg\" class=\"attachment-full size-full\" alt=\"Active Theory\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Active-Theory.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Active-Theory-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Active-Theory-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Active-Theory-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:\/\/activetheory.net\/work\" target=\"_blank\" rel=\"noopener\">Active Theory<\/a> is a digital studio creating immersive VR and AR experiences, apps, installations and websites. Their website carries <strong>a distinct dystopian, even a bit grim vibe<\/strong>, created meticulously using a toolset of specialized graphic and coding tools. The part we\u2019re interested in today is the Work section of the website, in which the studio projects are divided into categories in a left-hand side menu, and listed in large typography in an interactive section that occupies the larger portion of the page. <strong>Each category has a unique background, each one like a piece of a deserted Los Angeles urban landscape.<\/strong> Sometimes tinted with neon hues, but always dark and gloomy, these environments serve as a backdrop for <strong>large, almost electric typography, which turns from filled to hollow when hovered upon<\/strong>, indicating the names of the projects can be clicked and the projects can be explored further. Interactivity is not at the center stage here, it does not serve as an exhibition of skill &#8211; in fact, the atmosphere itself seems to be the main protagonist of the design, while the interactions are there to serve their designated UX role.[\/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=\"we-make-fab\"><\/a>We Make Fab<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#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\/02\/We-Make-Fav.jpg\" class=\"attachment-full size-full\" alt=\"We Make Fav\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/We-Make-Fav.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/We-Make-Fav-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/We-Make-Fav-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/We-Make-Fav-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:\/\/wemakefab.com\/\" target=\"_blank\" rel=\"noopener\">We Make Fab<\/a> is a Russian internet marketing agency providing a comprehensive set of services &#8211; turnkey website solutions and separate services from front and back end development to SEO and PPC. The agency website is an exercise in (apparent) simplicity &#8211; <strong>black Arial typography on white background, some imagery, no mind-blowing animations or 3D experimentations<\/strong>. Still, all this minimalism is actually quite carefully crafted to achieve a character that is <strong>professional but not strict or dull<\/strong>. The projects are presented in a section called <em>Journal<\/em> and listed in a clean, precise manner, with rows separated by sharp thin lines and interaction that is limited to text rollover and an underline animation on hover, completed with a subtle navigation arrow. It\u2019s a <strong>shiny example of good measure<\/strong> when it comes to interactivity and UX. Simple and on-brand, the section involves just enough motion and transformation to engage the visitor without burdening the experience with unnecessary bells and whistles.[\/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=\"8-design-trends-by-red-collar\"><\/a>8 Design Trends by Red Collar<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#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\/02\/8-Design-Trends-by-Red-Collar.jpg\" class=\"attachment-full size-full\" alt=\"8 Design Trends by Red Collar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/8-Design-Trends-by-Red-Collar.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/8-Design-Trends-by-Red-Collar-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/8-Design-Trends-by-Red-Collar-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/8-Design-Trends-by-Red-Collar-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Red Collar is a Russian digital agency that has been selected Agency of the Year two years in a row by CSSSDA and has won dozens of accolades for individual projects, from Webbys to Awwwards and CSSDA Website of the Day. The agency is known for their creative and innovative approach to projects and a great passion for design, as we can see from their prediction of <a href=\"https:\/\/8.redcollar.digital\/\" target=\"_blank\" rel=\"noopener\">eight design trends for 2020<\/a>. The website features a rolling slider that is prompted by scroll. The slider is essentially made of text only,<strong> in large Monument typography with a distinct brutalist vibe, pale grey on a black background<\/strong>, and the central item is marked by red typography. The red is mirrored in the cursor as well, which is a small red dot. When clicked, each item opens a showcase of the trend in question, which is not exactly a separate page &#8211; rather, the initial page transforms first into a screen with red and white typography repeating the name of the trend, and then its illustration. These are all interactive, too &#8211; for instance, the Vintage trend features a retro comic book illustration complete with animated POW!s with the familiar sound that are triggered by the mouse click. The Brutalism trend is appropriately flashy and loud, while the Graffiti section features a brush stroke effect when the mouse is moved around the screen. Red Collar did a great job with this showcase of trends, highlighting not only their expertise and authority in the field of web design, but also their technical adeptness.[\/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=\"qode-interactive-catalog\"><\/a>Qode Interactive Catalog<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#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\/02\/Qode-Interactive-Catalog.jpg\" class=\"attachment-full size-full\" alt=\"Qode Interactive Catalog\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Qode-Interactive-Catalog.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Qode-Interactive-Catalog-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Qode-Interactive-Catalog-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/02\/Qode-Interactive-Catalog-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]While we\u2019re on the subject, it would be a shame to not to mention our own <a href=\"https:\/\/qodeinteractive.com\/catalog\/\" target=\"_blank\" rel=\"noopener\">Qode Interactive Catalog<\/a>, an interactive showcase of selected Qode Interactive themes we did a couple years back, not just to pay homage to the themes and their designers, but also to <strong>give our animators and creative developers a chance to flaunt the skills they polished with great dedication<\/strong>. The showcase opens with an intro section with one of our slogans, <em>Who Says WordPress Can\u2019t Be Art?<\/em> in vertical lettering. After the intro, the visitors are invited to explore the catalog, which consists of a horizontal list with vertically aligned\u00a0text &#8211; the names of the featured themes. A selected graphic detail from each theme appears when the name of the theme is hovered upon, and a vertical marquee displays a short description of the theme underneath the name, in smaller print. There is a vertical menu that expands almost fullscreen when the hamburger icon is clicked, and <strong>this horizontal navigation makes an elegant contrast with the horizontal alignment of the list, while mirroring the vertical alignment of the text<\/strong>. This interplay between the axes creates subtle yet powerful dynamics, undistracted by unnecessary interface details. The palette is equally balanced &#8211; the black and white interface scheme is not only contrasted but in fact complemented by the colors of the imagery that appear on hover.[\/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]While all these examples of interactive links in web design bear their unique, idiosyncratic style traits, aligned with the overall aesthetic of the pages they\u2019re nested in, they all have one thing in common &#8211; they bring enormous value to the design. Whether it\u2019s a strictly UX purpose, a finely crafted piece of navigation design or a purely artistic embellishment, a page is always richer and more powerful when it involves motion and interactivity. It could even be argued that the modern web user is even accustomed to seeing these pieces of delight on websites, without which a design would seem outdated and dull.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]What we mostly see in the sections of this kind is text animated on hover, scroll or click, but sometimes the designers go an extra mile and craft intricate, technically demanding and innovative interactions that break the boundaries of textual sections and extend to the entire page, blending, merging or transforming it, engaging in an interplay with other design elements and basically initiating a sequence that provides an immersive and engaging user experience.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Sometimes, like in the case of 8 Design Trends by Red Collar, interactive links are the main protagonist of the interface. We Make Fab, on the other hand, offers a more minimalistic approach to this technique, while in the case of Henge the interactive links can be seen as emblematic of the straightforward but visually engaging type of navigational interaction. In any case, interactive links are a massive trend and, if done properly and with good measure, they can do wonders for websites across all niches and industries. If this is something you\u2019d be interested in mastering, make sure to check out our selection of the <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-online-courses-for-creative-developers\/\">best courses for creative developers<\/a>, a highly sought-after profession involving an array of skills required for creating web interactions.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Interactivity can bring enormous value to any design. Whether it\u2019s a strictly UX purpose, a finely crafted piece of navigation design or a purely artistic embellishment, a page is always richer when it involves motion and interactivity. This time around, we set out to explore the union of interactivity and typography: interactive links<\/p>\n","protected":false},"author":3,"featured_media":34555,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[30,207,40],"class_list":["post-34483","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-creative","tag-design","tag-inspiration"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/34483","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=34483"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/34483\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/34555"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=34483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=34483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=34483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}