We’re kicking off our Developer Highlight sequence by that includes the sensible Lorenzo, an online developer whose artistic tasks and technical experience encourage us all. This sequence is our approach of shining a light-weight on builders who push boundaries and convey contemporary concepts to the net growth neighborhood.
Hey Codrops neighborhood, I’m Lorenzo Dossi, a movement designer and front-end developer based mostly in Bristol, UK, at the moment working with the proficient group at Lusion.
Final yr I’ve been engaged on some tasks I haven’t shared but, that’s why I’m excited to disclose some behind-the-scenes particulars.
That is my newest private mission. I hadn’t shared it publicly but, however this looks as if the proper digital stage to take action. It’s a portfolio web site for a tremendous proficient former colleague, with whom I shared a desk for 3 years at Basilico, among the finest internet companies in Italy.
A typical criticism of websites printed on Awwwards is that they are typically gradual, stuffed with pointless animations, and have overly complicated UX. This web site represents an try to reveal that it’s potential not to surrender on animations, with out letting them distract from the content material.
For the reason that design is kind of minimal, I spent a number of time fascinated by the precise movement design language for this mission. In the long run, I concluded that the widespread thread needs to be a delicate but assured sequence of vertical actions. Even with out web page transitions, this strategy helps tie the varied pages collectively:
Homepage navigation
The logic is that every mission has a sure variety of photos or movies on the homepage. On hover, solely the photographs belonging to that mission stay in focus, whereas every part unrelated goes out of focus:
Frictionless case-study transitions
Easy navigation is vital to a fantastic UX: once you open a element web page, you scroll by photos and movies, and when you attain the tip, you seamlessly transfer on to the subsequent case research—loading subsequent pages routinely, with zero friction:
DMS (Design Administration System)
Not solely the content material but in addition the positioning’s design is totally configurable by the CMS (Content material Administration System), from how photos are laid out on the homepage to how a lot parallax is added to the case research photos:
Scrollbar makes the content material dance (in a foul approach)
The house web page has no scrollbar, whereas different pages do—resulting in a horizontal shift within the format everytime you navigated between them.
I mounted this concern so anybody shopping with a scrollbar gained’t discover that little leap anymore:
Cell navigation
On cellular, the positioning could be very simple:
Wowtapes was my first main mission, made with the extremely proficient Margherita Fortuna for a number one video manufacturing studio based mostly in Rome. It’s now been on-line for a full yr, and looking out again at it nonetheless makes me extraordinarily proud with the outcome since I additionally had full management of the movement system.
Whereas on luisaruzzenenti.com the movement was minimal and unidirectional—all the time rising from the underside as if working on tracks—right here, the diagonal web page transition units the tone: daring just like the font and fluid like most of the video transitions in wowtapes’ works.
Highlighted function
One among my favourite options of this web site got here to life as an answer to an issue brought on by web page transitions. Though the web page transition impact is visually interesting, it may possibly really feel fairly heavy. To cut back friction when shopping the portfolio, I wanted to discover a approach to forestall customers from being compelled to expertise the web page transition each time they navigate backwards and forwards between the “works” web page and a mission element web page.
The answer I got here up with was utilizing an overlay for every mission. Nonetheless, this launched a brand new problem: because the mission was now displayed solely by an overlay, I nonetheless wanted to discover a approach to make the web page exist independently, permitting the mission web page hyperlink to be shared independently.
To deal with this, I applied a function the place the URL adjustments dynamically when the overlay opens. This fashion, if the hyperlink is shared, and even should you merely refresh the web page whereas the overlay is open, it hundreds the mission as a standalone web page.
Nildo is my very first freelance mission, and I’m very hooked up to it.
It was created round 2022 with Margherita Fortuna, this was the primary mission I labored on along with her. We didn’t know one another on the time, however she nonetheless trusted me and gave me the chance to show that I might full a full stack mission from begin to end.
I’m additionally notably keen on this mission as a result of on the time (I used to be 21) I felt for the primary time that I might compete with the massive gamers, successful my first private award: an FWA.
Highlighted function
One little problem, particularly since I used to be new to backend mechanisms on the time, was dealing with the information entry and the web page hyperlinks for a number of languages. In actual fact, the web site helps knowledge entry in each Italian and English, which signifies that every hyperlink is accessible in each languages—together with all of the associated metadata.
My strategy to work
The 2 primary elements for the websites I construct are movement and design. My focus is on motion—motion justifies the design, reinforces design decisions, and, if accomplished effectively, helps information the consumer’s consideration.
After I begin a brand new mission, I by no means observe a strict step-by-step strategy. As an alternative, I sort out it from completely different angles: textual content reveals, hover animations, web page transitions, and so forth. As quickly as certainly one of these components resonates with the temper of the design, I adapt all the opposite components accordingly.
What’s subsequent?
My purpose now could be to enhance my abilities with the WebGL API, and I consider Lusion is the proper place to realize that. Within the meantime, I don’t need to cease experimenting with different instruments: Blender, Houdini, and After Results are on the prime of my listing.
Last Ideas
I’ve been an enormous reader of this web site for years, utilizing it to discover and research new methods, so I’m really honored to have had the prospect to share a few of my work right here.
If you wish to join be at liberty to put in writing me on X @lorenzodossi
Thanks a lot to the Codrops group and all the neighborhood!
