Starkson & Co is a concept project that I designed in Figma and developed in Webflow. In this project I wanted to explore more of the animation possibilities that Webflow has to offer for both Desktop and Mobile.

Inspiration

While looking for interesting photos to create a project with on Unsplash, I came across the photographer Malik Skydsgaard . I'm always interested in building out designs in a fashion/editorial style and thought he had some great photos that would work well as a fashion store website.

I recently found out about the site Fontshare and wanted to use some of those fonts in a project. I went with the first one that came up for me which is called Satoshi. I immediately thought that it would look great in an editorial style design.

Figma - Initial Design

I felt good about my first few design attempts. They all more or less looked like various different versions of the one below. While I think it's good I wanted to try to push this one into an even more editorial style. I also had the idea of having a sticky scroll effect with the tall coat section. Where the description sticks to the upper left while you scroll the length of the coat. I think it's a cool idea but having a photo that large would be way too hard on the sites load time, so I decided to not go in that direction.

Figma - Final Design

The design I ended up moving forward with has larger lettering and a slightly different format. I also wanted to have a hover effect where when the user scrolls over the name of the item a picture shows up that shows the item. As they continue to scroll a larger image of it appears in the viewport. I thought this would be effective because it gives the user a unique way of viewing the same item. This would be a desktop only interaction. The mobile has the image that shows when hovered as the main image.

Once I was happy with the design, I prototyped a web and mobile version to make sure I liked the way the page looked when scrolled.

Interaction Planning for Webflow

Figma Web and Mobile Prototypes

Webflow

I took my design and built it out in Webflow tweaking as I went. I created both the Web and Mobile versions with the interactions on both. I'm really happy with the way it turned out and am glad that I could figure out the custom cursor and photo hover animations without having to use any custom code!

Credits

Photo Credit: Malik Skydsgaard via Unsplash

Fonts: Satoshi via Fontshare and Inter

Programs: Figma, Webflow, Davinci Resolve and CleanShot

THANK YOU!