Mejorar Sus Diseños Con Los Principios De Cierre Y Figura-fondo (Parte 2)

¿alguna vez se preguntó cómo los elementos se unen para crear diseños con éxito? No es casualidad que el diseño convincente simplemente parezca funcionar., Lo que la mayoría de estos diseños tienen en común es el uso de los principios de agrupación gestalt para organizar la información que nos ayuda a entender las relaciones y diferencias entre los elementos. Como diseñadores, podemos usar estos principios para crear nuestro propio trabajo atractivo y exitoso.

comencemos con el principio Gestalt de cierre.

Closure

de acuerdo con los principios universales del diseño, este principio establece que tenemos una tendencia a percibir un conjunto de elementos individuales como un patrón único y reconocible, en lugar de múltiples partes individuales., El uso del cierre disminuye efectivamente la complejidad al reducir los elementos a la menor cantidad posible de partes necesarias para completar un objeto. Con suficiente información, completaremos las partes que faltan para crear un todo. Esto se logra mediante el uso del espacio positivo y negativo.

en el siguiente ejemplo, nuestras mentes completan las líneas para formar un círculo, aunque la forma no exista. El espacio positivo y negativo se combinan para formar nuestra percepción del círculo.,

Closure se puede utilizar para hacernos percibir objetos o patrones utilizando la menor cantidad de información. Nuestras mentes están tan ansiosas por llenar la información que falta que se puede hacer con muy pocos elementos. Sin embargo, si no proporcionamos suficiente información para completar el patrón, entonces no podemos percibir el objeto y el cierre falla, haciendo que el círculo sea mucho más difícil de formar en nuestras mentes. Echa un vistazo y mira si puedes completarlo en tu mente. Es mucho más difícil, ¿no?, No podemos juntarlo ahora con la escasa cantidad de información dada.

Creación Efectiva de Cierre

Los ejemplos de arriba son muy básicos ilustraciones de cómo percibimos los patrones para formar el cierre. En realidad, hay muchos elementos visuales que podemos utilizar para ayudarnos a formar un cierre efectivo:

• Espacio positivo y negativo. Como se mencionó anteriormente, el espacio positivo y negativo se combinan en el cierre para formar un todo., Esto se puede lograr buscando las formas ocultas en el espacio negativo de un diseño o dentro del tipo. Además, eliminar elementos del primer plano puede crear formas negativas interesantes y, al hacerlo, simplificar un diseño.
• Contraste. La clave para formar el cierre es crear un fuerte contraste entre los elementos de primer plano y el fondo. Como siempre, el blanco y negro crea el mejor contraste, pero también puede experimentar con colores complementarios para un fuerte contraste.
• Color., El Color no solo agrega vida a un diseño, sino que también se puede usar para reforzar las relaciones, especialmente si se usan formas abstractas para representar formas.

All closure utiliza muchos si no todos los elementos visuales anteriores. El uso de estos y experimentar con la reducción en sus diseños le ayudará a descubrir nuevas formas. Ahora echemos un vistazo al cierre en el mundo real y veamos cómo se combina todo.

Closure en la práctica

Usando closure, podemos reducir los elementos necesarios para transmitir información visual, reduciendo la complejidad y haciendo que los diseños sean más atractivos., Uno de los usos más comunes del cierre es en el diseño de logotipos de empresas, precisamente porque el cierre puede simplificar un diseño para transmitir rápidamente la identidad de una marca.

a continuación se muestra el famoso logotipo que reconocemos como el NBC peacock. Al comparar el logotipo actual (a la derecha) con el logotipo anterior, puede ver que no son muy diferentes. Pero al reducir los elementos y trabajar con el espacio negativo, el logotipo actual se vuelve mucho más simplificado y elegante., El cierre se logra con éxito utilizando formas positivas y bien agrupadas como plumas, con nuestra percepción del cuerpo del pavo real formada a través del uso del espacio blanco negativo en el medio.

otro logotipo bien reconocido que emplea el cierre con éxito es de FedEx., En este logotipo, el cierre se logra con espacios en blanco negativos, utilizando las partes de la E mayúscula y la x minúscula para formar la flecha familiar que se mueve hacia adelante. El diseñador experimentó con muchos diseños, finalmente tirando de las letras más y más juntas hasta que vio la flecha formándose entre la e y la X. Esto muestra que experimentar con la reducción en sus diseños, y buscar los espacios en el medio, puede producir resultados fantásticos. Para la historia detrás de la creación del logotipo, echa un vistazo al gran artículo de Matthew May en Fast Company. ¿Puedes ver la flecha en el logo?, ¡Nunca te lo perderás de ahora en adelante!

Los ejemplos anteriores son logotipos bien conocidos que usan el cierre de maneras algo obvias. Sin embargo, hay logotipos menos famosos que usan el cierre de forma más sutil. Por ejemplo, Houzz emplea el cierre más conceptualmente. A primera vista, las formas verdes, negras y blancas pueden parecerse a un estante, parte de un edificio o patrón de pared, lo que sugiere de qué se trata el sitio web., Pero una mirada más cercana revela algo más también. El deseo de nuestra mente de llenar los espacios y completar los patrones nos permite combinar las formas separadas en un todo, formando una H mayúscula en el espacio tridimensional.

