← UI/UX design

Ecommerce / Fitness / Figma exploration

Supplement
Brand GYM.

Built around
the energy.

A fitness supplement storefront exploration with a bold hero, featured products, editorial content and community imagery.

Real previews of the gym supplement storefront introduction and featured-product section, arranged on a yellow background.
Introduction / Featured productsFigma preview crops
Study
UI/UX design exploration
Format
Ecommerce storefront
Tool
Figma
Visual direction
Yellow, black & fitness imagery

01 / Inside the storefront

The page,
piece by piece.

Six sections from the shared design, from the first impression to the community imagery. Open any preview for a closer look.

Gym supplement storefront preview: storefront introduction

A bold first impression

A dark photographic hero, yellow actions and a compact navigation introduce the storefront.

Gym supplement storefront preview: featured products

Products in the spotlight

Exercise imagery and supplement packaging lead a three-column featured-product section.

Gym supplement storefront preview: editorial content

A reason to explore

An asymmetric group of image-led article cards brings fitness content into the shopping experience.

Gym supplement storefront preview: best sellers

A closer product focus

Two product packs stand against a pale background with yellow curves and compact actions.

Gym supplement storefront preview: review section layout

Space for social proof

The source design includes a row of review cards within the storefront layout.

Gym supplement storefront preview: community imagery

People bring the energy

A collage of training photographs surrounds a central media card near the end of the page.

Section images come from the small public Figma preview. The original file offers a closer view of the design.

02 / The visual direction

High contrast.
Clear rhythm.

01

Yellow carries the emphasis

Yellow actions, packaging and curved transitions repeat across the storefront.

02

Photography sets the atmosphere

Dark training imagery contrasts with the lighter product and content sections.

03

The layout changes pace

Product columns, editorial cards and a final collage vary the composition as the page continues.

The complete design

Follow the
whole page.

Explore the full storefront preview here, or open the original file in Figma.

Open the complete page preview
Complete supplement storefront design from the supplied Figma file, including the header, product sections, editorial cards, review layout, community collage and footer
Original public Figma preview / complete storefront
Open the original Figma file
Project details ↗

Contact / Start a project

Let’s talk about your project.

A new website, a fresh identity, or a place on your team. I’d love to hear what you’re working on.

Project enquiry
What are we making?
When do you have in mind?

Opens your email app. A rough idea is enough.