← Diseño webCaso 08 · 2025
Diseño web · educación 1-a-1

Miguel Recuna.

RECUNA WEB · BYPO STUDIO · RECUNA WEB · BYPO STUDIO ·
Mockup destacado de la web Miguel RecunaMockup · 01

Una web nocturna y precisa para un profesor particular. Cada bloque empuja con calma hacia una sola decisión: hablar con Miguel.

Paleta
Cliente
Miguel Recuna
Sector
Educación
Servicios
Diseño · Desarrollo
Año
2025
MATEMÁTICAS FÍSICA ESTADÍSTICA ESO · BACH · UNI A CORUÑA · ONLINE MATEMÁTICAS FÍSICA ESTADÍSTICA ESO · BACH · UNI A CORUÑA · ONLINE MATEMÁTICAS FÍSICA ESTADÍSTICA ESO · BACH · UNI A CORUÑA · ONLINE MATEMÁTICAS FÍSICA ESTADÍSTICA ESO · BACH · UNI A CORUÑA · ONLINE
§02 / Reto

Convertir la academia tradicional en una conversación.

Miguel necesitaba una web que no pareciera una academia más. Quería transmitir cercanía, oficio y método sin caer en plantillas educativas ni en formularios largos.

Diseñamos un hero-folleto donde el alumno elige asignatura, ve la oferta de prueba y abre conversación en un solo gesto. La web entera trabaja para que ese primer mensaje sea fácil.

3
Asignaturas
98%
Aprueban
2 sem
Producción
§03 / TipografíaSistema editorial nocturno

Una display rotunda y un guiño manuscrito.

T/01 · Display
Recuna
Bricolage Grotesque · Titulares

Display variable, contemporánea y firme. Aporta personalidad a titulares y wordmark sin caer en lo académico clásico.

T/02 · Manuscrita
mejor
Caveat · Acentos manuscritos

Aparece como un subrayado a mano en palabras clave: «mejor», «hablar», «empezar». Humaniza un sector lleno de iconos y fórmulas.

T/03 · Texto

Profesor particular en A Coruña. Clases 1-a-1 de matemáticas, física y estadística para ESO, Bachillerato y Universidad.

60 min para detectar lagunas y trazar un plan. Sin compromiso de continuar.

Inter · Body, UI y datos

Neutra y legible en cualquier tamaño. DM Sans aparece solo en etiquetas técnicas (precios, duración, IDs).

H1
Bricolage 800 · 96/88
H2
Bricolage 700 · 60/56
H3
Inter 600 · 28/34
Body
Inter 400 · 17/28
Caption
DM Sans 500 · 12/18
§04 / UX · Justificación

Cuatro decisiones para reducir la fricción.

Pedir clases particulares cuesta. La web lo hace fácil eliminando formularios, pasos y ruido visual.

UX/01

Una decisión, no un menú

La web tiene un único objetivo: que el alumno (o su familia) escriba a Miguel. Todo lo demás se diseña para reducir la fricción hasta llegar ahí.

UX/02

Asignaturas como filtro

Tres chips claros (Matemáticas, Física, Estadística) cambian la oferta lateral en vivo. El usuario siente control sin abandonar el hero.

UX/03

Prueba social honesta

Una sola opinión real, con nombre y curso, dentro de la card. Genera confianza sin saturar la página de testimonios genéricos.

UX/04

Respuesta en menos de 24h

Lo prometemos en el hero como métrica. La web conecta con WhatsApp para que el primer mensaje cueste lo mismo que un mensaje a un amigo.

§05 / UI · SistemaComponentes recurrentes

Pocos componentes, todos al servicio del contacto.

UI/01

Card-oferta flotante

El bloque de la derecha funciona como folleto vivo. Cambia con la asignatura activa y siempre muestra precio, duración y beneficio.

UI/02

Chips de asignatura

Selector grande con icono y etiqueta. La activa se ilumina en coral; las demás quedan en contorno suave para no competir.

UI/03

Glow editorial nocturno

Fondo en negro con un degradado coral muy sutil en las esquinas. Da profundidad sin distraer de la información clave.

UI/04

CTA Hablar lima

Único botón verde-lima en la nav. Es la acción principal, repetida con el mismo color allí donde la conversación puede empezar.

Nav-píldora · CTA Hablar
01 Servicios02 Precios03 Empezar04 Contacto
Hablar
Chips de asignatura
Σ Matemáticas⚛ Físicaσ Estadística

Solo una asignatura activa a la vez. Cambia el contenido de la card-oferta sin recargar la página.

§06 / Paleta

Negro como pizarra, coral como tiza.

Noche#0A0A0A
Base
Coral#FF6C39
Acento
Violeta#9D68FF
Secundario
Lima#BAED3F
CTA
Crema#F5EFE6
Texto
§07 / Performance

Ligera, accesible y local.

SEO local pensado para A Coruña, contraste AA en toda la web y un único asset pesado: las fuentes. Cargan rápido en 4G.

99
Performance
Lighthouse · mobile
100
Accesibilidad
Contraste AA · semántica
100
SEO
Local · A Coruña
<24h
Respuesta
Promesa del hero
§08 / Web en vivoScroll dentro

Pruébala como si fueras un alumno.

Cambia de asignatura, lee la oferta y haz scroll dentro de la ventana. La web vive aquí, no hace falta abrir otra pestaña.

§09 / Cierre

Una web que abre conversaciones.

Diseño y desarrollo pensados para un único objetivo: que el primer contacto entre alumno y profesor sea fácil, rápido y humano.