SuperKicks
E-Commerce Web UI Design — Figma · UI Only
Mockups
Overview
SuperKicks is a full-page e-commerce web UI concept designed in Figma for a premium sneaker brand. The design captures the energy of sneaker culture — bold typography, high-impact hero sections, and a clean product grid that keeps shoppers engaged from scroll to checkout.
This is a UI-only design project. Every section was carefully crafted to balance brand attitude with conversion-focused UX principles — drawing the eye toward popular products, best collections, and a newsletter CTA.
Design Highlights
Hero Above the Fold — Bold headline and floating product shot creates instant visual impact
Product Grid Architecture — Consistent 3-column card layout with pricing and CTA
Elegance Craft Banner — Strong product photography reinforces brand premium feel
8-Point Grid System — Consistent spacing across every element for a polished handoff
Page Structure
Navigation Bar — Logo, nav links, search, wishlist, and cart icon
Hero Section — Dual CTA buttons and floating sneaker image on sky-blue background
Product Collections — 3-column grids for Popular and Latest products with star ratings
Promotional & Newsletter — Banners for 25% OFF discounts and email capture
Colour Palette
#B8D8E8
Hero Sky
#1A1A1A
Near Black
#F5A623
Accent Orange
#FFFFFF
White
Case Study
The Problem
Sneaker e-commerce sites
often suffer from cluttered layouts that overwhelm shoppers. Too many products, competing CTAs, and
a lack of brand voice make it hard to convert a first-time visitor into a buyer. SuperKicks needed a
design that felt premium and on-brand while making the path from browse to purchase frictionless.
Key Insight
Sneaker buyers are
emotional purchasers — they respond to attitude, scarcity, and social proof. The design leans into
this with bold hero messaging, star ratings on every product card, and a promotional discount banner
that creates urgency without feeling cheap.
Design Decision
A light sky-blue hero
background was chosen instead of the typical dark sneaker-brand aesthetic. This makes the white
sneaker product photography pop while keeping the page feel fresh and approachable for a wider
audience. The orange accent colour grounds CTAs and badges without clashing with the brand palette.