Qode Stories – Qode Magazine https://qodeinteractive.com/magazine Learn to Build Beautiful Websites Thu, 01 Feb 2024 10:07:59 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.3 https://qodeinteractive.com/magazine/wp-content/uploads/2019/07/cropped-fav-icon-1-32x32.png Qode Stories – Qode Magazine https://qodeinteractive.com/magazine 32 32 Introducing an Exclusive New Line of Products – Qi for Gutenberg https://qodeinteractive.com/magazine/introducing-qi-for-gutenberg/ https://qodeinteractive.com/magazine/introducing-qi-for-gutenberg/#respond Wed, 21 Sep 2022 08:00:06 +0000 https://qodeinteractive.com/magazine/?p=40352

Ever since our beginnings, here at Qode Interactive we have always strived to accommodate all WordPress users regardless of their preferred builders, editors and other tools. We have created themes for WPBakery, Elementor and Gutenberg, allowing our users to pick what suits them best.

In line with this core disposition, after the successful launch of Qi Addons for Elementor, we are today proud to announce the release of a brand new, all-exclusive line of blocks for the other most popular page builder – Qi Blocks for Gutenberg. And we didn’t stop there – our offer now also includes Qi Templates, an extensive set of patterns, templates, demos and wireframes for Gutenberg. The two products make up an exclusive, comprehensive range – Qi for Gutenberg, a set that covers all site-building needs.

Our primary goal with this line of products is to provide all Gutenberg users with the same level of flexibility, design innovation and functionality that the Elementor users are enjoying, pushing the standards of this page builder in more advanced directions.

Qi Blocks for Gutenberg

Qi Blocks for Gutenberg

The largest yet collection of Gutenberg blocks is the result of our extensive work on identifying the needs of WordPress users in terms of functionalities, performance and style. The collection includes 48 free blocks with a never-before-seen number of options, plus 33 premium blocks featuring stunning elements that can’t be found anywhere else, with flexible pricing plans.

Thanks to the light code, the blocks allow for quick and smooth page building experience, creating websites that are lightweight and quick to load.

Installation, setup and customization couldn’t possibly be easier, which makes Qi Blocks for Gutenberg an excellent choice even for those just venturing into the world of WordPress.

Thanks to a more than generous set of options, each block can be customized to fit the page style to the tiniest detail, guaranteeing they make a cohesive and smooth unit with their environment on the page.

We invite you to check the official Qi Blocks for Gutenberg page for a complete overview of all the blocks and their capabilities. Alternatively, you can click on any link below to see a specific block in action.

Creative Blocks

WooCommerce Blocks

Showcase Blocks

Infographics Blocks

SEO Blocks

Form Style Blocks

Business Blocks

Typography Blocks

Content Blocks

Qi Blocks for Gutenberg can be mixed and matched to build any website imaginable, from simple blogs to complex portfolios, corporate websites and online shops. To demonstrate their potential, but also to provide Gutenberg users with absolute ease of use in building superior, elegant and highly functional websites, we have created Qi Templates, a set of pre-made website elements created with and powered by Qi Blocks.

Qi Templates

Qi Templates

We set out to develop Qi Templates with one simple goal in mind – to help Gutenberg users create stunning, professional websites with ease.

As the site-building experience underwent a shift with the onset of FSE – Full Site Editing, we wanted to create a set of simple, pre-made solutions that can be mixed and matched to create parts of pages, whole pages and entire websites – whatever our users might need at a particular moment.

As always, we paid particular attention to design, creating a collection that is aesthetically diverse but coherent in terms of following the highest design standards, as you can see for yourself if you head over to the official Qi Templates website.

The Qi Templates collection currently features 232 patterns, 365 templates, 32 wireframes and 72 demos.

  • You can use patterns to add specific sections to your website, building upon the theme you’re using. You can use a single pattern, a couple of them, or, if you want, you can build the entire website with them. The key is flexibility, and so is design perfection, something that’s always been very important to us at Qode Interactive.
  • Templates feature a wider set of sections and allow for extremely fast and easy site-building experience. Thanks to their unique, exclusive design, our templates help users create head-turning websites for just about any niche imaginable.
  • To accommodate users with a penchant for design, who want to style their website according to their unique aesthetic preferences, the collection also packs a set of practical style-free wireframes.
  • Finally, for those who just want a ready-made, out-of-the-box solution for their website, we have a set of 70+ exquisitely designed, feature-rich demos for a wide array of niches.

In order to provide complete freedom of choice and flexibility to our customers, Qi Blocks for Gutenberg and Qi Templates come in two options: a single site license, and a multisite one, for building unlimited websites. You can explore the pricing options here.

Note that if you purchase Qi Templates, you also get Qi Blocks for Gutenberg, as the templates are powered by our exclusive blocks and need them to work properly.

Both products come with extensive support, documentation and dedicated professional help.

We are also working on a series of YouTube tutorials and articles helping users get acquainted with Qi products for Gutenberg. Make sure to sign up for our channel and follow our Qode Magazine to learn more.

Our workshop is always busy and you can count on more exciting projects coming your way soon, so make sure to sign up to our newsletter for all the updates.

]]> https://qodeinteractive.com/magazine/introducing-qi-for-gutenberg/feed/ 0 Introducing Qi Addons for Elementor Premium and Qi Theme Premium https://qodeinteractive.com/magazine/introducing-qi-theme-qi-addons-premium/ https://qodeinteractive.com/magazine/introducing-qi-theme-qi-addons-premium/#respond Wed, 20 Apr 2022 06:00:55 +0000 https://qodeinteractive.com/magazine/?p=36257

We are excited to announce the release of premium versions of our two products – Qi Addons for Elementor and Qi Theme, featuring expanded options and functionalities, 40+ new widgets and 50+ premium demos.

While our free line offers all WordPress users a chance to create beautiful and functional websites for free, the line of premium products is designed with a bigger, professional output in mind, helping build superior websites quickly and effortlessly while simultaneously guaranteeing top quality in line with the latest web design practices.

You can now choose between working on unlimited websites or just one. Our annual plans are tailored to provide maximum flexibility while working with a comprehensive set of 150 demos and 100+ widgets, starting at $49.

Choose Between Qi Addons and Qi Theme & Addons

Choose Between Qi Addons and Qi Theme & Addons

To accommodate all our clients’ needs, we are offering the products in two premium packages, each packed with all-new, exclusive features.

Qi Addons Premium is an exclusive version of our free Qi Addons for Elementor plugin, now with 40+ new widgets designed to enhance business, eCommerce, creative, SEO and other aspects of a website from any possible niche.

Qi Theme & Addons is a comprehensive solution that, in addition to 50+ exclusive, superbly designed demos, also includes all of the premium widgets from the Qi Addons package. It is a package that covers all aspects of website-making, speeds up the process and guarantees a unique, professional and superior result.

Both products are available in two modes – single-site and multisite license. With the multisite license, you get to create unlimited websites using our products for the duration of the license.

