The Paffi portfolio web site is a celebration of ten years of remarkable initiatives crafted by Silvia and Giulia, the 2 co-founders and model designers behind Paffi.
Our imaginative and prescient for the positioning had two key aims: to create a seamless, pleasing searching expertise and to replicate Paffi’s vibrant, playful design method.
For the homepage slider, we needed one thing dynamic and fascinating, whereas protecting the deal with every undertaking’s distinctive property. This led us to the concept of a rotating, modular slider that showcases the logotypes and model colours of every featured undertaking. We named it the “Totem Slider.”
It’s possible paying homage to some Escher-like, orthographic buildings I’ve encountered over time. Listed here are a couple of examples.
Graphic artwork and movement graphics have all the time been a wealthy supply of inspiration for this kind of design.
Deconstructing the Totem Slider: The Vertical Dice Slider
Now, let’s dive into the deconstruction of the Totem Slider.
We begin with a easy vertical slider composed of cubes. Whereas its look won’t appear significantly advanced, the true problem lies in creating interactions which are ultra-smooth. The purpose is to introduce a way of springiness and playfulness, that are key to reaching the specified dynamic really feel.
Subsequent, we apply a rotation to the cubes, together with a refined scaling impact, primarily based on their distance from the middle.
Now, we introduce deformation to the cubes by rotating their XZ elements across the heart. When the cubes have a enough variety of vertices, this transformation seems {smooth}, enhancing the general fluidity of the slider.
To attain an additional {smooth} look, we introduce a refined distortion, giving the cubes a springy, elastic really feel.
With the core interactions full, it’s time to make the cubes shine. However not like a diamond—as a substitute, we’re aiming for a “low-poly” aesthetic, with easy lighting and mushy gradients.
To attain this, we add a refined vertical gradient to the cubes.
Subsequent, we apply easy diffuse lighting to provide the cubes a bit extra pop. The sunshine supply is positioned barely to the correct of the digital camera, which causes the left aspect of the cubes to seem darker, including depth and distinction to the general look.
The final contact is a refined fade on the high and backside of the display. This impact softens the sides of the slider, making a smoother transition because the cubes transfer out and in of view.
After fine-tuning the colours, lighting, and springiness, right here’s the ultimate consequence:
The gradients and lighting are stored refined, including depth and softness to counterbalance the cubes’ sharp edges. The identical idea applies to the bouncy animations, which distinction properly with the rigidity of the cubes.
Et voilà!
Visti the Paffi web site to see all of it in motion.
Credit: Design Luca Franceschetti – Improvement Nicolas Bouvet
