Case Study: Dondre Green

The website we crafted for Dondre Green is a minimalist portfolio designed to showcase the multidisciplinary work of Dondre, a creative specializing in photography, filmmaking, and other visual arts. The goal was to create a space that mirrored Dondre’s artistic vision: clean, thoughtful, and deeply expressive. It needed to highlight his diverse portfolio while maintaining a seamless and intuitive user experience.

Conception

The project began with a clear creative direction:

1. Storytelling Through Design: The website should tell Dondre’s story visually and emotionally, much like his art.
2. Minimalism with Impact: The design philosophy focused on simplicity, allowing the art to take center stage.
3. Seamless Accessibility: The platform needed to work effortlessly across devices, ensuring that viewers could experience the content as intended.

Target Audience:
The site aimed to engage a dual audience: potential collaborators/clients, such as brands or agencies, and fans of Dondre’s creative work. Both audiences would expect a polished, professional presentation with a distinct artistic flair.

Design Approach

1. Visual Aesthetic

Inspired by the timelessness of black-and-white photography, the main color palette is restrained, focusing on monochromatic tones with subtle accents. This enhances the artwork’s impact, whether it’s photography or film, by avoiding visual distractions. However, during the colour exploration, we decided on introducing theme flexibility, where users can customize their interaction with the site to suit their preferences. This allows users to toggle between multiple color themes that completely transform the mood of the website while keeping the content consistent. The themes include:

1. Bold Monochrome: A sleek black background with cream text creates a professional, gallery-like presentation.
2. Earthy Olive and Mustard: Inspired by nature, these tones give a grounded, creative feel.
3. Warm Brown and Peach: Evokes a sense of nostalgia and craftsmanship, enhancing storytelling.
4. Deep Blue: A calming palette that provides a modern, clean atmosphere.

Each theme serves as a visual layer of artistic expression, ensuring that the website itself feels as flexible and creative as Dondre’s work.

2. Typography

Typography plays a key role in reinforcing the artistic tone. A combination of serif and sans-serif fonts was used to create contrast and guide user attention. Headings are bold and clean, while body text is understated and readable.

3. Layout

The grid system is modular and responsive, ensuring content is displayed optimally across all screen sizes. The homepage prominently features curated highlights, while deeper navigation offers clear categorization (e.g., photography, filmmaking, about).

A subtle yet intentional design detail is the photo corner lines that form the borders of the page and frame specific content areas. This feature mimics the corner brackets of photography prints or framing guides, reinforcing Dondre’s identity as a visual artist.

• The corner accents guide the user’s focus to central elements, such as the header typography and key works on display.
• This creates a sophisticated, museum-like experience where each section feels deliberate and artfully presented.

4. Interaction Design

Subtle animations, such as hover effects and smooth scrolling transitions, were implemented to add polish without detracting from the minimalist aesthetic. These interactions create a tactile, engaging experience for users.

Development Process

Preloader & Transition: Cinematic Introduction

The preloader delivers a visually captivating entry animation, designed not only to entertain but also to engage users during the page load. It begins with a grid of scattered letters, with the phrase “DONDRE GREEN” subtly overlaid. As the preloader animates, the grid of random characters gradually sharpens, revealing the hero text in full clarity.

Key Features:

• A grid of random letters fills the screen, with reserved spots for the hero text.
• As the animation progresses, the letters reserved for “DONDRE GREEN” fade in sharply, while others blur and fade out, creating a dynamic contrast.
• Utilizing GSAP’s Flip plugin, the letters transform into the hero text seamlessly, maintaining visual continuity across the transition.

The preloader is more than just a functional tool—it sets the tone for the entire site by blending creativity with a unique visual identity, ensuring that users are engaged and ready for the content to come.

The page transition introduces a cinematic flair by mimicking the closing and opening of a camera shutter. Through a dynamic mask that reshapes in sync with the animation, the effect evokes the motion of a shutter closing inward and expanding outward. This transition sets the stage for a seamless, immersive experience.

On-Scroll Interactions

Powering the on-scroll interactions are GSAP ScrollTrigger and the Lenis smooth-scroll library. The hero section utilizes scroll animations that transform the user’s experience as they move through the page.

As users scroll, the title text shifts to the top left corner, where it acts as the logo, while the images align to the center. Further scrolling reveals more dynamic effects: one image rises to the top, covering the next section, while others fade away. The section title becomes pinned to the viewport, and content such as images and descriptions animate into view, guiding the user smoothly into the next section.

Key Features:

• Images resize, fade, and blur based on their position within the viewport, becoming sharp and focused as they reach the center.
• GSAP and ScrollTrigger bring this interaction to life, responding in real-time to the user’s scroll, enhancing engagement without interruption.
• The design adapts fluidly across screen sizes, ensuring smooth performance and visual impact.

These subtle but powerful scroll interactions create an immersive experience, making the user feel like an active participant in the journey through the site.

Works Page: Interactive Portfolio