Both products include even more convenience, functionality and ease of use, and come with some exclusive features in terms of available widgets and options. With it, our goal is to expand on the industry standard of features and options and offer our clients a premium solution for their most important projects.

Qi Addons – What’s New

Qi Addons – What’s New

The Qi Addons for Elementor plugin comes with an exclusive set of widgets that we have created with maximum attention to detail. With them, our intention is to fill the industry gap, by providing options that were previously unavailable on the market. The plugin is designed to work with all themes built using Elementor.

The 40+ all-new, exclusive widgets are designed to enhance the site-building experience, enrich the pages and provide superior functionalities for a wide range of niches, from creative through eCommerce to business.

Creative Addons

We have expanded our range of addons designed to make showcasing projects not just easier and faster, but aesthetically more accomplished.

For instance, in order to allow for dynamic, engaging presentation of works, we have created a range of sliders, from hover-aware to animated and circled, with several kinds of divided sliders. Intro glitch effects, swipe- and scroll-based galleries, brand-new reels and carousels are devised to provide maximum flexibility in terms of innovative options.

Business Addons

Functionality and efficiency are imperative when it comes to business websites, so we made sure our premium version includes top solutions for various business aspects, such as comparative tables, star rating element, Google Maps and pricing tables.

eCommerce Addons

While our free Qi Addons already contain a comprehensive set of eCommerce solutions, we made sure to expand the functionalities by adding product comparison and order tracking form widgets, two solutions that help improve eCommerce UX and streamline the shopping experience.

Showcase Addons

When devising our addons, we took particular care to provide our clients with a comprehensive set of solutions for highlighting certain website sections in an innovative and efficient manner. Our range of showcase elements has now been expanded with image hotspots, ideal for online shops, a striking image marquee, content menu and an attractive vertical timeline.

Typography Addons

Typography is a major constituent of any website’s identity and that’s why here at Qode we pay particular attention to that aspect of design. The premium Qi Addons now include even more options for styling the text, including text gradient and a very attractive and versatile premium button with options for animation and SVG-based illustrations.

Form Style Addons

Reaching out to visitors in a striking, elegant and efficient manner is paramount to any business, which is why we enhanced the options for styling the website forms by adding beautiful Mailchimp, Typeforms and Gravity forms elements, thus covering all major contact form providers.

  • Gravity Forms

SEO Addons

Our range of premium addons wouldn’t be complete without advanced SEO functionalities that come out of the box and help users rank and perform better with search engines. New addons now include Yelp and Google business reviews, wonderfully designed social share buttons and social links.

Qi Theme – What’s New

Qi Theme – What’s New

As for the Qi Theme, we have designed a range of exclusive demos that feature not only unique options and capabilities, but also the most innovative design solutions. As always, our focus is on interactivity and motion, superb visual content and pristine aesthetics meant to create a lasting effect of professionalism and expertise.

In the premium version, the Qi Theme also features some additional functionalities and advanced options. For instance, our users can now enjoy even more styling options for the Blog Single, as well as for various footer and header types, assuring the perfect fit with the brand aesthetics.

Navigation options have also been enhanced in terms of styling, and there is, of course, a set of whole new options reserved for our premium users. They can now add a content bottom section to their pages, add parallax background on content rows, and choose between a range of all-new header types, including boxed, divided and vertical expanding headers, or improve the website performance thanks to the Ajax pagination for lists. And that is, of course, just a small fraction of premium options we’ve prepared.

Package Features

Package Features

In addition to advanced elements, demos and options, both our premium packages include a set of exclusive features meant to fill all gaps in the current market offer.

Qi Addons comes with:
  • Unlimited websites
  • 100+ widgets
  • Premium support for 1 year
  • Regular updates for 1 year
  • On demand widget loading
  • Unlimited local server
  • Comprehensive Knowledge Base
  • Step-by-step video tutorials
  • 14 Days Money Back Warranty
  • Renewal discount
Qi Theme & Qi Addons come with:
  • Qi Addons plugin
  • Qode Essentials plugin
  • Unlimited websites
  • 150 demo websites
  • Portfolio module
  • Blog layouts
  • Woocommerce layouts
  • Extensive global options
  • Advanced headers
  • Limitless footers
  • Premium theme support for 1 year
  • Regular theme updates for 1 year
  • Unlimited local server
  • Qi Theme Knowledge Base
  • Qi Theme Video tutorials
  • 14 Days Money Back Warranty
  • Renewal discount

In addition to premium support, we have a set of YouTube tutorials and Qode Magazine articles to help you get acquainted with Qi Addons for Elementor and the Qi Theme, with new topics being covered on a regular basis. Check them out to see just how simple it is to adapt any of the plugin’s custom widgets to your specific needs.

For the latest news and updates from the Qode Interactive workshop, make sure to sign up for our newsletter.

]]> https://qodeinteractive.com/magazine/introducing-qi-theme-qi-addons-premium/feed/ 0 Tetsuo Portfolio and Creative Industry Theme: A Case Study https://qodeinteractive.com/magazine/tetsuo-case-study/ https://qodeinteractive.com/magazine/tetsuo-case-study/#respond Fri, 06 Aug 2021 13:00:01 +0000 https://qodeinteractive.com/magazine/?p=27921

About the Project

Tetsuo is a bold contemporary portfolio theme with a striking visual identity. Its overtly dark, futuristic aesthetics rely heavily on imagery inspired by various artforms and works of fiction with pronounced dystopian vibes.

Awards:

Best UI Design – CSSDA

Best UX Design – CSSDA

Best Innovation – CSSDA

Special Kudos – CSSDA

The Approach

With each new theme, we challenge ourselves to create authentic solutions that are unlike anything we’ve done in the past. We encourage our creatives to express their artistry and let their specific sensibilities and styles shine through each project. This approach lets us offer authentic themes to our audience and satisfy even the most unique tastes.
With Tetsuo, a portfolio and creative industry theme, our goal was to devise a somewhat alternative design solution and create a portfolio theme with an attitude. We wanted it to be futuristic looking yet permeated with some well-recognizable components. With that in mind, the choice of a color palette came naturally – we opted for neon and black colors. We wanted to counteract the edginess of the former with the inscrutability of the latter. We decided that the best way to create such an eclectic, wild aesthetic that simultaneously felt familiar was by imbuing the theme with cyberpunk and manga motifs.
Tetsuo Case Study
These two styles are known for their striking, boundlessly imaginative art and recognizable characteristics. We wanted to dive deep into their roots, experiment with their unique elements, and combine them into a distinct canvas for showcasing portfolio projects.

The Design

