I have created this responsive web page using Figma’s Auto layout; I have started by creating atoms and then assembling bigger components, I have also tested the components with established breakpoints to determine the range within which they would work as you can see in the image.

While designing this single product pre-order page, I took the opportunity to give it some motion thanks to the so called parallax effect. Substantially, when the user lands on the page, elements come from different places, and colors and lights reveal themselves like a stage is revealed by a rising curtain. You can check the prototype at this link; to make it start again, just press the Tesla logo.

This is my design for the Adult Swim streaming website’s error 404 page. I think that facing a 404 page is already a frustrating experience so I really don’t get why designers, especially in the case of big corporates that need to maintain a certain communication style and a high level of user engagement, often make those gray, cold, almost accusatorial and not useful error messages. So I took one of the most successful Adult Swim’s shows, ‘Rick & Morty’ and used it to communicate friendly to users with their same language, and with something familiar.

In cases like this, the most important thing is probably maintaining things clear and easy, so I used different Gestalt principles, like the law of proximity, of common region, and the law of element connectedness; and I also used the ‘breadcrumbs’ design pattern.

At this link you can check a flow that leads the user through the process of pre-ordering their favorite band’s new album; from seeing the relative Facebook ad to receiving the pre-order confirmation.