{"id":14423,"date":"2020-10-16T15:00:10","date_gmt":"2020-10-16T13:00:10","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=14423"},"modified":"2026-01-05T09:11:38","modified_gmt":"2026-01-05T08:11:38","slug":"playable-interactive-websites","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/playable-interactive-websites\/","title":{"rendered":"The Top 21 Playable Interactive Websites"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Interactivity is always a good thing, especially in web design. Making your users actively participate in exploring your website will capture their attention from the get-go and encourage them to continue browsing your content.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To draw people in, interactive websites often feature games, images, videos, trivia, online chat, or quizzes. This kind of playable interactive content is especially fun for users. They get to explore entire sites by partaking in simple, interesting actions. Moving from one section to the next feels like playing a game, even if a website is meant to showcase a product or introduce a brand to the public. Such sites are imaginative, peppered with cool animation effects and <a href=\"https:\/\/qodeinteractive.com\/magazine\/websites-with-inspiring-micro-interactions\/\">micro-interactions<\/a>. And their interactivity is what makes them memorable and helps deepen the connection between a brand and a user.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we\u2019ll walk you through the world of playable interactive websites and explore some of the most striking examples from the web. They all carry an enchanting gaming vibe that, paired with numerous striking audio and visual elements, makes them attractive and unforgettable. The sites we\u2019ll introduce you to are:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column]<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=\"#makemepulse\">makemepulse<\/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=\"#gucci-off-the-grid\">Gucci Off The Grid<\/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=\"#salvatore-casalino\">Salvatore Casalino<\/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=\"#hong-kong-design-institute\">Hong Kong Design Institute<\/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=\"#i-spy\">i-Spy<\/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=\"#defeat-boco\">Defeat B.O.C.O.<\/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=\"#tarot-o-bot\">Tarot-o-Bot<\/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=\"#brandstudio\">BrandStudio<\/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=\"#violence-conjugale\">Violence Conjugale<\/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=\"#rick-and-morty\">Rick and Morty<\/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=\"#atelier-heschung\">Atelier Heschung<\/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=\"#weird-christmas\">Weird Christmas<\/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=\"#resns-little-helper\">Resn\u2019s Little Helper<\/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=\"#borraginol-town\">Borraginol Town<\/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=\"#gucci-mascara-hunt\">Gucci Mascara Hunt<\/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=\"#zenly\">Zenly<\/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=\"#bruno-simon\">Bruno Simon<\/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=\"#peter-oravec\">Peter Oravec<\/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=\"#zizo\">Zizo<\/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=\"#route-fifty\">Route Fifty<\/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=\"makemepulse\"><\/a>makemepulse<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/2019.makemepulse.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"383\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/makemepulse.jpg\" class=\"attachment-full size-full\" alt=\"makemepulse\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/makemepulse.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/makemepulse-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/makemepulse-620x339.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The interactive studio makemepulse is known for its outstanding and highly creative solutions in the digital industry. Their client list speaks volumes about the quality of their work and includes names like Ubisoft, Google, <a href=\"https:\/\/coindataflow.com\/en\/stock\/NFLX\" target=\"_blank\" rel=\"noopener\">Netflix<\/a>, and UNICEF, among others.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The project we were particularly impressed with is <a href=\"https:\/\/2019.makemepulse.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Nomadic Tribe<\/a>, developed as a <strong>tribute to one of the best comic book artists of all time, Jean Giraud a.k.a. Moebius<\/strong>. To bring Moebius&#8217;s masterful style to life, makemepulse used a cel shading technique that&#8217;s popular in many video games based on comic books and anime. Nomadic Tribe is a tale about a tribe that every year (on New Year\u2019s Eve to be precise) moves from one island to the next.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This playable interactive adventure has four chapters that bring you closer to understanding how these people live. The narrator\u2019s soothing voice tells you the story of the tribe, while meditative background music further immerses you into the poetic narrative. The attention to detail of the makemepulse studio is impressive. They even had the original soundtrack made specifically for this project by the amazing Press Play On Tape studio.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The scenes are majestic and beautifully illustrated. The use of numerous animation techniques is evident with each mouse scroll and drag<\/strong>. At one point, you help the flowers grow. Then, you watch the birds carry several members of the tribe on their wings. The birds begin to fly faster just from you holding your mouse.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Besides Moebius and the evident comic book influences, the project also carries the air of Studio Ghibli\u2019s and Hayao Miyazaki\u2019s animated movies.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The Nomadic Tribe project is an astonishing work of art and thanks to its interactivity you can experience the scenic utopian world where humans and nature are one.<\/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=\"gucci-off-the-grid\"><\/a>Gucci Off The Grid<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/offthegrid.gucci.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"383\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Gucci-Off-The-Grid.jpg\" class=\"attachment-full size-full\" alt=\"Gucci Off The Grid\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Gucci-Off-The-Grid.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Gucci-Off-The-Grid-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Gucci-Off-The-Grid-620x339.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/offthegrid.gucci.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gucci Off The Grid<\/a> is all about using recycled and sustainable materials to create high-end fashion designs. And the website made to promote this campaign wonderfully complements this great idea. The <a href=\"https:\/\/www.hubspot.com\/brand-kit-generator\/color-palette-generator\" target=\"_blank\" rel=\"noopener\">color palette<\/a> used on the site is very earthy-like, with lots of soft browns, as well as prominent beige and deep green hues. <strong>You are encouraged to partake in a quiz and answer a series of questions related to the sustainable collection. And each time you answer correctly, a tree-house appears on the tree and you learn more details about the Off The Grid project<\/strong>. You can hear the birds chirping, a dog barking, and the soft sound of leaves crackling in the background. This creates an atmosphere that makes you feel as if you\u2019re playing a quiz game somewhere in a park.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-theme-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"salvatore-casalino\"><\/a>Salvatore Casalino<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/www.salvatorecasalino.it\/interactive-resume\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"383\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Salvatore-Casalino.jpg\" class=\"attachment-full size-full\" alt=\"Salvatore Casalino\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Salvatore-Casalino.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Salvatore-Casalino-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Salvatore-Casalino-620x339.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.salvatorecasalino.it\/interactive-resume\/\" target=\"_blank\" rel=\"noopener noreferrer\">Salvatore Casalino<\/a> has found an excellent way to make his portfolio memorable. This front-end developer and UI\/UX designer has created a playable interactive presentation of his work experience that speaks volumes about his skillset. <strong>You\u2019re in control of Salvatore\u2019s 2D character. Using the scroll wheel of your mouse, you move it through a vividly-colored imaginary world filled with information about the author and his expertise<\/strong>. On this journey, you go from the Colosseum in Rome to the Statue of Liberty in NYC, travel across land, and dive deep underwater, all the while staying engrossed in learning about Salvatore\u2019s experiences. And at the end of the day, is there a better way to show people what you excel at than putting your knowledge into practice and creating a project that shows off your skills?[\/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=\"hong-kong-design-institute\"><\/a>Hong Kong Design Institute<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"http:\/\/www.hkdi.edu.hk\/dreamfactory\/index.html\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"383\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Hong-Kong-Design-Institute.jpg\" class=\"attachment-full size-full\" alt=\"Hong Kong Design Institute\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Hong-Kong-Design-Institute.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Hong-Kong-Design-Institute-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Hong-Kong-Design-Institute-620x339.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The second the <a href=\"http:\/\/www.hkdi.edu.hk\/dreamfactory\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">Hong Kong Design Institute<\/a> website loads, you find yourself in front of a 3D piece of land suspended in space. The starry skies surround you. A lightbulb rises from the land and off it goes into the unknown. There are trees, wind turbines, solar panels, a giant telescope, a lake, a car on a road, and several other details displayed on the land. Above it all, a giant white object hovers. It looks as if it\u2019s made up of several balls glued together. There are glass windows on it with the star-speckled skies reflected on them. <strong>Wherever you look, you notice red dots. When you click on them, they take you to a page where one of the Institute\u2019s projects is thoroughly presented<\/strong>. You could browse all of their works by clicking on the \u201cAll Projects\u201d button in the upper left corner of the screen, but where\u2019s the fun in that? Instead, why not discover all the projects one by one while reveling in the beautiful interactive world that feels like an educational game?[\/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=\"i-spy\"><\/a>i-Spy<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/ispy.heihei.resn.co\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"383\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/i-Spy.jpg\" class=\"attachment-full size-full\" alt=\"i-Spy\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/i-Spy.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/i-Spy-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/i-Spy-620x339.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/ispy.heihei.resn.co\/\" target=\"_blank\" rel=\"noopener noreferrer\">i-Spy<\/a> is a game created for Television New Zealand\u2019s Heihei children\u2019s gaming app. You can explore five environments, all located in New Zealand, including the Waipoua Forest, Canterbury on a field day, the bohemian Cuba Street in Wellington, the \u0100pure Moana marine reserve, and the city of Rotorua, known for its geothermal attractions. The artist T Wei created intricate, colorful illustrations of each of these locations.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The game comes in two modes &#8211; Challenge and Free Play. If you select the former, you\u2019ll have limited time to locate characters and various creatures on the super-detailed illustration of the location you selected. The Free Play mode has no time limitations whatsoever. <strong>All you need to play the game is your mouse<\/strong>. The characters and creatures you\u2019re supposed to spot in the crowd are highlighted in the upper left corner. The i-Spy game also contains educational content. No matter which of the five scenarios you choose, when you decide to leave the game, fun facts about New Zealand will show up on the screen. <strong>Paired with the cheerful music playing in the background, this interactive content is something children will surely enjoy<\/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=\"defeat-boco\"><\/a>Defeat B.O.C.O.<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/www.defeatboco.com\/worlds.html\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"383\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Defeat-B.O.C.O..jpg\" class=\"attachment-full size-full\" alt=\"Defeat B.O.C.O.\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Defeat-B.O.C.O..jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Defeat-B.O.C.O.-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Defeat-B.O.C.O.-620x339.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.defeatboco.com\/worlds.html\" target=\"_blank\" rel=\"noopener noreferrer\">Defeat B.O.C.O.<\/a> is an interactive project created by Fresh Consulting to showcase the challenges of UX design and the importance of understanding a problem well before coming up with a solution. <strong>The Beast of Conflicting Opinions (B.O.C.O.) is an allegory of the issues designers come across in their work and it takes on several forms throughout the site<\/strong>. The design process is split into four stages, including research, design, testing, and delivery. <strong>Each phase carries its own B.O.C.O. and the Fresh Consulting team shares advice on how to efficiently overcome any issue i.e. beat the game<\/strong>. The animations look very colorful and geometric, and the horizontal scroll navigation is easy to use. The cool background music makes the website more rich and the playful adventure of defeating B.O.C.O. all the more fun.[\/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=\"tarot-o-bot\"><\/a>Tarot-o-Bot<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/tarotobot.illo.tv\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"383\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Tarot-o-Bot.jpg\" class=\"attachment-full size-full\" alt=\"Tarot-o-Bot\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Tarot-o-Bot.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Tarot-o-Bot-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Tarot-o-Bot-620x339.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/tarotobot.illo.tv\/\" target=\"_blank\" rel=\"noopener noreferrer\">Tarot-o-Bot<\/a> is a project created to mark the 7th anniversary of the design studio Illo. This tarot generator is supposed to predict the future of the creative industry. The homepage is bursting with colors and various animated elements, such as an eye, a key, a wavy line, the lucky number 7 (which also symbolizes the studio\u2019s birthday), etc. When you press \u201cEnter\u201c (or click the \u201cEnter\u201c button on the screen), the gates of the tarot-o-bot open and you see three cards on the screen. Before clicking on them, you are reminded to think about your future first and then do the draw. <strong>As you click on each card, they flip over. Upon drawing all three cards, the prediction for the future shows up on the screen<\/strong>. You can share your result elsewhere or play the game again. The studio has created around 100 predictions and all the results I got were quite funny. <strong>This game is a genius way of celebrating Illo\u2019s anniversary because it simultaneously entertains the user and showcases the studio\u2019s creativity in a unique way<\/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=\"brandstudio\"><\/a>BrandStudio<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/brandstudio.ru\/en\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"383\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/BrandStudio.jpg\" class=\"attachment-full size-full\" alt=\"BrandStudio\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/BrandStudio.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/BrandStudio-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/BrandStudio-620x339.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/brandstudio.ru\/en\/\" target=\"_blank\" rel=\"noopener noreferrer\">BrandStudio<\/a> comes with a quirky and beautifully illustrated interactive website. You\u2019re immediately asked if you have a normal or powerful computer. If you select the latter, the animation effects may seem smoother, but what matters is that the content remains the same. The difference between the two modes isn\u2019t that striking, so you can still experience the creativity of this site even when you select \u2019\u2019normal\u2019\u2019.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you\u2019ve made the choice, you\u2019ll see three clocks for three cities \u2013 New York, London, Tokyo, and Moscow. You need to select one of the four to continue to the website. And then, you dive into the world of stunning, realistic illustrations that represent the members of the studio and their projects. There are also objects flying in the background, such as arms and a heart. The mouse cursor itself has the shape of a cut-off arm. When you hover with it over the members\u2019 sleeping heads, you\u2019ll stir them a bit and they\u2019ll start to snore. If you click on any of the heads, you\u2019ll learn more about each team member. The site comes with the drag type of navigation and peculiar music following you on your browsing adventure. <strong>There are two ways of getting to know BrandStudio \u2013 you can either select a specific section from their fullscreen menu (the easier way) or, like a person on an important mission, courageously roam through their playable, illustrated universe, explore all the featured elements, and discover what they represent (a somewhat overwhelming, but way more amusing way)<\/strong>. The creativity of this team is off the charts.[\/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=\"violence-conjugale\"><\/a>Violence Conjugale<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/itsnotviolent.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"383\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Violence-Conjugale.jpg\" class=\"attachment-full size-full\" alt=\"Violence Conjugale\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Violence-Conjugale.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Violence-Conjugale-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Violence-Conjugale-620x339.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/itsnotviolent.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Violence Conjugale<\/a> is an impressive interactive project made to educate people on some of the most common types of domestic violence. The creators draw attention to these problems through \u2019\u2019textversations\u2019\u2019 a.k.a. examples of messages exchanged between two romantically-involved individuals. You as a user assume the role of one of the parties involved and select one of the five textversations showcased on the homepage in the form of stickers (you can try them all out if you wish). <strong>Then, your virtual partner will text you. During the conversation, you\u2019ll be able to choose one of the three possible responses to their messages. Depending on your answers, the content of the partner\u2019s replies will vary<\/strong>. At the end of the textversation, the authors will explain why such partner behavior is regarded as violent. The team behind the whole project has found a great way to educate people on a serious matter such as partner violence through an immersive playable experience and possibly save those who could be victims without even realizing it.[\/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=\"rick-and-morty\"><\/a>Rick and Morty<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/www.rickandmorty.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"383\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Rick-and-Morty.jpg\" class=\"attachment-full size-full\" alt=\"Rick and Morty\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Rick-and-Morty.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Rick-and-Morty-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Rick-and-Morty-620x339.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <a href=\"https:\/\/www.rickandmorty.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Rick and Morty<\/a> website features episodes from the latest season of this popular animated TV show, a fan art gallery, shop, and links to the Rick and Morty games and books. <strong>Besides this main content, every section contains recognizable items from the animated series as well as some hidden gems. For instance, there\u2019s Rick\u2019s interdimensional portal gun. When used, it briefly transports you to other worlds<\/strong>. This interactive project is filled to the brim with cool and quirky illustrations and animation effects that capture your attention from the get-go. These game-like touches make it way more amusing for the user and are something that all Rick and Morty fans will surely appreciate.[\/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=\"atelier-heschung\"><\/a>Atelier Heschung<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/noel.heschung.com\/en\/chapitre\/les-debuts-de-l-aventure\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"383\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Atelier-Heschung.jpg\" class=\"attachment-full size-full\" alt=\"Atelier Heschung\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Atelier-Heschung.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Atelier-Heschung-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Atelier-Heschung-620x339.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/noel.heschung.com\/en\/chapitre\/les-debuts-de-l-aventure\" target=\"_blank\" rel=\"noopener noreferrer\">Atelier Heschung<\/a> shares its story with users in an interactive way. You can\u2019t discover anything about the brand without actively participating on their website. There\u2019s not much you need to do &#8211; just press the \u2019\u2019Space\u201c or \u2019\u2019Right Arrow\u201c keys when indicated so the character you\u2019re in control of can make progress on a three-section journey. It all starts with Heschung&#8217;s humble beginnings and the story of how they first got into the shoe business. Then, they progressed to making ski shoes for the French national ski team. The third part tells you where the brand currently stands. This website is minimalistic and clean, with simple illustrations used throughout. The only colors are black and white. <strong>The way the story slowly unfolds and the fact that its progress depends on the user\u2019s actions is clever, as it emphasizes the importance of interactivity and makes the whole site all the more engaging<\/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=\"weird-christmas\"><\/a>Weird Christmas<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"http:\/\/christmas.rogue.studio\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"383\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Weird-Christmas.jpg\" class=\"attachment-full size-full\" alt=\"Weird Christmas\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Weird-Christmas.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Weird-Christmas-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Weird-Christmas-620x339.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"http:\/\/christmas.rogue.studio\/\" target=\"_blank\" rel=\"noopener noreferrer\">Weird Christmas<\/a> by Rogue Studio is an unusual project that\u2019s all about sending weird and peculiar holiday cards to others. And even though it doesn\u2019t work exactly like a classic game, it\u2019s filled with game-like interactive elements that draw users in. While you explore the gallery either by scrolling or dragging your mouse through it, snow starts to fall in the background and the accompanying Christmas melodies reinvigorate your holiday spirit. The images are laid out on an infinite canvas and you can move across it in whichever direction you please. Once you find the picture you like, click on it and start typing the season\u2019s greetings. <strong>The somewhat bizarre illustrations on the cards aren\u2019t what you would normally send to your friends for holidays, but their outlandishness is what makes them memorable and eye-catching in the first place.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;latest-themes&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"resns-little-helper\"><\/a>Resn\u2019s Little Helper<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"http:\/\/littlehelper.resn.global\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"383\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Resns-Little-Helper.jpg\" class=\"attachment-full size-full\" alt=\"Resn\u2019s Little Helper\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Resns-Little-Helper.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Resns-Little-Helper-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Resns-Little-Helper-620x339.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"http:\/\/littlehelper.resn.global\/\" target=\"_blank\" rel=\"noopener noreferrer\">Resn\u2019s Little Helper<\/a> is not your typical Christmas website. An instrumental version of \u2019\u2019Last Christmas\u201c by Wham is playing softly in the background. You may wonder what\u2019s weird about that. The answer is &#8211; nothing, as that\u2019s probably the only ordinary thing on this site. There\u2019s a narrator that speaks to you in rhymes, inviting you to join an elf inside his cabin. To do that, you need to play the game by pressing and holding the mouse button. <strong>As the doors of the cabin swing open, you see the elf in his tiny green and white costume badly playing \u2019\u2019Last Christmas\u201c on his flute<\/strong>. There\u2019s a pan with sausages floating around, along with some other elf\u2019s belongings. They\u2019re all levitating in a pink vortex and the elf looks like it&#8217;s having the time of its life. Upon leaving the cabin, the narrator informs you that the elf is tripping and that he\u2019s high on some mushrooms. This means you\u2019ve pretty much hijacked its trip. <strong>To some, a website like this may seem a bit gimmicky, but in reality, this is a highly imaginative way of showcasing the studio\u2019s striking creative genius and their terrific design skills<\/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=\"borraginol-town\"><\/a>Borraginol Town<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/www.borraginol.com\/town\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"383\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Borraginol-Town.jpg\" class=\"attachment-full size-full\" alt=\"Borraginol Town\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Borraginol-Town.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Borraginol-Town-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Borraginol-Town-620x339.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text css=&#8221;&#8221;]<a href=\"https:\/\/www.borraginol.com\/town\/\" target=\"_blank\" rel=\"noopener noreferrer\">Borraginol Town<\/a> is a site that introduces you to the Japanese pharmaceutical company Borraginol. This is an incredibly detailed project, with lovely animations. <strong>The way that the company is presented to visitors is impressive &#8211; it\u2019s depicted as a city with numerous inhabitants roaming its streets, with lots of buildings and various elements that symbolize Borraginol\u2019s history and achievements<\/strong>. Pretty much every object is clickable, which is how you can discover everything you\u2019d like to know about the brand. You feel like you\u2019re playing a game in which you get to explore the city of Borraginol and see what its inhabitants have been up to. Information is not presented to you in an in-your-face way. You\u2019re welcome to discover everything on your own, by clicking your way through the site.[\/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=\"gucci-mascara-hunt\"><\/a>Gucci Mascara Hunt<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/guccimascarahunt.gucci.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"383\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Gucci-Mascara-Hunt.jpg\" class=\"attachment-full size-full\" alt=\"Gucci Mascara Hunt\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Gucci-Mascara-Hunt.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Gucci-Mascara-Hunt-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Gucci-Mascara-Hunt-620x339.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/guccimascarahunt.gucci.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gucci Mascara Hunt<\/a> is a <strong>game created to celebrate the launch of Gucci\u2019s mascara L&#8217;Obscur<\/strong>. It looks like bowling because you\u2019re in control of a bowling bowl that rolls down along what looks like a bowling alley. <strong>Your goal is to collect as many mascaras as possible in 60 seconds using the said ball while avoiding obstacles shaped like pillows, telephones, and dogs<\/strong>. All the elements are designed in 3D, using a subtle and feminine color palette. The accompanying music sounds optimistic, encouraging you to win. The mascara hunt is an ingenious way to promote a product and it proves once again the limitless creativity of the Gucci team.[\/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=\"zizo\"><\/a>Zizo<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/wearezizo.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"383\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Zenly.jpg\" class=\"attachment-full size-full\" alt=\"Zenly\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Zenly.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Zenly-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Zenly-620x339.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/wearezizo.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Zizo<\/a> uses the cel shading technique of modern games to the max. This Japanese digital company has created a tranquil, stunning interactive website that takes you on an adventure to introduce you to the company&#8217;s values, history, etc. The illustrations look charming and are complemented with serene music and the sounds of birds chirping. <strong>The website is based on scroll-triggered navigation, meaning all you have to do is use the mouse scroll and let Zizo take you on a charming adventure through the serene Japanese landscape with cherry blossom trees in full bloom<\/strong>. Along the way, you\u2019ll discover interesting details about Zizo, such as how they got their name, what they do, their values, and more.[\/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=\"bruno-simon\"><\/a>Bruno Simon<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/bruno-simon.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"383\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Bruno-Simon.jpg\" class=\"attachment-full size-full\" alt=\"Bruno Simon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Bruno-Simon.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Bruno-Simon-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Bruno-Simon-620x339.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]When creating a portfolio, we all try to make it look simple yet unique in order to attract the attention of our potential employers and clients. <a href=\"https:\/\/bruno-simon.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Bruno Simon<\/a> has found a remarkable way to go about that. His website<strong> resembles a game where you control the movement of the character and his car by using arrow keys<\/strong>. The playfield is quite large, with all the content laid out on it for you to explore. You can drive from one 3D element to the next to discover more details about this creative developer and his projects.[\/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=\"peter-oravec\"><\/a>Peter Oravec<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/peteroravec.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"383\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Peter-Oravec.jpg\" class=\"attachment-full size-full\" alt=\"Peter Oravec\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Peter-Oravec.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Peter-Oravec-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Peter-Oravec-620x339.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/peteroravec.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Peter Oravec<\/a> has created an <strong>8-bit-game-inspired website to share his portfolio with the world<\/strong>. You control his character in the game using the arrow keys. Peter has built an entire neighborhood for you to explore, with passers-by, ice cream trucks, houses, buildings, factories, and heaps more. As you move around the area, you\u2019ll stumble upon Peter\u2019s CV, the \u2018\u2019About\u201d section, technologies he\u2019s using in his work, etc. If at any point you get lost, you can open the map. Then, click on what you want to learn more about, and Peter\u2019s character will assume the form of a magical ray that will travel to the selected area in the blink of an eye.[\/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=\"zenly\"><\/a>Zenly<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/zen.ly\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"383\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Zizo.jpg\" class=\"attachment-full size-full\" alt=\"Zizo\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Zizo.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Zizo-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Zizo-620x339.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/zen.ly\/\" target=\"_blank\" rel=\"noopener noreferrer\">Zenly<\/a> is an app that tracks the location of the contacts from your friend list in realtime. Exploring their website feels like playing a 3D adventure game that highlights the benefits of using Zenly. <strong>You move from one section to the next by scrolling, while different scenarios where the app would come in handy play out on the screen<\/strong>. There is a colorful flat line along the entire bottom of the screen. On hover, it becomes bumpy, pointing out the pros of using Zenly. The colors are bright and striking, putting the usefulness of the app all the more into the spotlight.[\/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=\"route-fifty\"><\/a>Route Fifty<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/routefifty.caffeina.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"383\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Route-Fifty.jpg\" class=\"attachment-full size-full\" alt=\"Route Fifty\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Route-Fifty.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Route-Fifty-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/10\/Route-Fifty-620x339.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/routefifty.caffeina.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Route Fifty<\/a> is a <strong>game that celebrates the 50th anniversary of the first landing on the Moon<\/strong>. Using arrow keys, you\u2019re put in control of Apollo 11. Your goal is to keep the ship in orbit for as long as possible, dodging obstacles and bombs along the way. While on this quest, you can also see some fun facts about the Apollo landing as well as real time statistics of other users playing the game at the same time as you.[\/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\">Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]Playable interactive websites are a beacon of creativity and engagement more than any other type of site. They allow designers and developers to experiment as much as they like, while making sure users stay engaged, interested, and entertained.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]By partaking in both trivial and complex actions, people become active participants in memorable online adventures. The user-driven content makes them spend more time on interactive sites, so they get to experience brands in a more meaningful way. As a result, the connection between them becomes more profound with users often developing a deeper interest in the products such imaginative individuals and brands have to offer.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Interactive websites are a beacon of creativity and engagement more than any other type of site, especially if they also have a gaming aspect to them. We will introduce you to some of the most best examples that illustrate the power of user-driven content<\/p>\n","protected":false},"author":4,"featured_media":14498,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[30,40,43,36],"class_list":["post-14423","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-creative","tag-inspiration","tag-showcase","tag-ux"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/14423","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\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=14423"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/14423\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/14498"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=14423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=14423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=14423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}