The poster that started it all and inspired the look of the entire theme depicts the explosion seen at the beginning of the iconic cyberpunk manga “Akira”. We wanted Tetsuo to mirror the full force of that poster and carry the same sort of gravitas, so we initially decided to use a predominantly black and red color palette. However, we quickly realized that that combination might be a touch too intense for viewers’ eyes, especially when paired with the bold, white typography. To avoid overwhelming the users with strong visual stimuli, we decided to tone the colors down a bit and opted for orange instead of red. For instance, menu items as well as some headings, logos, and titles become orange on hover, contrasting the darkness of the black background. We also added straight orange lines to layouts, be it to separate the footer from the rest of the content on a page (as seen on the theme’s Homepage) or to mark the transition from one slide to the next (e.g., the Fullscreen Slider layout). The touch of orange on a dark interface gave the theme an incandescent futuristic glow, typical of cyberpunk works.
Tetsuo Case Study
As a way to give users a wider stylistic range, we designed Tetsuo in two modes – light and dark. In case someone prefers a softer interface with a white background, they can use the color switcher to activate the light mode, which will invert the colors of the backdrop and typography. All other elements on the theme will remain unaffected by the switch. The white background does take a bit of the ambiguity away from the theme, but it doesn’t lessen its strong sci-fi character. While the dark backdrop amplifies the gritty feel of a dystopian landscape, the light background mirrors the look of clean, shimmering surfaces of futuristic technologies.
We wanted Tetsuo to reflect all the major ideas of the cyberpunk genre. Aside from “Akira”, we drew inspiration from other magnificent cyberpunk works as well, including the movies “Blade Runner”, “2001: A Space Odyssey”, “Jin-Roh”, and “Matrix”, the games “System Shock”, “Deus Ex”, and “Ruiner”, the manga “Ghost in the Shell” and “Gantz,” as well as the remarkable artist Ash Thorp. All our inspirations were set in vivid, intricate sci-fi universes and we knew we wanted to achieve a similar aesthetic in our theme. However, we had to keep in mind the fact that a too complex interface could have a negative impact on the user experience and drive visitors away. So instead of creating a theme that’s entirely engulfed in colorful, detailed, sci-fi graphics, we decided to go for a more simplified interface.
We imbued the layouts with the works of some phenomenal artists that create authentic, striking, and futuristic artworks, such as Vladislav Ivanov, Seryozha Parshakov, Tano Bonfanti, Artem Lutay, R▲, Kristoffer Brady, and Vladimír Vilimovský. They were all kind enough to allow us to feature their art on Tetsuo, which helped root the theme in such a bold cyberpunk aesthetic. For instance, on the Fullscreen Slider page, we used an Artem Lutay piece depicting a dark, mystic cybercity with lots of neon signs. We wanted our viewers to feel the bustle of the futuristic metropolis but also the dystopian atmosphere of a Philip K. Dick novel. To create a fully immersive experience, we displayed the imagery across the entire screen.
Regarding the typography, we immediately knew we wanted to go for sans serif fonts. We looked for geometric, condensed typefaces similar to those typically used in cyberpunk video games. When it came to designing the theme’s logo, we tried out lots of terrific typefaces until we eventually settled on the simple yet bold Google font called Anton. The letters look thick, raw, and robust. We used them in all-caps, which further enhanced their futuristic appeal. For menu items and headlines, we chose the Rajdhani typeface. The straight letter forms have slightly rounded corners making the letters easier on the user’s eye. Because of that, this font was the perfect choice for titles, especially in sections with longer headings. And lastly, for body text, we used the Roboto Condensed typeface since we loved its rigid and futuristic style.
Tetsuo Case Study
The text throughout Tetsuo is colored plain white i.e. black depending on the skin you choose to view the theme in. No matter which mode you use, great readability is guaranteed. In general, we didn’t want to go too wild in terms of typography colors – we saved that for the visuals. It was paramount we kept vibrant graphics, to express the theme’s cyberpunk character in all its neon glory.
Tetsuo Case Study
To further immerse viewers into the exceptional world of Tetsuo, we added the possibility of playing background music while exploring the layouts. We selected dark synthwave melodies in the style of Carpenter Brut to further amplify Tetsuo’s sci-fi character and make our users feel like the protagonists of their own cyberpunk narrative.

The Animations

The animations in Tetsuo were carefully selected to enhance the theme’s sci-fi atmosphere. The most prominent effect of them all is the digital glitch effect, visible in the theme’s logo at the top of every page. The distorted imagery and typography underline the frailty of technology and society, and are widely used in rebellious and political art, making the glitch effect the ideal choice for Tetsuo.
Another striking feature we added to the theme is the exciting hover effect that splits letters in half. We applied it to menu items as well as project titles. A similar typographic solution can be seen on the Blade Runner graphics, and we deliberately chose this effect to pay homage to the iconic movie.
Elsewhere on the site, we didn’t go overboard with the effects. The visuals are vibrant and striking enough on their own so we decided to let their stunning appearance do all the talking. We were more interested in allowing users to share their portfolios in imaginative and striking ways, which is why we added the Fullscreen Slider, Project Reel, and Scroll Showcase templates with the infinite loop effect. In some cases, we applied a subtle zoom-in hover effect to project previews, as seen on the Pinterest Portfolio page. On the Animated Showcase page, the parallax effect makes project previews appear to be moving for a few moments even after viewers stop scrolling. The subtle motion amplifies the eerie and suspenseful atmosphere of a dystopian landscape and makes project presentations all the more immersive.

Conclusion

Tetsuo is a cutting-edge, riveting portfolio theme that converges the light and the dark, the familiar with the unknown, the neutral with the edgy, and the peaceful with the untamed. Its enrapturing appearance takes users on an adrenalin-fueled journey through engrossing futuristic terrains, evoking the spirit of a true dystopian work of art.
]]> https://qodeinteractive.com/magazine/tetsuo-case-study/feed/ 0 Introducing the Qi Theme – A Free WordPress Theme by Qode https://qodeinteractive.com/magazine/introducing-qi-free-wordpress-theme-by-qode/ https://qodeinteractive.com/magazine/introducing-qi-free-wordpress-theme-by-qode/#respond Thu, 01 Jul 2021 12:56:07 +0000 https://qodeinteractive.com/magazine/?p=26447

We’re excited to announce the release of the Qi Theme – the first free WordPress theme by Qode Interactive.

This release marks the second phase of our new line of free products. Our goal with these products is to offer the entire WordPress community a set of tools to help everyone build better, more beautiful websites. And the Qi Theme is paramount to achieving that goal.

With 100 fully free demos, tons of customization options, blog and shop layouts, a custom portfolio module, and so much more, the Qi Theme is truly geared to set a new standard among free themes. But we wanted to go a step further and ensure you have absolutely everything you need to create a fully functional and professionally designed website. So, we’ve also included a media license for all the premium stock photos in the theme’s demos, allowing you to use these images on any site created with the Qi Theme with no additional cost.

The Qi Theme is available for download now, free of charge.

100 Professionally Designed Demos

100 Professionally Designed Demos

