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 Habilidad
- Al iniciar un nuevo proyecto web y decidir la dirección visual antes de codificar
- Cuando 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
- Al elegir entre enfoques de diseño (modo oscuro vs claro, minimalista vs rico, editorial vs producto)
- Construir un mood board a partir de referencias que coincidan con el territorio emocional de la marca
- Cuando los diseños generados por IA parecen "genéricos" porque carecen de una 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 cuatro cuadrantes emocionales
- Análisis de brechas de 12 plataformas de inspiración de diseño (Awwwards, Dribbble, Godly, Mobbin, etc.)
Idea Central: 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,
deleite) | seguridad)
|
ACTIVO --------+-------- CALMO
(impulso, | (contención,
disrupción) | autoridad)
|
Frío+Activo | Frío+Calmo
(innovación, | (lujo,
poder) | exclusividad)
|
FRÍO
(distancia, precisión)
Por Qué 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 Hace Claude vs Lo Que Tú Decides
"Claude selecciona las referencias y patrones. Tú validas el ajuste emocional."
| Claude maneja | Tú proporcionas |
|---|---|
| Mapear el posicionamiento de la marca al cuadrante emocional | Valores de marca, audiencia objetivo, alternativas competitivas |
| Seleccionar referencias relevantes de la biblioteca | Prueba de fuego: ¿esta referencia SE SIENTE como mi marca? |
| Extraer patrones de diseño (tipografía, espaciado, color, movimiento) | Restricciones presupuestarias y técnicas |
| Generar un documento de dirección de diseño con justificación | Aprobación final de la dirección antes de comenzar a codificar |
| 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 proviene de combinar elementos a través de los cuadrantes — una paleta Cálido+Calmo con tipografía Frío+Activo, por ejemplo.
Lo Que Hace Esta Habilidad
- Posicionamiento Emocional — Mapea el posicionamiento de la marca al cuadrante emocional correcto
- Selección de Referencias — Presenta de 3 a 5 sitios web públicos anotados que coincidan con la sensación deseada
- Extracción de Patrones — Identifica los mecanismos de diseño específicos que crean cada efecto emocional
- Documento de Dirección — Genera un brief de diseño con paleta, tipografía, espaciado, movimiento y decisiones de diseño
- Detección de Desajustes — Señala cuando las elecciones de diseño contradicen el posicionamiento de la marca
- Combinación entre Cuadrantes — Guía la mezcla intencionada de elementos de diferentes cuadrantes
Cómo Usarlo
Obtener dirección de diseño para un nuevo sitio web
Estoy diseñando un sitio web para [marca/tipo de negocio].
Audiencia objetivo: [quiénes].
Sensación de marca: [2-3 palabras emocionales].
Alternativas competitivas: [qué usarían en lugar de esta marca].
Carga la habilidad de director de diseño web.
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 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 impulso, "están pasando cosas" (→ 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 su lugar?**
(Esto determina tu territorio visual — debes verte DIFERENTE a las alternativas)
Determinación del cuadrante:
| Combinación | Cuadrante | Sensación característica |
|---|---|---|
| Cálido + Activo | Calidez Energética | "Esto es emocionante Y amigable" |
| Cálido + Calmo | Confort Nutritivo | "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 de 3 a 5 referencias del cuadrante correspondiente. Para cada una, anota:
- Qué mecanismo de diseño específico crea el efecto emocional
- Qué sección/página lo demuestra mejor
- Qué tomar prestado vs qué dejar atrás
Reglas de combinación 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 tomar 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 del 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 + razonamiento de relación de contraste]
- **Sistema**: [monocromático / complementario / análogo]
### Tipografía
- **Títulos**: [serifa/sin serifa/de exhibición + peso + sugerencia de fuente específica]
- **Cuerpo**: [fuente + tamaño + interlineado + justificación de la referencia]
- **Personalidad**: [lo que el tipo dice sobre la marca]
### Espaciado y Diseño
- **Densidad**: [generosa/moderada/compacta + referencia]
- **Rejilla**: [columnas + ancho máximo + justificación]
- **Espacio en blanco**: [agresivo/equilibrado/mínimo]
- **Ritmo de secciones**: [alternante/consistente/progresivo]
### Movimiento e Interacción
- **Estilo de animación**: [sutil/expresivo/ninguno + referencia]
- **Comportamiento de desplazamiento**: [suave/estándar/paralaje]
- **Estados de hover**: [tipo de transformación + duració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 director de imágenes minimalistas]
- **Tratamiento**: [color completo/apagado/duotono/grano]
### Patrón de Diseño
- **Hero**: [a sangre total/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 verificación de desajustes:
## Verificació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 divertida ≠ sans-serif en mayúsculas)
- [ ] ¿Un visitante de la audiencia objetivo se sentiría bienvenido o intimidado?
- [ ] ¿Esto se ve DIFERENTE a las alternativas competitivas?
- [ ] ¿Funcionaría este diseño 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 — Confort Nutritivo
"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 | Mecanismo 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 caer en lo infantil si no se equilibran cuidadosamente |
| 2 | Allbirds | Moda sostenible | Fotografía de tonos tierra + texturas naturales + rejilla 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 de inicio | Fácil perder el enfoque del producto en las imágenes de naturaleza |
| 4 | Kinfolk | Editorial de estilo de vida | Liderado por tipografía + espacio en blanco generoso + fotografía cálida. Confianza tranquila. | Diseños de artículos | Puede sentirse demasiado escaso si el contenido es ligero |
| 5 | Cereal Magazine | Viajes/Diseño | Paleta cálida apagada + rejilla editorial + imágenes contemplativas. Ritmo lento. | Guías de viaje | El bajo contraste puede perjudicar la legibilidad |
| 6 | Aesop | Belleza/Cuidado de la piel | Fotografía de producto de tonos cálidos + tipografía serifa + diseño contenido. Calidez sofisticada. | 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 cálida de estilo de vida + precios transparentes. Calidez honesta. | Página "Acerca de" + historias de fábrica | La mensajería de transparencia puede sentirse aleccionadora si se excede |
| 8 | Patagonia | Exteriores/Propósito | Fotografía cálida y audaz + contenido impulsado por un 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 + interfaz redondeada + fotografía cálida de alimentos. Amigable para padres. | Página de plan de comidas | El uso excesivo de pasteles puede sentirse como una "marca de bebé" genérica |
| 10 | Organic Basics | Esenciales sostenibles | Tonos neutros + espacio para respirar + navegación mínima. Comercio tranquilo. | Páginas de categoría de producto | Demasiado minimalista puede sentirse como "nada que ver aquí" |
| 11 | Ritual | Bienestar/Suplementos | Acento cálido amarillo + 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 excede |
| 12 | Mejuri | Joyería accesible | Fotografía cálida de estilo de vida + acentos dorados suaves + rejilla 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 vibrantes, animaciones dinámicas, ilustraciones lúdicas, tipografía enérgica, elementos interactivos. Se sienten como un amigo entusiasta mostrándote algo increíble.
| # | Sitio | Industria | Mecanismo de diseño clave | Mejor página para estudiar | Advertencia de anti-patrón |
|---|---|---|---|---|---|
| 1 | Notion | Productividad | Ilustraciones cálidas + interfaz de producto limpia + microinteracciones amigables. Entusiasmo organizado. | Galería de plantillas + página de inicio | El estilo de ilustración está muy copiado — encuentra el tuyo propio |
| 2 | Figma | Herramienta de diseño | Gradientes vibrantes + energía colaborativa + tipografía audaz. Centrado en el diseño sin ser frío. | Página de comunidad/complementos | El diseño con muchos gradientes envejece rápido |
| 3 | Mailchimp | Marketing por correo electrónico | Ilustración distintiva + amarillo cálido de marca + interfaz lúdica. Impulsado por la personalidad. | Página de inicio + página de precios | El estilo de ilustración peculiar requiere un fuerte compromiso de marca |
| 4 | Loom | Comunicación por video | Púrpura cálido + interfaz accesible + animaciones centradas en el producto. Tecnología que no se siente técnica. | Secciones de demostración de producto | La calidez púrpura puede sentirse corporativa si está sobresaturada |
| 5 | Intercom | Comunicación con clientes | Colores vibrantes + copia 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]