Responses by Niccolò Miranda, designer

Background: Design is communication. As a multidisciplinary digital designer, I wanted to create a browsing experience that could showcase my digital capabilities through animated effects and playful illustrations. With this portfolio, I hope to reach a wider audience in order to increase new partnerships with creative agencies from around the world.

Highlights: The homepage. I started with the idea of representing myself with an illustration at different times of the day. Then, I asked Milan-based full-stack developer Luca Mariotti to help me with the development process. Together, we created a “Click & Hold” function that enables color transitions and loads a timeline. To pay homage to my native country, I used Italian proverbs that are associated with the various hours of the day. There is also a hidden element in the site, a “success message” that appears as an illustration of a hand (myself) makes the first contact with another hand (the customer). This illustration signifies Michelangelo’s The Creation of Adam.

Challenges: Synchronizing the easing and the times of the timeline bar on the homepage. In addition, designing a website that would enable simplicity for users through a straightforward interactive navigation, using outstanding visual design to increase the overall browsing experience. I also used playful illustrations to represent reality in a fresh way, with animated effects and micro-interactions to make everything more enjoyable. I chose a sans/grotesque as the font-family, with outline text for headings to make everything more readable and smooth.

Navigational features: To make the navigation more immersive, we added in-and-out reveal effect animation delays between pages. We also created some magnetic icons to switch to the next project, as well as the horizontal navigational menu on the Blog page with a 3-D rotation on hover for single posts.

Technical features: I designed prototypes using Adobe XD and used Adobe Illustrator to draw the illustrations. To develop the site, we used Webflow as the CMS and GSAP as a library for animations, alongside jQuery and WebGL, to create outstanding micro-interactions.