jesusgarciafernandez 0. Filosofía Human-Centric AI
Esta habilidad ordena el mundo visual para respetar la atención humana, utilizando la tecnología para crear estructuras invisibles que facilitan la comprensión y el confort visual.
El Rol del Humano: El maquetador debe ser un "Arquitecto del Orden". La IA puede sugerir distribuciones de elementos y automatizar el ajuste de márgenes, pero solo el humano puede imbuir el diseño de un ritmo visual que guíe la emoción del usuario, asegurar que el espacio negativo "respire" de forma armónica y garantizar que la jerarquía destaque lo verdaderamente importante para el propósito humano del proyecto. Empoderamiento: Usamos la tecnología para automatizar la adaptación responsiva y la alineación matemática, permitiendo que el creativo se centre en el equilibrio de masas y en la orquestación estética de la página.
1. Descripción Detallada
La Maquetación y Layout es la gramática estructural del diseño. No es solo "colocar cosas"; es Ingeniería del Escaneado Visual. El enfoque v2.0 incorpora los Sistemas de Rejilla Dinámicos y el Auto Layout Avanzado, donde la estructura de la página (ya sea web, editorial o publicitaria) se fundamenta en retículas modulares y proporciones matemáticas (como la Sección Áurea) que aseguran una consistencia total y una adaptabilidad fluida a cualquier resolución, minimizando el ruido visual y maximizando la velocidad de absorción del contenido.
2. Escenarios de Aplicación
- Diseño de Interfaces Web y Móviles (UI): Creación de rejillas responsivas que garantizan una experiencia impecable del desktop al móvil.
- Maquetación Editorial Digital (Ebooks/Whitepapers): Organización de grandes bloques de texto e imagen para una lectura descansada y ágil.
- Landing Pages de Alta Conversión: Posicionamiento estratégico de beneficios, testimonios y CTAs en los puntos de calor óptico del usuario.
- Dashboards de Datos Complejos: Arquitectura de mosaicos jerarquizados que permiten entender KPIs críticos de un vistazo.
- Cartelería y Branding en Gran Formato: Distribución de elementos que asegura la legibilidad y el impacto a grandes distancias.
3. Requisitos de Implementación
- Maestría en Sistemas de Rejilla (Grids): Configuración de retículas de 12 columnas, rejillas de línea base y márgenes áureos.
- Dominio de Herramientas de Layout: Figma (para UI y prototipado ágil) o Adobe InDesign (para precisión editorial total).
- Entendimiento de Composición Técnica: Capacidad de aplicar las leyes de Gestalt (proximidad, semejanza, continuidad) para agrupar información lógicamente.
4. Diferencial: Diseño Al Azar vs. Maquetación Estratégica v2.0
| Dimensión | Enfoque Casual (v1.0) | Maquetación de Alta Densidad (v2.0) |
|---|---|---|
| Estructura | "A ojo" / Inconsistente. | Basada en retículas y proporciones matemáticas. |
| Jerarquía | Todo compite por atención. | Un solo camino óptico claro y definido. |
| Espacio | El vacío es "error". | El espacio negativo es una herramienta activa. |
| Adaptación | Rígida / Difícil. | Fluida y automática (Auto Layout). |
5. Instrucciones y Pasos Detallados (Protocolo Maestro)
Fase 1: Arquitectura de Retícula y Definición de Márgenes
Objetivo: Crear el "esqueleto" invisible sobre el que se apoyará el diseño.
- Selección de Retícula: Define el número de columnas (Ej: 12 col para web, 2-3 para editorial móvil) y el tamaño del canal (Gutter).
- Configuración de la Línea Base (Baseline): Asegura que todo el texto y elementos gráficos se apoyen en una cuadrícula vertical constante para un ritmo perfecto.
Prompt Maestro de Dirección de Layout:
Actúa como Arquitecto de Layout y Diseñador de Interfaces Senior. Para el proyecto [NOMBRE_PROYECTO], define el protocolo de maquetación:
1. Especifica el Grid Maestro: [Ej: 12 columnas, márgenes de 80px, gutter de 24px].
2. Indica la 'Jerarquía de Masas': [Ej: Hero al 100% de ancho, beneficios en grid de 3 columnas, CTA flotante].
3. Describe el uso del Espacio Negativo: [Ej: Incremento del 20% en márgenes internos para dar una sensación de lujo y aire].
4. Detalla las reglas de Auto Layout: [Ej: Espaciado constante de 48px entre secciones y 16px entre elementos de un mismo grupo].
5. Define el comportamiento Responsivo: [Cero escalado de fuentes pero re-ajuste de columnas de 4 a 1 en mobile].
Fase 2: Composición, Prototipado y Validación Óptica
... (Expansión técnica sobre el equilibrio asimétrico, la creación de puntos de ancla visual -Anchor points- y la validación de la legibilidad mediante mapas de calor simulados) ...
Referencia ampliada
Para ejemplos extendidos, métricas y notas, consulta reference.md (cárgalo solo cuando necesites ese detalle).