The Qi Theme comes equipped with a huge collection of 100 beautiful demos, all designed and developed by our award-winning team. We carefully considered the types of demos to include, aiming to cover the widest assortment of industries and niches possible. You’ll find beautiful startup sites, designer and artist portfolios, health and beauty presentations, restaurant websites, product showcases, eCommerce platforms, and so much more among the Qi Theme’s demos. Once you find a demo that fits your needs, you can import it quickly and easily thanks to our one-click import module.

Free Stock Images Included

Free Stock Images Included

We wanted to ensure the Qi Theme comes with everything you need to create a professional website. Which is why we’ve also acquired a special Shutterstock media license for all the premium stock images in the theme. This means that you can use all the images from the Qi Theme’s demos on your own website, completely free. In fact, you can simply import your favorite demo, change the dummy texts to fit your needs, and have a fully functional, professionally designed website up and running in a matter of hours.

Please note that these stock images may only be featured on a website created with the Qi Theme, and cannot be used for any other purposes.

Powerful Customization Options

Powerful Customization Options

The Qi Theme lets you easily customize every aspect of your website. Multiple header types, a variety of predefined layouts, and tons of style and typography options are just some of the basics the Qi Theme comes with. Not to mention its advanced portfolio module, eCommerce integration, SEO optimization and even the possibility to automatically generate structured data. Everything in the Qi Theme is made according to the best coding standards and developed with top performance in mind.

Powered by Qi Addons For Elementor

Powered by Qi Addons For Elementor

All the demos in the Qi Theme are built using the widgets from our free Qi Addons for Elementor plugin. With 60 advanced widgets, Qi Addons for Elementor provides a comprehensive set of premium-grade tools specifically designed to help the entire WordPress community build better, more beautiful websites. This made it the perfect choice for the Qi Theme. The synergy between these two tools ensures a simple and enjoyable website building experience.

Free Video Tutorials and Professional Support

Free Video Tutorials and Professional Support

While the Qi Theme comes with comprehensive documentation, we’ve also prepared a set of step-by-step video tutorials that demonstrate just how easy it is to create beautiful websites with the widgets from the Qi Addons for Elementor plugin. Since everything in the Qi Theme is made with the Qi Addons widgets, these tutorials are an indispensable resource for working with the Qi Theme as well. And if you ever need any advanced assistance or have any questions about the Qi Theme, just submit a ticket in our help center and our professional support agents will be happy to help you out.

We’re already working on the third phase of our free products release, and we’ll have some exciting announcements soon. So make sure you sign up for our newsletter to stay in the loop and be the first to get all our latest news and updates.

]]> https://qodeinteractive.com/magazine/introducing-qi-free-wordpress-theme-by-qode/feed/ 0 Zermatt Multi-concept Agency Theme: A Case Study https://qodeinteractive.com/magazine/zermatt-case-study/ https://qodeinteractive.com/magazine/zermatt-case-study/#respond Fri, 14 May 2021 13:00:41 +0000 https://qodeinteractive.com/magazine/?p=24066

About the Project

Zermatt is a multi-concept agency theme inspired by the rawness of brutalist designs and the simplicity typical of the Swiss Style. Its distinct visual identity and strong character developed from melding the core principles of the two styles with contemporary design tendencies.

Awards:

Best UI Design – CSSDA

Best UX Design – CSSDA

Best Innovation – CSSDA

Special Kudos – CSSDA (Final Judge’s Score 8.08)

The Approach

We’ve always strived to transcend common web design practices and set new trends. Each new project presents a chance for our creatives to challenge their inventiveness and experiment with various styles and techniques. So, when the time came to create a new multi-concept theme, we decided to craft a somewhat idiosyncratic project that eschews the subtle, polished visual identity. Instead, we were interested in devising a raw, bold, yet appealing look, suitable for digital agencies, architecture studios, museums, galleries, and magazines.
We decided that the best way to achieve this was to amalgamate brutalism with the Swiss Style a.k.a. the International Typographic Style.
Both of these styles are known for their inclination toward functionality and the heavy use of typography. They focus on readability and stripped-away, clean designs, void of superfluous embellishments. But no matter how crude these two styles may be, they are by no means prosaic. In fact, they offer a lot of room for experimentation, resulting in the creation of aesthetically pleasing and exciting designs. We considered those principles a perfect fit for our project and we used them as guidelines for Zermatt, an authentic multi-concept agency theme that personifies and celebrates the hallmarks of brutalism and the Swiss Style.
Zermatt Case Study
Zermatt Case Study

The Design

The use of a mathematical grid and sans-serif typography is one of the most obvious characteristics of the Swiss Style, with the latter heavily deployed in brutalist works as well. From the moment we started developing the first moodboards for Zermatt, we decided that precisely those two elements should be the staples of the theme’s design.
Throughout history, grids have always been used to stimulate user’s content comprehension. Even the first manuscripts and books relied on a grid system to arrange words in a way that would make them easier to read. Today, grids are applied in all media forms – wherever there are photos and texts there’s also a grid system. In print, digital, and, in particular, interactive design, grid lines act as somewhat of a backbone for a project. We use them to achieve hierarchy, create a better layout structure, and organize content by placing it into rows and columns. But horizontal and vertical grid lines do more than just merely separate the content. In fact, the omnipresent grid system in Zermatt creates a connection between page elements no matter how divergent or separated they may be. It also ties all of the theme’s layouts into a visually cohesive unit and provides them with a sense of consistency. Moreover, the grid system ensures all sections attract an equal amount of viewers’ attention and incites a more fluid visual communication with the observer.
Zermatt Case Study
Zermatt Case Study
As for typography, we held tight to the idea that less is more and upheld the Swiss Style principle that fonts, as one of the fundamental elements of design, should be simple in order to communicate with viewers in a clear way. We knew that, if we wanted to ensure great readability on Zermatt, a sans serif typeface would be our best choice. We experimented with various fonts and finally settled on Google’s DM Sans font – a clean, easy-to-read sans serif type we ended up applying throughout the theme. We ruled in its favor not only for its simplicity but also because of its subtle geometric character that complements Zermatt’s somewhat robust character.
We wanted to ensure typographic hierarchy on most layouts, and we managed to achieve it by using appropriate font sizes in headlines and body text as well as by opting for the uniform flush-left and ragged-right text alignment – another recognizable trait of the Swiss Style. While we did keep the letter size and weight pretty tame on most pages, we imbued the theme with sporadic large headlines in a typical brutalist fashion, as seen on the Studio Minimal layout. There is a huge title at the top that takes up a big portion of the screen, instantly and selfishly capturing the viewers’ undivided attention. Another element we wanted to play with were numbers. On the Architecture Studio page, there are perhaps a bit unexpectedly gigantic and thick numerals that clash with the surrounding content size-wise. They surprise and excite the viewer, further adding to the theme’s brutalist appeal.
Zermatt Case Study
Regarding font colors, we painted letters predominantly in black and white hues and used a light grey shade for inactive links. The moment users hover over them, the links abandon their dormant state and turn either white or black. In general, we tried not to go overboard and experiment with too many color combinations. As for background colors, we also mostly relied on black and white. But we couldn’t forgo grey here either, as it is the color of concrete, a material widely used in brutalist architecture. The content is mainly painted in elementary hues, with occasional splashes of the neon green color which is popular among brutalists. However, we didn’t want to blindly follow brutalist ideas regarding colors, so we peppered the theme with some warm-colored gradients, making the content more charming and easier to consume.
Zermatt Case Study
The deliberate overall simplicity of Zermatt’s typography and its color palette allowed us to go slightly more wild with the rawness and abstractness of visuals. We injected layouts with animated and distorted circular shapes, geometric elements, as well as shapes with billowy lines and abstract patterns – all commonplace in the works of brutalism and the Swiss Style. We used mostly photographs instead of illustrations and presented the photos as posters, creating a magazine-like atmosphere in the theme, which is another unmistakable trait of the Swiss Style. On the other hand, Zermatt’s imagery oozes almost exclusively raw brutalist vibes. This is evident in the photos showcasing the rugged beauty of brutalist architecture but also in pictures depicting objects wrapped in nylon (e.g. the Animated Projects page) as well as on layouts with plastic-bag-like backgrounds, such as the Personal Presentation page.
Zermatt Case Study

