Responses by Sabato Urciuoli.
Background: After more than ten years working in design studios and product companies across Europe, I felt it was the right time for me to start an adventure freelancing in London. As soon as I took this leap, having a portfolio that truly represented my approach with a strong link to my brand identity was a top priority. The website needed to help clients, directors and recruiters understand my process behind every design project I’ve worked on in the past.
Special effects: The custom cursor works as an emitter of small particles that are colored according to the case reference. Each dot behaves like a particle with a random lifecycle, position and color. The hue of each dot is slightly modified to obtain a variegated palette. Given the amount and speed of dots creation, it was necessary in this case to bypass React using the native DOM API.
The main navigation links store the position of the clicks for future sessions. To achieve this effect, a slice of the state remains synchronized with the local-storage. The dots are directly placed inside an SVG, in order to obtain a minimum number of browser repaints.
Favorite details: How developer Lorenzo Migliorero and I transformed my brand identity into something interactive. The use of the dots and the circle as a basic shape is quite unique. From the custom cursor to the page transitions, everything reflects these ideas of quality and consistency behind the overall experience.
New lessons: We had countless overnight meetings to discuss all the interactions in detail and to influence each other without precluding any new ideas on the way. I think if you have a clear direction in mind, but at the same time, you are still open to explore different solutions—even when it can be tricky—that can bring unexpected results.
Navigation structure: It’s quite straightforward: there is a list of case studies, an about page and a process page. The tricky part was not to overload the user with the case study section, and for this reason, I decided to have a process page that explains my overall approach in words and diagrams. These connect a password-protected PDF to each case study that dives deeply into each of my projects.