Knockout Training Center
Propuesta de plataforma digital para un gimnasio de artes marciales afiliado a WAKO con campeones activos. HTML5, CSS3 y Vanilla JS puros, con IA como herramienta de diseño y desarrollo.
Rol
Web Designer & Dev
Tipo
Landing Page
Stack
HTML · CSS · JS
Desafío
Knockout tiene campeones avalados por WAKO y más de ocho disciplinas activas. Pero toda su comunicación vivía en redes sociales. Sin presencia web propia, esos campeones eran invisibles para promotores internacionales y medios de otros países.
Mi Rol
Investigación de marca, dirección de arte, diseño de interfaces y arquitectura de información. Diseño web end-to-end orientado a la conversión.
Resultado
Landing page deployada en Netlify con dominio personalizado, fully responsive, con efectos visuales que reflejan fielmente el ADN del gym.
Resumen del Proyecto
Knockout Training Center es un gimnasio de artes marciales ubicado en Santa Cruz de la Sierra, Bolivia, que ofrece disciplinas como Muay Thai, Boxing, MMA y más. El reto fue construir una landing page de una sola página que capturara la identidad visual agresiva y cinematográfica del gym, usando exclusivamente HTML5, CSS3 y JavaScript Vanilla — sin frameworks ni dependencias externas — y entregando un sitio completamente responsive, rápido y con efectos visuales de alto impacto.
Investigación de Mercado
Revisé la presencia digital de los principales gimnasios de Santa Cruz de la Sierra para identificar oportunidades de diferenciación.
59K seguidores · Sin sitio web
El gimnasio de MMA más activo de Santa Cruz en redes sociales. 59K seguidores en Facebook con reels constantes. Sin embargo, no tienen sitio web propio. Toda la información, precios y horarios están dispersos en publicaciones que el usuario tiene que rastrear.
Web corporativa · Sin precios visibles
Franquicia internacional con presencia en Santa Cruz (Ventura Mall). Tienen sitio web con horarios e instructores, pero los precios no están visibles y requieren contacto previo. El diseño es genérico, sin identidad visual fuerte más allá del branding UFC.
Referente internacional · Tailandia
El mayor campo de entrenamiento de Muay Thai y MMA del mundo. Su sitio web es el estándar a superar: pricing transparente, páginas de instructores con bio y trayectoria, galería profesional, multi-idioma y CTAs claros para inscripción internacional.
Hallazgo Clave
Ningún competidor local tenía una landing page con identidad visual fuerte, precios visibles, diseño responsive y contacto directo por WhatsApp. Cubrir esos 4 puntos sería suficiente para destacar claramente en el mercado.
User Persona
El usuario principal es el potencial nuevo miembro — alguien que evalúa opciones y necesita información clara antes de comprometerse.
Carlos M.
24 años · Santa Cruz, Bolivia
Mobile-first
"Quiero ver el precio antes de ir, y si me interesa, contactar rápido desde el celular."
Objetivos
Ver precios sin tener que llamar
Conocer las disciplinas disponibles
Contactar rápido si le convence
Frustraciones
Sitios que no cargan bien en celular
Tener que llamar para saber el precio
Sin fotos del lugar ni del ambiente
Estructura del Sitio
Arquitectura pensada para dos audiencias: el visitante local que busca inscribirse, y el promotor internacional que quiere conocer a los campeones. Disponible en español, inglés y portugués.
01
Landing
Hero · Disciplinas · Stats · Precios
02
Campeones
Grid de peleadores WAKO
03
Bio Campeón
Perfil · Récord · Trayectoria
04
Eventos
Próximos · Pasados · Fechas
05
Galería
Fotos reales del gym
06
Contacto
Formulario + WhatsApp flotante
07
ES · EN · PT
Trilingüe · i18n completo
Design System
Tipografía
Títulos — Bebas Neue
KNOCKOUT TRAINING CENTER
Bold condensed · Impacto · Estilo de arena de combate
Cuerpo — Inter
Entrena con los mejores. Supera tus límites.
Medium · Legible · Alta densidad de información
Paleta de Colores
#000000
Negro Puro · Fondo principal
#CC0000
Rojo Fuego · CTAs, acento, efectos
#FFFFFF
Blanco · Texto, contraste máximo
Decisiones de Diseño
Cada decisión visual y de experiencia responde a un objetivo concreto del negocio y del usuario.
La paleta negro/rojo y la tipografía Bebas Neue no son arbitrarias — transmiten poder, energía y urgencia. Cada decisión visual refuerza el carácter combativo que define al gym y lo diferencia de la competencia.
La estructura sigue un flujo persuasivo: impacto visual → oferta → credibilidad → precio → acción. Cada sección tiene un rol específico en el journey del usuario, reduciendo la fricción hasta el contacto.
El slideshow muestra el ambiente real del gym (prueba social visual), los contadores construyen credibilidad, el efecto glitch comunica energía. Cada animación responde a una necesidad UX concreta, no es solo decoración.
El botón flotante de WhatsApp siempre visible y el menú responsive eliminan las barreras de contacto en dispositivos móviles, donde la mayoría de usuarios del gym llega al sitio.
Resultado Final
Cada sección diseñada para cumplir un objetivo específico en el journey del usuario.
Galería del Proyecto
Impacto
El mayor impacto fue transformar un gimnasio sin presencia digital en una marca con identidad sólida y canal directo de conversión.
0 → 4 páginas
De no existir digitalmente a tener landing, página de campeones, perfiles individuales y agenda de eventos.
ES · EN · PT
Trilingüe completo: español para Latinoamérica, inglés para alcance global, portugués para el mercado brasileño de artes marciales.
Eventos
Agenda de combates con fechas, peleadores, lugar y resultado. Pasados y próximos, actualizable por el gym.
El cliente pasó de depender exclusivamente del boca a boca a tener una plataforma que comunica su identidad, muestra precios y convierte visitantes en potenciales miembros de forma directa y sin fricción.
— Resultado del proyecto · Knockout Training Center
Llevo más de cuatro años entrenando aquí. Conozco el lugar, a los entrenadores y a los campeones. Ese contexto cambia todo.
01
No vine como diseñador externo que llega a "entender el negocio". Llevo más de cuatro años entrenando Kickboxing y MMA en Knockout. Conozco los entrenadores, el ambiente, las disciplinas y a los campeones por su nombre. Eso le da al proyecto algo que ningún brief puede reemplazar: comprensión real del usuario.
02
El gym tiene 8 disciplinas, varios campeones avalados por WAKO y una comunidad activa, pero sin un espacio digital que lo cuente bien. La propuesta incluye secciones para cada disciplina y sus servicios, y lo más importante: páginas individuales para cada campeón con su trayectoria como peleador presentada en línea de tiempo.
03
Los campeones de Knockout quieren ser conocidos más allá de Bolivia. Por eso el sitio está planificado con soporte en tres idiomas: español, portugués e inglés. Que un promotor de Brasil o un competidor de Europa pueda ver el perfil de un peleador boliviano en su propio idioma no es un detalle, es parte del objetivo del proyecto.
04
El proyecto está en fase de negociación con el cliente. Lo que existe hoy es el prototipo funcional de la landing page, que ya demuestra la dirección visual y técnica del sitio completo. La versión final incluirá las páginas de campeones, el sistema multilenguaje y la integración de contenido actualizable.
Apliqué herramientas de inteligencia artificial de forma deliberada en cada etapa del proyecto. No para reemplazar el criterio de diseño, sino para complementarlo y acelerar resultados con calidad profesional.
Claude
Estructuración del contenido, copy para secciones y arquitectura de información. Iteración rápida de propuestas de texto con dirección editorial propia.
Midjourney
Generación de imágenes de referencia visual para explorar la dirección de arte del sitio antes de trabajar con las fotos reales del gym.
Gemini
Research y análisis de la competencia local: gimnasios de la ciudad, sus sitios web, presencia digital y puntos débiles. Base de datos para las decisiones de diseño.
Figma AI
Exploración de variantes de layout y componentes dentro del entorno de diseño. Aceleración del proceso de ideación sin perder control sobre las decisiones finales.
"La IA no tomó decisiones de diseño. Redujo el tiempo entre intención y prototipo, permitiéndome iterar más rápido y dedicar más energía a lo que importa: la estrategia, la experiencia del usuario y el criterio visual."
Sebastian Delgado · Certified in AI Tools
El mayor obstáculo no fue el diseño, fue convencer a los dueños del gym de que tenían un problema que resolver. Surgió como iniciativa propia, no desde el cliente. Lo que aprendí: antes de diseñar una solución, hay que vender el diagnóstico. Un deck de negocio con datos de alcance hubiera acelerado la decisión.
La sección de campeones existe pero es poco ambiciosa. Con lo que sé hoy, la rediseñaría con videos de fondo, líneas de tiempo interactivas de cada trayectoria y extractos de entrevistas reales. Un peleador con perfil propio en la web tiene más chance de ser contactado por promotores internacionales que uno con solo una foto en Instagram.
El soporte trilingüe (ES/EN/PT) está planificado pero no implementado desde el inicio. Si volviera a empezar, lo integraría desde el primer commit. Agregar internacionalización sobre un sitio ya construido siempre cuesta más que diseñarlo desde el principio pensando en múltiples idiomas.
Más proyectos
Regresa al portfolio para ver más proyectos o escríbeme si tienes algo en mente.