The Animations

When it comes to Zermatt’s animations, we were adamant about not wanting to disrupt the overall simplicity and functionality of the theme. We kept effects fairly subtle, complementing Zermatt’s brutalist spirit and encouraging the viewer to stay focused on the content at all times.
On almost all pages, we shaped the cursor as a circle, a form popular among brutalists, but we brought it to life with some playful microinteractions. Once placed on clickable elements, the circle becomes larger and some text appears inside of it, informing users they can interact with the content in some way – either by clicking on it or by dragging it with their mouse. In some sections, the cursor assumes the form of an arrow pointing in the direction viewers should go if they wish to explore more of Zermatt’s content.
Zermatt Case Study
And while the animations are, for the most part, unobtrusive, we did weave in a few surprising effects here and there, just as one would expect to see on a brutalist website. To break the typographic color monotony, we brought particularly large titles to life with some light analog movement. You can spot this in the top section on Zermatt’s landing page, where the text appears to be undulating, juxtaposing the inertia of the surrounding letters. And on the Conference and Personal Presentation layouts, we went a bit more wild with the featured effects. On the former, we adorned one of the two enormous letters with neon-colored, lightning-like animated lines, bringing the typography to life. The latter page, on the other hand, exemplifies the use of a gripping scroll-triggered animated gradient that complements the layout’s creased background and the oscillating imagery.
Zermatt’s hover animations further enhance the theme’s magazine vibe. By moving the cursor over some photos, effects typical of print design appear, such as the blue and red duotone and holographic effects. We also balanced out the simplicity of some layouts by ensuring elements of brutalism and the Swiss Style appear on hover. That is especially obvious on the Interactive Showcase page, where various images and geometric and abstract shapes appear in the viewport the moment you hover on a link. The concoction of these subtle and stirring effects amplifies Zermatt’s alternative appeal and fortifies the magnetic and ubiquitous synergy of brutalism and the Swiss Style the theme is centered on.

Closing Words

Zermatt is raw, strong, sharp, geometric and warm, classic yet modern – all at the same time. We created its unique character by challenging the principles of brutalism and the Swiss Style, experimenting with them, and placing them in a contemporary setting. In doing so, we devised an environment in which grid design, the menacing nature of brutalism, pure functionality, and an appealing visual personality combine into a both aesthetically and thematically cohesive unit.
]]> https://qodeinteractive.com/magazine/zermatt-case-study/feed/ 0 Introducing Qi Addons for Elementor – A Free Plugin by Qode https://qodeinteractive.com/magazine/introducing-qi-elementor-addons/ https://qodeinteractive.com/magazine/introducing-qi-elementor-addons/#respond Fri, 23 Apr 2021 07:30:00 +0000 https://qodeinteractive.com/magazine/?p=23206

The first phase of Qode’s free products rollout has started with the release of the Qi Addons for Elementor plugin.

This plugin adds 60 advanced widgets to Elementor, making it the largest FREE collection of Elementor widgets available. Together, these 60 widgets provide a comprehensive set of premium-grade tools specifically designed to help the entire WordPress community build better, more beautiful websites.

Qi Addons for Elementor is available now and can be downloaded completely free from the WordPress repository.

The Qi Addons for Elementor plugin builds upon the power of the Elementor page builder, hugely expanding its possibilities and magnifying its versatility. We put our decade-long experience with web design and WordPress development to good use when selecting the best, most beneficial elements to ensure you can easily create any type of website imaginable.

We particularly recommend Qi Addons for Elementor to anyone already using one of Qode’s 430+ themes. The plugin can be easily installed right from your WordPress dashboard and is sure to enhance your existing website with some new, additional features and functionalities.

Whether premium or free, we’re committed to providing only top-quality products. And we firmly stand behind everything we release. To prove this commitment, we’ve made Qi Addons for Elementor a key component of our free Qi Theme. Each of the professionally designed demos included with the theme will be built using the elements from Qi Addons for Elementor.

You can check out just how flexible the plugin’s individual elements are on the official Qi Addons for Elementor website. There, you’ll find a dedicated page for each of our custom widgets, demonstrating just some of the limitless styles you can create with this plugin.

Alternatively, click on any of the links below to go to a specific widget’s dedicated page.

Business Addons

Business Addons

The Business Addons pack includes everything you need to successfully present and promote your company and its services, from standard elements like working hours and pricing lists to interactive banners, carousel sliders and more:

Infographics Addons

Infographics Addons

With powerful options and smooth animations, the charts, progress bars, and graphs in the Infographics Addons collection let you display all your most relevant data in a fun and compelling way:

Showcase Addons

Showcase Addons

With its beautiful presentations, captivating hero sliders, and stunning image galleries, the Showcase Addons pack provides a comprehensive set of elements for highlighting certain sections of your website:

Creative Addons

Creative Addons

The Creative Addons collection is packed with innovative layouts, advanced animations, and interactive elements that are designed to draw attention and certain to leave a lasting impression on your website visitors:

WooCommerce Addons

WooCommerce Addons

The WooCommerce Addons pack provides everything you need to create a stylish online store and proves that you can achieve infinite unique looks and layouts with just a few carefully selected and meticulously designed elements:

Typography Addons

Typography Addons

Typography is a key element of great design, which is why we made sure our Typography Addons collection contains a large and versatile set of tools to ensure this aspect of your site is pitch-perfect:

SEO Addons

SEO Addons

The elements in the SEO Addons pack use schema markup to improve the way search engines understand your pages and posts, letting you create well-organized, SEO-friendly content and helping you achieve better SERP results:

Contact Form Stylization

Contact Form Stylization

Qi Addons for Elementor also includes widgets that let you easily create stylized contact forms using the following two plugins:

