{"id":4063,"date":"2020-01-24T15:00:26","date_gmt":"2020-01-24T14:00:26","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=4063"},"modified":"2022-01-18T10:00:24","modified_gmt":"2022-01-18T09:00:24","slug":"qode-kaleidoscope-case-study","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/qode-kaleidoscope-case-study\/","title":{"rendered":"Qode Kaleidoscope: A Case Study"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_empty_space height=&#8221;3px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<\/p>\n<h2 class=\"qodef-h4\">About the Project<\/h2>\n<p>\t\t\t<\/div>\n<\/div><div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tQode Kaleidoscope is an innovative WordPress theme collection which showcases original Qode Interactive creations, all handpicked for their color-driven visual identities. The primary goal we set out to reach with this project was showcasing the sheer creative capacity that WordPress has as a contemporary medium. The entire presentation revolves around the concept of the real-life optical instrument, the kaleidoscope. Much like in the case of its physical world counterpart, the essence of the Qode Kaleidoscope lies in the visual dynamic created by the vibrant interplay of colors, patterns, symmetry and motion.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;30px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<\/p>\n<h2 class=\"qodef-h4\">Awards:<\/h2>\n<p>\t\t\t<\/div>\n<\/div><div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<\/p>\n<h3 class=\"qodef-h5\"><span style=\"color: #000000;\"><a style=\"color: #000000;\" href=\"https:\/\/thefwa.com\/cases\/qode-kaleidoscope\" target=\"_blank\" rel=\"noopener noreferrer\"><u>FWA of the Day \u2013 FWA<\/u><\/a><\/span><\/h3>\n<p>\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;1px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<\/p>\n<h3 class=\"qodef-h5\"><span style=\"color: #000000;\"><a style=\"color: #000000;\" href=\"https:\/\/www.cssdesignawards.com\/sites\/qode-kaleidoscope\/36467\/\" target=\"_blank\" rel=\"noopener noreferrer\"><u>Website of the Day \u2013 CSSDA<\/u><\/a><\/span><\/h3>\n<p>\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;1px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<\/p>\n<h3 class=\"qodef-h5\"><span style=\"color: #000000;\"><a style=\"color: #000000;\" href=\"https:\/\/www.cssdesignawards.com\/sites\/qode-kaleidoscope\/36467\/\" target=\"_blank\" rel=\"noopener noreferrer\"><u>UI\/UX\/INN Award \u2013 CSSDA<\/u><\/a><\/span><\/h3>\n<p>\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;1px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<\/p>\n<h3 class=\"qodef-h5\"><span style=\"color: #000000;\"><a style=\"color: #000000;\" href=\"https:\/\/www.awwwards.com\/sites\/qode-kaleidoscope\" target=\"_blank\" rel=\"noopener noreferrer\"><u>Honorable Mention \u2013 Awwwards<\/u><\/a><\/span><\/h3>\n<p>\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;1px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<\/p>\n<h3 class=\"qodef-h5\"><span style=\"color: #000000;\"><a style=\"color: #000000;\" href=\"https:\/\/www.awwwards.com\/sites\/qode-kaleidoscope\/mobile-excellence-report\" target=\"_blank\" rel=\"noopener noreferrer\"><u>Mobile Excellence \u2013 Awwwards<\/u><\/a><\/span><\/h3>\n<p>\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;55px&#8221;][\/vc_column][\/vc_row][vc_row content_text_aligment=&#8221;center&#8221;][vc_column]<div class=\"qodef-case-study-video-holder\" style=\"box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.08)\">\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Kaleidoscope.m4v\" \/>\n\t<\/video>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;49px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<\/p>\n<h2 class=\"qodef-h4\">The Approach<\/h2>\n<p>\t\t\t<\/div>\n<\/div><div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tThe key incentive for creating the Qode Kaleidoscope was our aspiration to highlight the significance of the role that color can play in contemporary design. For us here at Qode, color is one of the principal facets of design.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;37px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<span style=\"color: #010101;\"><span style=\"font-size: 28px; font-family: heebo; line-height: 40px;\">We often use color as a foundation, a developmental basis from which the entire aesthetic of a theme branches out<\/span>.<\/span>\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;36px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tIn addition to this, we always look for new ways to perform various forms of experimentation when it comes to the implementation of color as well as its overall impact on design.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tWe continually aspire to stay in the forefront when it comes to modern theme development and design, and coloration has always been one of our staple devices in that process. This is why we decided to put themes with pronounced color-related qualities under a specific type of spotlight.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;][\/vc_column][\/vc_row][vc_row content_text_aligment=&#8221;center&#8221;][vc_column]<div class=\"qodef-elements-holder   qodef-two-columns  qodef-responsive-mode-768 \" ><div class=\"qodef-eh-item   qodef-horizontal-alignment-right \"  data-item-class=\"qodef-eh-custom-6097\" data-1367-1600=\"0 12px 0 0\" data-1025-1366=\"0 12px 0 0\" data-769-1024=\"0 12px 0 0\" data-681-768=\"0 0 30px 0\" data-680=\"0 0 30px 0\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-6097\" style=\"padding: 0 25px 0 0\">\n\t\t\t<div class=\"qodef-case-study-video-holder\" style=\"box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.08)\">\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Qode-Kaleidoscope.m4v\" \/>\n\t<\/video>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><div class=\"qodef-eh-item   qodef-horizontal-alignment-left \"  data-item-class=\"qodef-eh-custom-3514\" data-1367-1600=\"0 0 0 12px\" data-1025-1366=\"0 0 0 12px\" data-769-1024=\"0 0 0 12px\" data-681-768=\"0 0\" data-680=\"0 0\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-3514\" style=\"padding: 0 0 0 25px\">\n\t\t\t<div class=\"qodef-case-study-video-holder\" style=\"box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.08)\">\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Modern-theme-development.m4v\" \/>\n\t<\/video>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;58px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<span style=\"color: #010101;\"><span style=\"font-size: 28px; font-family: heebo; line-height: 40px;\">Aside from concentrating on showcasing the importance of color as a compelling creative driving force behind our approach to design, we wanted to stress its qualities which bring forth the aspects of <em>beauty<\/em> in modern design<\/span>.<\/span>\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;36px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tSimultaneously, it turned out that this approach opened up the opportunity to present the true potential of contemporary WordPress development in a unique manner. The next step in the conceptualization phase was to pin down what type of environment we wanted to place these projects in. This is where the kaleidoscope comes in \u2013 an optical instrument whose sole purpose is creating a strong, distinctly beautiful visual impression based on the interaction created by color and motion alone. It proved to be the ideal frame for what we wanted to achieve with this presentation.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;][\/vc_column][\/vc_row][vc_row content_text_aligment=&#8221;center&#8221;][vc_column]<div class=\"qodef-elements-holder   qodef-two-columns  qodef-responsive-mode-768 \" ><div class=\"qodef-eh-item   qodef-horizontal-alignment-right \"  data-item-class=\"qodef-eh-custom-6828\" data-1367-1600=\"0 12px 0 0\" data-1025-1366=\"0 12px 0 0\" data-769-1024=\"0 12px 0 0\" data-681-768=\"0 0 30px 0\" data-680=\"0 0 30px 0\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-6828\" style=\"padding: 0 25px 0 0\">\n\t\t\t<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Modern-design.jpg\" class=\"attachment-full size-full\" alt=\"Modern design\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Modern-design.jpg 800w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Modern-design-300x300.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Modern-design-150x150.jpg 150w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Modern-design-768x768.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Modern-design-650x650.jpg 650w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Modern-design-620x620.jpg 620w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/>                        <\/div>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><div class=\"qodef-eh-item   qodef-horizontal-alignment-left \"  data-item-class=\"qodef-eh-custom-8439\" data-1367-1600=\"0 0 0 12px\" data-1025-1366=\"0 0 0 12px\" data-769-1024=\"0 0 0 12px\" data-681-768=\"0 0\" data-680=\"0 0\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-8439\" style=\"padding: 0 0 0 25px\">\n\t\t\t<div class=\"qodef-case-study-video-holder\" style=\"box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.08)\">\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Project.m4v\" \/>\n\t<\/video>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<\/p>\n<h2 class=\"qodef-h4\">The Design<\/h2>\n<p>\t\t\t<\/div>\n<\/div><div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tThe etymology of the word \u2018kaleidoscope\u2019 suggests that the term is best translated as \u201c<em>the observation of beautiful forms<\/em>\u201d. Mirroring the name origin of the eponymous instrument, the Qode Kaleidoscope is a creative WordPress theme compilation which, aside from its omnipresent focus on color, sets out to show the beautiful side of WordPress. This is reflected both in the general aesthetic character established in the presentation, as well as the carefully executed theme selection.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;37px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<span style=\"color: #010101;\"><span style=\"font-size: 28px; font-family: heebo; line-height: 40px;\">It was important for us to allow the viewer to get immersed in this color-rich world<\/span>.<\/span>\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;36px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tOn the other hand, one more challenge we faced was pinning down the amount of projects with just the right color selections that we wanted to include in the presentation. At first we experimented with a higher number of themes that seemed suitable for the Kaleidoscope. However, it soon became apparent that in order to achieve the intended impact, and to not overwhelm the observer, we had to narrow down our selection to a smaller number of projects. By creating a more compact compilation, and with this \u201c<em>less is more<\/em>\u201d attitude, we also made room to opt for themes that have their own distinct personalities that stand out, yet they fall right in line with the color-inspired concept we sought to establish.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;59px&#8221;][\/vc_column][\/vc_row][vc_row content_text_aligment=&#8221;center&#8221;][vc_column]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1640\" height=\"410\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Beautiful-forms.jpg\" class=\"attachment-full size-full\" alt=\"Beautiful forms\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Beautiful-forms.jpg 1640w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Beautiful-forms-300x75.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Beautiful-forms-1024x256.jpg 1024w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Beautiful-forms-768x192.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Beautiful-forms-1536x384.jpg 1536w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Beautiful-forms-1240x310.jpg 1240w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Beautiful-forms-970x243.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Beautiful-forms-620x155.jpg 620w\" sizes=\"auto, (max-width: 1640px) 100vw, 1640px\" \/>                        <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;58px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tThe compilation features six contemporary Qode Interactive themes hand-picked from the extensive Qode Interactive catalog for their vivid, color-rich visual identities. The design directions of these themes enhance the universal feel that we sought to develop with Kaleidoscope &#8211; it was crucial to include an array of intense color tones which would form the basis of the entire kaleidoscope-inspired presentation.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tEach of the six projects features bright color palettes, with prominent pastel shades and energetic overtones. The coloration is consistently vibrant across all the showcased themes &#8211; intense hues are often juxtaposed with warmer tones. The shades used are fairly diverse, ranging from Light Sky Blue and Orange Peel, to Tea Green, Sundown Pink, Amber Yellow, and Midnight Blue, just to name a few. \t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;59px&#8221;][\/vc_column][\/vc_row][vc_row content_text_aligment=&#8221;center&#8221;][vc_column]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1640\" height=\"410\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Color-rich-visual-identities.jpg\" class=\"attachment-full size-full\" alt=\"Color rich visual identities\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Color-rich-visual-identities.jpg 1640w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Color-rich-visual-identities-300x75.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Color-rich-visual-identities-1024x256.jpg 1024w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Color-rich-visual-identities-768x192.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Color-rich-visual-identities-1536x384.jpg 1536w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Color-rich-visual-identities-1240x310.jpg 1240w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Color-rich-visual-identities-970x243.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Color-rich-visual-identities-620x155.jpg 620w\" sizes=\"auto, (max-width: 1640px) 100vw, 1640px\" \/>                        <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;58px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<span style=\"color: #010101;\"><span style=\"font-size: 28px; font-family: heebo; line-height: 40px;\">Another standout point for us was the interconnectedness of the analogue and the digital \u2013 the Qode Kaleidoscope purposefully bears qualities of both the optical instrument and those of a contemporary online presentation<\/span>.<\/span>\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;36px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tWe wanted to display this unique blend using subtle hints. This is apparent right from the intro section, which is bustling with movement and much like other parts of the website features bits of space with grainy textures, as well as scattered glass shards that represent the optical core of an actual kaleidoscope. The menu opener featured on the main page of the Kaleidoscope is also comprised of these glass-like shapes which are so vital to any kaleidoscope instrument. The <em>eye<\/em> is another key motif we decided to integrate, as this symbol evokes the essence of the entire experience.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;][\/vc_column][\/vc_row][vc_row content_text_aligment=&#8221;center&#8221;][vc_column]<div class=\"qodef-case-study-video-holder\" style=\"box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.08)\">\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Glass-like-shapes.mp4\" \/>\n\t<\/video>\n<\/div>[\/vc_column][\/vc_row][vc_row content_text_aligment=&#8221;center&#8221;][vc_column]<div class=\"qodef-elements-holder   qodef-one-column  qodef-responsive-mode-768 \" ><div class=\"qodef-eh-item   qodef-horizontal-alignment-center \"  data-item-class=\"qodef-eh-custom-4746\" data-1367-1600=\"26px 0 0 0\" data-1025-1366=\"26px 0 0 0\" data-769-1024=\"26px 0 0 0\" data-681-768=\"30px 0 0 0\" data-680=\"30px 0 0 0\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-4746\" style=\"padding: 50px 0 0 0\">\n\t\t\t<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1640\" height=\"410\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Kaleidoscope-lens.jpg\" class=\"attachment-full size-full\" alt=\"Kaleidoscope lens\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Kaleidoscope-lens.jpg 1640w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Kaleidoscope-lens-300x75.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Kaleidoscope-lens-1024x256.jpg 1024w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Kaleidoscope-lens-768x192.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Kaleidoscope-lens-1536x384.jpg 1536w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Kaleidoscope-lens-1240x310.jpg 1240w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Kaleidoscope-lens-970x243.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Kaleidoscope-lens-620x155.jpg 620w\" sizes=\"auto, (max-width: 1640px) 100vw, 1640px\" \/>                        <\/div>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;56px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<span style=\"color: #010101;\"><span style=\"font-size: 28px; font-family: heebo; line-height: 40px;\">In a nutshell, the Qode Kaleidoscope is meant to be viewed in the same way one would look through a kaleidoscope lens in real life \u2013 beauty is what can exclusively be perceived and interpreted through the eyes of the observer, and this is what the entire presentation is directed towards<\/span>.<\/span>\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;36px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tThe paramount segment of the site is its main page which features an interactive navigational wheel styled as a kaleidoscope. For this page we wanted to create a firm impression of openness in order to allow the adequate breathing room for showcasing theme-specific colors in the background, as well as to keep the centrally positioned lens in focus. The typography has an unimposing, somewhat retro vibe to it, and it remains subdued within Kaleidoscope\u2019s color intense context. The background features large outline letters corresponding to a highlighted theme, which contributes to the air of clarity and vastness we wanted to infuse the backdrop of the Kaleidoscope with.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;][\/vc_column][\/vc_row][vc_row content_text_aligment=&#8221;center&#8221;][vc_column]<div class=\"qodef-elements-holder   qodef-two-columns  qodef-responsive-mode-768 \" ><div class=\"qodef-eh-item   qodef-horizontal-alignment-right \"  data-item-class=\"qodef-eh-custom-9227\" data-1367-1600=\"0 12px 0 0\" data-1025-1366=\"0 12px 0 0\" data-769-1024=\"0 12px 0 0\" data-681-768=\"0 0 30px 0\" data-680=\"0 0 30px 0\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-9227\" style=\"padding: 0 25px 0 0\">\n\t\t\t<div class=\"qodef-case-study-video-holder\" style=\"box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.08)\">\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Interactive-navigational.mp4\" \/>\n\t<\/video>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><div class=\"qodef-eh-item   qodef-horizontal-alignment-left \"  data-item-class=\"qodef-eh-custom-1755\" data-1367-1600=\"0 0 0 12px\" data-1025-1366=\"0 0 0 12px\" data-769-1024=\"0 0 0 12px\" data-681-768=\"0 0\" data-680=\"0 0\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-1755\" style=\"padding: 0 0 0 25px\">\n\t\t\t<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Qode-design.jpg\" class=\"attachment-full size-full\" alt=\"Qode design\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Qode-design.jpg 800w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Qode-design-300x300.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Qode-design-150x150.jpg 150w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Qode-design-768x768.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Qode-design-650x650.jpg 650w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Qode-design-620x620.jpg 620w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/>                        <\/div>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;58px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tThe theme selection is performed by spinning the ring-shaped interface, which visually emulates the use of an actual kaleidoscope. This interaction can be achieved by clicking &amp; dragging the kaleidoscope rim, using the mouse wheel scroll, or clicking on one of theme names displayed across the edge of the kaleidoscope.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tWhen a theme is selected, the circle rotates and splices the color-fused key elements, motifs and visual cues taken from the currently highlighted theme. We wanted to use these theme-specific aesthetic features to create distinct moving patterns which are displayed centrally in what is effectively the kaleidoscope lens.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;37px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<span style=\"color: #010101;\"><span style=\"font-size: 28px; font-family: heebo; line-height: 40px;\">The element-based patterns showcased in the lens are set in a state of constant flux, creating a visually appealing flow of symmetry<\/span>.<\/span>\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;36px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tOne more way to interact with the kaleidoscope lens is to simply hover the mouse pointer over it. This will also set the theme patterns in motion, relative to the direction and the speed the pointer is moved in.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;][\/vc_column][\/vc_row][vc_row content_text_aligment=&#8221;center&#8221;][vc_column]<div class=\"qodef-elements-holder   qodef-two-columns  qodef-responsive-mode-768 \" ><div class=\"qodef-eh-item   qodef-horizontal-alignment-right \"  data-item-class=\"qodef-eh-custom-3871\" data-1367-1600=\"0 12px 0 0\" data-1025-1366=\"0 12px 0 0\" data-769-1024=\"0 12px 0 0\" data-681-768=\"0 0 30px 0\" data-680=\"0 0 30px 0\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-3871\" style=\"padding: 0 25px 0 0\">\n\t\t\t<div class=\"qodef-case-study-video-holder\" style=\"box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.08)\">\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Visually-appealing.m4v\" \/>\n\t<\/video>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><div class=\"qodef-eh-item   qodef-horizontal-alignment-left \"  data-item-class=\"qodef-eh-custom-7553\" data-1367-1600=\"0 0 0 12px\" data-1025-1366=\"0 0 0 12px\" data-769-1024=\"0 0 0 12px\" data-681-768=\"0 0\" data-680=\"0 0\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-7553\" style=\"padding: 0 0 0 25px\">\n\t\t\t<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Theme-patterns-kaleidoscope.jpg\" class=\"attachment-full size-full\" alt=\"Theme patterns kaleidoscope\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Theme-patterns-kaleidoscope.jpg 800w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Theme-patterns-kaleidoscope-300x300.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Theme-patterns-kaleidoscope-150x150.jpg 150w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Theme-patterns-kaleidoscope-768x768.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Theme-patterns-kaleidoscope-650x650.jpg 650w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Theme-patterns-kaleidoscope-620x620.jpg 620w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/>                        <\/div>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;58px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tThe switch from one theme to another is also marked by smoothly animated transition effects and splashes of color which gradually take over the page background when a theme is highlighted. This is utilized to add another layer of dynamic and further complement the kinetic nature of the entire Kaleidoscope. \t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tIndividual theme presentations can be accessed by clicking the lens while the desired theme is displayed in it. When it comes to these single project pages, we wanted to keep the atmosphere restrained and minimalist compared to the main navigational page. However they still reflect the overall character of the Kaleidoscope, featuring animations and appear effects. \t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tThe backgrounds of these pages are used as a canvas of sorts for exhibiting their respective theme\u2019s most dominant colors, which sets the main overall mood we wanted to communicate here. These single project showcases also base their dynamic on video presentations of the theme layouts, which are shown in the central part of the page. Some of these presentational slides are placed in frames styled as different device types, which shows off the responsive qualities of a theme.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;][\/vc_column][\/vc_row][vc_row content_text_aligment=&#8221;center&#8221;][vc_column]<div class=\"qodef-case-study-video-holder\" style=\"box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.08)\">\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Presentational-slides.m4v\" \/>\n\t<\/video>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<\/p>\n<h2 class=\"qodef-h4\">The Technology<\/h2>\n<p>\t\t\t<\/div>\n<\/div><div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tThe centerpiece of the website, the kaleidoscope-styled main page, was developed using <a href=\"https:\/\/www.pixijs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">PixiJS<\/a> &#8211; a canvas\/WebGL library through which we\u2019ve manipulated the imagery into symmetrically formed parts that flow one into another. The graphics and the corresponding vector paths that are meant to intersect with them are pulled from individual project showcases and fetched on an endpoint provided by the <a href=\"https:\/\/developer.wordpress.org\/rest-api\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress REST API<\/a>. These are then stored in a data object ready to be used in the PIXI Renderer.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tWe have six individual projects showcased on our site, each of them represented as a stand-alone kaleidoscope slide. There are six slices per slide, each rotated by two times PI divided by the number of slices, and then divided into two mirrored sides that create the animated effect. Technically speaking &#8211; each slide is an independent PIXI Container that displays objects \u2013 or in other words, a first level container. Then, we added a new PIXI Container for every slice of the slide we have \u2013 these represent second level containers (6 per slide). Finally, we created another PIXI Container that is comprised of a PIXI Graphic (a vector path) and a PIXI TilingSprite (an image) that is masked by the graphic. This is done for each side inside a slice (2 per slice). Every slide is then cached and added to a PIXI stage ready to be animated in the PIXI Ticker.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;][\/vc_column][\/vc_row][vc_row content_text_aligment=&#8221;center&#8221;][vc_column]<div class=\"qodef-elements-holder   qodef-two-columns  qodef-responsive-mode-768 \" ><div class=\"qodef-eh-item   qodef-horizontal-alignment-right \"  data-item-class=\"qodef-eh-custom-8283\" data-1367-1600=\"0 12px 0 0\" data-1025-1366=\"0 12px 0 0\" data-769-1024=\"0 12px 0 0\" data-681-768=\"0 0 30px 0\" data-680=\"0 0 30px 0\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-8283\" style=\"padding: 0 25px 0 0\">\n\t\t\t<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Individual-project-showcases.jpg\" class=\"attachment-full size-full\" alt=\"Individual project showcases\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Individual-project-showcases.jpg 800w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Individual-project-showcases-300x300.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Individual-project-showcases-150x150.jpg 150w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Individual-project-showcases-768x768.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Individual-project-showcases-650x650.jpg 650w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Individual-project-showcases-620x620.jpg 620w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/>                        <\/div>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><div class=\"qodef-eh-item   qodef-horizontal-alignment-left \"  data-item-class=\"qodef-eh-custom-4195\" data-1367-1600=\"0 0 0 12px\" data-1025-1366=\"0 0 0 12px\" data-769-1024=\"0 0 0 12px\" data-681-768=\"0 0\" data-680=\"0 0\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-4195\" style=\"padding: 0 0 0 25px\">\n\t\t\t<div class=\"qodef-case-study-video-holder\" style=\"box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.08)\">\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Kaleidoscope-styled-main-page.m4v\" \/>\n\t<\/video>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;58px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tThe ticker is an integral part of the PIXI Application. It allows for code execution to happen on the very next available animation frame \u2013 for standard devices, this is ideally meant to happen at 60 fps. We used the ticker for creating seamless animations inside the kaleidoscope \u2013 transforming the sprites inside their masks, and creating the kaleidoscope-like visual effect. The animation is dependent on the user\u2019s mouse position \u2013 in addition to this, it\u2019s active only when the corresponding slide is visible and the browser tab is in focus. Otherwise, the ticker is stopped and the slide is cached as a bitmap, using only the necessary resources and saving on the GPU power. To smooth out the effect even further, a linear interpolation function is used on each frame. This function calculates the next position of a sprite relative to its previous position and the ticker timer.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tOther utility functions used inside the Kaleidoscope class concern resizing, slide caching, animation, as well as parsing the data and options to the PIXI Application. As the intensive WebGL animations are a feature that can be quite performance-heavy, and it relies directly on the GPU, we\u2019ve allowed the user to adjust the experience level on the first page load \u2013 users can make their choice based on the device capabilities they are viewing the site on. \t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;58px&#8221;][\/vc_column][\/vc_row][vc_row content_text_aligment=&#8221;center&#8221;][vc_column]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1640\" height=\"410\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Single-project-showcases.jpg\" class=\"attachment-full size-full\" alt=\"Single project showcases\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Single-project-showcases.jpg 1640w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Single-project-showcases-300x75.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Single-project-showcases-1024x256.jpg 1024w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Single-project-showcases-768x192.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Single-project-showcases-1536x384.jpg 1536w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Single-project-showcases-1240x310.jpg 1240w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Single-project-showcases-970x243.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Single-project-showcases-620x155.jpg 620w\" sizes=\"auto, (max-width: 1640px) 100vw, 1640px\" \/>                        <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<\/p>\n<h3 class=\"qodef-h5\">Code Concepts and Site Structure<\/h3>\n<p>\t\t\t<\/div>\n<\/div><div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tThe Qode Kaleidoscope is developed as a custom WordPress theme based on <a href=\"https:\/\/underscores.me\/\" target=\"_blank\" rel=\"noopener noreferrer\">Underscores (_s)<\/a> starter with modern JavaScript features. WordPress is partially used in a similar way as a \u2018headless\u2019 CMS would be \u2013 pulling the data off of the REST API when loading the graphics into the PIXI Application. On the other hand, we have a bare-bones setup with a custom post type structure and meta fields provided by <a href=\"https:\/\/www.advancedcustomfields.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">ACF<\/a> stored as JSON. This reduces the number of database calls on page load.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tOn the front-end side of things we have two main views \u2013 the homepage view (the kaleidoscope itself), and the project view (single pages). Both of these views are different pages altogether, as well as different WP templates for that matter. However they do share some of the dependencies \u2013 navigation, text details, and the coloring. In order to preserve the app-like feel throughout the site, we\u2019ve based the navigation around PJAX transitions through <a href=\"https:\/\/github.com\/barbajs\/barba\" target=\"_blank\" rel=\"noopener noreferrer\">BarbaJS<\/a>, thus sharing the data between pages. We structured the code as ES modules that are essentially JavaScript components which can communicate with each other, and are globally accessible from any view.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tCode entry point is the Main module which sets the appropriate data at first load, and handles callstacks based on the active view and the user\u2019s device. The principal JS logic is based around the Controller component that handles state changes \u2013the view that is active at the moment (a page or a single) delegates the visible UI.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;][\/vc_column][\/vc_row][vc_row content_text_aligment=&#8221;center&#8221;][vc_column]<div class=\"qodef-elements-holder   qodef-two-columns  qodef-responsive-mode-768 \" ><div class=\"qodef-eh-item   qodef-horizontal-alignment-left \"  data-item-class=\"qodef-eh-custom-2986\" data-1367-1600=\"0 12px 0 0\" data-1025-1366=\"0 12px 0 0\" data-769-1024=\"0 12px 0 0\" data-681-768=\"0 0 30px 0\" data-680=\"0 0 30px 0\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-2986\" style=\"padding: 0 25px 0 0\">\n\t\t\t<div class=\"qodef-case-study-video-holder\" style=\"box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.08)\">\n\t<video autoplay=\"autoplay\" loop=\"loop\" muted=\"muted\" playsinline=\"\" >\n\t\t<source src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Concepts-and-Site-Structure.m4v\" \/>\n\t<\/video>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><div class=\"qodef-eh-item   qodef-horizontal-alignment-left \"  data-item-class=\"qodef-eh-custom-9069\" data-1367-1600=\"0 0 0 12px\" data-1025-1366=\"0 0 0 12px\" data-769-1024=\"0 0 0 12px\" data-681-768=\"0 0\" data-680=\"0 0\">\n\t<div class=\"qodef-eh-item-inner\">\n\t\t<div class=\"qodef-eh-item-content qodef-eh-custom-9069\" style=\"padding: 0 0 0 25px\">\n\t\t\t<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"1080\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Media-elements.jpg\" class=\"attachment-full size-full\" alt=\"Media elements\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Media-elements.jpg 1080w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Media-elements-300x300.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Media-elements-1024x1024.jpg 1024w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Media-elements-150x150.jpg 150w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Media-elements-768x768.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Media-elements-650x650.jpg 650w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Media-elements-970x970.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/01\/Media-elements-620x620.jpg 620w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/>                        <\/div>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;58px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tIn our case, the homepage is a segmented slider with each slide consisting of the following parts: kaleidoscope with circular navigation links in the bottom right corner, text content in the bottom left corner, and their corresponding backgrounds. Each of these segments is pulled into the Controller component which then switches between them and applies the appropriate coloring on other static elements (the logo, tagline etc.). This happens upon either a user interaction \u2013a bullet click, a mouse drag, a mouse wheel scroll, or with the help of the toggleable auto-play. All of these events are dictated by the Controller class through its methods.\t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tSingle pages showcase individual projects which are, practically speaking, custom post types focused on media elements \u2013 videos and images with the corresponding text below. A single page is in its core a custom slider component that allows the user to scroll through its contents on either mouse wheel scroll or using the arrow navigation located at the bottom. Apart from navigating through single projects, the user can switch to an adjacent project at any time using the side navigation, which is followed by a smooth transition in color and content. Each of the slides is programmatically lazy loaded to keep the performance at the highest possible level. \t\t\t<\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tOther parts of the site include a scrollable \u2018About\u2019 page which was developed as a separate view, and an off canvas menu which contains all the available page, making for an intuitive, easy-to-use navigation at any given moment. \t\t\t<\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row row_content_width=&#8221;grid&#8221;][vc_column][vc_empty_space height=&#8221;34px&#8221;]<div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<\/p>\n<h4 class=\"qodef-h6\">Details<\/h4>\n<p>\t\t\t<\/div>\n<\/div><div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tTech-stack: \t\t\t<\/div>\n<\/div><div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\t<\/p>\n<ul>\n<li>Dev Dependencies: <a href=\"https:\/\/babeljs.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Babel<\/a>, <a href=\"https:\/\/gulpjs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gulp<\/a>, <a href=\"https:\/\/webpack.js.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Webpack<\/a><\/li>\n<li>Dependencies: <a href=\"https:\/\/github.com\/barbajs\/barba\" target=\"_blank\" rel=\"noopener noreferrer\">BarbaJS<\/a>, <a href=\"https:\/\/github.com\/idiotWu\/smooth-scrollbar\" target=\"_blank\" rel=\"noopener noreferrer\">SmoothScrollbar<\/a>, <a href=\"https:\/\/github.com\/verlok\/lazyload\" target=\"_blank\" rel=\"noopener noreferrer\">Vanilla LazyLoad<\/a><\/li>\n<li>Backend: <a href=\"https:\/\/wordpress.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress<\/a> \/w <a href=\"https:\/\/www.advancedcustomfields.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Advanced Custom Fiehttps:\/\/gulpjs.com\/lds<\/a><\/li>\n<li>Frontend and Animations: <a href=\"https:\/\/www.pixijs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">PixiJS<\/a>, Vanilla JavaScript, <a href=\"https:\/\/greensock.com\/gsap\/\" target=\"_blank\" rel=\"noopener noreferrer\">GSAP<\/a>, CSS3(SCSS)<\/li>\n<\/ul>\n<p>\t\t\t<\/div>\n<\/div><div class=\"qodef-section-text-holder \">\n\t<div class=\"qodef-st-inner\">\n\t\t\t\t\tWe serve the website contents through <a href=\"https:\/\/www.cloudflare.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Cloudflare<\/a> and have used <a href=\"https:\/\/wordpress.org\/plugins\/fast-velocity-minify\/\" target=\"_blank\" rel=\"noopener noreferrer\">FVM<\/a> caching plugin.\t\t\t<\/div>\n<\/div>[\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>The key incentive for creating the Qode Kaleidoscope was our aspiration to highlight the significance color can play in contemporary design. Find out how we achieved this through the vibrant interplay of hues, patterns, symmetry and motion<\/p>\n","protected":false},"author":940,"featured_media":4129,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38],"tags":[24,30,43],"class_list":["post-4063","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-qode-stories","tag-case-study","tag-creative","tag-showcase"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/4063","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\/940"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=4063"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/4063\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/4129"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=4063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=4063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=4063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}