Loading ...

Responses by Marco Rosella.

Background: The purpose of the portfolio site is to showcase my latest work in motion design and film direction, including a video showreel.

Favorite details: I approached the design of the site with the goal of having a clean interface that was easy to navigate and focused on showing the main content—my videos—in the most efficient way. I wanted the homepage to have the feel of a long scrollable animated GIF with different loops running simultaneously, using thumbnails in the viewport big enough to show an entire loop related to one project—and at the same time, parts of the previous and next ones.

I carefully put some details in microinteractions that would work well with the animated style of the site, like the wipe hover of the titles and links. For these, I used one of my favorite typefaces—GT America by Grilli Type—as well as some custom mouse cursors, like the ones for the showreel (a play button) and thumbnails (a plus sign with an arrow that triggers the scroll to the linked project.)

Challenges: Compressing my motion content between MP4s and GIFs to be easily loadable but without losing too much quality. For the homepage, considering the dimension of the thumbnails and the goal to have the site load quickly, I used only MP4s inside video elements; for the loops on the internal pages, I used a mix of MP4s and GIFs. As I learned from the first years of Tumblr when the max file size allowed was one megabyte, the key to exporting lightweight GIFs is to find a balance between the length of the loop, frame rate, dimension and compression. GIFs are the foundations of the Internet and will exist forever, but an alternative for light looping images will hopefully be in the full support of animated WebPs someday.

Divergent paths: The first version I made back in 2012 was created in SVG with a zoomable interface where you could scroll “inside” the site. For future versions, I would like to reach a similar level of experimentation again in a dedicated area built in WebXR; this would provide an immersive experience where you could watch content on massive virtual screens.

Technology: I used WordPress and the Semplice system with custom scripts, CSS and markup.

marcorosella.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In