Web Design / Concept

KINETIC

Client
Concept project
Timeline
1 Week
Role
UI/UX Designer
Year
2024
KINETIC
01

Overview

CyberPhysics is a concept website for a futuristic fitness facility that merges technology with physical training. The project was born from a simple observation: traditional gyms feel outdated, intimidating, and disconnected from how modern people approach self improvement.

I wanted to explore what fitness branding could look like if it embraced the aesthetics of tech products rather than the aggressive, hyper masculine visuals that dominate the industry. The goal was to design a complete landing page that positions fitness as an upgrade not a punishment.

02

Problem & Solution

The Problem

Traditional gym websites use the same tired formula: aggressive imagery, red and black colors, and “NO PAIN NO GAIN” messaging. This approach alienates a growing segment of health conscious people who want to improve themselves but don’t identify with hardcore gym culture. They’re looking for sophistication, not intimidation.

The Solution

Position the gym as a “human upgrade facility” rather than a place to suffer. By using a dark interface with electric lime accents, tech forward language like “Bio Hacking Protocols” and “AI Driven Analytics,” and trainer personas that feel like characters from a sci fi film, the design attracts people who see fitness as optimization not obligation.

03

Key Screens

Screen 1
Screen 2
04

Process

This was a one week design sprint focused on visual exploration and brand differentiation. I moved quickly from concept to high fidelity design, prioritizing bold aesthetic choices over extensive research given the conceptual nature of the project.

01

Discovery

Analyzed competitor gym websites and identified visual patterns. Researched cyberpunk aesthetics and gaming interfaces.

02

Define

Established the brand concept: Evolution is no longer optional. Defined three membership tiers and created fictional trainer personas. Defined the page structure in Notion.

03

Design

Sketched initial concepts in Excalidraw and generate some samples usign replit before moving to high fidelity Figma design. Focused on visuals and color balance for impact without overwhelming.

04

Deliver

Completed the full landing page with all sections: hero, philosophy, schedule, pricing, trainers, testimonials, and CTA.

05

Design Details

Deliverables

High-Fidelity Mockups
Design System

Tools Used

Figma logo
Figma
Notion logo
Notion
Excalidraw logo
Excalidraw
Replit logo
Replit
06

Design System in Action

Typography Hierarchy
Display Heading
Space Grotesk, Weight 700 — Hero H1
Section Title
Space Grotesk, Weight 700 — H2
Body Large — Primary content
Outfit, Weight 300 Light
Body Regular — Secondary content
Outfit, Weight 400 Regular
Caption / Labels
Outfit, Weight 500 Medium, uppercase, 0.2em spacing
Color Application
Primary Accent
#CCFF00
Background Dark
#0A0A0F
Background Card
#121218
Text Primary
#FFFFFF
Text Secondary
#A1A1AA
Text Muted
#71717A
Border/Subtle: rgba(255, 255, 255, 0.1)
07

Results

This concept project resulted in a complete landing page design that reimagines fitness branding for a modern, tech savvy audience. The design successfully demonstrates how strategic visual direction can differentiate a brand in a saturated market.

08

Learnings

This project pushed me to make bold visual decisions and trust my creative instincts. Working on a concept project gave me freedom to explore without client constraints, which taught me valuable lessons about brand differentiation and visual strategy.

Constraints breed creativity - Having only one week forced me to make decisions quickly and trust my initial instincts rather than over iterating. The time pressure actually improved the design’s cohesiveness.

Color restraint creates impact - I initially used the lime accent too liberally, which diluted its power. Pulling it back to only key moments (CTAs, highlights, the featured pricing tier) made each instance more meaningful.

This gym website looks like it was designed by someone who played too much Cyberpunk

Shenal
one of my gamer friend

Let's make it
happen

BOOK A CALL
    DULEN - Product Designer & UI/UX