Hello everybody, my title is Gabriel Norman. I’m a Artistic Developer primarily based in Italy, extra exactly in a small city close to the gorgeous Lake Como.
I’ve been working within the trade for practically a decade. I’m at the moment a part of Energetic Concept, and through the years I’ve had the chance to work for studios and companies corresponding to MONOGRID, Media.Monks, and Superhero Cheesecake.
Every of those experiences performed a major position in shaping the way in which I strategy growth. Being immersed in numerous groups and manufacturing environments allowed me to look at not solely their strengths, but in addition their limitations, their imaginative and prescient, workflows, inventive tradition, and organizational techniques. This publicity had a excessive influence on my progress, pushing me to soak up as a lot as doable and regularly outline my very own working methodology 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 via 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, significantly Name of Obligation, which I used to be keen about.
The YouTube group was thriving, and creating customized banners turned a manner for a lot of younger creatives to specific themselves.
Complete communities shaped round this observe. There have been contests, collabs, and even inventive teams devoted to what was then generally known as “GFX”. Very similar to gaming clans, these circles promoted a robust sense of belonging. I spent a number of years in that setting, drawn by each the inventive freedom and the sensation of being a part of one thing bigger.
Shortly after, I took an interest within the “Day by day 3D” tradition, specializing in static visuals. Animation all the time fascinated me, however on the time I felt extra snug working with nonetheless imagery and exploring concepts at my very own tempo.
After varied 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 via a extra structured and technical lens.
I feel that’s sufficient in regards to the journey, let’s check out among the initiatives I’ve labored on in recent times.
Featured Works
Gianluca Gradogna – Portfolio
Consumer: Gianluca Gradogna
Function: Solo dev
Awards: Awwwards SOTD, Dev Award, Portfolio Honors, FWA of the day
Reside hyperlink: https://gianlucagradogna.com/
This challenge grew out of a private collaboration with a detailed good friend of mine, who can also be a proficient designer. The intention was to craft a portfolio that felt assured and editorial, with a robust emphasis on typography and visible stability. The design efficiently merges the 2 disciplines that greatest symbolize Gianluca’s work, design and pictures.
As a solo developer, I used to be accountable for the complete implementation, from challenge structure to movement logic, guaranteeing 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
Function: Solo dev
Awards: FWA of the day, CSS of the Day
Reside hyperlink: https://festivequest.loropiana.com/
This challenge was created to help Loro Piana’s centenary marketing campaign celebrated at Harrods in London through 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 challenge. Shortly after, the second section targeted on the mobile-only expertise, a Christmas-themed quiz. Customers visiting Harrods have been invited to observe a predefined path via the Loro Piana window shows, trying to find solutions “hidden” within the bodily set up.
One of the partaking facets of the challenge 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
Function: Important dev with workforce help on infrastructure and CMS setup
Awards: Awwwards SOTD, Dev Award, Portfolio Honors, FWA of the day, CSS Design Awards
Reside 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 challenge required a customized CMS to handle copy and WebGL property, alongside growth for desktop, pill (a key platform), and cellular. Moreover, an in-store companion expertise was applied utilizing WebSockets, enabling real-time synchronization between tablets utilized by employees and a bigger show reflecting the consumer’s choices through the discovery section.
Tech stack: Vue.js, GSAP, SCSS, Three.js, Howler.js, Rive.app, Customized MONOGRID CMS
Acura – Unlock your power
Studio: MONOGRID
Function: Lead dev, duo with David Ronai (WebGL)
Awards: Awwwards SOTD, FWA of the day, CSS of the Day
Reside hyperlink: https://acuraunlockyourenergy.com/
This was probably the most creatively aligned and fast-paced initiatives I’ve labored on. The shopper’s visible path resonated strongly with my very own aesthetic preferences, which made the manufacturing course of significantly fulfilling.
The mobile-only expertise revolved round a personality-driven quiz designed to disclose a coloration and id profile for every consumer. Constructed via a number of iterations of modular quiz parts, the challenge developed right into a extremely expressive piece, drastically supported by the design workforce and the unbelievable David Ronai’s WebGL work.
The expertise was later expanded with a selfie-based characteristic 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
Function: WebGL dev
Awards: Awwwards SOTD, Dev Award, FWA of the day, CSS of the Day, DDA of the 12 months
Reside hyperlink: https://guccibeautywishes.gucci.com/
Gucci Magnificence Needs was the results of an intensive workforce effort, with a small group devoted to the challenge for practically three months. The prolonged manufacturing timeline allowed for an preliminary analysis section, serving to us outline the way to translate the shopper’s marketing campaign video into an interactive expertise.
The challenge 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. Growth started with the WebGL setting of the backyard. Digital camera motion was dealt with via 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 property and customized shaders for components corresponding to water, sky, aurora results, vegetation, particles, and flowers. The cursor interplay was applied utilizing a system the place level particles have been mapped into 3D area relative to digital camera depth and mouse place.
For the quiz section, a part of the backyard setting was rendered to a render goal and projected onto the water floor, permitting visible continuity between the 2 sections of the expertise.
This challenge felt significantly formative from a efficiency standpoint. Given its meant in-store utilization, optimization throughout telephones and tablets was vital, requiring balancing between visible high quality and responsiveness.
Tech stack: Vue.js, GSAP, SCSS, Three.js, Howler.js
Gucci – Burst
Studio: Superhero Cheesecake
Function: Frontend/WebGL dev
Awards: Awwwards SOTD, Dev Award, FWA of the day
Reside hyperlink: https://www.awwwards.com/websites/gucci-burst
This challenge marked my first collaboration with Superhero Cheesecake. The expertise, designed with a mobile-first strategy, aimed to introduce a brand new Gucci basketball sneaker via a playful, game-oriented interplay.
Preliminary explorations thought-about a 2D or 2.5D isometric strategy, however the path rapidly shifted towards a totally 3D answer utilizing Three.js. The challenge was developed by a duo workforce consisting of myself and the tech lead.
After the creation of a sport system to handle scoring and move logic, the remaining work centered on designing and assembling minimalistic scenes. An attention-grabbing manufacturing element was using Google Spreadsheets to outline degree configurations: three columns represented the sport lanes (prime, mid, backside), whereas dropdown choices 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, alter, and reply.”
For my part, inventive growth usually works the identical manner. Not each challenge 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 via iteration, statement, and belief within the course of. (Typically, having no plan is the most effective plan. I might not be the most effective particular person to say it, however I’m beginning to imagine it)
I need to thank the employees of Codrops for this chance. It is vitally a lot appreciated.
Should you’d like to succeed in out, you could find me on LinkedIn, or discover extra of my work on my portfolio.
