Loading ...

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.

Technology: React, styled-components and Anime.js form the core of the project.

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.

Making a dark-mode transition is harder than you might think. The goal here was to sync the dark-mode setting with both the OS and website settings: in other words, if you change your OS settings during runtime, the website must react to it. But at any moment, you can force a different state by clicking on the “dark mode” toggle button. To get this result, the dark mode is taken from a state—instead of a media query—except on the first landing. Once you interact with the toggle button, an opposite state is forced to the initial one. Similarly, when you change your OS settings, a JavaScript listener syncs the matches with the website. The result is a smooth, unexpected transition.

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.

sabato.studio

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In