Principios de diseño: la relación entre el espacio y el fondo gráfico (2)
Si ves el diseño gráfico como un proceso de organización de la forma en un lienzo, solo estás viendo la mitad del trabajo, porque también es importante si el espacio negativo en el lienzo se puede utilizar activamente.
El diseño incluye cambios en la forma y disposición del espacio. Para hacer un uso más eficiente del espacio, primero debemos ser conscientes de esto y observar cómo cambia en forma, estilo espacial y cómo se relacionan los espacios. el uno al otro. Este es el segundo de una serie de principios de diseño que los principiantes deben dominar. La primera parte habla principalmente del control de la forma, mientras que la segunda parte también se basa en los principios de la Gestalt y adquiere en gran medida conocimientos de los principios básicos del diseño.
El principio espacial más adecuado para su uso en los principios Gestalt es el de figura y fondo. Todo está diseñado para ser mutuamente excluyente. Ninguno de ellos puede disolver la relación entre ellos, ni pueden cambiarse mutuamente.
Por lo tanto, la relación entre los gráficos y el fondo es complementaria. Pueden mejorar o reducir el efecto a través de su interacción y son uno de los métodos importantes para organizar eficazmente la relación entre sí para lograr el propósito del diseño. . A la hora de establecer un fondo debemos pensar detenidamente, ¿cómo contactar con el diseño? ¿Y cuál es el principio entre ellos?
"El espacio en blanco se considerará un elemento muy activo, en lugar de un simple fondo pasivo." - Jan Tschichold
Pensando en los estilos de los tres bloques de arriba, en el final En el bloque de la izquierda, vemos una serie de líneas negras con espacios iguales entre ellas. En resumen, los intervalos iguales entre las líneas negras y las líneas blancas formarán un área gris, que es un patrón formado por la alternancia de blanco y negro. de efecto. Quitar el blanco en el panel central lo convierte en un panel negro. En este momento, no solo el estilo del espacio es invisible, sino que todos los demás elementos se convierten en un solo elemento.
En el panel más a la derecha, las dos líneas negras en el área han sido eliminadas. Esto activará un espacio para que esta área esté encima del área gris. El fondo se convierte en el gráfico y puedes continuar. Diseño más profundo.
(1) Estable: Está claro cuáles son los elementos y el fondo, y quién es el elemento principal para destacar en una forma y en otra.
(2) Reversible: Los dos gráficos y el fondo aquí pueden atraer profundamente a los usuarios y crear una sensación de tensión. Por lo tanto, no importa qué otros elementos, se pueden utilizar métodos similares para crear un efecto de diseño dinámico.
(3) Ambigüedad: los elementos se pueden intercambiar con el fondo al mismo tiempo, formando formas interesantes entre sí, permitiendo al público componer desde su propio punto de entrada.
De acuerdo con la relación anterior, cómo establecer y equilibrar la relación entre los gráficos y el fondo puede permitir a la audiencia ver el diseño de diferentes partes e interpretarlas y comprenderlas junto con la relación entre el contexto.
La relación entre figura y fondo no es su papel más destacado en los principios de la Gestalt. Aquí hay dos más:
(1) Acercamiento: Acercamiento a través de un espacio cerrado a elementos para conectar relaciones. entre otros elementos. Simplemente podemos entender: el espacio entre párrafos es mayor que el espacio entre líneas dentro de un párrafo.
(2) Cierre: Esto hará que los elementos del espacio sean diferentes. La audiencia llenará los vacíos con información basada en sus experiencias pasadas para completar el conjunto. Si la mayor parte es fondo, entonces no es necesario adjuntarlo. Si hay muy poco espacio, no es necesario establecer un cierre. Solo manteniendo un equilibrio entre el espacio en blanco y el área de contenido se puede manejar correctamente la relación entre los dos.
Ahora piensa en la música. Si cada nota o acorde se toca al mismo tiempo, entonces no habrá música y se escuchará ruido.
La música se produce cuando hay un contraste entre los sonidos. Los inicios y pausas de diferentes notas crean ritmo y melodía, y sin pausas no habría música.
De la misma manera, el espacio también puede cumplir funciones similares, y aporta un efecto positivo en la transpirabilidad del espacio. Al diseñarlo, el ojo puede moverse libremente hacia adelante y hacia atrás, buscando elementos. Como contraste positivo y negativo, si no hay espacio, no hay diseño, lo que producirá ruido visual, a menos que tu diseño se incline por el diseño del espacio. Normalmente los visitantes no se quejan de demasiado espacio en blanco, sino de muy poco.
Para el área en blanco, puedes hacer lo siguiente:
(1) Establecer un lado opuesto, resaltar puntos clave y establecer relaciones jerárquicas
(2) Genera tensión emocional
(3) Hay transpirabilidad entre elementos
Al igual que la relación entre gráficos y fondo, significa que solo es necesario que existan algunos elementos básicos en el espacio, sumándose también mucho El espacio con demasiados elementos aparecerá menos claro, por lo que se debe establecer una cierta relación entre los gráficos y el fondo para mantener el contacto entre sí.
La función más importante de los espacios en blanco debería ser mejorar la legibilidad y la legibilidad. Una gran cantidad de espacio en blanco hará que el texto sea más atractivo, mientras que un espacio más pequeño debería hacer que los elementos sean más claros.
Microespacio: Es el espacio dentro de un grupo de elementos. Es el espacio entre letras, palabras y párrafos.
Gran Espacio: Es el espacio entre los elementos principales. Serán elementos o elementos separados y proporcionarán caminos por los que el ojo pueda pasar con suficiente transpirabilidad entre ellos.
Los espacios en blanco pueden transmitir calidad, a menudo con muy pocos elementos apareciendo en grandes áreas del espacio. Podemos comparar envases de productos de alta gama y con descuento. ¿Cuál usará más espacio? ¿Qué paquete tendrá más espacio en blanco? Todos transmiten cierta información.
El espacio puede transmitir información como calidad, por ejemplo:
(1) Exquisito
(2) Sencillo
(3) Lujoso
(4) Limpieza
(5) Personalidad
(6) Apertura
Cuando no tenemos suficiente espacio para uso, se puede utilizar el diseño relleno. También puede evitar desperdiciar espacio capturando conexiones relevantes entre elementos de diseño.
El espacio en blanco utilizado también se incluirá en la estructura de forma final del diseño, así que no temas utilizar espacios en blanco. En su lugar, considere el espacio en blanco como un elemento para completar su diseño.
Varios casos de espacios en blanco en el diseño web
Para utilizar mejor los espacios en blanco, primero debes tener una fuerte conciencia de ello y estar familiarizado con la identificación de diferentes El uso de diseño de espacios en blanco. Presta mucha atención a las formas utilizadas y piensa en cómo se relacionan con los elementos del lienzo. Para hacer esto, echemos un vistazo a cómo algunos diseños de sitios web utilizan este tipo de espacio en blanco.
"Conservative"
El diseño de Tom Johnson, Conservative, utiliza mucho espacio en blanco para que el texto y otros elementos tengan espacio para respirar y que el espectador no confunda cuál es el fondo y cuál. Este es un elemento destacado.
Diseñe la separación correspondiente entre información e información, y entre elementos (puede recordar el principio de proximidad mencionado en el artículo anterior), y distinga grupos de elementos. Podemos saber claramente cuándo comienza y termina algo, dependiendo del espacio entre ellos.
El contenido más importante está en el centro de la página, con grandes espacios a ambos lados. Los elementos en el medio se interrumpen de vez en cuando, y hay elementos de línea que activan la conexión entre los dos. . Esto ayuda a recordar al usuario que esta área es de especial preocupación.
Página de estado de Heroku
La siguiente imagen muestra parte de la página de estado de Heroku. Hay muchos incidentes reportados en este sitio web. Aquí, más espacio en blanco significa mejor servicio.
Cabe destacar que el fondo de la página no tiene por qué ser blanco. Aunque el espacio de fondo predeterminado de la página web es blanco, y también es muy práctico, hay algunos datos muy importantes que. deben recordarse, como las actualizaciones de estado y los últimos informes, interrumpidos por espacios en blanco.
Presentación de la novela
El texto "Presentación de la novela" en el espacio superior es asimétrico y juega un papel positivo. Observe el gran espacio en blanco en el lado izquierdo de la página que conduce directamente al contenido del ojo. Si hace clic en la página y se desplaza de arriba a abajo, encontrará que los espacios en blanco de la página están separados y combinados entre sí.
Se utilizan líneas de colores claros para distinguir estos bloques separados y agrupados. Al navegar por este sitio web, encontrará que estas líneas no solo sirven para distinguir los bloques, sino que también mantienen la transpirabilidad y la fluidez entre los bloques. Evite centrarse en un punto.
Elliot Jay Stocks
Creo que mucha gente está familiarizada con el diseño detrás de este sitio web, porque utiliza un espacio asimétrico para crear un efecto muy dinámico.
La imagen grande en la parte superior de esta página se puede utilizar como módulo temporal para acceder al contenido a continuación. Además, hay suficiente espacio en blanco alrededor de la imagen grande para mantener una transpirabilidad cómoda. Si se usa el mismo fondo para el contenido en la barra lateral de la izquierda, los ojos se moverán fácilmente entre los dos y el color cambiará. También ocurrirá. Será más difícil.
Además, al igual que en el sitio web anterior, el espacio se puede utilizar para reunir y distinguir diferentes información y grupos, y también puede hacer que cada grupo se destaque del resto, de modo que haya más información en el proceso de Buscar información. Suficiente espacio en blanco permite que los ojos se relajen y descansen.
Phil Coffman
Este sitio web da la impresión de un formulario único que utiliza mucho espacio en blanco. Aunque faltan algunos efectos positivos que resalten la importancia de aquellos elementos originales.
Utilizando un fondo rectangular colorido, el texto tiene suficiente espacio alrededor para que sea fácil de leer y no se confunda con otro texto de la página.
El elemento de enfoque necesita adaptarse al ancho de las diferentes ventanas del navegador, pero el marco de forma única aún existe.
Verá muchos sitios web como este en la conferencia New Adventures in Web Design 2013. Los diferentes bloques de información en el espacio contienen información diferente y la página en general se ve muy animada.
Algo que vale la pena destacar es que hay una flecha circular gris que apunta hacia la derecha en la esquina superior izquierda de la imagen. Estas flechas no bloquean el flujo del espacio porque no se tocan. Hay una discontinuidad en cada línea de puntos, lo que enfatiza que esta área puede fluir y también restringe el flujo de otras áreas. Utilice un color gris más claro para evitar que las flechas se vuelvan dominantes y mejorar la fluidez.
En definitiva, cuando navegamos por muchas páginas, haremos capturas de pantalla y las flechas no se superpondrán con el contenido principal. Sin embargo, el área de contenido principal tiene aproximadamente 1280 px de ancho. En definitiva, lo que funciona es si tenemos mejor liquidez, no las flechas.
Usaré algunos logotipos como ejemplos clásicos de espacios en blanco. Al mismo tiempo, señaló el espacio negativo utilizado, dio algunas orientaciones y pudo pensar en la aplicación del espacio en blanco.
Algunos de estos logotipos se basan en el principio de cierre. Verás que realmente no existirán, pero aún podrás verlos. Estos logotipos utilizan la relación entre la figura y el fondo. Cuando vea el fondo, habrá algunos cambios en el aspecto de los gráficos y todo el logotipo cambiará. El núcleo de este tipo de logotipo que utiliza mucho espacio negativo es hacer que el público piense en algo.
Varios logotipos, entre ellos una combinación de nubes y camas, gatos negros, transiciones, delfines, odontología, bosques, etc.
Espero que pueda obtener los dos puntos más importantes de este artículo: el primero es utilizar gráficos y fondos para diseñar y establecer conexiones entre sí en los principios de la Gestalt, y los principios de la Gestalt también son una guía esencial. como diseñador.
En segundo lugar, y quizás más importante, está el esfuerzo que requiere observar y dedicar tiempo a estudiar el uso del espacio en el diseño. No permita que el espacio se convierta en una posición auxiliar para un buen diseño. Debe hacer un buen uso de este espacio para completar el diseño de manera más eficiente porque el diseño de cualquier página es la organización mutua del espacio en blanco. Capacidad para analizar conscientemente las brechas y crear intencionalmente un mejor entorno para el diseño. No lo conviertas en un accesorio, sino en un elemento importante, y luego piensa y dale forma a la relación entre el elemento y el espacio en blanco para crear un efecto positivo.
En el futuro, agregaremos una serie de principios Gestalt más relevantes y, lo que es más importante, cómo aplicarlos al diseño, como el peso visual y las relaciones de equilibrio.
/2014/05/principios-de-diseño-espacio-figura-tierra-relación/