18 Websites Illustrating the Power of Interactive Links in Design
For the last couple of years, we’ve 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.
Certain interactions, as part of the functional animation, have essentially become a must. It’s 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 – these are the animations that not only help liven up a design, but serve a very specific practical purpose.
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’s 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’re 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:
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’re willing to turn a blind eye to some downsides. That’s precisely the case with Fils de Graphiste, 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 interesting details, nautical and mathematical motifs, hints to his Caribbean origin. The cursor is shaped like a triangle on the homepage and as a little palm tree on the About page, and that’s 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’s one of the things that were carried out to perfection. It is a precise and clean section of the Projects page, divided into slightly curved, numbered rows with striking black Lyyra Extended typography 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.
In one of the excellent examples of the recent trend of gradients used in web design, the French creative director Olivier Gillaizeau made himself a website that reflects his versatile and modern approach to work and his humorous and slightly (auto)ironic disposition, just like the site name, French But Nice, 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 an interplay between different instances of design and creative direction.
Bullion Productions is a creative studio and film production company working with a wide roster of directors across various genres and disciplines. The Directors 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 a wheel where each director occupies an equal place – 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 as navigational hints to the visitors, letting them know the text is linked and can be navigated further, but also serve as a smart, modern design element.
Charlie Montagut 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 an interesting Projects page – seemingly nothing but text in large Object Sans typography, except the central part is actually interactive. 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.
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 Transformations of the Year from Vintage, 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 – several “stacks” with four reels each, and each reel standing for a particular project. The reels offer basic information about the project while a huge “See More” 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. The reels rotate in opposite directions, which just adds to the dynamicity of the website.
Another excellent example of interactive links is the website of the Van Holtz Co, 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 a section with links in parallax perspective on the right, which lends the page a realistic 3D effect. 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 physical quality of the text, making it appear quite life-like. The choice of the typography and the way the section is positioned on a vibrant blue background also bear a bit of a ‘70’s film aesthetic. It is a striking, very well-executed homepage that testifies to the studio’s skill and talent.
Interactive Links WordPress Themes
View Collection
These days, it’s not that common to see a website that can only be viewed on desktop – 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 “proper” large screen. That is most likely the case with Keita Yamada and his showcase of Web Graphic Experiments, 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. The background is in perpetual, gentle motion, and features a subtle shifting animation when the mouse is moved around the screen. What’s particularly interesting about this website is the color switcher with seven options, which can be used to change the theme color. 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 – motion and interactivity are present throughout, drawing the visitor deeper into Kaita’s vision.
The choice of the typeface is vital in designing sections with interactive text. Some websites seem to prove this point particularly well, and Isabel Moranta’s portfolio 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 hero text in the Antiqua Roman typeface that gives the design an elegant character, the homepage proceeds with a series of numbered interactive links – the first of which is more prominent and reserved for the featured project. In this larger section, the cursor turns into a circle with the word “View” in it, inviting the visitor to explore the project. In the following rows of interactive links, the interaction is different – 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, what sets this one aside is the featured section, animated with different transformations, with a different cursor and in a larger, more prominent format.
Decoded Advertising is a full-funnel marketing, advertising and design company from New York. Their focus is on building brands that don’t compromise creativity for performance, and they don’t shy away from experimentation. The company’s spirit is youthful and innovative, sometimes flirting with pop culture, but with a strong emphasis on professionalism and quality. The website, particularly the Work page, is a colorful, interactive display of the work the company is most proud of. More than just interactive links, the showcase features 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. 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 “seriousness” 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 a brand that is confident enough to indulge in this sort of experimentation.
Nahel Moussi 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 – it is a lovely designed showcase with a strong personal aesthetics combined with appropriate project-related visuals. The projects, which include big game names like Google, Mailchimp and Aldo, are presented in a scrollable list that occupies the entire homepage. When each of the items comes into central position, the entire page changes color to reflect the project design, with selected design elements from the project floating gently around. 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 innovative cursor design – 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.
David Kirschberg 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 a subtle noise effect both on the background and on the images. 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 the animation is triggered upon scroll, when one project seems to dissipate like sand to give room to the next one. 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’s a more subtle interaction effect that is definitely suitable for a page that is supposed to have a primarily informative character.
Métrica 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 clean and modern, divided into two asymmetrical sections – 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 – 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 exudes professionalism and knowledge and complements the reputation of the studio quite well.
Henge 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 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. 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.
Omotesando 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 a fullscreen slider consisting of vertical columns with interactive links. 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 transforming letters and the visual content appearing and disappearing as we move the mouse across the page, the entire composition carries a fluttering, perhaps even a tad nervous vibe.
Active Theory is a digital studio creating immersive VR and AR experiences, apps, installations and websites. Their website carries a distinct dystopian, even a bit grim vibe, created meticulously using a toolset of specialized graphic and coding tools. The part we’re 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. Each category has a unique background, each one like a piece of a deserted Los Angeles urban landscape. Sometimes tinted with neon hues, but always dark and gloomy, these environments serve as a backdrop for large, almost electric typography, which turns from filled to hollow when hovered upon, 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 – 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.
We Make Fab is a Russian internet marketing agency providing a comprehensive set of services – 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 – black Arial typography on white background, some imagery, no mind-blowing animations or 3D experimentations. Still, all this minimalism is actually quite carefully crafted to achieve a character that is professional but not strict or dull. The projects are presented in a section called Journal 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’s a shiny example of good measure 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.
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 eight design trends for 2020. The website features a rolling slider that is prompted by scroll. The slider is essentially made of text only, in large Monument typography with a distinct brutalist vibe, pale grey on a black background, 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 – 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 – 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.
While we’re on the subject, it would be a shame to not to mention our own Qode Interactive Catalog, 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 give our animators and creative developers a chance to flaunt the skills they polished with great dedication. The showcase opens with an intro section with one of our slogans, Who Says WordPress Can’t Be Art? in vertical lettering. After the intro, the visitors are invited to explore the catalog, which consists of a horizontal list with vertically aligned text – 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 this horizontal navigation makes an elegant contrast with the horizontal alignment of the list, while mirroring the vertical alignment of the text. This interplay between the axes creates subtle yet powerful dynamics, undistracted by unnecessary interface details. The palette is equally balanced – the black and white interface scheme is not only contrasted but in fact complemented by the colors of the imagery that appear on hover.
Wrapping It Up
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’re nested in, they all have one thing in common – they bring enormous value to the design. Whether it’s 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.
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.
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’d be interested in mastering, make sure to check out our selection of the best courses for creative developers, a highly sought-after profession involving an array of skills required for creating web interactions.
