Undertaking backstory
Pell Mell began from a fairly easy remark. There are plenty of portfolio web sites, however most of them are constructed the identical method. Clear grids, filters, classes, however little or no feeling.
The preliminary thought was to not construct one other listing of artists. It was to rethink how artistic work is found. One thing much less static, much less structured in look, even when the underlying system is definitely very strict. The mission was additionally closely influenced by editorial design. The intention was to create one thing that feels nearer to looking {a magazine} than navigating a platform.
By way of timing, the mission moved fairly quick on paper, however many of the work was within the particulars. Loads of iterations occurred round rhythm, spacing, movement, and the way content material seems on scroll.
One of many important turning factors was realizing that the interface needed to disappear. Originally, there have been extra UI components, extra controls. Step-by-step, all the things was eliminated till solely what was strictly obligatory remained.
Tech stack & instruments
The stack was stored comparatively easy on objective. The aim was to have full management over efficiency and habits. On the front-end, the mission is constructed with a component-based structure. Every part is modular and reusable, which makes the system simpler to scale.
const revealElements = doc.querySelectorAll('.reveal');
revealElements.forEach((el) => {
const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
el.classList.add('seen');
}
});
observer.observe(el);
});Animations are dealt with in a light-weight method. As an alternative of counting on heavy frameworks, most interactions are primarily based on native APIs and easy logic like Intersection Observer.
Media dealing with can also be necessary. A big a part of the content material is video, so utilizing Vimeo allowed us to maintain high quality excessive whereas sustaining quick loading instances.
On the styling aspect, all the things is constructed round a easy grid and spacing system. No pointless abstraction, simply clear guidelines utilized constantly.
First impression issues
The loader is brief, but it surely units all the things. It introduces the rhythm of the location earlier than something is even seen. It’s not only a technical step. It’s a part of the expertise. It prepares the consumer for what comes subsequent.
Characteristic breakdowns
There are not any “massive” options within the conventional sense. The mission is extra a couple of assortment of small interactions that collectively create a coherent expertise.
Hover states are a great instance. They’re easy, however they add a continuing layer of suggestions.
.card {
transition: remodel 0.5s ease, opacity 0.5s ease;
}
.card:hover {
remodel: scale(1.03);
opacity: 0.9;
}One other necessary aspect is the reveal system. Virtually each block seems progressively as you scroll.
.reveal {
opacity: 0;
remodel: translateY(40px);
}
.reveal.seen {
opacity: 1;
remodel: translateY(0);
transition: all 0.8s ease;
}This retains the expertise dynamic with out changing into overwhelming.
Visible & interplay design
The entire mission is constructed round circulate. Every little thing is scroll-driven. There are not any abrupt transitions, no laborious cuts between sections. The concept is all the time to information the attention with out forcing it.
Animations are mushy, barely delayed, usually staggered. This creates a rhythm that feels pure.
Typography performs an enormous position right here. The selection of a Displaay typeface like Season permits the interface to hold a powerful id with out including graphic components.
The kind was barely adjusted to behave nearly like a logotype, after which used throughout your complete interface. It turns into each a structural and visible aspect.
Darkish mode was additionally a part of the design from the start. Not as a characteristic, however in its place temper. The construction stays the identical, however the notion adjustments.
You arrive, you begin scrolling, and the expertise unfolds. This adjustments the way in which you design all the things. You don’t information an excessive amount of. You don’t over-explain. You let the consumer transfer via the content material at their very own tempo.
An nearly invisible navigation
Navigation exists, but it surely by no means turns into the main target. There isn’t a heavy menu, no complicated construction. The principle entry factors are all the time accessible, however they don’t interrupt the expertise. If customers begin counting on the navigation an excessive amount of, it often means one thing is unsuitable within the circulate. The aim is that more often than not, folks don’t take into consideration how they transfer via the location. They only do.
Structure & construction
Behind the visible simplicity, the construction may be very organized. Your complete system is predicated on a couple of core entities: artists, initiatives, classes. Every little thing else is derived from that.
const Undertaking = {
title: "Moncler",
artist: "Styleframe",
class: "Luxurious",
media: "video"
}This makes the platform straightforward to scale and appropriate with a CMS.
The CMS logic itself was designed with constraints. As an alternative of giving full freedom, we outlined blocks that may be mixed.
const blocks = [
"hero",
"artistGrid",
"projectHighlight",
"textBlock"
];This permits flexibility with out breaking the design.
Efficiency was additionally a key a part of the structure. Photographs are lazy-loaded, movies are externalized, and animations stay light-weight.
<img src="thumbnail.jpg" loading="lazy" />The aim was to maintain all the things quick, even with a considerable amount of visible content material.
About & Contact pages notes
The About web page is the place the tone shifts barely. It turns into extra private, extra direct. It’s additionally the place the founder turns into extra seen.
The Contact web page was handled with the identical degree of consideration as the remainder. It’s not a secondary web page. It’s a part of the expertise.
The 404 web page is extra of a signature. It’s a small second the place the system can break a bit and present character.
Designed for the actual cell context
From the beginning, the mission was designed with cell in thoughts. Not as an adaptation, however as a main context. The interface needed to stay easy, readable, and fluid on smaller screens. Navigation was lowered to the necessities, with a backside menu that stays accessible with out breaking the circulate of the expertise. It permits customers to maneuver via the platform with out having to consider construction or hierarchy. Loads of consideration was additionally given to how content material scales. Photographs stay massive, immersive, and aesthetic, even on cell. Nothing feels compressed or secondary. The visible expertise stays intact.
Efficiency was a key constraint as properly. Video content material is dealt with via Vimeo, which permits us to maintain loading instances quick and steady whereas sustaining a excessive degree of high quality. The aim was easy. The cell model mustn’t really feel like a lighter model of the desktop expertise. It ought to really feel simply as full, simply tailored to a unique method of navigating.
Reflections
What labored properly is the general coherence. Each small resolution provides as much as one thing that feels constant. What was tougher was discovering the appropriate stability between simplicity and character. Eradicating components is simple, however figuring out what to maintain is way tougher.
Efficiency was additionally a continuing constraint. With that a lot visible content material, it’s straightforward to gradual all the things down. If one thing needed to be rethought, it might in all probability be pushing some interactions additional, whereas nonetheless holding the identical degree of restraint.
Ultimately, the mission is much less about options and extra about how all the things connects. It’s not a static web site; it’s a system that may evolve.
Credit
Consumer: Pell Mell
Company: Le Fruit
Design Staff: Gaspard Silvestre – Paul Sirand – Ludmilla Maury
Movement Designer: Gaspard Silvestre
Developer: Emma Houlé
