Back to Portfolio
Live ProjectLanding Page • Gaming

ValWind App

Valorant Companion Landing Page. A modern, high-conversion landing page designed for gamers who want to track their match stats, store items, and account insights.

ValWind Desktop View
ValWind Mobile View

01Project Overview

ValWind is a modern, high-conversion landing page designed for a companion app that helps Valorant players track their match stats, store items, and account insights.

The Goal: To create a visually clean, immersive, and responsive gamer-focused experience. The design needed to feel authentic, almost as if it were built by Riot Games themselves, bridging the gap between the game's aesthetic and a modern SaaS interface.

02Key Features

  • Fully Responsive Layout: Flawless adaptation across Desktop, Tablet, and Mobile devices, ensuring a seamless experience for gamers on any screen.
  • Immersive Dark Mode UI: Reduced eye strain and established a premium gaming atmosphere, putting the app interface and game characters in the spotlight.
  • Performance-Optimized: Built with semantic, lightweight code to guarantee blazing-fast load times.

Visual Identity

Color Palette

Deep Dark Background
Creates depth
Valorant Accent Red
For CTA buttons & accents
Crisp White
For text readability

Typography

Montserrat
A geometric sans-serif typeface that provides a modern, tech-forward look while maintaining perfect legibility across all UI elements.
Weights: All (100-900)

Key Features

Responsive Design

Flawless adaptation across all devices with mobile-first approach.

Gaming Aesthetic

Authentic Valorant-inspired design system with dark mode UI.

Performance First

Lightweight semantic code for blazing-fast load times.

Technology Stack

FrontendHTML5, Custom CSS3
ArchitectureFlexbox / Grid Layout
DesignFigma

Project Gallery

ValWind Landing Page Full View