We’re currently working on a set of YouTube tutorials and Qode Magazine articles to help you get acquainted with Qi Addons for Elementor. Check them out to see just how simple it is to adapt any of the plugin’s custom widgets to your specific needs.

We have more exciting projects coming your way soon, so make sure to sign up for our newsletter to get all the latest news and updates.

]]> https://qodeinteractive.com/magazine/introducing-qi-elementor-addons/feed/ 0 Free Plugins and Themes Coming from Qode https://qodeinteractive.com/magazine/free-wordpress-themes-and-plugins-by-qode/ https://qodeinteractive.com/magazine/free-wordpress-themes-and-plugins-by-qode/#respond Fri, 16 Apr 2021 08:00:05 +0000 https://qodeinteractive.com/magazine/?p=22469

Today marks a major milestone in our company’s history. We’re thrilled to announce a brand new line of FREE products by Qode.

It’s fitting that 2021 is the year we hit such a significant milestone. It is, after all, our 10-year anniversary. In the past decade, we’ve released over 500 premium themes, designed more than 1000 distinct demos, and made over half a million sales. We’ve become a leader in the WP themes market, and we’ve made major strides in the world of web design. Throughout it all, we’ve been guided by a single vision: to bring beauty to WordPress.

Now, we want to expand our reach. Our goal with this new line of products is to offer the entire WordPress community a set of free tools that will help everyone build better, more beautiful websites.

Individually, each of our free products will be a powerhouse in its own right. But their real strength lies in their mutual synergy. When combined, they will provide a toolkit for creating fully functional, professionally designed WordPress websites, entirely free.

We’ll be rolling out our free line of products in several phases. The first phase has already started with the release of the Qi Addons for Elementor plugin. Soon, we’ll launch the second phase, which includes a completely free WordPress theme, as well as a huge collection of free demos. Each of these demos will be designed by our proven, award-winning team and built using the elements from the Qi Addons plugin. After that, we plan on adding several smaller, but highly specialized plugins to our free collection, significantly increasing the capabilities of the entire free line of Qode products.

Phase 1: Free Qi Addons for Elementor Plugin

Phase 1: Free Qi Addons for Elementor Plugin

Qi Addons for Elementor is the largest collection of FREE Elementor addons available. It adds 60 advanced, custom-made widgets to Elementor – one of the most popular page builders in the world. Qi Addons for Elementor is available now and can be downloaded completely free from the WordPress repository.

Phase 2: Free Qi Theme

Free Qi Theme

The Qi Theme – the very first free WordPress theme by Qode – is also now available for download. Besides a powerful admin interface and flexible customization options, the Qi theme comes with 100 easily importable demos, all designed by our award-winning team of professionals and built using the Qi Addons for Elementor plugin. We’ve also included a media license for all the premium stock photos in the theme’s demos, allowing you to use these images on any site created with the Qi Theme with no additional cost.

Phase 3: More Free Plugins from Qode

More Qi Addons for Elementor

After the release of the Qi theme, we plan on expanding our offer of free products with more practical plugins. While it’s still too early to reveal any specifics, you can expect several specialized tools geared toward better social media integration, advanced SEO, GDPR compliance, and more.

Together, all this will form a unified set of tools for creating beautiful, professional, and fully functional websites.

We’ll have more news about our free line of products soon, so make sure you stay tuned and sign up for our newsletter to get all the latest updates.

]]> https://qodeinteractive.com/magazine/free-wordpress-themes-and-plugins-by-qode/feed/ 0 Qode Nominated for CSSDA Agency of the Year Award https://qodeinteractive.com/magazine/qode-nominated-for-agency-of-the-year/ https://qodeinteractive.com/magazine/qode-nominated-for-agency-of-the-year/#respond Fri, 19 Feb 2021 09:00:58 +0000 https://qodeinteractive.com/magazine/?p=20609

We’re proud to announce that Qode Interactive has been nominated for the CSSDA 2020 Agency of the Year Award.

Back in 2011, when Qode was founded, we set ourselves a goal: to offer only the most advanced and most beautiful products possible. In the decade since, through hard work and continuous discovery, we’ve deepened our understanding of the creative process and developed an approach to design that ensures each of our themes has a distinct sense of style and a unique, recognizable character. We’ve learned, adapted, and grown. And thanks to the knowledge, dedication, and talent of our team, we believe that today, we are closer to that original goal.

Last year was a challenge for all of us. And we’re thankful to our entire team for quickly adjusting to the extraordinary circumstances. For never keeping their eye off the ball. The fact that, in 2020, ten of our projects were recognized and rewarded by the CSSDA judges is not only a great honor, but also a testament to the creativity and resourcefulness of every single member of Qode. Those rewards, along with this latest nomination, only strengthen our commitment to streamlining the website creation experience, pushing the boundaries of innovative design and development, and, ultimately, bringing beauty to WordPress.

Qode’s 2020 CSSDA Awards

Qode Kaleidoscope

Qode Kaleidoscope

Qode Kaleidoscope is an innovative showcase highlighting a color-rich collection of WordPress themes made by Qode Interactive.

Qode Kaleidoscope received the CSSDA Website of the Day, UI Design, UX Design, and Innovation awards.

Zermatt

Zermatt

The Zermatt theme is carried by a visual attitude rooted in Brutalism, which we then fused with a modern interpretation of grid-based Swiss design style.

Zermatt received the CSSDA Special Kudos, UI Design, UX Design, and Innovation awards.

Breton

Breton

The Breton theme blends its brutalist roots with modern overtones, building a raw visual character around an intense primary color palette.

Breton received the CSSDA Special Kudos, UI Design, UX Design, and Innovation awards.

Laurent

Laurent

The Laurent theme’s elegant aesthetic combines the spirit of contemporary cuisine with refined visuals rooted in the realm of Art Deco.

Laurent received the CSSDA Special Kudos, UI Design, UX Design, and Innovation awards.

Wonderment

Wonderment

The Wonderment theme’s eclectic, contemporary visual character is defined by its artistically tinged imagery & elegant, warm color palette.

Wonderment received the CSSDA Special Kudos, UI Design, UX Design, and Innovation awards.

Tetsuo

Tetsuo

The Tetsuo theme captures the bustle of Neo Tokyo’s neon lit streets, the dystopian landscapes of Philip K. Dick & an air of cyberpunk aesthetic

Tetsuo received the CSSDA Special Kudos, UI Design, UX Design, and Innovation awards.

Nillé

Nillé

Nillé is an elegant shop theme with a visual identity inspired by the sandy banks of the river Nile and the ethos of modern minimalism.

Nillé received the CSSDA Special Kudos, UI Design, UX Design, and Innovation awards.

Smiltė

Smiltė

The Smiltė theme’s idiosyncratic character is carried by its ethereal, mysticism-inspired overtones & dreamlike imagery.

Smiltė received the CSSDA Special Kudos, UI Design, UX Design, and Innovation awards.

