Proyecto propio - Diseño web - 2026
Página web para un entrenador personal especializado en deportes de combate.
Una landing para un preparador físico de deportes de combate. Tenía que transmitir credibilidad desde el primer segundo y llevar a cada visitante a escribirle por WhatsApp.
El reto
Un preparador sin web, que lo gestiona todo por WhatsApp, necesitaba un sitio que inspirara confianza y convirtiera visitas en conversaciones.
Qué hice
La dirección visual, un design system pequeño, la estructura de la página y su implementación en WordPress, en escritorio y móvil.
Resultado
Una demo navegable para enseñarle la idea. Si sigue adelante, podrá editarla sin depender de mí.
01 - El encargo
Una web para alguien que vive en WhatsApp
Mi amigo es preparador físico y competidor de karate. No tenía web y gestiona a todos sus clientes por WhatsApp. Decidí diseñarle una demo por mi cuenta para enseñarle cómo podría ser.
Acoté el alcance desde el principio: una landing, sin pagos ni paneles de gestión. Todo el recorrido termina en un mismo sitio, una conversación por WhatsApp.
02 - Dirección visual
Energía y contraste
Quería una web oscura, directa y con un solo color que llamara la atención.
- Un fondo oscuro, para que las fotos de competición reales sean las protagonistas.
- Un único rosa para todo lo que se puede pulsar y para la palabra clave del titular.
- Titulares en mayúsculas muy pesadas, con el interlineado apretado: transmiten fuerza.
- Una sección clara para el método, que da respiro y separa el "qué" del "quién".
03 - Design system
Pocas piezas, muy consistentes
Lo reduje a lo mínimo para que la web sea fácil de mantener: seis colores, tres estilos de texto y cuatro componentes.
Color
#0A0A0AFondo principal#141414Bandas y cifras#E82C5FAcción y énfasis#F5F4F1Sección del método#FFFFFFTitulares y tarjetas#9A9A9ATexto secundarioTipografía
Preparación online
Únete ahora
Un sistema de entrenamiento estructurado, adaptado a tu realidad como luchador.
Componentes
- Graduado en Ciencias de la Actividad Física y el Deporte
- Competidor en activo
Test inicial
Evaluaciones periódicas para medir tu evolución.
Reconstruidos a partir del diseño final. Cada componente usa solo los tokens de arriba.
04 - Estructura
Una página pensada para convertir
El orden responde a las dudas que tiene alguien antes de escribir a un entrenador que no conoce.
- PromesaQué ofrece y para quién, en una línea.
- MétodoCuatro pasos que explican cómo se trabaja.
- CredibilidadQuién es, su formación y su trayectoria.
- CifrasTres datos que se leen de un vistazo.
- Llamada finalUna sola acción: hablar por WhatsApp.
05 - Mobile first
Pensada para el móvil
La mayoría de sus clientes llegarán desde Instagram, en el móvil. Por eso diseñé primero esa versión: los titulares se ajustan sin perder fuerza, las tarjetas del método se apilan y el botón principal ocupa todo el ancho, al alcance del pulgar.
- Un botón por pantalla, siempre en el mismo rosa.
- Menú hamburguesa para no robar espacio al titular.
- Las cifras en vertical, una debajo de otra, para leerlas al hacer scroll.
06 - Construcción
Que él pueda editarla
La monté en WordPress para que pueda cambiar textos y fotos sin depender de mí. La desarrollé en mi propio alojamiento con contenido de relleno. Si le convence, la migro a su dominio y su hosting, que contratará él porque la web es suya.
Con Claude Code aceleré la parte de implementación. Las decisiones de diseño, el contenido y el alcance fueron míos.
07 - De demo a web real
Lo que haría si sigue adelante
La demo sirve para enseñarle la idea y que pueda imaginar su web. Para convertirla en la definitiva, estos serían los siguientes pasos:
- Contenido real: escribir los textos con él y usar sus propias fotos y datos.
- Tarifas y ubicación: añadir las dos secciones del encargo que dejé fuera de la demo.
- Contraste: subir los grises sobre fondo oscuro hasta cumplir WCAG AA.
- Cifras comparables: que los tres datos se lean igual, con números reales.
- WhatsApp de verdad: conectar todos los botones a su número y medir cuántas conversaciones llegan.