Hello everybody, my title is Gabriel Norman. I’m a Artistic Developer based mostly in Italy, extra exactly in a small city close to the attractive Lake Como.
I’ve been working within the trade for almost a decade. I’m presently a part of Energetic Idea, and over time I’ve had the chance to work for studios and businesses reminiscent of MONOGRID, Media.Monks, and Superhero Cheesecake.
Every of those experiences performed a big position in shaping the way in which I strategy growth. Being immersed in numerous groups and manufacturing environments allowed me to watch not solely their strengths, but in addition their limitations, their imaginative and prescient, workflows, artistic tradition, and organizational programs. This publicity had a excessive influence on my development, pushing me to soak up as a lot as attainable and steadily outline my very own working technique and mindset.
My Story
My ardour for growth, and particularly for movement and 3D, has roots that return a lot additional than my skilled profession.
In 2011, on the age of fifteen, I started experimenting with visible creation by YouTube banner designs. Utilizing a mixture of Photoshop and Cinema 4D, I entered a world that, on the time, was closely influenced by gaming tradition, notably Name of Responsibility, which I used to be enthusiastic about.
The YouTube group was thriving, and creating customized banners grew to become a means for a lot of younger creatives to specific themselves.
Whole communities fashioned round this observe. There have been contests, collabs, and even artistic teams devoted to what was then generally known as “GFX”. Very similar to gaming clans, these circles promoted a powerful sense of belonging. I spent a number of years in that atmosphere, drawn by each the artistic freedom and the sensation of being a part of one thing bigger.
Shortly after, I took an interest within the “Every day 3D” tradition, specializing in static visuals. Animation at all times fascinated me, however on the time I felt extra comfy working with nonetheless imagery and exploring concepts at my very own tempo.
After numerous early work experiences, together with graphic design, I started finding out frontend growth as a self-taught self-discipline round 2018. That section didn’t really feel like a dramatic revelation, however fairly a gradual pull towards one thing that naturally mixed my “code curiosity” with my visible background.
Earlier than lengthy, I discovered myself naturally gravitating towards the extra expressive facet of growth: movement, interplay, and 2D/3D animation. In some ways, it felt like closing a circle, reconnecting with that early fascination for visible experimentation, however by a extra structured and technical lens.
I feel that’s sufficient concerning the journey, let’s check out among the tasks I’ve labored on in recent times.
Featured Works
Gianluca Gradogna – Portfolio
Shopper: Gianluca Gradogna
Position: Solo dev
Awards: Awwwards SOTD, Dev Award, Portfolio Honors, FWA of the day
Dwell hyperlink: https://gianlucagradogna.com/
This mission grew out of a private collaboration with an in depth buddy of mine, who can also be a proficient designer. The intention was to craft a portfolio that felt assured and editorial, with a powerful emphasis on typography and visible stability. The design efficiently merges the 2 disciplines that greatest symbolize Gianluca’s work, design and images.
As a solo developer, I used to be liable for the complete implementation, from mission structure to movement logic, making certain that interactions and transitions supported the typographic construction with out feeling too cheesy.
Tech stack: Nuxt.js, GSAP, SCSS
Loro Piana – at Harrods
Studio: MONOGRID
Position: Solo dev
Awards: FWA of the day, CSS of the Day
Dwell hyperlink: https://festivequest.loropiana.com/
This mission was created to assist Loro Piana’s centenary marketing campaign celebrated at Harrods in London throughout the Christmas season. The manufacturing was divided into two distinct phases.
The primary section concerned constructing an interactive WebGL touchdown web page designed to preview the expertise and introduce the visible language of the mission. Shortly after, the second section targeted on the mobile-only expertise, a Christmas-themed quiz. Customers visiting Harrods have been invited to comply with a predefined path by the Loro Piana window shows, looking for solutions “hidden” within the bodily set up.
Probably the most participating elements of the mission was recreating the touchdown web page animations utilizing Theatre.js, translating movement ideas initially developed by the 3D and design groups into an interactive, real-time expertise.
Tech stack: Vue.js, GSAP, SCSS, Three.js, Theatre.js, Howler.js, Rive.app
Dolce & Gabbana – Magnificence Velvet
Studio: MONOGRID
Position: Predominant dev with crew assist on infrastructure and CMS setup
Awards: Awwwards SOTD, Dev Award, Portfolio Honors, FWA of the day, CSS Design Awards
Dwell hyperlink: https://beautytools.dolcegabbana.com/en-it/velvet
Velvet Assortment is a part of a broader platform composed of a number of experiences, primarily designed for in-store utilization through staff-operated tablets. The system features as a digital magnificence assistant, providing guided product discovery and tailor-made suggestions.
Velvet is the title of Dolce & Gabbana’s non-public perfume assortment. The target was to design an immersive WebGL expertise able to conveying the id of the perfumes whereas permitting customers to discover accords, combos, and the perfumers behind every creation, a tribute to craftsmanship and sensory storytelling.
From a technical perspective, the mission required a customized CMS to handle copy and WebGL belongings, alongside growth for desktop, pill (a key platform), and cellular. Moreover, an in-store companion expertise was carried out utilizing WebSockets, enabling real-time synchronization between tablets utilized by employees and a bigger show reflecting the person’s picks throughout the discovery section.
Tech stack: Vue.js, GSAP, SCSS, Three.js, Howler.js, Rive.app, Customized MONOGRID CMS
Acura – Unlock your power
Studio: MONOGRID
Position: Lead dev, duo with David Ronai (WebGL)
Awards: Awwwards SOTD, FWA of the day, CSS of the Day
Dwell hyperlink: https://acuraunlockyourenergy.com/
This was some of the creatively aligned and fast-paced tasks I’ve labored on. The shopper’s visible course resonated strongly with my very own aesthetic preferences, which made the manufacturing course of notably pleasant.
The mobile-only expertise revolved round a personality-driven quiz designed to disclose a shade and id profile for every person. Constructed by a number of iterations of modular quiz parts, the mission advanced right into a extremely expressive piece, drastically supported by the design crew and the unbelievable David Ronai’s WebGL work.
The expertise was later expanded with a selfie-based function that allowed customers to generate a themed share card incorporating their very own picture, including a playful and personalised layer to the interplay.
Tech stack: Vue.js, GSAP, SCSS, Three.js, Canvas 2D, Howler.js
Gucci Magnificence – Needs
Studio: MONOGRID
Position: WebGL dev
Awards: Awwwards SOTD, Dev Award, FWA of the day, CSS of the Day, DDA of the 12 months
Dwell hyperlink: https://guccibeautywishes.gucci.com/
Gucci Magnificence Needs was the results of an intensive crew effort, with a small group devoted to the mission for almost three months. The prolonged manufacturing timeline allowed for an preliminary analysis section, serving to us outline how one can translate the shopper’s marketing campaign video into an interactive expertise.
The mission was structured into two primary phases: an exploratory discovery sequence inside a backyard, adopted by a quiz-driven interplay introduced from a zenithal, top-down perspective above a lake. Improvement started with the WebGL atmosphere of the backyard. Digital camera motion was dealt with by a dual-spline system controlling place and look-at conduct. This was then linked to scroll and mouse-driven interactions.
As soon as the foundational mechanics have been established, the main target shifted towards creating and refining 3D belongings and customized shaders for parts reminiscent of water, sky, aurora results, vegetation, particles, and flowers. The cursor interplay was carried out utilizing a system the place level particles have been mapped into 3D house relative to digicam depth and mouse place.
For the quiz section, a part of the backyard atmosphere was rendered to a render goal and projected onto the water floor, permitting visible continuity between the 2 sections of the expertise.
This mission felt notably formative from a efficiency standpoint. Given its meant in-store utilization, optimization throughout telephones and tablets was crucial, requiring balancing between visible high quality and responsiveness.
Tech stack: Vue.js, GSAP, SCSS, Three.js, Howler.js
Gucci – Burst
Studio: Superhero Cheesecake
Position: Frontend/WebGL dev
Awards: Awwwards SOTD, Dev Award, FWA of the day
Dwell hyperlink: https://www.awwwards.com/websites/gucci-burst
This mission marked my first collaboration with Superhero Cheesecake. The expertise, designed with a mobile-first strategy, aimed to introduce a brand new Gucci basketball sneaker by a playful, game-oriented interplay.
Preliminary explorations thought-about a 2D or 2.5D isometric strategy, however the course shortly shifted towards a totally 3D resolution utilizing Three.js. The mission was developed by a duo crew consisting of myself and the tech lead.
After the creation of a sport system to handle scoring and circulate logic, the remaining work centered on designing and assembling minimalistic scenes. An fascinating manufacturing element was using Google Spreadsheets to outline degree configurations: three columns represented the sport lanes (high, mid, backside), whereas dropdown picks allowed designers and producers to assign obstacles or empty areas, making a easy / versatile content material pipeline.
Tech stack: Subsequent.js, GSAP, SCSS, Three.js, Howler.js
Last Ideas
There’s a quote that has resonated deeply with me in recent times: “When a beast begins its day, it doesn’t know its full plan, it merely leaves and begins harvesting honey. Birds do the identical. They don’t map the complete journey, they transfer, modify, and reply.”
In my view, artistic growth typically works the identical means. Not each mission wants a superbly outlined plan from the beginning. Typically, shifting ahead with consideration and care is sufficient. The construction reveals itself alongside the way in which by iteration, commentary, and belief within the course of. (Typically, having no plan is the perfect plan. I is probably not the perfect particular person to say it, however I’m beginning to consider it)
I wish to thank the employees of Codrops for this chance. It is extremely a lot appreciated.
Should you’d like to achieve out, you will discover me on LinkedIn, or discover extra of my work on my portfolio.
