We’re kicking off our Developer Highlight sequence by that includes the sensible Lorenzo, an internet developer whose inventive tasks and technical experience encourage us all. This sequence is our manner of shining a lightweight on builders who push boundaries and produce recent concepts to the net improvement group.
Hey Codrops group, I’m Lorenzo Dossi, a movement designer and front-end developer based mostly in Bristol, UK, presently working with the gifted staff 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 challenge. 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 gifted former colleague, with whom I shared a desk for 3 years at Basilico, the most effective internet companies in Italy.
A typical criticism of web sites printed on Awwwards is that they are usually sluggish, crammed with pointless animations, and have overly advanced UX. This web site represents an try and display that it’s potential not to surrender on animations, with out letting them distract from the content material.
Because the design is sort of minimal, I spent a variety of time desirous about the appropriate movement design language for this challenge. In the long run, I concluded that the frequent thread must be a delicate but assured sequence of vertical actions. Even with out web page transitions, this method helps tie the varied pages collectively:
Homepage navigation
The logic is that every challenge has a sure variety of photographs or movies on the homepage. On hover, solely the photographs belonging to that challenge stay in focus, whereas the whole lot unrelated goes out of focus:
Frictionless case-study transitions
Easy navigation is vital to an important UX: once you open a element web page, you scroll by photographs and movies, and when you attain the tip, you seamlessly transfer on to the following case examine—loading subsequent pages routinely, with zero friction:
DMS (Design Administration System)
Not solely the content material but additionally the location’s design is totally configurable by the CMS (Content material Administration System), from how photographs are laid out on the homepage to how a lot parallax is added to the case examine photographs:
Scrollbar makes the content material dance (in a nasty manner)
The house web page has no scrollbar, whereas different pages do—resulting in a horizontal shift within the structure everytime you navigated between them.
I mounted this concern so anybody searching with a scrollbar received’t discover that little soar anymore:
Cell navigation
On cell, the location could be very easy:
Wowtapes was my first main challenge, made with the extremely gifted 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 consequence since I additionally had full management of the movement system.
Whereas on luisaruzzenenti.com the movement was minimal and unidirectional—at all times 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 characteristic
One among my favourite options of this web site got here to life as an answer to an issue attributable to web page transitions. Though the web page transition impact is visually interesting, it could possibly really feel fairly heavy. To scale back friction when searching the portfolio, I wanted to discover a strategy to forestall customers from being pressured to expertise the web page transition each time they navigate backwards and forwards between the “works” web page and a challenge element web page.
The answer I got here up with was utilizing an overlay for every challenge. Nevertheless, this launched a brand new problem: because the challenge was now displayed solely by an overlay, I nonetheless wanted to discover a strategy to make the web page exist independently, permitting the challenge web page hyperlink to be shared independently.
To deal with this, I carried out a characteristic the place the URL adjustments dynamically when the overlay opens. This manner, if the hyperlink is shared, and even should you merely refresh the web page whereas the overlay is open, it hundreds the challenge as a standalone web page.
Nildo is my very first freelance challenge, and I’m very connected to it.
It was created round 2022 with Margherita Fortuna, this was the primary challenge I labored on together 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 challenge from begin to end.
I’m additionally notably keen on this challenge as a result of on the time (I used to be 21) I felt for the primary time that I might compete with the large gamers, successful my first private award: an FWA.
Highlighted characteristic
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 reality, the web site helps information entry in each Italian and English, which signifies that every hyperlink is out there in each languages—together with all of the associated metadata.
My method to work
The 2 primary components for the websites I construct are movement and design. My focus is on motion—motion justifies the design, reinforces design decisions, and, if executed effectively, helps information the person’s consideration.
After I begin a brand new challenge, I by no means comply with a strict step-by-step method. 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 one in every of these parts resonates with the temper of the design, I adapt all the opposite parts accordingly.
What’s subsequent?
My objective now’s to enhance my expertise with the WebGL API, and I imagine Lusion is the proper place to attain that. Within the meantime, I don’t wish to cease experimenting with different instruments: Blender, Houdini, and After Results are on the high of my record.
Remaining Ideas
I’ve been an enormous reader of this web site for years, utilizing it to discover and examine new methods, so I’m actually honored to have had the possibility to share a few of my work right here.
If you wish to join be happy to write down me on X @lorenzodossi
Thanks a lot to the Codrops staff and all the group!
