Explains the Gestalt principle of closure in design, aiding in the creation of minimalist icons and interfaces that suggest completeness.
--- name: closure description: El cerebro completa formas incompletas. Use cuando diseñe iconos minimalistas, logos, o interfaces que sugieren más de lo que muestran explícitamente. metadata: author: ux-ui-skills version: "1.0" category: gestalt --- # Principio de Cierre ## Resumen El cerebro tiende a completar formas incompletas o fragmentadas, rellenando los vacíos para percibir objetos completos y familiares. ## Origen - **Escuela**: Psicología de la Gestalt - **Año**: ~1920s - **Autores principales**: Max Wertheimer, Kurt Koffka, Wolfgang Köhler ## Fundamento Psicológico El sistema visual busca patrones completos y reconocibles. Cuando encuentra elementos incompletos pero sugerentes, automáticamente "cierra" los gaps para formar figuras coherentes. Esto permite diseños más limpios que comunican con menos elementos visuales. ## Aplicación en Diseño ### Iconografía Minimalista - Iconos con formas sugeridas, no cerradas - Símbolos que implican acción sin mostrarla completa - Logos que usan espacio negativo - Indicadores con elementos parciales ### Cards y Containers - Cards sin bordes completos - Secciones delimitadas por elementos parciales - Fondos que sugieren límites - Shadows que implican separación ### Carousels y Listas - Items parcialmente visibles sugieren más contenido - Peek de siguiente elemento - Scroll indicators implícitos - "Ver más" sugerido visualmente ### Navegación - Menús que se "cortan" sugiriendo scroll - Tabs que continúan fuera del viewport - Breadcrumbs con elementos truncados - Indicadores de paginación parciales ## Ejemplos - **IBM Logo**: Líneas horizontales que el ojo completa - **WWF Panda**: Figura formada por espacios negativos - **Carousels**: Item parcial visible sugiere más - **Loading skeletons**: Formas sugieren contenido - **macOS Dock**: Reflejo parcial implica profundidad ## Anti-patterns - ❌ Formas tan incompletas que no se reconocen - ❌ Elementos cortados que parecen bugs - ❌ Iconos demasiado abstractos para cerrar - ❌ Contenido oculto sin indicación de más - ❌ Gaps que el usuario no puede completar mentalmente ## Métricas - **Icon Recognition Rate**: Usuarios identifican iconos correctamente - **Content Discovery**: % que encuentra contenido parcialmente visible - **Minimalism Score**: Elementos necesarios vs superfluos - **Visual Completion Test**: Formas reconocidas vs no reconocidas ## Principios Relacionados - [[pragnanz]] - Tendencia a formas simples - [[figure-ground]] - Separar figura del fondo - [[continuity]] - Completar líneas y curvas ## Referencias - Wertheimer, M. (1923). "Laws of Organization in Perceptual Forms" - Lidwell, W. et al. (2010). "Universal Principles of Design" - https://www.nngroup.com/articles/gestalt-closure/--- name: closure description: El cerebro completa formas incompletas. Use cuando diseñe iconos minimalistas, logos, o interfaces que sugieren más de lo que muestran explícitamente. metadata: author: ux-ui-skills version: "1.0" category: gestalt --- # Principio de Cierre ## Resumen El cerebro tiende a completar formas incompletas o fragmentadas, rellenando los vacíos para percibir objetos completos y familiares. ## Origen - **Escuela**: Psicología de la Gestalt - **Año**: ~1920s - **Autores principales**: Max Wertheimer, Kurt Koffka, Wolfgang Köhler ## Fundamento Psicológico El sistema visual busca patrones completos y reconocibles. Cuando encuentra elementos incompletos pero sugerentes, automáticamente "cierra" los gaps para formar figuras coherentes. Esto permite diseños más limpios que comunican con menos elementos visuales. ## Aplicación en Diseño ### Iconografía Minimalista - Iconos con formas sugeridas, no cerradas - Símbolos que implican acción sin mostrarla completa - Logos que usan espacio negativo - Indicadores con elementos parciales ### Cards y Containers - Cards sin bordes completos - Secciones delimitadas por elementos parciales - Fondos que sugieren límites - Shadows que implican separación ### Carousels y Listas - Items parcialmente visibles sugieren más contenido - Peek de siguiente elemento - Scroll indicators implícitos - "Ver más" sugerido visualmente ### Navegación - Menús que se "cortan" sugiriendo scroll - Tabs que continúan fuera del viewport - Breadcrumbs con elementos truncados - Indicadores de paginación parciales ## Ejemplos - **IBM Logo**: Líneas horizontales que el ojo completa - **WWF Panda**: Figura formada por espacios negativos - **Carousels**: Item parcial visible sugiere más - **Loading skeletons**: Formas sugieren contenido - **macOS Dock**: Reflejo parcial implica profundidad ## Anti-patterns - ❌ Formas tan incompletas que no se reconocen - ❌ Elementos cortados que parecen bugs - ❌ Iconos demasiado abstractos para cerrar - ❌ Contenido oculto sin indicación de más - ❌ Gaps que el usuario no puede completar mentalmente ## Métricas - **Icon Recognition Rate**: Usuarios identifican iconos correctamente - **Content Discovery**: % que encuentra contenido parcialmente visible - **Minimalism Score**: Elementos necesarios vs superfluos - **Visual Completion Test**: Formas reconocidas vs no reconocidas ## Principios Relacionados - [[pragnanz]] - Tendencia a formas simples - [[figure-ground]] - Separar figura del fondo - [[continuity]] - Completar líneas y curvas ## Referencias - Wertheimer, M. (1923). "Laws of Organization in Perceptual Forms" - Lidwell, W. et al. (2010). "Universal Principles of Design" - https://www.nngroup.com/articles/gestalt-closure/
Imported from the listed AgentSkill.sh category. Complete supplied package files and notices are retained. Required external tools and credentials are not installed. No bundled code was executed during import. Individual agent task behavior has not been tested.
Resource notes updated 2026-10-27 · Original instructions by vjrivmon