Fey

Fey

Fey is a sophisticated online store theme that personifies the perfect amalgam of picturesque hues and a distinct, elegant character.

Fey received the CSSDA Special Kudos, UI Design, UX Design, and Innovation awards.

Bard

Bard

The Bard theme’s visual identity is driven by the enduring spirit of performing arts, fused with a minimalist, modern approach to design.

Bard received the CSSDA Special Kudos, UI Design, UX Design, and Innovation awards.

All of this is a mere fraction of the themes, showcases, and demos we created last year. Not to mention that we’ve got several exciting projects coming up in 2022 that we can’t wait to share with you, so make sure you stay tuned and sign up for our newsletter to get all the latest news and updates.

]]> https://qodeinteractive.com/magazine/qode-nominated-for-agency-of-the-year/feed/ 0 Breton Creative Agency Theme: A Case Study https://qodeinteractive.com/magazine/breton-case-study/ https://qodeinteractive.com/magazine/breton-case-study/#respond Fri, 11 Dec 2020 14:00:31 +0000 https://qodeinteractive.com/magazine/?p=17498

About the Project

Breton is a contemporary portfolio theme that blends its brutalist roots with modern overtones, building a raw visual character around an intense primary color palette. Aimed chiefly at creative agencies, Breton is designed to transcend beyond the utilitarian nature of brutalism, while remaining faithful to the style’s most prominent traits.

Awards:

Best Innovation – CSSDA

Best UI Design – CSSDA

Best UX Design – CSSDA

Special Kudos – CSSDA

Breton Case Study

The Approach

When crafting a theme, our usual first step is to set the aesthetic direction that we want to pursue. With Breton, it was rather clear from the start: we wanted to explore different aspects of Brutalism, recontextualized through the prism of modern web design.
Breton’s raw visual character hails directly from the principles of Brutalism – an architectural style that rose to prominence in the 1950s only to transcend into other creative fields, including, eventually, web design. The actual term “Brutalism” comes from the French “béton brut,” meaning “raw concrete.”
Breton Case Study
Lately, though, an alternative interpretation of the term arose, stemming from its similarity with the word “brutal.” While there certainly are currents in modern web design that follow the second interpretation of the word, our approach was more in line with its original meaning.
This particular style rejects the predominant levity of today’s web design tendencies and directs its focus on the content – and its intended consumer. And that is precisely what we aimed to achieve with Breton: a design centered on the dynamics between the content and the consumer, achieved through the reduced brutalist aesthetics and their historical development across different media.

The Design

Well aware that Brutalism is a style with an intense, highly recognizable character, we dived into the enormous base of brutalist works and started our research. Right from the beginning, we decided we wouldn’t go into the extremes of the style, and that, instead, we needed to pursue a harmonious balance between brutalist aesthetics and a contemporary approach to the web. Starting from the palette, we opted for a typically brutalist one – revolving around elementary colors. This choice helped us further filter out the imagery we would use throughout the theme, creating a clear and coherent base of works.
Breton Case Study
These were to carry brutalist hints throughout the theme, both in their palette and in their motifs, underlining its character. Some examples can be found right there on the Main Homepage: a man’s face scribbled over in toxic green, a renaissance portrait repeated several times in a row, a glitchy intervention often seen in brutalism, or the black and white portrait on red background in the Horizontal Portfolio demo, flirting with Pop Art, as well as with Dadaism. These images create a sort of paradox, a portrait without portrait, and produce a daring mix of epochs and styles. As Brutalism often flirts with iconic pop imagery, we wanted to play with the famous Mickey Mouse glove, featured as one of the presented works, as well as the “arrow” pointing to the location on the theme’s Contact Us page. Finally, there are images of brutalist architecture, as a direct link between the style and its origin, various textual elements and print design examples, direct references to Brutalism in web design, as well as accents typical of avant-garde graphic design.
We also decided to add a color switcher to Breton, offering the users not one, but two completely different visual experiences of the theme. This particular UX element, when clicked, changes the color of the entire background, and therefore the very atmosphere of the website. However, as a radical change of background can affect the way other interface elements work and feel, we had to carefully investigate how each element, image and detail would fit into two background modes, focusing on the contrast, energy, visibility, and, of course, functionality.
The works used throughout the theme already bore a certain visual intensity, so the interface elements we were going to use had to be lighter, airier, more minimalistic and scaled-down, in order to prevent cluttering and to maintain a fine visual balance. For instance, we introduced thin separator lines dividing various units/sectors of the layouts on pages, which proved to work remarkably well with the empty space and the imagery in both color modes, subtly underlining their character. We also opted to make most of the interface elements outlined or hollow, instead of filled. The logo, the menu opener, the color switcher, arrows and buttons, the Back to Top icon, social media links, bullets, the drag cursor, etc…all of these elements are merely outlined, which allowed us to make them somewhat larger and more prominent without becoming obtrusive.
Breton Case Study
As for the typography, we looked for a serif font that would soften the theme’s atmosphere and give it a subtler note. After trying out several typefaces, we decided that Playfair Display was the best fit. We experimented with the playful combination of regular and italic styles in one piece of textual content and it worked excellent, so we decided to use it as a default for all the titles, too. As for the paragraphs, supertitles, and smaller informational elements of the interface, we decided to use the Roboto typeface. The dynamics of thin interface lines was a great fit with the large Roboto outline text as well, forming a refreshing contrast with the heavier elements of the theme. They also clicked well with the serif Playfair Display font, so we decided to use this typeface as a bona fide design element – we even used it for the video play button. As for Roboto, the sans serif outline proved to be particularly interesting for the animations. We didn’t want to animate it throughout the entire theme, so we alternated between static and animated sans serif outlines, triggered either by the cursor position or by the scroll.
Breton Case Study
As for the buttons, in addition to the standard-shaped ones, we wanted to create something a bit more divergent. We designed a large, star-shaped, blue “Subscribe Now” button with a circular animation. Sharp and jagged, the star is one of the favorite brutalist shapes, stemming most likely from avant-garde graphic design. In web design, playing with such pronounced shapes always leads to visually exciting results and is great for drawing attention to important UX elements such as CTA buttons. On the other hand, we designed several circular, or, more precisely – oval buttons, which are quite popular in brutalist web design – the vertical oval for the “Back to Top” button and the large horizontal “Hire Us” button in the Passepartout Slider demo. The combination of text and fine circular lines, congruent with the linear layout separations, creates an exciting dynamic and helps make the button stand out in a subtle, unobtrusive way.
Speaking of the cursor, we decided to instill the brutalist ethos in this UI element on some of Breton’s homepages. For instance, for the Interactive Project Scroll homepage we designed a quite oversized cursor. What we wanted to do here is take a web object as omnipresent and familiar as a cursor, and give it a completely new perspective, rendering it slightly uncanny. The cursor of the mouse is, in a way, a digital extension of ourselves, something we perceive as part of ourselves to the extent of not even noticing it anymore. The mere change of its size turns it into a completely new digital object, reminding us of its existence and purpose and creating a short (and entertaining) cognitive jolt.
A bit less extravagant but equally unorthodox is the cursor we created for the Portfolio Categories and Portfolio Minimal homepages. Shaped as a hollow plus sign, this cursor adheres to the vein of outlined interface elements we used throughout Breton. It is followed, as per some sort of magnetism, by the portfolio item’s title and categories, remaining faithful to the utilitarian nature of brutalist design.

