ِProject DevXlab - The Hero section
Introduction
DevLab is a project commissioned by a German company to design and execute a unique website with an artistic viewpoint, combining Western and Eastern motifs, enriched with many novelties and creativity. The goal was to create a UI that would be visually stunning and captivating, showcasing unconventional ideas unfamiliar to the public. The website was to be presented to professionals in the field, making it essential that the design was of the highest quality. This Behance portfolio case study will explore the creative process, design decisions, and final product.
The Idea
As the project was supposed to be unique, creating a design that could represent itself well was important. After considering many proposals given by different people, such as modern/postmodern designs, knots being tied together to form webs, and so on, I found the critical idea. The central design concept of devXlab is a muqarnas structure, a decorative vaulting in Islamic architecture. I reconstructed an old muqarnas structure in Yazd by hand, dating back 300-400 years ago. The design was to showcase the structure's beauty in a digital format, showcasing depth, dimension, and shadow play.
As the project was supposed to be unique, creating a design that could represent itself well was important. After considering many proposals given by different people, such as modern/postmodern designs, knots being tied together to form webs, and so on, I found the critical idea. The central design concept of devXlab is a muqarnas structure, a decorative vaulting in Islamic architecture. I reconstructed an old muqarnas structure in Yazd by hand, dating back 300-400 years ago. The design was to showcase the structure's beauty in a digital format, showcasing depth, dimension, and shadow play.
Design Process
The design process involved using the muqarnas structure creatively for web design. The muqarnas were rotated clockwise and utilized in the top-right corner of the landing page. Though the design is flat, hallucinatory lighting effects were added to make it look 3D. Handwork and pure CSS were used to make the concept work, with many frames used to create the motion. The motion created was for the lines to form together to create the muqarnas in an animation. The light was shed on the muqarnas, and shadows were added to create the illusion of a 3D object.
The design process involved using the muqarnas structure creatively for web design. The muqarnas were rotated clockwise and utilized in the top-right corner of the landing page. Though the design is flat, hallucinatory lighting effects were added to make it look 3D. Handwork and pure CSS were used to make the concept work, with many frames used to create the motion. The motion created was for the lines to form together to create the muqarnas in an animation. The light was shed on the muqarnas, and shadows were added to create the illusion of a 3D object.
The Landing Page
The landing page consists of two layers. The first layer consists of the intermediate lines that form the muqarnas in an animation. The second layer involves the shading and lighting effects, which create the illusion of a 3D object. The mobile version of the landing page features a star, and there is a tab bar with buttons that change the content. The left-hand side triangle points to the current choice and is a dynamically shape-changing figure.
Overall, the design features lines instead of round objects, with white as the primary color. The broken white line from the left to the bottom indicates that it comes from the top to the right side of the page, enters from the left side of the lower section, and then comes from the bottom up so the user can trace it.
