Estrategia de Diseño Web

¿Qué hace Estrategia de Diseño Web?

Un skill de consultoría de diseño estratégico que asegura que los sitios web comuniquen el mensaje correcto, a la audiencia correcta, en el orden correcto, antes de preocuparse por lo bonitos que se vean.

Este skill aplica para construir nuevos sitios, revisar los existentes, redactar texto para landing pages y auditar páginas en busca de fallos comunes. Consulta references/detailed-guidelines.md para la lista de verificación completa al realizar auditorías profundas o construir páginas de múltiples secciones.

Principio Fundamental

La estrategia de diseño viene antes que la ejecución visual. Un sitio hermoso que dice lo incorrecto, a la audiencia incorrecta, en el orden incorrecto, siempre perderá frente a un sitio sencillo con un mensaje claro. Lidera con estrategia, luego aplica la estética (usando el skill frontend-design para la ejecución visual al construir).

---

1. Diseño Consciente de la Etapa

Antes de escribir una sola línea de texto o código, identifica en qué etapa del ciclo de vida se encuentra la empresa. Esto determina todo: la complejidad del diseño, la fidelidad de las capturas de pantalla, la estrategia de CTA y la profundidad de la página.

Etapa	Enfoque de Diseño	Señales Clave
Pre-lanzamiento / Temprana	Genera misterio. Capturas de pantalla descoloridas o estilizadas. Captura de correo / lista de espera. Página única, construible en un día. Mensaje simple y enfocado.	Sin producto público, equipo pequeño, sin ingresos
Crecimiento	Reconocimiento de marca. Colores de acento distintivos, desgloses detallados de funciones, capturas de pantalla de alta resolución, múltiples CTAs.	Producto vivo, usuarios activos, iterando hacia el PMF
Madura	Profundidad de información. Subsecciones de producto, hojas de ruta, páginas de seguridad/cumplimiento, niveles empresariales. Paleta sobria y autoritaria.	Presencia de mercado establecida, acuerdos empresariales

Imitar el pulido de una empresa madura cuando estás en pre-lanzamiento crea un déficit de confianza: prometes una completitud que no puedes cumplir. Por el contrario, un producto maduro con un sitio de lista de espera de una sola página señala abandono.

---

2. El Filtro de los Cinco Segundos

Cada landing page debe responder estas cuatro preguntas dentro de los primeros cinco segundos de llegada:

1. ¿Qué es? — Usa un lenguaje sencillo y específico. "Una aplicación de chat" no "Una plataforma de sinergia."
2. ¿Para quién es? — Nombra la audiencia. "Para gerentes de proyecto técnicos" es mejor que "Para equipos."
3. ¿Con qué fin? — Indica el beneficio o resultado inmediato.
4. ¿Por qué deberían importarles? — ¿Qué hace que esto sea mejor que el statu quo?

Las startups no pueden permitirse lemas vagos. Usa jerga específica como un filtro de alto valor: "Seguimiento de Incidencias" atrae a ingenieros mientras filtra a quienes no encajan. Solo las plataformas establecidas masivas se ganan el derecho de decir cosas como "Donde el trabajo sucede."

La Pirámide de Claridad

Estructura el contenido de la página de inicio en orden de urgencia decreciente:

1. Cúspide — Propuesta de valor nítida y alineada con la jerga (sección héroe)
2. Contexto expandido — Narrativas de funciones con evidencia visual a medida que el usuario se desplaza
3. Profundidad funcional — Documentación técnica, casos de uso secundarios, precios, seguridad (páginas separadas para productos maduros)

---

3. Evitar Patrones de "Slop de IA"

La originalidad es un indicador de calidad del producto. Si el sitio parece una salida genérica de un LLM, los usuarios asumirán que el producto también lo es. Señala y elimina estos patrones:

Señales de slop visual:

• Degradados morados y sombras paralelas predeterminadas (la señal #1 de "hecho por IA")
• Cuadrículas genéricas de bento-box (3×2 con iconos simples, sin contexto de producto)
• Paneles de control falsos al estilo de Google con llamadas de colores primarios (rojo/amarillo/verde/azul)
• Cubos flotantes, formas 3D abstractas o gráficos de héroe genéricos sin evidencia del producto

Fallos en microdetalles (la capa de "ajuste y acabado"):

• Espaciado inconsistente, espacios dobles en titulares, puntos fuera de lugar
• Marcas de tiempo codificadas o datos de marcador de posición visibles en capturas de pantalla
• "Sopa de estilos" — mezcla de 5+ tratamientos de fuente, destruyendo la jerarquía visual
• Texto de bajo contraste (claro sobre claro, amarillo sobre blanco)
• Logos pequeños o de tamaño incómodo

Señales de slop en el texto:

• Cada Palabra Capitalizada En Testimonios (grita "generado por IA")
• Prueba social vaga como "¡Gran herramienta!" en lugar de "Ahorró 500 horas en QA manual"
• Jerga interna no definida (no asumas que los usuarios saben qué significa "Deep Eval" o "MCP")

---

4. Reglas de Diseño de Interacción

La animación y la interacción deben mejorar la navegación, nunca distraer de la propuesta de valor.

Hacer:

• Usa movimiento para llamar la atención hacia la CTA principal
• Cambios sutiles de color al pasar el ratón o brillos para indicar que se puede hacer clic
• Revelaciones activadas por desplazamiento que se sientan naturales

No hacer:

• Secuestrar el desplazamiento (usar animaciones temporizadas que anulen el desplazamiento nativo)
• Animaciones de fondo en bucle (meteoritos, tarjetas parpadeantes, movimiento constante)
• Ocultar información detrás de estados de hover (se rompe en móvil, obliga a "cazar" en escritorio)
• Crear "ensalada de enlaces" en el héroe — enlaces simultáneos a Discord, GitHub, Twitter y Documentación

---

5. Optimización de Conversión

Cada obstáculo es un punto de abandono. Minimiza la fricción entre la llegada y el "momento ajá".

• Paradoja de la demo: Un botón "Agenda una Demo" pide un compromiso de 20 minutos. Ofrece primero una muestra — indicaciones en el navegador, sandboxes interactivos, videos cortos del producto.
• Disciplina de CTA: Un objetivo claro por segmento de desplazamiento. No apiles CTAs que compitan.
• Estándares de prueba social: Nombres reales, títulos reales, logotipos de empresas reales (blanco y negro para limpieza). Resultados específicos sobre elogios genéricos.

---

6. Cómo Aplicar Este Skill

Al construir una nueva página:

1. Pregunta (o determina) la etapa del ciclo de vida de la empresa
2. Redacta el texto que pase el Filtro de los Cinco Segundos
3. Planifica la arquitectura de información usando la Pirámide de Claridad
4. Construye la página (usa frontend-design para la ejecución visual)
5. Audita el resultado contra la lista de verificación de slop y los elementos de ajuste y acabado en references/detailed-guidelines.md

Al revisar/criticar una página existente:

1. Lee references/detailed-guidelines.md para la lista de verificación de auditoría completa
2. Evalúa primero la adecuación a la etapa
3. Aplica el Filtro de los Cinco Segundos
4. Verifica patrones de slop de IA
5. Audita el diseño de interacción y el flujo de conversión
6. Proporciona comentarios específicos y accionables organizados por severidad

Al redactar texto de héroe o CTAs:

1. Identifica la audiencia objetivo y su lenguaje
2. Usa el Filtro de los Cinco Segundos como restricción de escritura
3. Prefiere jerga específica sobre lemas amplios
4. Respalda cada afirmación con evidencia visual (capturas de pantalla, demostraciones, métricas)