The Creative Journey Behind My Website: A Case Study
Building a website is not just about laying out information; it’s an artistic journey filled with revelations and design decisions. In this case study, I will walk you through the five key phases of my website development process, highlighting the choices that shaped the final product.
Understanding the Creative Process
The creative journey is often unpredictable. Initially, I envisioned my main feature as the centerpiece, only to discover that it later became optional. As I progressed, several features were dropped because they did not align with the emerging visual direction. This organic evolution made the process exciting and deeply rewarding.
Documenting Progress Through Video
To stay connected to my vision, I recorded videos throughout the development. These captures not only served as reminders of my initial inspirations but also allowed me to appreciate the journey of transformation, even in its roughest forms. I believe there’s beauty in seeing the evolution of a project.
Crafting a WebGL Fold Effect
The project began with an ambitious idea: integrating a WebGL fold effect. Reflecting on my previous experience with Impossible Bureau, I replicated this effect based on a comprehensive case study by Davide Perozzi from Codrops. I designed a system that allowed folding in multiple directions by applying vector projection to control the fold’s angle.
The function curlPlane successfully transformed linear positions into curved ones using advanced circular arc mathematics. By applying a subtle fake shadow based on curvature, the effect felt more three-dimensional, enhancing the sense of realism.
3D Characters: From Concept to Reality
As I experimented further, I knew I wanted to include a 3D character. This addition stemmed from my long-standing interest in 3D animations. Using Mixamo for character design, I aimed to create dynamic interactions, including dialogue with subtitles and animated movements.
To embed the 3D scene within a defined area, I employed the MeshPortal technique. This setup allowed for flexible positioning and dynamic updates, creating engaging experiences across sections.
Hash-Based Navigation for Seamless Experience
To enhance user experience, I adopted hash-based navigation. This method allowed smooth transitions with unique section identifiers while maintaining browser history integrity. By structuring the website as a single-page application, I achieved an efficient workflow, transitioning between sections with smooth animations.
Dynamic Animations and Scrolling Effects
As I honed my designs, I focused on creating animations that resonated with my character’s presence. I developed a velocity-based stretch effect for project titles that changed dynamically based on scrolling speed, seamlessly adding a sense of depth and interactivity.
Further, I introduced parallax-like lines in the cube that housed the character, providing an additional layer of immersive experience with depth-driven animations.
Think Outside the Box: A Unique Approach
With the foundational elements in place, I sought originality in the about and contact pages. Instead of presenting the screen as static, I transformed it creatively into large letter shapes that would act as a mask, utilizing morphing effects for a captivating visual narrative.
By using GSAP’s MorphSVG plugin, I ensured smooth transitions between shapes, blending aesthetics with performance to maintain a visually striking experience.
Closing the Loop: Personal Touches
For the contact page, I wanted to bring the entire experience full circle. Synchronizing the portal effect with DOM elements allowed for seamless interactions, culminating in a compelling invitation to connect with me. Careful planning and animation with GSAP created a satisfying closure.
Conclusion
Reflecting on this creative journey, I’m immensely proud of the final product. While there are areas for improvement, the website authentically represents me and my artistic vision. I hope this case study inspires you to embark on your creative endeavors and find your unique narrative in web design. If you have technical questions, feel free to reach out.
Related Keywords
- Web design case study
- Creative web development
- UX design principles
- WebGL effects
- 3D animation techniques
- Interactive website features
- Digital storytelling
