Agent skill

symmetry

Elementos simétricos se perciben como relacionados y estables. Use cuando diseñe layouts balanceados, iconos, o composiciones que transmitan equilibrio.

Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/symmetry

Metadata

Additional technical details for this skill

author
ux-ui-skills
version
1.0
category
gestalt

SKILL.md

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

Didn't find tool you were looking for?

Be as detailed as possible for better results