Las seis reglas del nuevo diseño (y su porqué)
Antes de ver las páginas, estas son las decisiones gráficas que se repiten en todo el rediseño. Cada una existe por una razón de experiencia de usuario, no por gusto.
Un solo rojo, y solo para actuar
Hoy conviven 3 rojos + naranja + verde. En el rediseño el rojo #E2211C (el del logo) aparece únicamente en botones y acentos. Por qué: cuando un solo color significa "acción", el ojo encuentra el botón sin buscarlo. El navy transmite la seriedad médica; el rojo dirige.
Dos tipografías, no cuatro
Poppins (títulos) + Inter (lectura). Se retiran Quicksand y Open Sans. Por qué: la voz visual se vuelve una sola en todo el sitio, y la redondez "amigable" de Quicksand infantilizaba un mensaje que es de vida o muerte.
Curvas suaves y consistentes
Esquinas redondeadas de 8–12 px en tarjetas, botones y fotos — ni bordes duros ni burbujas. Por qué: el radio suave se percibe actual y "amable al tacto" en móvil, sin perder rigor; y al ser siempre el mismo radio, el ojo deja de notar el diseño y se concentra en el contenido.
Fotografía real con velo navy
Se eliminan los vectores rojos angulares y cualquier clipart; solo fotos reales de quirófano y taller, siempre con el mismo velo azul marino degradado. Por qué: la foto real es la prueba de autenticidad de EduTrauma, y el velo uniforme garantiza texto legible y hace que todas las páginas se sientan de la misma casa.
Datos en píldoras, no en párrafos
Duración, certificación y modalidad se muestran como chips redondeados escaneables. Por qué: un médico decide en segundos; los datos duros deben leerse sin leer. La forma curva de la píldora la separa visualmente del texto corrido.
Estructura que respira
Más espacio en blanco entre secciones, líneas de tiempo verticales con hitos circulares (en vez de imágenes ilegibles), y bloques alternos blanco / gris quirúrgico. Por qué: el aire reduce la carga cognitiva y el ritmo alterno le dice al usuario "aquí empieza un tema nuevo" sin necesidad de separadores gráficos.
⚠ Actualización — la home de edutrauma.net cambió hoy (29-ago, tarde)
Mientras preparábamos esta propuesta, se publicó una home nueva en el sitio real: carrusel de 4 slides, misión, video, el equipo con 22 fotos, biblioteca virtual y un chatbot. La home anterior se movió tal cual a /store, que sigue siendo la única página de "catálogo". Nuestra lectura:
Va en la dirección correcta: la home ahora vende la marca (equipo, biblioteca, trayectoria) — la misma tesis de esta propuesta. Eso valida el diagnóstico.
El embudo sigue intacto: "Cursos" lleva a la home antigua (/store) sin precios ni fechas; el DQT sigue publicando fechas vencidas ("marzo — ÚLTIMOS CUPOS") y la compra sigue terminando solo en WhatsApp. Lo que produce ingresos no cambió.
El carrusel es una trampa de UX conocida: el slide 1 (DQT) no tiene botón, y los mensajes rotan solos — la mayoría de los visitantes solo ve el primero. Además abre con una foto quirúrgica muy explícita a pantalla completa, un riesgo para Meta Ads y para visitantes no médicos.
Detalles que persisten: los vectores rojos del CTH reaparecen en el slide 3, la biblioteca muestra fechas de 2024, "Avalado por" tiene un solo logo pequeño y las 22 caras del equipo no tienen nombre ni credencial visibles en la home.
Conclusión: esta propuesta no compite con la home nueva — la completa. Aporta lo que falta: catálogo comparable con precios, fechas vivas, ruta clara de dos fases (teórica online + práctica por país) y pago online.
Home — de "cuatro carteles apilados" a portada de marca
La home "Antes" estuvo vigente hasta la mañana del 29-ago; hoy el sitio la movió tal cual a /store, donde sigue siendo la única vista de cursos — la comparación sigue vigente. La nueva home propuesta presenta la marca (lema, aval SPT, 5.0★) y convierte los cursos en un catálogo comparable de un vistazo.
Qué cambió y por qué
- El lema abre el sitio. "Enseñando a salvar vidas" pasa de estar enterrado en Quiénes somos a ser el titular de la home: es la frase que resume la marca y hoy ningún visitante la ve.
- Franja de confianza bajo el titular. 5.0★ de Google, 20+ años, países y certificación SPT aparecen antes del primer scroll. Por qué: la decisión de un médico es de confianza; los avales tienen que llegar antes que el precio.
- Catálogo de 4 tarjetas idénticas en estructura. Cada curso muestra lo mismo en el mismo orden: para quién, datos duros, precio, próxima fecha, botón. Por qué: la igualdad estructural permite comparar; hoy cada curso se presenta distinto y no hay precios en la home.
- Los cursos gratuitos se etiquetan en verde. Por qué: "Gratis" es el imán de entrada al embudo; el color distinto al rojo de acción evita confundir regalo con compra.
- Claustro docente con ficha (foto + credencial + hospital). Por qué: los maestros son el activo más diferenciador y hoy son una lista de texto plano.
- Un testimonio grande con cifras al lado en vez de citas sueltas con banderas emoji. Por qué: una voz real + tres números creíbles valen más que un carrusel anónimo.
DQT — de landing con formulario a página que vende sola
Es la página del producto estrella y hoy pide datos antes de dar razones: en móvil lo primero que se ve es un formulario. La nueva página entrega el argumento completo — experiencia, currículo, fechas, maestros — con una tarjeta de compra siempre a mano.
Qué cambió y por qué
- La ruta de dos fases, explícita desde el hero. Un componente "Fase 1 · Teórica online — USD 499 → Fase 2 · Práctica presencial — según país" deja claro el modelo del producto de un vistazo, y la tarjeta de compra aclara que la práctica se inscribe y paga por separado según la sede. Por qué: DQT y MIP se venden en dos fases; presentarlos como un solo precio confunde, y explicar la arquitectura del producto es lo que permite cobrar la teórica online hoy.
- Tarjeta de compra en el hero con precio de la Fase 1 (USD 499), cuotas, qué incluye y dos botones jerarquizados: "Inscribir Fase 1 — pagar online" (rojo, primario) y "¿Dudas? WhatsApp" (borde verde, secundario). Por qué: hoy el único camino es WhatsApp; el que ya está convencido debe poder pagar a las 2 AM sin hablar con nadie.
- El formulario desaparece del hero. Primero el argumento, después los datos. Por qué: pedir teléfono y profesión antes de mostrar el programa es la principal causa de rebote móvil.
- Solo fechas vigentes, con estado honesto. Lima dic-2026 "Inscripciones abiertas"; Santiago y Cartagena 2027 "Lista de espera". Por qué: hoy se muestran cuatro fechas ya vencidas con "ÚLTIMOS CUPOS", lo que destruye la urgencia real cuando sí existe.
- El calendario académico pasa de imagen a línea de tiempo de texto con hitos circulares rojos. Por qué: la imagen actual es ilegible en móvil (ver sección 04); como texto real, se lee, se traduce y posiciona en Google.
- Currículo en 6 tarjetas M1–M6 sin las mini-ilustraciones actuales. Por qué: los nombres de los módulos (toracotomía, trauma vascular…) son el gancho; las ilustraciones pequeñas solo agregan ruido.
- Las tres etapas (discusión, simulación, quirófano) en tarjetas foto-título-texto alineadas, en vez de bloques alternos con vacíos. Por qué: tres promesas del mismo peso deben verse como iguales; el layout alterno actual deja hoyos blancos en móvil.
Análisis por curso
Qué le pasa a cada página hoy y qué cambia con el rediseño — con la evidencia al lado.
DQT — Destrezas Quirúrgicas en Trauma
Rediseño completo (maqueta lista)La página con más tráfico pagado y la que más fricción acumula. Además de lo mostrado en la sección 03, dos evidencias justifican decisiones específicas:
Calendario como texto, no como imagen. El argumento "27 días con 3 sesiones en vivo" es de los más fuertes del curso y hoy es invisible en móvil. La línea de tiempo vertical con puntos rojos lo hace legible en cualquier pantalla.
Fechas gestionadas desde un solo bloque. La regla "nunca mostrar una fecha pasada" se vuelve fácil de cumplir si las fechas viven en un solo lugar de la página y la home solo las referencia.
Precio siempre visible. El precio aparece en el hero, en la tarjeta de compra y en el CTA final ("Inscribirme — USD 499"). Ocultar el precio hasta el chat genera desconfianza en una audiencia profesional.
Navegación completa restaurada. Hoy la página solo tiene "Acceder": quien llega desde Google queda encerrado. Con el header estándar puede explorar el resto y volver.
MIP — Manejo Integral del Politraumatizado
Ajuste de identidad (estructura se conserva)La mejor página del sitio en estructura: objetivos, dirigido a, modalidad, precio y fechas vigentes. Su problema no es de contenido sino de identidad: parece de otra empresa.
Reemplazar la paleta ajena. Los botones naranjos "Inscribirme ahora", el verde "¡Contáctanos!" y el rojo plano #E74C3C se sustituyen por el sistema: rojo #E2211C para acción, navy para fondos. Por qué: tres colores de botón = tres jerarquías compitiendo; el usuario no sabe cuál es "el" camino.
Adoptar la tarjeta de compra del DQT. "Curso Online — USD 500" pasa al hero con checkout online y cuotas; la lista de espera queda como CTA secundario. Misma plantilla, mismo lugar, en todos los cursos.
Compactar el hero. El bloque navy actual deja un gran vacío bajo el video. El velo navy estándar sobre foto real + píldoras de datos (40 h · 9 módulos · 8 semanas) lo resuelve con menos altura.
Header y footer estándar. Hoy no hay menú: se restaura la navegación completa, igual que en todo el sitio.
CTH — Control Temporal de la Hemorragia
Rediseño gráfico + checkoutEs la puerta de entrada gratuita al embudo, y hoy es la página más anticuada y la que más fricción pone justo donde debería haber cero.
Checkout de 2 campos. Email + nombre, nada más (se configura en la oferta de Kajabi). Por qué: cada campo extra en un producto gratuito es un porcentaje de médicos que no entra al embudo — y este embudo alimenta al DQT y al MIP.
Fuera los vectores rojos angulares. El "telón" de triángulos rojos y el logo con bisel 3D se reemplazan por una foto real de taller con el velo navy estándar. Por qué: son el elemento que más envejece el sitio completo; las diagonales duras transmiten agresividad, no urgencia médica.
Abrir el contenido, no esconderlo. Hoy toda la información vive en 5 acordeones cerrados (uno con typo: "dirgido"). A quién va dirigido, duración y certificación pasan a estar visibles como píldoras y tarjetas; el acordeón queda solo para FAQ reales. Por qué: en un curso gratuito el contenido ES el argumento — no debe estar detrás de un clic.
Puente al siguiente paso. Al final de la página y del curso: "¿Listo para más? Conoce el MIP". Por qué: el gratuito existe para alimentar los pagados; hoy no hay ningún puente.
Decisiones en Trauma — seminario gratuito
Integración al sistemaPágina correcta y simple; su problema es de integración: vive en una URL de redirección (resource_redirect/landing_pages/…), con estilo propio y sin conexión con el resto.
Tarjeta propia en el catálogo de la home etiquetada "Seminario gratuito", con la misma estructura que los demás cursos — ya incluida en la maqueta de la sección 02.
URL limpia (/decisiones) y plantilla estándar: velo navy, Poppins/Inter, botón rojo único. El registro pide solo email — es el lead magnet por excelencia.
Prueba social del seminario: mostrar la última edición ("Trauma cervical") con fecha, para comunicar que está vivo y es recurrente.
Si lo aprueban, así se ejecuta
Quick wins
Fechas vencidas fuera, checkout del CTH a 2 campos, un solo rojo, navegación unificada y checkout online del DQT teórico. Sin diseñador, solo edición en Kajabi.
Home + DQT
Implementar en Kajabi las dos maquetas aprobadas de esta presentación, con las fotos y textos reales ya seleccionados.
MIP + CTH + Decisiones
Migrar los tres a la plantilla estándar: misma tarjeta de compra, mismo velo navy, mismos componentes.
Prueba social y SEO
Fichas de maestros completas, testimonios en video, titles corregidos y datos estructurados de curso para Google.