similarity
Elementos visualmente similares se perciben como relacionados. Use cuando diseñe sistemas de iconos, estados, categorías, o elementos que deben verse como grupo.
When & Why to Use This Skill
This Claude skill applies the Gestalt Principle of Similarity to UI/UX design, enabling creators to group related elements through consistent visual characteristics like color, shape, and size. By implementing these psychological heuristics, the skill helps reduce cognitive load, improve pattern recognition, and ensure a cohesive visual language across digital products.
Use Cases
- Design System Development: Establishing uniform visual rules for icons, buttons, and components to maintain brand consistency.
- UI State Management: Using consistent color coding (e.g., red for errors, green for success) to help users instantly categorize system feedback.
- Information Architecture: Applying consistent typography and sizing to headers and body text to create a clear, scannable content hierarchy.
- Visual Auditing: Identifying and resolving 'anti-patterns' where inconsistent styles for similar actions lead to user confusion and increased error rates.
| name | similarity |
|---|---|
| author | ux-ui-skills |
| version | "1.0" |
| category | gestalt |
Principio de Similitud
Resumen
Los elementos que comparten características visuales (color, forma, tamaño, orientación) se perciben como relacionados o pertenecientes al mismo grupo.
Origen
- Escuela: Psicología de la Gestalt
- Año: ~1920s
- Autores principales: Max Wertheimer, Kurt Koffka, Wolfgang Köhler
Fundamento Psicológico
El cerebro usa similitud visual como heurística para categorizar información rápidamente. Este proceso automático permite identificar patrones y estructuras sin análisis consciente, reduciendo la carga cognitiva.
Aplicación en Diseño
Color como Agrupador
- Links del mismo color en toda la app
- Estados de error siempre en rojo
- Acciones primarias con color consistente
- Categorías diferenciadas por color
Forma y Estilo
- Iconos con estilo visual consistente
- Botones primarios vs secundarios (filled vs outlined)
- Cards con mismo border-radius y shadow
- Badges con forma consistente
Tamaño y Peso
- Headlines del mismo nivel, mismo tamaño
- Botones de igual importancia, igual tamaño
- Iconos en toolbar de tamaño uniforme
- Texto de ayuda siempre más pequeño
Tipografía
- Misma fuente para mismo tipo de contenido
- Bold para términos clave consistentemente
- Monospace para código en toda la app
- Itálicas para citas siempre
Ejemplos
- Gmail: Emails no leídos en bold, leídos en normal
- GitHub: Labels de colores para categorizar issues
- Spotify: Cards de albums/playlists con estilo uniforme
- iOS: Iconos de apps con rounded squares consistentes
- Material Design: FABs siempre circulares
Anti-patterns
- ❌ Links de diferentes colores en la misma página
- ❌ Botones primarios con estilos inconsistentes
- ❌ Iconos mezclando estilos (filled, outlined, etc.)
- ❌ Estados similares con colores diferentes
- ❌ Elementos relacionados con apariencia distinta
Métricas
- Visual Consistency Score: Adherencia a design system
- Pattern Recognition: Tiempo para identificar categorías
- Error Rate: Confusión por elementos similares mal usados
- Design Audit: Número de inconsistencias visuales
Principios Relacionados
- [[proximity]] - Proximidad también agrupa
- [[nielsen-consistency]] - Consistencia de patrones
- [[uniform-connectedness]] - Conexiones visuales
Referencias
- Wertheimer, M. (1923). "Laws of Organization in Perceptual Forms"
- Lidwell, W. et al. (2010). "Universal Principles of Design"
- https://www.interaction-design.org/literature/article/the-law-of-similarity