Responses by Qode Interactive.

Background: The Qode Interactive Catalog highlights original design solutions established in some of the most creative themes that left the Qode Interactive workshops. The site sheds new light on current design tendencies and demonstrates the scope of possibilities when it comes to modern WordPress design. Namely, this collection is comprised of modern themes that are all fused with elements borrowed from or inspired by different forms of art, both classical and contemporary. Taking this into account, the target audience of this theme compilation are predominantly designers and artists, as well as creatives curious about the field of web design.

Challenges: The key aspect of the development process consisted of compiling the themes, as well as narrowing down the selected themes to only the ones that fit within this collection the best. When we first started the project, we took into consideration more than 20 themes for the catalog; this number was gradually trimmed down until we reached the themes that we found ideal for what we wanted to achieve. It was of the utmost importance to let each theme have enough breathing room and not to have any of them get lost, so we finally settled with showcasing the thirteen now on the site.

We take pride in the fact that every individual theme is an original creation of a different designer from our team. This is why we decided that the curation—as well as the entire development process—was to be followed by a case study for every one of the themes, each written by the theme’s respective designer.

Design core: The entire presentation is framed in a minimalistic, modern way, supported by the elements inspired by various art forms that tie all these themes together. In order to emphasize all this properly and reach the desired effect, there were a number of elements and stylistic choices that we had to incorporate.

One of them is the horizontal scrolling featured on the theme pages. These were utilized to create a gallery-like atmosphere as if the viewer is attending an art exhibition. This also fits the overall design direction we wanted to take with the catalog. These horizontally scrolling, individual theme pages essentially form the core of the catalog, complete with smooth animation effects and short presentational video segments, heightening each theme’s own character while simultaneously establishing the entirety of the collection as a compact, unified whole.

The catalog’s main navigation page is essentially a theme list that utilizes interactive links. These serve to illuminate a theme by displaying a snippet of the core theme design once users hover over its title. Likewise, this goes hand in hand with the animation effects distributed all across the catalog’s layouts.

We believe that the compilation’s greatest achievement is the fact that it represents a unified design vision held firmly together by an artistic approach to contemporary web design. Although each theme showcased in the catalog is charged with its distinct character, all have a common denominator in their use of elements inspired by different forms of art, as well as in the way these elements fuse together with web design.

Technology: Our approach was set on establishing an animation-driven, smooth feel that would accompany the project’s modern aesthetics. In that sense, at the core of the site’s navigational experience are AJAX transitions that utilize Barba.js. Taking into account the catalog’s graphics-heavy nature and its reliance on images and videos for most of the content, we had to introduce lazy loading. To truly stay faithful to this high-speed idea and to set the presentation in line with the rising trend of static websites, Qode Interactive Catalog’s development approach was right up to snuff: most of the code runs at build time, as opposed to runtime, rendering Nunjucks templates with their JSON data to static HTML pages and compiling ES6 modules into browser-ready vanilla JavaScript.

Anything else? Single layouts, or individual theme pages, present the most appealing part of the catalog. Yet implementing a horizontal scroll layout can pose a challenge in its own right, and it can be approached in more than a few different ways. We had the Smooth Scrollbar doing all the heavy lifting, as it provides various methods and callbacks useful for content interactions. Each section of the single layout has its own style of interactive behavior—mostly scroll based. Prefetching the content, triggering videos as they come in and out of the viewport, and utilizing requestAnimationFrame for most of the skew and translate effects are just a few concepts we used to reduce the paint costs and stay as close as possible to that 60-fps mark.