From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
The Design Education Series (DES) by Obys Agency is crafted to offer an engaging and educational journey through fundamental design principles such as typography, color combinations, and grids. Tailored for designers and creative professionals, this series delivers concise, insightful episodes that enhance practical skills and ignite innovative design thinking.
Primary Features and Design Style
The fundamental idea behind the logo and the overall identity of DES revolves around our mission to accumulate and structure knowledge and expertise in the field of design. This concept is represented through various distortions that ultimately form a cohesive identity. For example, this concept is evident in action in the preloader, where jumbled letters come together to create the logo, and in the footer, where glitches transform into a unified form. The website features a minimalist and visually appealing design, with a clear layout that highlights video content. Key components include user-friendly navigation, high-quality video production, and interactive features aimed at enriching the learning experience.
From the Logotype to the Footer
The website brings this idea to life through creative distortions that come together to form a unified whole. Take our preloader animation, for example. It starts with a jumble of scattered letters, which gradually organize themselves into our logo, symbolizing how we turn scattered knowledge into a clear, structured identity.
The footer continues this theme, with visual glitches that smoothly transition into a polished design, illustrating how fragmented elements can be transformed into something harmonious and well-defined.
User-Friendly Browsing Experience
The website navigation has been carefully crafted to be straightforward and user-friendly, ensuring that visitors can easily find what they need. We’ve organized all the information about DES and the first season of TP into three main pages: the Main Page, the Season Page, and the About Page. Each page has a clear and specific role.
The Main Page serves as the hub, providing an overview and easy access to all other sections. The Season Page is dedicated to students, offering all the learning materials, resources, and detailed information about the current season, making it a go-to spot for their educational journey. The About Page offers insights into the team behind the project, sharing the story and vision of the people who brought it to life, adding a personal touch to the experience.
To make the site as engaging as possible, we focused on creating a seamless user experience. We strategically placed buttons and links where they naturally catch the user’s eye, reducing the effort needed to navigate. The text is carefully formatted to ensure clarity and readability, using a clean and modern font that complements the overall design. Additionally, the purchasing process has been streamlined, with clear steps and minimal distractions, so users can easily and confidently complete their transactions.
Every detail, from the layout to the flow of information, has been thoughtfully considered to create a smooth, enjoyable browsing experience that meets the needs of both new visitors and returning users.
Dynamic 3D Elements for Enhancing User Engagement
The website for the Design Education Series utilizes striking 3D elements to enhance its modern, immersive aesthetic. These 3D components, integrated with dynamic animations, create a sense of depth and interaction, reflecting the agency’s innovative approach to web design. The smooth transitions between elements and the use of 3D typography and icons emphasize the site’s educational focus while maintaining a sleek, minimalist design language. This interplay of visual depth and movement keeps users engaged as they explore the design principles presented.
Website Navigation
The website is designed with clarity and simplicity in mind, organizing content across three key pages: Main, Season, and About. The Season page is where students find learning materials, while the About page introduces the team. We focused on creating an intuitive user experience, placing buttons logically, ensuring text readability, and simplifying the purchase process.
The Tech Stack
On the technical side, the site was built using 11ty as a static site generator with PUG templating, GSAP for animations, and Strapi as the CMS. For the preloader’s falling letter effect, we used Cannon.js and Three.js to simulate real-world physics, creating a smooth transition from the preloader to the homepage. The 3D objects, modeled in Three.js, mimicked the shapes and proportions of SVG elements, enabling realistic collision and gravity effects. We further enhanced the animation by using GSAP to control HTML elements’ transformations, seamlessly connecting the physics simulation to the site’s actual content. This created an engaging, immersive experience that blends 3D visuals with intuitive navigation.
Redesigning from the Ground Up: A Year of Passion and Precision
A year ago, we completed the design for this site, but after a close review, we made the bold choice to scrap it and start over. Rebuilding everything took another year and was the toughest part. After that, setting up animations, filming, and crafting content felt like a smooth routine. What makes this project special is that we handled it all—idea, identity, design, development, video production, writing, and 3D graphics. We poured our hearts into every detail.