mientras que el cierre es ideal para la creación de logotipos interesantes, también puede funcionar de otras maneras., Los sitios web también pueden utilizar el espacio positivo y negativo en el diseño de sus interfaces para producir un cierre efectivo. A continuación, el logotipo de Uncrate utiliza un espacio positivo contra un fondo negro y negativo para formar las letras de su logotipo y crear la marca del sitio. Este es también un buen ejemplo de figura-suelo que vamos a entrar en breve.

usar el cierre al crear iconos

Los iconos son útiles para cuando necesitamos transmitir un mensaje o reforzar un concepto dentro de un espacio pequeño. Necesitan ser simples y despojados de sus elementos básicos para ayudar a las personas a comprender rápidamente su significado. Closure funciona bien en la creación de iconos, utilizando espacio positivo y negativo para disminuir la complejidad, mientras que todavía sugiere formas u objetos que percibimos como un todo, como en estos ejemplos del Sitio Web del Proyecto Sustantivo.,

cierre Abstracto

El cierre puede ser bastante abstracto y aún así nos permite formar patrones reconocibles. Uno de mis usos favoritos del cierre es en el doodle de Google., Google emplea el cierre a menudo en sus garabatos, confiando en nuestra necesidad inherente de completar la información faltante para crear un objeto completo. Los doodles de Google dependen de nuestra familiaridad con el logotipo de Google, que nos permite leer la imagen de abajo a pesar de contener formas muy abstractas. Aquí, el color también ayuda a reforzar la relación entre cada letra del logotipo de Google.,

como puede ver, utilizando el espacio positivo y negativo de forma creativa, y reduciendo los elementos en nuestros diseños, podemos crear algunos diseños realmente interesantes con cierre. Podemos aprovechar la necesidad de rellenar las piezas faltantes para disminuir la complejidad y simplificar nuestros diseños., A continuación, echaremos un vistazo a cómo podemos usar el espacio positivo y negativo para crear buenas relaciones figura-suelo.

Figura-fondo

¿Qué es el principio de figura-fondo? De acuerdo con los Principios Universales de diseño, figura-suelo es el estado en el que percibimos los elementos como los objetos de enfoque o el fondo. Al igual que el cierre, la figura-tierra funciona a través del uso del espacio positivo y negativo. Figura-suelo existe en prácticamente todo lo que percibimos visualmente, ya sea una escena, una composición, un sitio web, un logotipo o un icono.,

figura-suelo es estable cuando los objetos son distinguibles del fondo y el fondo no tiene interés. Stable figure-ground proporciona un entorno para los objetos y nos permite enfocar la atención donde queremos. Por ejemplo, percibimos la imagen de abajo como un círculo sobre un fondo. El círculo es el foco y mantiene nuestra atención mientras que el fondo es de poco interés. Este ejemplo muestra una fuerte estabilidad de la figura en el suelo, ya que la figura tiene forma y se percibe que está al frente, mientras que el fondo no tiene forma, continuando detrás de la figura a una profundidad mayor.,

Cuando el terreno de la figura no es estable, como en el ejemplo siguiente, se introduce ambigüedad perceptiva y las relaciones entre los elementos se vuelven poco claras. En este ejemplo deliberadamente simplificado, la figura y el suelo son reversibles, lo que nos hace alternar entre ver un elemento y luego el otro como la figura y luego el suelo.

sin Embargo, la ambigüedad no es necesariamente una mala cosa., Esta falta de estabilidad se puede utilizar a nuestra ventaja al diseñar. Desestabilizar deliberadamente la relación figura-suelo puede introducir discordia o tensión, añadiendo emoción e interés a nuestros diseños. Uno de mis usos favoritos de esta tensión en la figura-tierra es en la serie de carteles criminal Underworld por Simon C. Page. Aquí, Page desestabiliza deliberadamente la figura y el suelo, enfrentando el principio contra sí mismo mientras la figura y el suelo luchan por nuestra atención, al igual que el héroe y el villano en la batalla del cartel el uno contra el otro.,

crear buenas relaciones figura-Suelo

hay muchos elementos visuales que podemos utilizar para reforzar la relación figura-suelo en nuestros diseños. El uso de estos elementos puede ayudarnos a centrar la atención donde queremos, ayudando en la memorabilidad de un sitio web u otro diseño:

• Contrast., Blanco o negro, junto con el color, como se ve en los carteles del inframundo Criminal, crea un contraste muy fuerte. Asimismo, los colores complementarios son excelentes para crear contraste. Si los colores puros son demasiado intensos, modifique el valor (qué tan oscuro o claro es el color) para crear un contraste más efectivo.
• Color. Los colores cálidos, como los amarillos, naranjas y rojos, se perciben como acercándose y se pueden utilizar para fortalecer la figura. Los colores fríos, como los morados, azules y verdes, se perciben como retraídos y se pueden usar para fortalecer el suelo.
• Tamaño., Cuando un elemento grande llena la mayor parte del suelo, se percibirá como la figura. Por el contrario, un pequeño elemento dentro de un gran terreno será percibido como la figura.
• Posición. Los elementos situados en las zonas inferiores se percibirán como figuras, mientras que los situados en las zonas superiores se percibirán como tierra. Esto juega con nuestra percepción de la distancia, ya que percibimos objetos colocados en áreas inferiores para estar más cerca de nosotros y objetos colocados en áreas superiores para estar más lejos.
• Focus., Los elementos que están en foco se percibirán como figura, mientras que los elementos que están fuera de foco, borrosos, desvanecidos o teñidos, se percibirán como tierra.

La mayoría de las buenas relaciones figura-suelo se crean con una combinación de muchos de estos elementos visuales. A continuación, echemos un vistazo a algunos ejemplos del mundo real y veamos cómo estos elementos trabajan juntos para crear figuras exitosas.,

figura-Tierra en la práctica

el ejemplo de figura-tierra en la serie de carteles del inframundo Criminal anterior muestra el principio en un estado inestable, donde figura y Tierra luchan entre sí por la atención. Unstable figure-ground funciona bien cuando hay pocos elementos y el diseño es simple. Sin embargo, este puede no ser necesariamente el uso deseado del principio cuando estamos diseñando sitios web, aunque eso depende del contenido y el contexto del sitio web. Los sitios web deben transmitir información compleja y seguir siendo claros y utilizables., Con la figura-suelo estable, podemos guiar la atención donde queremos y evitar cualquier ambigüedad del mensaje que estamos tratando de comunicar.

echa un vistazo al siguiente ejemplo del Sitio Web de Apple Music. Lo más probable es que su ojo se siente atraído por la imagen del teléfono inteligente, que, junto con la copia a la izquierda del mismo, son los elementos de la figura. Mientras el fondo comienza a luchar por nuestra atención, los elementos de la figura se mejoran mediante el uso de múltiples elementos visuales. En primer lugar, la figura se fortalece a través de la copia grande y el gran tamaño del teléfono inteligente., Colocar el teléfono inteligente en la parte inferior de la pantalla también ayuda a llevar la figura hacia adelante. La figura se mejora aún más al teñir la animación de vídeo en el fondo, haciendo que el suelo retroceda. Finalmente, el contraste entre la pantalla brillante y el fondo oscuro proporcionan una buena separación entre la figura y el suelo.

en el siguiente ejemplo, del Sitio Web de Naya, el tamaño de la figura es el elemento visual más fuerte utilizado para crear una buena figura-tierra. Aquí, percibimos a la mujer (y su sombrero muy grande!) como figura como ella llena la mayor parte del suelo. Además, el uso de un color fresco en el fondo, así como el uso inteligente de elementos superpuestos, ayuda a ayudar a que el fondo retroceda. Finalmente, como el ejemplo de Apple Music, hay un buen contraste que separa el primer plano del fondo.,

finalmente, el excelente contraste entre la figura y el suelo es la fuerza del Sitio Web de R/M Design School. Aquí, el menú exhibe un fuerte contraste, utilizando colores brillantes y negro para separar la figura del suelo. Además, el color cálido se utiliza para fortalecer la percepción de la figura que viene hacia nosotros. ¡No solo quieres extender la mano y agarrar esas baldosas rojas!,

conclusión

comprender cómo usar el cierre y la figura le ayudará a construir relaciones sólidas y diferencias entre los elementos en sus diseños.,

• mire el espacio negativo tanto como el espacio positivo para descubrir formas interesantes;
• juegue con la eliminación de elementos en primer plano y use el espacio negativo para formar formas;
• Finalmente, mezcle elementos visuales como contraste, color, tamaño, posición y enfoque para crear relaciones figura-suelo estables e inestables.

ahora que sabes cómo usar estos dos principios en tu trabajo, ¡adelante y crea tus propios diseños atractivos y exitosos!,

en la tercera y última parte de esta serie, nos centraremos en los principios de continuación y destino común, que implican movimiento, tanto implícito como animado, para crear relaciones.

recursos y buenas lecturas

• «principios Gestalt» en Scholarpedia.
• Principios Universales de diseño revisados y actualizados: 125 formas de mejorar la usabilidad, influir en la percepción, aumentar el atractivo, tomar mejores decisiones de diseño y enseñar a través del diseño por William Lidwell, Kritina Holden y Jill Butler. Rockport Pub, 2010.,
• visualización de información: percepción para diseño por Colin Ware. Elsevier, 2012.

• principios de diseño: percepción Visual y los principios de Gestalt
• conectar y separar elementos mediante contraste y similitud
• equilibrio compositivo, simetría y asimetría
• Cómo mejorar su flujo de trabajo de correo electrónico con diseño Modular

(ml, da, og, JB, il)