The Works page showcases Dondre Green’s diverse portfolio, offering unique interactive elements across multiple sections.

Photography Section

The photography section allows users to toggle between grid and gallery views. In grid view, the photos are presented in a clean, organized layout, ideal for quick browsing. The gallery view offers a more immersive experience, with images in the background gently blurred to create depth while keeping the currently focused image sharp.

Key Features:

• Grid and gallery toggle views offer flexibility, allowing users to customize their browsing experience.
• Infinite scrolling ensures users can explore the collection without interruption, while focused images stand out against a subtly blurred background.

Works Preview Page

Unlike traditional vertical scrolling, the work preview page scrolls horizontally. This unconventional approach mimics the experience of flipping through a gallery or cinematic reel. As users scroll horizontally through the image gallery, on getting to the end the next project reveals in a seamless way similar to how you would unbox a product. This ensures that every project feels connected, providing a continuous narrative flow rather than segmented stops.

Short Films Section

For the short films section, the portfolio offers the option to toggle between three grid layouts: 1, 2, or 3 columns. This flexibility accommodates different viewing preferences, whether users want a minimalist layout for a single film or a broader view for multiple projects at once.

Key Features:

• Customizable grid layouts (1, 2, or 3 columns) for short films cater to different viewing preferences.
• Clean and cinematic presentation emphasizes the quality of the work while maintaining a cohesive layout.

This combination of interactive elements, flexible layouts, and engaging design creates a portfolio that not only showcases Dondre Green’s work but also offers a memorable, immersive experience for users.

Stories Page: Hover and WebGL Interaction

On the Stories page, a visually striking hover animation takes center stage. As users hover over an element, it sharpens and becomes the focal point, while the surrounding items gently blur and fade. This ensures that attention stays exactly where it’s needed.

Enhancing this interaction is a smooth WebGL displacement effect. Upon hovering, the associated image gradually appears as though it is being revealed, adding depth and fluidity to the experience. Combined with the subtle fading and blurring of other elements, this effect creates a dynamic, immersive interaction that feels responsive and engaging.

Key Features:

• Hover effects sharpen the hovered element while blurring and fading surrounding items, drawing attention where it matters most.
• A WebGL displacement effect adds depth, revealing images gradually for a seamless experience.
• The overall interaction ensures a fluid, immersive journey through the content.

The hover and displacement effects keep the user engaged, making navigation feel like a dynamic and interactive experience.

Interactive 404 Page

The 404 page is a creative and interactive extension of the site’s overall design philosophy: artful simplicity with a touch of playfulness. Instead of displaying a static error message, the page uses an engaging unblur effect to transform an otherwise frustrating experience into an intriguing interaction.

Key Features:

1. Blurred Background Design:
   • The prominent “404” message is intentionally blurred, creating a sense of mystery and curiosity.
   • The design stays consistent with the site’s visual identity, using the same monochromatic theme and minimalistic typography.
2. Cursor Interaction:
   • As the user moves their cursor across the page, the area under the pointer gradually unblurs to reveal sharp text and details.
   • This subtle but captivating feature invites the user to engage, turning a common error page into a more exploratory, playful moment.
3. Guidance to Navigation:
   • Below the blurred “404” message, a clear and elegant call-to-action directs users to “Go back home,” ensuring smooth navigation to the homepage.
   • The text, styled with serif typography, maintains the site’s sophisticated aesthetic.

The interactive 404 page does more than acknowledge a missing page—it reflects Dondre’s creative ingenuity and attention to detail. By transforming a typically negative encounter into a moment of curiosity and engagement, it:

• Delights the User: Visitors experience a small but memorable interaction that feels intentional and polished.
• Aligns with the Brand: The page reinforces DonDre’s artistic identity through subtle design elements and interactivity.
• Reduces Frustration: Instead of feeling lost, users are guided gently back to the main site.

This innovative approach to the 404 page ensures that even unexpected detours on Dondre’s site feel like part of the journey, reflecting the same thoughtful artistry found throughout the rest of the site.

Tech Stack

• Built on Webflow
• GSAP for animation
• Lenis for smooth scrolling
• Three.js for WebGL interactions
• Barba.js for Page Transitions

Conclusion

The creation of Dondre Green’s portfolio was a deliberate exercise in balancing artistry with functionality. The website successfully mirrors Dondre’s creative essence, offering a visually dynamic, immersive, and customizable experience. By implementing features like theme switching, dual layout views, and subtle design elements such as corner lines, the platform transforms into a digital gallery that invites users to explore and connect with Dondre’s work.

The result is a seamless portfolio experience where content shines, interaction feels intuitive, and the artistic voice remains authentic. The site doesn’t just showcase Dondre’s work; it becomes an extension of it — thoughtful, refined, and impactful.

Credits

Studio: The Blackpepper Studio

Branding: Asmah Mansur-Williams

Creative Direction & Design: Nkenna Amadi & Victor Adebisi

Web Development: Josiah Etuk