Harrison 
Obys Agency’s Design Education Series (DES) is an engaging and educational introduction to fundamental design principles like typography, color combinations, grids, and more. Tailored for designers and creative professionals, the series offers succinct, insightful episodes that develop practical skills and inspire innovative design thinking.
Main features and design style
The fundamental idea behind the DES logo and overall identity revolves around our mission to accumulate and structure knowledge and expertise in the field of design. This concept is expressed through various distortions that ultimately form a cohesive identity. For example, this concept is clearly expressed in the preloader, where letters scramble to create the logo, and in the footer, where glitches transform into a unified shape. The website features a minimalistic and visually appealing design with a clear layout that highlights the video content. Key components include user-friendly navigation, high-quality video production, and interactivity aimed at enriching the learning experience.
From the logotype to the footer
The website realizes this idea by using creative distortions to come together and form a unified whole: take for example the preloader animation, which starts as a jumble of scattered letters and gradually organizes into a logo, symbolizing how scattered knowledge can be transformed into a clear, structured identity.
The footer continues this theme, showcasing how visual glitches smoothly transition into sophisticated design, transforming fragmented elements into harmonious and clear.
User-friendly browsing experience
The website navigation has been carefully crafted to be clear and user-friendly so that visitors can easily find what they need. All information about the first season of DES and TP is collected on three main pages: the main page, the season page and the overview page. Each page has a clear and specific role.
The main page acts as a hub, providing an overview and easy access to all other sections. The season page is dedicated to students and provides all study materials, resources and detailed information about the current season, making it the go-to place for students on their learning journey. The overview page provides insight into the team behind the project, sharing the stories and vision of the people who made the project happen, 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 the user’s eye would naturally land on them, reducing the effort required to navigate. Text is carefully formatted to ensure clarity and readability, using clean, modern fonts that complement the overall design. Additionally, the buying process is streamlined, with clear steps and minimal distractions, allowing users to complete the transaction with ease and confidence.
From layout to information flow, every detail is carefully considered to create a smooth, enjoyable browsing experience that meets the needs of both new visitors and returning customers.
Dynamic 3D elements for increased user engagement
The Design Education Series website utilizes striking 3D elements to enhance its modern, immersive aesthetic. Integrated with dynamic animations, these 3D components create a sense of depth and interaction, reflecting the agency’s innovative approach to web design. Smooth transitions between elements and the use of 3D typography and iconography emphasize the site’s educational focus while maintaining a sleek, minimalist design language. The interplay of visual depth and movement engages users to explore the design principles presented.
Website Navigation
The website was designed with clarity and simplicity in mind, with content organized into three main pages: Main, Season, and Overview. The Season page is where students find their study materials, and the Overview page introduces the team. We focused on creating an intuitive user experience, placing buttons logically, ensuring text is easy to read, and simplifying the checkout process.
Technology stack
On the technical side, the site was built using 11ty as a static site generator with PUG templates, GSAP for animations, and Strapi as a CMS. For the falling letter effect in the preloader, Cannon.js and Three.js were used to simulate real-world physics to achieve a smooth transition from the preloader to the homepage. 3D objects modeled in Three.js mimicked the shape and proportions of SVG elements to achieve realistic collision and gravity effects. The animations were further enhanced by using GSAP to control the transformations of HTML elements, seamlessly connecting the physics simulation to the actual content of the site. This resulted in a compelling and immersive experience that blends 3D visuals with intuitive navigation.
Redesigned from the Ground Up: A Year of Passion and Precision
A year ago, the design of this site was completed, but after careful consideration, we took the plunge and scrapped it and started over. It took another year to rebuild everything, which was the most challenging part. After that, the animation setup, filming, and content creation went smoothly. What makes this project special is that we were responsible for everything: ideation, identity, design, development, video production, writing, 3D graphics, etc. We paid close attention to every detail.
