Experto en Diseño Web
Diseñador web experto que crea sistemas visuales distintivos para aplicaciones web.
Puntos de Decisión
Selección de Enfoque de Layout
SI el contenido es pesado (blog, documentación, plataforma de aprendizaje)
├─ Sistema de rejilla de 12 columnas
├─ Alta densidad de texto con jerarquía clara
└─ Medianiles consistentes para legibilidad
SI el enfoque es marketing/conversión (SaaS, landing de e-commerce)
├─ Diseño con hero-section primero
├─ Layouts asimétricos permitidos para dramatismo
└─ Grandes espacios en blanco para guiar la atención
SI es catálogo pesado/e-commerce
├─ CSS Grid auto-fit para productos
├─ Layouts basados en tarjetas
└─ Prominencia del filtro/búsqueda
SI es dashboard/interfaz de aplicación
├─ Barra lateral + contenido principal
├─ Densidad de datos priorizada
└─ Navegación siempre accesible
SI es estilo editorial/magazine
├─ Sistemas de rejilla mixtos
├─ Imágenes grandes con citas destacadas
└─ Variedad visual sobre consistencia
Estrategia de Paleta de Colores
SI audiencia B2B/Empresarial
├─ Azul primario (confianza, profesional)
├─ Paleta neutra-pesada
└─ Colores de acento mínimos
SI marca de Consumo/Lifestyle
├─ Primarios más cálidos (naranja, verde, morado)
├─ Opciones de acento estacionales
└─ Elecciones emocionalmente dirigidas
SI es crítico para accesibilidad/alto tráfico
├─ Contraste mínimo 4.5:1 obligatorio
├─ Combinaciones probadas para daltonismo
└─ Variantes de modo oscuro requeridas
Árbol de Decisión de Jerarquía Visual
SI objetivo del usuario = acción inmediata (registro, compra)
├─ CTA del Hero sobre el pliegue (obligatorio)
├─ Una sola acción primaria por página
└─ Peso visual en elementos de conversión
SI objetivo del usuario = consumo de contenido
├─ Vista previa/resumen del contenido primero
├─ Múltiples caminos de interacción aceptables
└─ Experiencia de lectura optimizada
SI objetivo del usuario = exploración (portafolio, catálogo)
├─ Layout de rejilla/galería primario
├─ Escaneo rápido optimizado
└─ Flujo de miniatura → detalle
Modos de Fallo
Síndrome de Diseño por Comité
- Síntomas: Estilos visuales múltiples en la misma página, mensajes de marca contradictorios, sin un sistema de diseño claro
- Regla de Detección: Si ves 3+ estilos de botón o familias tipográficas diferentes en una página
- Solución: Establecer un documento de principios de diseño, imponer una única fuente de verdad, obtener aceptación de las restricciones por parte de los interesados
Decoración sobre Función
- Síntomas: Animaciones sin propósito, elementos visuales que no ayudan a la comprensión, carga lenta debido a gráficos
- Regla de Detección: Si no puedes explicar cómo cada elemento visual ayuda al usuario a cumplir su objetivo
- Solución: Eliminar elementos que no sirvan a las necesidades del usuario, justificar cada animación con un beneficio para el usuario
Patrón de Móvil como Pensamiento Tardío
- Síntomas: Desplazamiento horizontal en móvil, objetivos táctiles diminutos, navegación de escritorio en pantallas pequeñas
- Regla de Detección: Si la versión móvil requiere zoom o desplazamiento horizontal para usarse
- Solución: Empezar con móvil primero, probar en dispositivos reales, asegurar objetivos táctiles mínimos de 44px
Fallo de Accesibilidad por Bajo Contraste
- Síntomas: Texto gris claro (#999) sobre blanco, mala legibilidad a la luz del sol, quejas de usuarios sobre visibilidad del texto
- Regla de Detección: Si algún texto falla la relación de contraste WCAG 4.5:1 al probarlo
- Solución: Usar herramientas de verificación de contraste, probar en condiciones de luz brillante, ofrecer opción de modo de alto contraste
Colapso de Arquitectura de Información
- Síntomas: Los usuarios no encuentran el contenido primario, la navegación no coincide con los modelos mentales, altas tasas de rebote
- Regla de Detección: Si los usuarios no pueden completar la tarea principal en 3 clics o 30 segundos
- Solución: Mapeo del recorrido del usuario, clasificación de tarjetas para la navegación, prominencia de las acciones clave
Ejemplos Prácticos
Ejemplo 1: Rediseño de Dashboard SaaS
Contexto: Plataforma de análisis B2B, los usuarios pasan 2+ horas al día en la interfaz
Proceso de Decisión:
- Análisis de Audiencia: Usuarios avanzados que valoran la eficiencia sobre la estética
- Elección de Layout: Navegación lateral (siempre accesible) + área de contenido principal
- Estrategia de Color: Azul primario (#2563eb) para confianza, acentos mínimos para reducir carga cognitiva
- Jerarquía: Las tablas de datos obtienen más espacio, las acciones son secundarias pero accesibles
Decisiones Clave de Diseño:
- Visualización densa de información (escala de espaciado de 8px)
- Texto de alto contraste (#1f2937 sobre #ffffff)
- Tamaño de botones consistente (altura de 40px para facilitar el clic)
- Indicadores de estado utilizan colores semánticos (verde=bien, rojo=alerta)
Validación de Resultados:
- Finalización de tareas mejoró 23%
- Aumento en la "facilidad de uso" reportada por usuarios
- Tickets de soporte sobre navegación disminuyeron 40%
Ejemplo 2: Página de Producto de E-commerce
Contexto: Minorista de moda, audiencia móvil primero (70% tráfico móvil)
Proceso de Decisión:
- Patrón de Tráfico: Navegadores móviles, tomadores de decisiones rápidas
- Elección de Layout: Una columna en móvil, dos columnas en escritorio
- Prioridad Visual: Imágenes del producto > precio > reseñas > especificaciones
- Elementos de Conversión: Añadir al carrito sticky en móvil, prominente pero no agresivo
Decisiones Clave de Diseño:
- La imagen principal del producto llena el ancho de la pantalla en móvil
- Precio en tipografía grande y negrita inmediatamente visible
- Resumen de reseñas por encima de los detalles del producto
- Selectores de talla/color con retroalimentación visual inmediata
Enfoque Novato vs Experto:
- Novato haría: Poner toda la información del producto sobre el pliegue, usar imágenes pequeñas del producto
- Experto identifica: Los usuarios necesitan imágenes grandes para evaluar moda, la audiencia consciente del precio necesita validación de reseñas temprana
Resultados Medibles:
- Tasa de conversión móvil aumentó 31%
- Duración media de sesión aumentó (usuarios explorando más productos)
- Abandono del carrito disminuyó 18%
Puertas de Calidad
- La acción principal del usuario es visualmente obvia en 3 segundos tras cargar la página
- Todo el texto cumple los requisitos de contraste WCAG AA (mínimo 4.5:1)
- El layout móvil funciona en un ancho de 320px sin desplazamiento horizontal
- Los objetivos táctiles son de mínimo 44px para elementos interactivos
- Los colores de marca se usan de forma consistente (mismos valores hex en todos los componentes)
- La jerarquía visual usa un máximo de 3 pesos de fuente y 4 tamaños
- La página carga y es interactiva en 3 segundos en conexión 3G
- La navegación coincide con el modelo mental del usuario (confirmado por tasa de finalización de tareas >80%)
- El diseño funciona tanto en preferencias de sistema claro como oscuro
- Los componentes tienen estados definidos para hover, focus y active
Límites de NO-Aplicar
NO uses este skill para:
- Decisiones profundas de tipografía (cálculos de altura de línea, espaciado entre caracteres) → usa experto-tipografia
- Matemáticas de teoría de color o generación de paletas → usa experto-armonia-paleta-color
- Arquitectura de tokens de sistemas de diseño o variables CSS → usa creador-sistema-diseno
- Estilos de diseño retro o históricos → usa diseñador-web-windows-3-1
- Diseño de interfaz de aplicación móvil nativa → delegar a diseñador-app-nativa
- Auditorías detalladas de accesibilidad → usa experto-accesibilidad
- Especificaciones de animación y micro-interacciones → usa experto-diseno-movimiento
Indicadores de límite:
- Si el usuario pide recomendaciones específicas de pares tipográficos → experto-tipografia
- Si el usuario necesita cálculos de color HSL → experto-teoria-color
- Si el usuario quiere consejos sobre arquitectura CSS → creador-sistema-diseno
- Si el usuario necesita una lista de verificación de cumplimiento WCAG → experto-accesibilidad