Responses by Viacheslav Olianishyn and Olha Olianishyna, cofounders, Obys.

Background: Over the past five years, we have released three popular educational projects: Typography Principles, Colors Combinations and Grids. Collectively known as the Design Education Series (DES), the websites have been visited more than one million times. Due to the positive feedback and requests for more content, we decided to create an original series focused on main design principles.

The purpose of the site is to provide an engaging, educational experience on fundamental design principles. This series is aimed at designers and creative professionals, offering short, insightful episodes designed to improve practical skills and inspire innovative design thinking. By DES, we aim to centralize all our educational activities under one roof—with more content and formats to come.

Design core: The core concept behind the logo and the overall DES identity is centered around our mission to gather and organize knowledge and expertise related to design. We convey this idea through different types of distortions that ultimately take on a coherent form. You can observe this concept in action in the preloader, where letters from a chaotic arrangement come together to form the logo, as well as in the footer, where glitches transition into a coherent form. The site boasts a minimalist and visually appealing design, with a clear layout that emphasizes the video content. Core elements include easy navigation, high-quality video production and interactive components to enhance learning.

Challenges: Actually, the design of this site was completed a year ago. But after a detailed examination, we decided to scrap it completely and start over. It took another year to redo everything. Perhaps this bold step was the most challenging aspect of its design and development.

After overcoming these difficulties, setting up the physics for falling letters, filming and creating all the content for the site became a pleasant routine. This project’s peculiarity is that we were responsible for everything, from the idea, identity, design and development, to creating a video trailer, writing all the text and creating 3-D graphics—not to mention its business components. We are thrilled to embark on this comprehensive and exciting journey!

Technology: Our fantastic development team is, as usual, our main tool. When developing the website, we used the default stack, including the 11ty static site generator based on PUG, GSAP for animations and the Strapi CMS.

The most interesting and challenging part of the website was creating a preloader with physics influencing animated letters. We needed to figure out how to smoothly transition from the preloader to the intro section of the homepage. To achieve this, we used Cannon.js and three.js. Essentially, we created a three.js scene with objects that copied the sizes and proportions of SVG objects, controlling how they stacked and fell. Connecting Cannon.js to the scene gave us real-world physics for collisions and gravity of those objects. Lastly, we updated the transform of the HTML elements using GSAP and gsap.ticker(). This resulted in a 3-D world with physics connected to the real HTML DOM elements, allowing us to manipulate them after the initial animation as needed.