Diseño limpio que guía al usuario (UX básica)
El diseño PRO no es “poner cosas bonitas”. Es guiar al usuario sin esfuerzo: jerarquía visual, espacios, tipografía, bloques claros y CTAs suaves.
Qué vas a conseguir en esta lección
Vas a aplicar 8 reglas simples de UX para que tu web se vea profesional, sea fácil de leer y lleve al usuario al siguiente paso sin confusión.
1) Jerarquía visual: primero lo importante
Si todo tiene el mismo tamaño y el mismo peso, el usuario no sabe qué mirar. Lo básico es:
H1 claro
Una promesa o idea principal por página.
H2 por secciones
Bloques lógicos, sin paredes de texto.
CTA visible
Un siguiente paso claro (solo 1 principal).
Regla PRO
1 CTA principal por pantalla. Si pones 5 botones “importantes”, ninguno lo es.
2) Espacios: el “aire” es parte del diseño
Una web que parece “apretada” se siente barata. El espacio da sensación de calidad. Aplica esto:
Qué hacer
- Secciones separadas con padding (espacio arriba/abajo).
- Cards con respiración (padding interno).
- Listas en vez de párrafos eternos.
Qué evitar
- Texto pegado a los bordes.
- Bloques sin separación.
- Todo en un solo párrafo de 20 líneas.
3) Tipografía: lectura fácil = confianza
No necesitas fuentes raras. Necesitas que se lea bien.
Base recomendada
- Tamaño de texto cómodo (en móvil sobre todo).
- Altura de línea generosa (line-height).
- Párrafos cortos (2–4 líneas).
- Negritas solo para lo importante.
4) Usa bloques “guiadores” (como ya haces)
Estos bloques hacen que el usuario avance:
Bloques recomendados
- Callout “Qué vas a aprender”
- Checklist final
- CTA “Siguiente paso”
- Navegación anterior / siguiente
Efecto real
Menos rebote, más tiempo en página y más páginas vistas. Eso ayuda a la experiencia y al SEO a medio plazo.
5) Consistencia: repite el mismo patrón
Lo profesional es que todas las lecciones “se sientan iguales”. Repite:
- Hero arriba
- Callout “Qué vas a conseguir”
- 3–5 secciones con H2
- Checklist final
- CTA siguiente lección
- Navegación anterior/siguiente
6) CTAs suaves: guía, no presiones
Un CTA suave es un botón o enlace que encaja con la intención del usuario. Ejemplos:
“Siguiente lección”
Natural y siempre útil.
“Ver checklist”
Acción clara, sin vender.
“Ver guía relacionada”
Enlace interno con sentido.
7) Móvil primero (si en móvil se ve bien, en PC también)
Checklist móvil (30 segundos)
- ¿El header es fino o ocupa demasiada pantalla?
- ¿Los botones son fáciles de pulsar?
- ¿Los bloques respiran (espacio)?
- ¿El texto se lee cómodo?
Micro-acción recomendada (hazlo hoy)
Elige 1 página importante (Inicio o una landing) y aplica solo estas 3 mejoras: más espacio, párrafos más cortos y 1 CTA principal.
Siguiente paso
Vamos con el checklist final de diseño PRO para confirmar que todo está limpio antes de seguir al Módulo 4 (plugins mínimos).