For the class of Front-End Development, our assignment was to recreate any website. I chose Nike.com and focused on recreating two of the most important pages: the homepage and a product page for the Nike Air Max Dn SE.
Along with re-designing the look and feel, I also had to implement five surface plane micro-interaction features. The idea of micro-interaction is to create small interactions inside the interface in such a way that it gives more feel and vibe to the users. These include:
Back-to-top button Helps user jump back to the top with ease.
Dark mode-on/off toggle that allows users to switch between light and dark themes for better accessibility and comfort.
Add to cart functionality This is a fully working micro-interaction where users can add products in their cart, complete with dynamic updates.
Increase text size button this is a feature for accessibility that allows users to enlarge text for better readability.
Audio feedback An auditory cue associated with the back-to-top button, which adds an extra layer of interactivity when clicked.
Dark mode-on/off toggle that allows users to switch between light and dark themes for better accessibility and comfort.
Add to cart functionality This is a fully working micro-interaction where users can add products in their cart, complete with dynamic updates.
Increase text size button this is a feature for accessibility that allows users to enlarge text for better readability.
Audio feedback An auditory cue associated with the back-to-top button, which adds an extra layer of interactivity when clicked.
This project allowed me not only to improve my technical skills in HTML, CSS, and JavaScript but also explore the integration of thoughtful micro-interactions to elevate the overall user experience.
You can check out the website here, but make sure you turn on adaptive developer mode Nike Remake Project.
