Discover more

SNKRS Landing Page

A landing page for the Nike SNKRS app

The cover image for the SNKRS project displaying the website on an Apple Macbook.

SNKRS Landing Page

What is the project?

This is a landing page I made for the module Motion Design where I brought animation and screencasts to life on a landing page I designed. It made it about the SNKRS app, but it has no connection to the app or Nike.

How?

I started to design the website in Adobe XD. After the site was designed I recorded & edited the screencasts with Adobe After Effects, created my own illustrations in Adobe Illustrator, and brought them to life with several animations in Adobe After Effects. For the web implementation, I used lottieFiles with the bodymoving library. The assignment was to start in a landing page template and make it your own by customizing it. I changed most of the code and it was a whole different website then the template once done. I also added my own scrolling animation where I used images of StockX & put them in a video, based on the scrolling over the element, the video frame changes, so when you scroll down the shoe turns around. I learned a lot from this school assignment.

An image for the SNKRS project displaying the app itself on an Apple Iphone with a red high top Air Jordan shoe in the background.

Result

An image for the SNKRS project displaying the discover part of the landing page.
An image for the SNKRS project displaying the features part of the landing page.
An image for the SNKRS project displaying the exclusives drops and events part of the landing page.