Director de Diseño Web
Marco de dirección de diseño visual organizado por intención emocional (Cálido/Frío x Activo/Calmo). El primer sistema de referencia de diseño que categoriza sitios por lo que te hacen SENTIR, no por cómo se ven. Incluye 48 referencias de sitios web públicos anotados.
Cuándo Usar Esta Skill
- Empezar un nuevo proyecto web y decidir la dirección visual antes de programar
- Un cliente dice "Quiero que se sienta profesional pero cálido" y necesitas traducir eso en decisiones de diseño concretas
- Tienes un posicionamiento de marca (Dunford, StoryBrand) y necesitas mapearlo a un lenguaje visual
- Elegir entre enfoques de diseño (modo oscuro vs claro, minimalista vs rico, editorial vs producto)
- Crear un mood board a partir de referencias que coincidan con el territorio emocional de la marca
- Cuando los diseños generados por IA parecen plantillas porque carecen de dirección intencionada
Fundamento Metodológico
Fuentes:
- Diseño Emocional (Don Norman, 2004) — procesamiento visceral, conductual y reflexivo
- Teoría de posicionamiento de marca (April Dunford, "Obviously Awesome") — las alternativas competitivas definen el territorio visual
- Investigación en psicología del color — espectro cálido/frío y respuesta conductual
- Análisis de patrones de diseño web — 48 sitios públicos analizados en 4 cuadrantes emocionales
- Análisis de brechas de 12 plataformas de inspiración de diseño (Awwwards, Dribbble, Godly, Mobbin, etc.)
Idea Clave: Cada plataforma de inspiración de diseño existente (Awwwards, Dribbble, Behance, Godly, Mobbin, SiteInspire, Lapa.ninja) categoriza por estilo visual, industria, plataforma o color. CERO plataformas organizan por intención emocional. Esta es la brecha. Un "sitio oscuro minimalista" puede sentirse lujoso (Cartier) o amenazante (CrowdStrike) — el estilo visual es el mismo, el efecto emocional es opuesto. El estilo sin intención es decoración. La intención sin estilo es un wireframe.
El Cuadrante Emocional:
CÁLIDO
(acercamiento, confianza)
|
Cálido+Activo | Cálido+Calmo
(energía, | (comodidad,
alegría) | seguridad)
|
ACTIVO --------+-------- CALMO
(momentum, | (contención,
disrupción) | autoridad)
|
Frío+Activo | Frío+Calmo
(innovación, | (lujo,
poder) | exclusividad)
|
FRÍO
(distancia, precisión)
Por Qué Esto Importa: El posicionamiento de la marca determina en qué cuadrante diseñas. Un psicólogo infantil pertenece a Cálido+Calmo. Una herramienta para desarrolladores pertenece a Frío+Activo. Diseñar el sitio de un psicólogo infantil con la estética de Vercel es un desajuste de posicionamiento — sin importar lo "limpio" que se vea.
Lo Que Claude Hace vs Lo Que Tú Decides
"Claude selecciona las referencias y patrones. Tú validas el ajuste emocional."
| Claude maneja | Tú proporcionas |
|---|---|
| Mapear el posicionamiento de marca al cuadrante emocional | Valores de marca, audiencia objetivo, alternativas competitivas |
| Seleccionar referencias relevantes de la biblioteca | Prueba visceral: ¿esta referencia SE SIENTE como mi marca? |
| Extraer patrones de diseño (tipografía, espaciado, color, movimiento) | Restricciones de presupuesto y técnicas |
| Generar un documento de dirección de diseño con fundamentos | Aprobación final de la dirección antes de empezar a programar |
| Señalar desajustes de posicionamiento (marca cálida + diseño frío) | Contexto del cliente que Claude no puede ver |
Recuerda: La biblioteca de referencias es un punto de partida para la conversación, no una prescripción. La mejor dirección de diseño a menudo surge de combinar elementos de diferentes cuadrantes — una paleta Cálido+Calmo con tipografía Frío+Activo, por ejemplo.
Lo Que Hace Esta Skill
- Posicionamiento Emocional — Mapa el posicionamiento de la marca al cuadrante emocional correcto
- Selección de Referencias — Presenta 3-5 sitios web públicos anotados que coincidan con la sensación objetivo
- Extracción de Patrones — Identifica las mecánicas de diseño específicas que crean cada efecto emocional
- Documento de Dirección — Genera un brief de diseño con decisiones de paleta, tipografía, espaciado, movimiento y diseño
- Detección de Desajustes — Señala cuando las elecciones de diseño contradicen el posicionamiento de la marca
- Mezcla entre Cuadrantes — Guía la combinación intencionada de elementos de diferentes cuadrantes
Cómo Usarlo
Obtener dirección de diseño para un sitio web nuevo
Estoy diseñando un sitio web para [tipo de marca/negocio].
Audiencia objetivo: [quién].
Sensación de marca: [2-3 palabras emocionales].
Alternativas competitivas: [qué usarían en lugar de esta marca].
Carga la skill web-design-director.
Encontrar referencias para una sensación específica
Necesito referencias de sitios web que se sientan [descripción emocional].
No [qué evitar]. La marca es de [industria].
Muéstrame 5 referencias anotadas de la biblioteca.
Auditar un diseño existente contra el posicionamiento de la marca
Aquí está nuestro sitio actual: [URL o captura de pantalla].
Nuestro posicionamiento de marca es: [declaración de posicionamiento].
¿El diseño coincide con la intención emocional? ¿Qué está desalineado?
Instrucciones
Paso 1: Determinar el Cuadrante Emocional
Haz estas preguntas para ubicar la marca:
## Mapeo Emocional de la Marca
**1. ¿Qué debería sentir un visitante en los primeros 3 segundos?**
[ ] Seguro, bienvenido, a gusto (→ Cálido)
[ ] Impresionado, curioso, intrigado (→ Frío)
**2. ¿Cuál debería ser el nivel de energía del sitio?**
[ ] Dinámico, con avance, "las cosas están pasando" (→ Activo)
[ ] Contenido, espacioso, "tómate tu tiempo" (→ Calmo)
**3. ¿Cuál es la relación de la marca con el visitante?**
[ ] Par/amigo/guía (→ Cálido)
[ ] Experto/autoridad/institución (→ Frío)
**4. Alternativas competitivas — ¿qué usaría la gente en lugar de esta marca?**
(Esto determina tu territorio visual — debes verte DIFERENTE de las alternativas)
Determinación del cuadrante:
| Combinación | Cuadrante | Sensación distintiva |
|---|---|---|
| Cálido + Activo | Calidez Energética | "Esto es emocionante Y amigable" |
| Cálido + Calmo | Comodidad Nutritiva | "Me siento seguro y comprendido aquí" |
| Frío + Activo | Poder Innovador | "Esto es de vanguardia y serio" |
| Frío + Calmo | Autoridad Refinada | "Esto es elevado y exclusivo" |
Paso 2: Seleccionar Referencias de la Biblioteca
Elige 3-5 referencias del cuadrante correspondiente. Para cada una, anota:
- Qué mecánica de diseño específica crea el efecto emocional
- Qué sección/página lo demuestra mejor
- Qué tomar prestado vs qué dejar atrás
Reglas de mezcla entre cuadrantes:
- Toma prestado UN elemento de un cuadrante adyacente para contraste (ej., tipografía Frío+Activo sobre paleta Cálido+Calmo)
- NUNCA tomes prestado del cuadrante opuesto (elementos Frío+Calmo en un sitio Cálido+Activo = confusión)
- Los cuadrantes adyacentes comparten un eje: Cálido+Calmo y Cálido+Activo comparten calidez; Frío+Calmo y Frío+Activo comparten precisión
Paso 3: Extraer Decisiones de Diseño
Para cada dimensión de diseño, referencia la biblioteca para hacer una elección específica:
## Documento de Dirección de Diseño
**Cuadrante**: [Cálido+Calmo / Cálido+Activo / Frío+Activo / Frío+Calmo]
**Referencias principales**: [3 sitios de la biblioteca]
**Acento entre cuadrantes**: [1 elemento de un cuadrante adyacente, si lo hay]
### Paleta de Colores
- **Fondo**: [color específico + sitio de referencia que lo usa]
- **Acento principal**: [color específico + justificación emocional]
- **Texto**: [oscuro/claro + justificación de relación de contraste]
- **Sistema**: [monocromático / complementario / análogo]
### Tipografía
- **Encabezados**: [serif/sans/display + peso + sugerencia de fuente específica]
- **Cuerpo**: [fuente + tamaño + interlineado + justificación de referencia]
- **Personalidad**: [lo que el tipo dice sobre la marca]
### Espaciado y Diseño
- **Densidad**: [generoso/moderado/compacto + referencia]
- **Cuadrícula**: [columnas + ancho máximo + justificación]
- **Espacio en blanco**: [agresivo/equilibrado/mínimo]
- **Ritmo de sección**: [alternante/consistente/progresivo]
### Movimiento e Interacción
- **Estilo de animación**: [sutil/expresivo/ninguno + referencia]
- **Comportamiento de desplazamiento**: [suave/estándar/parallax]
- **Estados hover**: [tipo de transformación + temporización]
- **Transiciones de página**: [tipo o ninguna]
### Fotografía e Imágenes
- **Estilo**: [fotografía/ilustración/abstracto/mixto]
- **Dirección emocional**: [referencia al cuadrante de la skill de director de imágenes minimalistas]
- **Tratamiento**: [color completo/apagado/duotono/grano]
### Patrón de Diseño
- **Hero**: [a sangre/contenido/dividido/solo texto]
- **Tarjetas**: [con borde/sin borde/elevadas/planas]
- **Navegación**: [superior/lateral/mínima/oculta]
Paso 4: Validar Contra el Posicionamiento
Antes de finalizar, realiza la comprobación de desajustes:
## Comprobación de Desajustes de Posicionamiento
- [ ] ¿La temperatura del color coincide con la calidez de la marca? (marca cálida = colores cálidos)
- [ ] ¿El nivel de animación coincide con la energía de la marca? (marca calma ≠ animaciones agresivas)
- [ ] ¿La tipografía coincide con el nivel de autoridad de la marca? (marca juguetona ≠ sans-serif en mayúsculas)
- [ ] ¿Un visitante de la audiencia objetivo se sentiría bienvenido o intimidado?
- [ ] ¿Esto se ve DIFERENTE de las alternativas competitivas?
- [ ] ¿Este diseño funcionaría para el PEOR día de la marca? (no solo el día de lanzamiento)
Biblioteca de Referencia — 48 Sitios Web Públicos Anotados
CÁLIDO + CALMO — Comodidad Nutritiva
"Me siento seguro y comprendido aquí"
Los sitios en este cuadrante usan: paletas de colores cálidos, espaciado generoso, imágenes suaves, tipografía accesible, transiciones suaves. Priorizan la legibilidad y la comodidad emocional sobre el impacto visual.
| # | Sitio | Industria | Mecánica de Diseño Clave | Mejor Página para Estudiar | Advertencia de Anti-patrón |
|---|---|---|---|---|---|
| 1 | Headspace | Bienestar/Meditación | Formas redondeadas + ilustración cálida + paleta pastel. Se siente como un abrazo suave. | Hero de inicio + flujo de incorporación | Las ilustraciones pueden volverse infantiles si no se equilibran cuidadosamente |
| 2 | Allbirds | Moda Sostenible | Fotografía en tonos tierra + texturas naturales + cuadrícula limpia. Centrado en el producto pero cálido. | Páginas de detalle de producto | Puede sentirse demasiado "eco-corporativo" sin personalidad |
| 3 | Wildling Shoes | Calzado Infantil | Fotografía de naturaleza + neutros cálidos + flujo orgánico. Se siente como un paseo por el bosque. | Narrativa de desplazamiento en inicio | Es fácil perder el enfoque en el producto entre las imágenes de naturaleza |
| 4 | Kinfolk | Editorial de Estilo de Vida | Dirigido por tipografía + espacio en blanco generoso + fotografía cálida. Confianza tranquila. | Diseños de artículo | Puede sentirse demasiado escaso si el contenido es ligero |
| 5 | Cereal Magazine | Viajes/Diseño | Paleta cálida apagada + cuadrícula editorial + imágenes contemplativas. Ritmo pausado. | Guías de viaje | El bajo contraste puede perjudicar la legibilidad |
| 6 | Aesop | Belleza/Cuidado de la Piel | Fotografía de producto en tonos cálidos + tipografía serif + diseño contenido. Sofisticación cálida. | Localizador de tiendas + páginas de producto | Camina la línea entre Cálido+Calmo y Frío+Calmo |
| 7 | Everlane | Moda Ética | Diseño limpio + fotografía de estilo de vida cálida + precios transparentes. Calidez honesta. | Página "Acerca de" + historias de fábrica | Los mensajes de transparencia pueden sonar a sermón si se exageran |
| 8 | Patagonia | Exteriores/Propósito | Fotografía cálida audaz + contenido impulsado por propósito + profundidad editorial. Calidez activista. | Historias ambientales | El diseño centrado en el activismo puede alienar a audiencias no activistas |
| 9 | Nurture Life | Comidas Infantiles | Pasteles suaves + UI redondeada + fotografía de comida cálida. Amigable para padres. | Página de plan de comidas | El exceso de pasteles puede sentirse genérico como "marca de bebé" |
| 10 | Organic Basics | Esenciales Sostenibles | Tonos neutros + espacio para respirar + navegación mínima. Comercio tranquilo. | Páginas de categoría de producto | Demasiado mínimo puede sentirse como "nada que ver aquí" |
| 11 | Ritual | Bienestar/Suplementos | Acento amarillo cálido + diseño limpio + calidez científica. Confianza a través de la transparencia. | Página de trazabilidad de ingredientes | El acento amarillo puede sentirse clínico si se exagera |
| 12 | Mejuri | Joyería Accesible | Fotografía de estilo de vida cálida + acentos dorados suaves + cuadrícula de comercio electrónico limpia. Lujo accesible. | Páginas de colección | Equilibrar la sensación de lujo con precios accesibles |
Patrón entre cuadrantes: Todos los sitios Cálido+Calmo comparten un interlineado generoso (1.6-1.8), paletas apagadas/tierra y fotografía con personas reales en entornos naturales. La navegación siempre es simple. Las animaciones siempre son sutiles.
CÁLIDO + ACTIVO — Calidez Energética
"Esto es emocionante Y amigable"
Los sitios en este cuadrante usan: colores audaces, animaciones dinámicas, ilustraciones juguetonas, tipografía enérgica, elementos interactivos. Se sienten como un amigo entusiasta mostrándote algo increíble.
| # | Sitio | Industria | Mecánica de Diseño Clave | Mejor Página para Estudiar | Advertencia de Anti-patrón |
|---|---|---|---|---|---|
| 1 | Notion | Productividad | Ilustraciones cálidas + UI de producto limpia + microinteracciones amigables. Entusiasmo organizado. | Galería de plantillas + inicio | El estilo de ilustración se copia mucho — encuentra el tuyo propio |
| 2 | Figma | Herramienta de Diseño | Degradados vibrantes + energía colaborativa + tipo audaz. Orientado al diseño sin ser frío. | Página de comunidad/plugins | El diseño con muchos degradados envejece rápido |
| 3 | Mailchimp | Marketing por Correo | Ilustración distintiva + amarillo de marca cálido + UI juguetona. Impulsado por la personalidad. | Inicio + página de precios | El estilo de ilustración peculiar requiere un fuerte compromiso con la marca |
| 4 | Loom | Comunicación por Video | Púrpura cálido + UI accesible + animaciones centradas en el producto. Tecnología que no se siente tecnológica. | Secciones de demostración del producto | El púrpura cálido puede sentirse corporativo si está sobresaturado |
| 5 | Intercom | Comunicación con Clientes | Colores audaces + copy conversacional + diseño dinámico. Autoridad amigable. | Páginas de recorrido del producto | La paleta audaz puede abrumar sin disciplina de espacio en blanco |
| 6 | Monday.com |
…
[truncado para traducción]