The Design Schooling Collection (DES) by Obys Company is crafted to supply an attractive and academic journey by way of elementary design ideas akin to typography, shade mixtures, and grids. Tailor-made for designers and inventive professionals, this sequence delivers concise, insightful episodes that improve sensible abilities and ignite progressive design pondering.
Major Options and Design Model
The elemental thought behind the brand and the general identification of DES revolves round our mission to build up and construction information and experience within the discipline of design. This idea is represented by way of numerous distortions that in the end type a cohesive identification. For instance, this idea is clear in motion within the preloader, the place jumbled letters come collectively to create the brand, and within the footer, the place glitches remodel right into a unified type. The web site incorporates a minimalist and visually interesting design, with a transparent format that highlights video content material. Key parts embody user-friendly navigation, high-quality video manufacturing, and interactive options geared toward enriching the training expertise.
From the Logotype to the Footer
The web site brings this concept to life by way of artistic distortions that come collectively to type a unified complete. Take our preloader animation, for instance. It begins with a jumble of scattered letters, which steadily arrange themselves into our brand, symbolizing how we flip scattered information into a transparent, structured identification.
The footer continues this theme, with visible glitches that easily transition into a cultured design, illustrating how fragmented components will be remodeled into one thing harmonious and well-defined.
Consumer-Pleasant Looking Expertise
The web site navigation has been fastidiously crafted to be easy and user-friendly, guaranteeing that guests can simply discover what they want. We’ve organized all of the details about DES and the primary season of TP into three important pages: the Primary Web page, the Season Web page, and the About Web page. Every web page has a transparent and particular position.
The Primary Web page serves because the hub, offering an outline and easy accessibility to all different sections. The Season Web page is devoted to college students, providing all the training supplies, sources, and detailed details about the present season, making it a go-to spot for his or her instructional journey. The About Web page affords insights into the group behind the venture, sharing the story and imaginative and prescient of the individuals who introduced it to life, including a private contact to the expertise.
To make the location as participating as doable, we targeted on making a seamless person expertise. We strategically positioned buttons and hyperlinks the place they naturally catch the person’s eye, decreasing the trouble wanted to navigate. The textual content is fastidiously formatted to make sure readability and readability, utilizing a clear and fashionable font that enhances the general design. Moreover, the buying course of has been streamlined, with clear steps and minimal distractions, so customers can simply and confidently full their transactions.
Each element, from the format to the movement of knowledge, has been thoughtfully thought-about to create a clean, pleasant looking expertise that meets the wants of each new guests and returning customers.
Dynamic 3D Parts for Enhancing Consumer Engagement
The web site for the Design Schooling Collection makes use of placing 3D components to boost its fashionable, immersive aesthetic. These 3D parts, built-in with dynamic animations, create a way of depth and interplay, reflecting the company’s progressive strategy to net design. The sleek transitions between components and the usage of 3D typography and icons emphasize the location’s instructional focus whereas sustaining a glossy, minimalist design language. This interaction of visible depth and motion retains customers engaged as they discover the design ideas introduced.
Web site Navigation
The web site is designed with readability and ease in thoughts, organizing content material throughout three key pages: Primary, Season, and About. The Season web page is the place college students discover studying supplies, whereas the About web page introduces the group. We targeted on creating an intuitive person expertise, inserting buttons logically, guaranteeing textual content readability, and simplifying the acquisition course of.
The Tech Stack
On the technical aspect, the location was constructed utilizing 11ty as a static web site generator with PUG templating, GSAP for animations, and Strapi because the CMS. For the preloader’s falling letter impact, we used Cannon.js and Three.js to simulate real-world physics, making a clean transition from the preloader to the homepage. The 3D objects, modeled in Three.js, mimicked the shapes and proportions of SVG components, enabling real looking collision and gravity results. We additional enhanced the animation through the use of GSAP to regulate HTML components’ transformations, seamlessly connecting the physics simulation to the location’s precise content material. This created an attractive, immersive expertise that blends 3D visuals with intuitive navigation.
Redesigning from the Floor Up: A 12 months of Ardour and Precision
A yr in the past, we accomplished the design for this web site, however after an in depth evaluation, we made the daring option to scrap it and begin over. Rebuilding all the pieces took one other yr and was the hardest half. After that, establishing animations, filming, and crafting content material felt like a clean routine. What makes this venture particular is that we dealt with all of it—thought, identification, design, improvement, video manufacturing, writing, and 3D graphics. We poured our hearts into each element.
