By name: symmetry description: Elementos simétricos se perciben como relacionados y estables. Use cuando diseñe layouts balanceados, iconos, o composiciones que transmitan equilibrio. metadata: author: ux-ui-skills version: "1.0" category: gestalt
Principio de Simetría
Resumen
Los elementos simétricos tienden a percibirse como pertenecientes al mismo grupo. La simetría crea sensación de orden, estabilidad y equilibrio visual.
Origen
- Escuela: Psicología de la Gestalt
- Año: ~1920s
- Autores principales: Max Wertheimer, Kurt Koffka, Wolfgang Köhler
Fundamento Psicológico
El cerebro humano tiene preferencia innata por la simetría, posiblemente evolucionada porque indica salud y estabilidad en organismos. Composiciones simétricas se procesan más rápidamente y se perciben como más armoniosas.
Tipos de Simetría
Simetría Bilateral
- Eje vertical central
- Más común en diseño
- Páginas de landing típicas
- Formularios centrados
Simetría Radial
- Elementos irradiando desde centro
- Dashboards circulares
- Loading spinners
- Pie charts y radar charts
Simetría Traslacional
- Repetición de elementos
- Grids de productos
- Pattern backgrounds
- Galleries de imágenes
Aplicación en Diseño
Layouts Balanceados
- Hero sections centradas
- Cards en grids regulares
- Forms con campos alineados
- Footers con columnas equilibradas
Composición Visual
- Headlines centradas para impacto
- CTAs con padding simétrico
- Icons con balance interno
- Logos simétricos
Cuando Romper Simetría
- Crear jerarquía visual
- Destacar elementos específicos
- Diseños dinámicos y modernos
- Guiar el ojo a un punto focal
Ejemplos
- Apple Website: Layouts centrados y balanceados
- Login Forms: Campos centrados verticalmente
- Product Pages: Imagen izquierda, info derecha (balance)
- Pricing Tables: Columnas de igual peso
- Logos: Mayoría tienen simetría bilateral
Anti-patterns
- ❌ Layouts desequilibrados sin propósito
- ❌ Elementos que se sienten "pesados" de un lado
- ❌ Iconos asimétricos que parecen incompletos
- ❌ Formularios con campos desalineados
- ❌ Simetría forzada que ignora jerarquía
Métricas
- Visual Balance Score: Peso visual equilibrado
- Aesthetic Rating: Percepción de armonía
- Scan Pattern Analysis: Eye-tracking de exploración
- Layout Consistency: Coherencia de alineación
Principios Relacionados
- [[pragnanz]] - Preferencia por formas ordenadas
- [[proximity]] - Elementos cercanos al eje se relacionan
- [[continuity]] - Ejes de simetría como guías visuales
Referencias
- Arnheim, R. (1974). "Art and Visual Perception"
- Lidwell, W. et al. (2010). "Universal Principles of Design"
- https://www.interaction-design.org/literature/article/symmetry