The Animations

In devising the animations for Breton, the imperative was, again, to adhere to the principles of brutalism, while making sure, at the same time, the animations are congruous with the theme’s overall design. That’s how we came up with the disappearing outline for the social icons, as well as the “Back to Top” and “Hire Us” buttons.
For some of the animations, we went with raw and abrupt transitions – the color switcher is a particularly good example of that . Similarly, hover animations for many of the images are rather blunt, as the images transform or even disappear abruptly, with no transitions at all, in a classically brutalist manner.
Another distinctly brutalist animation type is what we used in certain portions of textual content – words in sequences of three or four turn from regular to italic, and back. This animation is not dependent on any user interaction, such as hover, click or scroll, and its autonomy keeps it in line with brutalist principles.
On the other hand, as our approach to Breton aimed towards an amalgamation of pure brutalism and contemporary web design, we balanced these brutalist animations with more subtle ones, such as the large outline text moving with the scroll, soft zoom-in on hover for portfolio images, certain images softly interacting with the cursor in a floating motion, arrows changing direction upon hover, the slide effect on the Horizontal Project Reel homepage, and so on. All these animations are brutalist in their essence but still rather toned down, creating a balanced union between brutalism and a contemporary approach to the web.

Closing Words

In a way, Breton can be read as a dynamic exchange of references between styles and approaches. Using Brutalism as its main aesthetic denomination, Breton occasionally moves away from the canon to find a visual language of its own. Brutalism itself bears irreverence as one of its main traits, so this stepping away or toning down of some of the style’s most notable features makes Breton a meta-project of sorts, an endeavor that, at the same time, pays homage and builds upon its origin.
]]> https://qodeinteractive.com/magazine/breton-case-study/feed/ 0 Die Finnhütte Architecture Theme: A Case Study https://qodeinteractive.com/magazine/die-finnhutte-case-study/ https://qodeinteractive.com/magazine/die-finnhutte-case-study/#respond Fri, 14 Aug 2020 13:00:56 +0000 https://qodeinteractive.com/magazine/?p=10677

About the Project

Die Finnhütte is an architecture and interior design theme with an innately contemporary aesthetic. Everything in Die Finnhütte, from its layouts and interface to its imagery and typography, developed naturally from the core foundations of minimalism and clarity of form.

Awards:

Best Innovation – CSSDA

Best UI Design – CSSDA

Best UX Design – CSSDA

Special Kudos – CSSDA

The Approach Die Finnhütte

The Approach

As a company with quite a few trained architects in its collective, we’ve always remained mindful of Mies van der Rohe’s credo that “Less is more”. While many today consider this a cliché or perhaps even a truism, its importance to generations of architects (and designers) cannot be overstated. And it’s a concept we held firmly in our minds when planning out Die Finnhütte. Farnsworth House, Villa Savoye, and Glass House are just a few of the buildings we looked to for inspiration. Each of these architectural achievements attests to the strength of der Rohe’s principle and displays a deep understanding of the importance of clear forms, defined shapes, and carefully selected details. So we decided to apply this moderate approach as faithfully as possible to Die Finnhütte’s layouts and interface.
Die Finnhutte The Approach

The Design

One of the first things we created for Die Finnhütte was its logo. We wanted the logo to be purely typographical, so we started experimenting with a selection of fonts. Overpass, the typeface we ultimately chose, is based on clear, well-defined lines, reminiscent of thin, modern columns. These lines further inspired the design of some of Die Finnhütte’s main interface elements, like its menu openers, navigation, hover animations and active item markers. Apart from these extremely restrained and functional forms, the theme has no additional decorative elements.
Sticking to the principle of less is more, we decided to use Overpass throughout the theme. What we found so interesting about this typeface is that even though it’s built on these clear lines, it still isn’t quite perfect. Some of its strokes, like those on the letters “d” and “n”, are thicker, giving it some warmth and perhaps even a certain charm. We balanced this out with the sturdier, condensed Oswald font used above the main titles.
Die Finnhutte The Design
When it came to designing the theme’s layouts, our goal was to make sure the portfolio projects and imagery had sufficient breathing room. We knew this was the content our clients would care most about. So we created large, light areas around these focal points, as evident right from the get-go on Die Finnhütte’s main home. Notice the asymmetrical arrangement of imagery and white space within the slider and the way the entire page is composed of spacious, alternating sections of white and light grey. Most of the theme’s homepages are based on this idea of “airy” layouts.
We also developed a few brand new layout concepts specifically for Die Finnhütte, including several custom portfolio single designs, as well as a fresh take on the vertical project showcase. We did extensive research for the portfolio singles, carefully choosing the most important information to display on each one. The vertical showcase, on the other hand, came somewhat naturally. It played perfectly into the theme’s airy feel, with the projects unraveling as you gently float past them.
The Design Die Finnhutte

The Animations

With der Rohe’s words still in mind, we decided to base all motion in the theme around one core set of animations. And since imagery is such a key component of Die Finnhütte, mask animations seemed a natural choice. By placing an opaque mask layer above our images, and then removing it in a smooth motion, we created the effect of slowly revealing each image in the theme. This is especially noticeable in the uncovering animations. As you scroll through each page, the most important elements unfold before you, drawing your attention and imbuing the theme with a subtle but significant dynamicity.
We also used the mask effect in our sliders, but we added a slight twist. Instead of removing an opaque layer to reveal the image, we integrated the mask animation into the slide transitions. As one slide moves aside, it reveals the one beneath it. By adding an overlay image and some additional horizontal motion between transitions, we created a sense of continuity in our sliders.
The hover effects in Die Finnhütte also evolved from mask animations. Lines, SVG objects, and similar shapes can be seen uncovering, unrolling, or extending in a certain direction. This is visible throughout the theme – on buttons, menu openers, filters, etc. Even certain textual elements appear from a mask, like the logo on Die Finnhütte’s landing page.

Closing Words

Despite its moderate nature, minimalistic values, and airy ambiance, Die Finnhütte retains a strong sense of sturdiness and reliability. By focusing on a few carefully considered motifs, we created a compact framework within which we could safely experiment with symmetry, space, and motion, as well as deconstruct familiar design elements and repurpose them in new ways. This conflicting fusion of the familiar and the innovative not only bolsters Die Finnhütte’s contemporary character, but also contributes to the theme’s thoroughly unique feel.
]]> https://qodeinteractive.com/magazine/die-finnhutte-case-study/feed/ 0