The web site we crafted for Dondre Inexperienced is a minimalist portfolio designed to showcase the multidisciplinary work of Dondre, a artistic specializing in images, filmmaking, and different visible arts. The objective was to create an area that mirrored Dondre’s inventive imaginative and prescient: clear, considerate, and deeply expressive. It wanted to focus on his numerous portfolio whereas sustaining a seamless and intuitive person expertise.
Conception
The challenge started with a transparent artistic path:
- Storytelling By way of Design: The web site ought to inform Dondre’s story visually and emotionally, very like his artwork.
- Minimalism with Influence: The design philosophy targeted on simplicity, permitting the artwork to take heart stage.
- Seamless Accessibility: The platform wanted to work effortlessly throughout units, making certain that viewers might expertise the content material as supposed.
Goal Viewers:
The positioning aimed to have interaction a twin viewers: potential collaborators/shoppers, akin to manufacturers or businesses, and followers of Dondre’s artistic work. Each audiences would anticipate a refined, skilled presentation with a definite inventive aptitude.
Design Method
1. Visible Aesthetic
Impressed by the timelessness of black-and-white images, the primary colour palette is restrained, specializing in monochromatic tones with refined accents. This enhances the paintings’s affect, whether or not it’s images or movie, by avoiding visible distractions. Nevertheless, through the color exploration, we selected introducing theme flexibility, the place customers can customise their interplay with the positioning to go well with their preferences. This permits customers to toggle between a number of colour themes that utterly rework the temper of the web site whereas holding the content material constant. The themes embrace:
- Daring Monochrome: A glossy black background with cream textual content creates knowledgeable, gallery-like presentation.
- Earthy Olive and Mustard: Impressed by nature, these tones give a grounded, artistic really feel.
- Heat Brown and Peach: Evokes a way of nostalgia and craftsmanship, enhancing storytelling.
- Deep Blue: A relaxing palette that gives a contemporary, clear environment.
Every theme serves as a visible layer of inventive expression, making certain that the web site itself feels as versatile and artistic as Dondre’s work.
2. Typography
Typography performs a key function in reinforcing the inventive tone. A mix of serif and sans-serif fonts was used to create distinction and information person consideration. Headings are daring and clear, whereas physique textual content is simple and readable.
3. Structure
The grid system is modular and responsive, making certain content material is displayed optimally throughout all display sizes. The homepage prominently options curated highlights, whereas deeper navigation gives clear categorization (e.g., images, filmmaking, about).
A refined but intentional design element is the photograph nook strains that type the borders of the web page and body particular content material areas. This characteristic mimics the nook brackets of images prints or framing guides, reinforcing Dondre’s id as a visible artist.
- The nook accents information the person’s focus to central parts, such because the header typography and key works on show.
- This creates a classy, museum-like expertise the place every part feels deliberate and artfully offered.
4. Interplay Design
Refined animations, akin to hover results and {smooth} scrolling transitions, have been carried out so as to add polish with out detracting from the minimalist aesthetic. These interactions create a tactile, participating expertise for customers.
Improvement Course of
Preloader & Transition: Cinematic Introduction
The preloader delivers a visually charming entry animation, designed not solely to entertain but in addition to have interaction customers through the web page load. It begins with a grid of scattered letters, with the phrase “DONDRE GREEN” subtly overlaid. Because the preloader animates, the grid of random characters steadily sharpens, revealing the hero textual content in full readability.
Key Options:
- A grid of random letters fills the display, with reserved spots for the hero textual content.
- Because the animation progresses, the letters reserved for “DONDRE GREEN” fade in sharply, whereas others blur and fade out, making a dynamic distinction.
- Using GSAP’s Flip plugin, the letters rework into the hero textual content seamlessly, sustaining visible continuity throughout the transition.
The preloader is greater than only a practical software—it units the tone for the whole website by mixing creativity with a novel visible id, making certain that customers are engaged and prepared for the content material to return.
The web page transition introduces a cinematic aptitude by mimicking the closing and opening of a digital camera shutter. By way of a dynamic masks that reshapes in sync with the animation, the impact evokes the movement of a shutter closing inward and increasing outward. This transition units the stage for a seamless, immersive expertise.
On-Scroll Interactions
Powering the on-scroll interactions are GSAP ScrollTrigger and the Lenis smooth-scroll library. The hero part makes use of scroll animations that rework the person’s expertise as they transfer by way of the web page.
As customers scroll, the title textual content shifts to the highest left nook, the place it acts as the emblem, whereas the photographs align to the middle. Additional scrolling reveals extra dynamic results: one picture rises to the highest, protecting the following part, whereas others fade away. The part title turns into pinned to the viewport, and content material akin to pictures and descriptions animate into view, guiding the person easily into the following part.
Key Options:
- Pictures resize, fade, and blur based mostly on their place inside the viewport, changing into sharp and targeted as they attain the middle.
- GSAP and ScrollTrigger carry this interplay to life, responding in real-time to the person’s scroll, enhancing engagement with out interruption.
- The design adapts fluidly throughout display sizes, making certain {smooth} efficiency and visible affect.
These refined however highly effective scroll interactions create an immersive expertise, making the person really feel like an lively participant within the journey by way of the positioning.
Works Web page: Interactive Portfolio
The Works web page showcases Dondre Inexperienced’s numerous portfolio, providing distinctive interactive parts throughout a number of sections.
Images Part
The images part permits customers to toggle between grid and gallery views. In grid view, the images are offered in a clear, organized format, splendid for fast shopping. The gallery view gives a extra immersive expertise, with pictures within the background gently blurred to create depth whereas holding the at present targeted picture sharp.
Key Options:
- Grid and gallery toggle views provide flexibility, permitting customers to customise their shopping expertise.
- Infinite scrolling ensures customers can discover the gathering with out interruption, whereas targeted pictures stand out in opposition to a subtly blurred background.
Works Preview Web page
Not like conventional vertical scrolling, the work preview web page scrolls horizontally. This unconventional method mimics the expertise of flipping by way of a gallery or cinematic reel. As customers scroll horizontally by way of the picture gallery, on attending to the tip the following challenge reveals in a seamless manner just like how you’ll unbox a product. This ensures that each challenge feels linked, offering a steady narrative stream reasonably than segmented stops.
Quick Movies Part
For the brief movies part, the portfolio gives the choice to toggle between three grid layouts: 1, 2, or 3 columns. This flexibility accommodates completely different viewing preferences, whether or not customers need a minimalist format for a single movie or a broader view for a number of tasks directly.
Key Options:
- Customizable grid layouts (1, 2, or 3 columns) for brief movies cater to completely different viewing preferences.
- Clear and cinematic presentation emphasizes the standard of the work whereas sustaining a cohesive format.
This mixture of interactive parts, versatile layouts, and interesting design creates a portfolio that not solely showcases Dondre Inexperienced’s work but in addition gives a memorable, immersive expertise for customers.
Tales Web page: Hover and WebGL Interplay
On the Tales web page, a visually hanging hover animation takes heart stage. As customers hover over a component, it sharpens and turns into the point of interest, whereas the encompassing objects gently blur and fade. This ensures that spotlight stays precisely the place it’s wanted.
Enhancing this interplay is a {smooth} WebGL displacement impact. Upon hovering, the related picture steadily seems as if it’s being revealed, including depth and fluidity to the expertise. Mixed with the refined fading and blurring of different parts, this impact creates a dynamic, immersive interplay that feels responsive and interesting.
Key Options:
- Hover results sharpen the hovered ingredient whereas blurring and fading surrounding objects, drawing consideration the place it issues most.
- A WebGL displacement impact provides depth, revealing pictures steadily for a seamless expertise.
- The general interplay ensures a fluid, immersive journey by way of the content material.
The hover and displacement results preserve the person engaged, making navigation really feel like a dynamic and interactive expertise.
Interactive 404 Web page
The 404 web page is a artistic and interactive extension of the positioning’s general design philosophy: suave simplicity with a contact of playfulness. As a substitute of displaying a static error message, the web page makes use of an participating unblur impact to remodel an in any other case irritating expertise into an intriguing interplay.
Key Options:
- Blurred Background Design:
- The distinguished “404” message is deliberately blurred, creating a way of thriller and curiosity.
- The design stays in keeping with the positioning’s visible id, utilizing the identical monochromatic theme and minimalistic typography.
- Cursor Interplay:
- Because the person strikes their cursor throughout the web page, the world beneath the pointer steadily unblurs to disclose sharp textual content and particulars.
- This refined however charming characteristic invitations the person to have interaction, turning a standard error web page right into a extra exploratory, playful second.
- Steerage to Navigation:
- Beneath the blurred “404” message, a transparent and chic call-to-action directs customers to “Return house,” making certain {smooth} navigation to the homepage.
- The textual content, styled with serif typography, maintains the positioning’s refined aesthetic.
The interactive 404 web page does greater than acknowledge a lacking web page—it displays Dondre’s artistic ingenuity and a focus to element. By remodeling a usually destructive encounter right into a second of curiosity and engagement, it:
- Delights the Person: Guests expertise a small however memorable interplay that feels intentional and polished.
- Aligns with the Model: The web page reinforces DonDre’s inventive id by way of refined design parts and interactivity.
- Reduces Frustration: As a substitute of feeling misplaced, customers are guided gently again to the primary website.
This revolutionary method to the 404 web page ensures that even sudden detours on Dondre’s website really feel like a part of the journey, reflecting the identical considerate artistry discovered all through the remainder of the positioning.
Tech Stack
- Constructed on Webflow
- GSAP for animation
- Lenis for {smooth} scrolling
- Three.js for WebGL interactions
- Barba.js for Web page Transitions
Conclusion
The creation of Dondre Inexperienced’s portfolio was a deliberate train in balancing artistry with performance. The web site efficiently mirrors Dondre’s artistic essence, providing a visually dynamic, immersive, and customizable expertise. By implementing options like theme switching, twin format views, and refined design parts akin to nook strains, the platform transforms right into a digital gallery that invitations customers to discover and join with Dondre’s work.
The result’s a seamless portfolio expertise the place content material shines, interplay feels intuitive, and the inventive voice stays genuine. The positioning doesn’t simply showcase Dondre’s work; it turns into an extension of it — considerate, refined, and impactful.
Credit
Studio: The Blackpepper Studio
Branding: Asmah Mansur-Williams
Artistic Path & Design: Nkenna Amadi & Victor Adebisi
Net Improvement: Josiah Etuk
