Personal project - Web design - 2026
Website for a personal trainer specialised in combat sports.
A landing page for a combat sports strength and conditioning coach. It had to build trust from the first second and lead every visitor to message him on WhatsApp.
The challenge
A coach with no website, who runs everything through WhatsApp, needed a site that inspired trust and turned visits into conversations.
What I did
The visual direction, a small design system, the page structure and its build in WordPress, on desktop and mobile.
Result
A clickable demo to show him the idea. If he goes ahead, he'll be able to edit it without depending on me.
01 - The brief
A website for someone who lives on WhatsApp
My friend is a strength and conditioning coach and a karate competitor. He had no website and manages all his clients through WhatsApp. I decided to design a demo on my own to show him what it could look like.
I set the scope from the start: one landing page, no payments or admin panels. Every path ends in the same place, a WhatsApp conversation.
02 - Visual direction
Energy and contrast
I wanted a dark, direct website with a single color to grab attention.
- A dark background, so the real competition photos take centre stage.
- A single pink for everything clickable and for the key word in the headline.
- Very heavy uppercase headlines with tight line height: they convey strength.
- One light section for the method, which gives breathing room and separates the "what" from the "who".
03 - Design system
Few pieces, very consistent
I kept it to the minimum so the site is easy to maintain: six colors, three text styles and four components.
Color
#0A0A0AMain background#141414Bands and figures#E82C5FAction and emphasis#F5F4F1Method section#FFFFFFHeadlines and cards#9A9A9ASecondary textTypography
Preparación online
Únete ahora
Un sistema de entrenamiento estructurado, adaptado a tu realidad como luchador.
Components
- Graduado en Ciencias de la Actividad Física y el Deporte
- Competidor en activo
Test inicial
Evaluaciones periódicas para medir tu evolución.
Rebuilt from the final design. Each component only uses the tokens above.
04 - Structure
A page built to convert
The order answers the questions someone has before messaging a coach they don't know.
- PromiseWhat he offers and for whom, in one line.
- MethodFour steps that explain how he works.
- CredibilityWho he is, his training and his track record.
- FiguresThree facts you can read at a glance.
- Final call to actionOne single action: talk on WhatsApp.
05 - Mobile first
Designed for mobile
Most of his clients will come from Instagram, on their phones. That's why I designed that version first: headlines adapt without losing punch, the method cards stack and the main button spans the full width, within thumb reach.
- One button per screen, always in the same pink.
- Hamburger menu so it doesn't steal space from the headline.
- Figures stacked vertically, one below the other, to read them while scrolling.
06 - Build
So he can edit it
I built it in WordPress so he can change text and photos without depending on me. I developed it on my own hosting with placeholder content. If he likes it, I'll migrate it to his domain and hosting, which he'll pay for because the site is his.
I used Claude Code to speed up the build. The design decisions, the content and the scope were mine.
07 - From demo to real site
What I'd do if he goes ahead
The demo is there to show him the idea and help him picture his site. To turn it into the final version, these would be the next steps:
- Real content: write the copy with him and use his own photos and data.
- Pricing and location: add the two sections from the brief I left out of the demo.
- Contrast: raise the greys on dark backgrounds until they meet WCAG AA.
- Comparable figures: make the three facts read the same way, with real numbers.
- Real WhatsApp: connect every button to his number and measure how many conversations come in.