---

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