Principios de diseño: la relación entre el espacio y la experiencia en modelado (2)
El diseño incluye cambios en la forma y disposición del espacio. Para hacer que un espacio sea más eficiente, comience por ser consciente de él activamente y observar cómo se relacionan entre sí en términos de forma, estilo espacial y espacio. Esta es la segunda parte de una serie de principios de diseño que los principiantes deben dominar. La primera parte habla principalmente del control de la forma, y la segunda parte también se basa en el principio de Gestalt, y en gran medida se obtiene el conocimiento de los principios básicos del diseño.
El principio Gestalt más adecuado al principio espacial es figura y fondo. Al principio de todos los diseños, sus relaciones se consideran mutuamente excluyentes. No pueden disolver la relación ni cambiarse mutuamente.
Por lo tanto, la relación entre los gráficos y el fondo es complementaria entre sí. Pueden mejorar o debilitar el efecto a través de la interacción. Organizar eficazmente la relación entre ellos es uno de los métodos importantes para lograr el propósito del diseño. Al configurar el fondo, piense detenidamente cómo se vinculará con el diseño. ¿Cuál es el principio entre ellos?
"El espacio en blanco se considerará un elemento muy activo y no solo un fondo pasivo." - Jan Chichold
De los tres bloques anteriores. Pensando en el estilo, en el bloque más a la izquierda Verá una serie de líneas negras con el mismo espacio entre ellas. En pocas palabras, las líneas blancas y negras equiespaciadas crean un área gris, que es el efecto del error entre el blanco y el negro. Quitar el blanco del panel central crea un panel negro. En este momento, no sólo 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, se eliminaron las dos líneas negras en esta área, lo que activa un espacio para que el área esté encima del área gris y el fondo se convierta en un gráfico, lo que permite una exploración más profunda. diseño.
(1) Estabilidad: Aclarar los elementos y el fondo, quiénes son los elementos principales que destacan de una forma a 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 que no importa qué otros elementos, se pueden usar métodos similares para crear un efecto de diseño dinámico.
(3) Ambigüedad: los elementos se pueden usar indistintamente con el fondo al mismo tiempo y pueden formar formas interesantes entre sí, lo que permite a la audiencia formar su propio punto de partida.
Con base en 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 diferentes partes del diseño y explicarlo junto con la relación contextual.
La relación entre figura y fondo no es su papel más destacado en los principios de la Gestalt. Además, existen dos:
(1) Proximidad: La proximidad conecta la relación entre otros elementos a través de elementos en un espacio cerrado. Simplemente podemos entender que el espacio entre párrafos es mayor que el espacio entre líneas en un párrafo.
(2) Cierre: Esto hará que los elementos del espacio sean diferentes. La audiencia completará la información en blanco basándose en sus experiencias pasadas para completar el conjunto. Si la mayor parte está en segundo plano, no es necesario apagarlo. Si el espacio es demasiado pequeño, no es necesario montar cerramientos. Sólo manteniendo un equilibrio entre el espacio en blanco y el área de contenido se puede manejar correctamente la relación entre ambos.
Ahora piensa en la música. Si cada nota o acorde se tocara al mismo tiempo, no habría música, sólo ruido.
La música sólo se produce cuando hay contraste entre los sonidos. Los inicios y pausas de diferentes notas crean ritmo y melodía, y sin pausas no habría música.
Del mismo modo, el espacio también puede realizar funciones similares, lo que tiene un efecto positivo en la permeabilidad del espacio. Por diseño, el ojo tiene libertad para moverse hacia adelante y hacia atrás para encontrar elementos. En contraste directo, no hay diseño sin espacio, lo que crea ruido visual a menos que su diseño se incline hacia el diseño del espacio. En general, los visitantes no se quejan de demasiado espacio en blanco, sino de muy poco.
Para áreas en blanco, puede realizar las siguientes operaciones:
(1) Establecer opuestos, resaltar puntos clave y establecer relaciones jerárquicas.
(2) Producir tensión emocional
(3) Transpirabilidad entre elementos
Al igual que la relación entre gráficos y fondo, significa que solo hay algunos elementos básicos. elementos, agregar demasiados elementos al espacio hará que no quede claro. Por lo tanto, se debe establecer alguna relación entre la figura y el fondo para mantenerlos conectados entre sí.
Entre ellos, el papel más importante del espacio en blanco debería ser mejorar la legibilidad y la legibilidad. Para grandes bloques de espacio en blanco, el texto será más atractivo y los elementos serán más claros que en un espacio reducido.
El microespacio es el espacio dentro de un grupo de elementos, el espacio entre letras, palabras y párrafos.
Gran Espacio: Es el espacio entre los elementos principales. Serán elementos individuales o elementos múltiples y proporcionarán caminos para que el ojo tenga una transpirabilidad adecuada entre los elementos.
Los espacios en blanco pueden transmitir calidad, normalmente solo aparecen unos pocos elementos en grandes áreas del espacio. Podemos comparar envases de alta gama y con descuento. ¿Cuál ocupará más espacio? Qué paquete tendrá más espacios en blanco transmite cierta información.
El espacio puede transmitir calidad y otra información, por ejemplo:
(1) Exquisito
(2) Sencillo
(3) Lujo
(4) Limpieza
(5) Personalidad
(6) Apertura
Cuando no tenemos suficiente espacio para uso, podemos utilizar métodos de diseño de relleno. Además, puede evitar el desperdicio de espacio capturando relaciones relevantes entre los elementos de diseño.
La estructura de forma final del diseño también incluye el espacio en blanco utilizado, así que no temas utilizar espacios en blanco. En su lugar, utilice espacios en blanco como elemento de su diseño.
Varias situaciones de espacios en blanco en el diseño web
Para poder aprovechar mejor los espacios en blanco, primero debemos tener una fuerte conciencia de ello y estar familiarizados con la identificación del uso. de espacios en blanco. Diferentes diseños. Presta mucha atención a las formas que utilizas y piensa en la interrelación que forman con los elementos del lienzo. Para hacer esto, echemos un vistazo a algunos diseños de sitios web y cómo utilizar este espacio vacío.
"Conservative"
El diseño de Tom Johnson, Conservative, utiliza mucho espacio en blanco, lo que da al texto y otros elementos espacio para respirar sin que el espectador se confunda con ¿Cuál es el fondo, cuáles son? los elementos que destacan.
Entre información y elementos, realice el diseño de separación correspondiente (puede recordar el principio de proximidad mencionado en el artículo anterior) para distinguir grupos de elementos. Podemos saber claramente cuándo empieza y cuándo termina, dependiendo del espacio entre ellos.
Lo más importante es que hay grandes espacios en blanco a ambos lados del centro de la página, mientras que los elementos en el medio son intermitentes y los elementos de línea activan la conexión entre los dos. Esto ayuda a alertar al usuario de que el área necesita atención especial.
Páginas de estado de Heroku
Las siguientes imágenes son algunas páginas de estado de Heroku. Este sitio cubre muchos eventos. 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 la página tiene por defecto un espacio de fondo blanco, lo cual es muy práctico, hay información muy importante que indicar, como actualizaciones de estado y los últimos informes, y hay espacios en blanco intermitentes.
Introducción a la novela
En el espacio superior, el texto "Introducción a la novela" se encuentra en un estado asimétrico y juega un papel activo. Observe que el gran espacio en blanco en el lado izquierdo de la página dirige la atención directamente al contenido. 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 claras para distinguir estos bloques separados y agrupados. Mientras navegas por este sitio web, notarás que estas líneas no solo sirven para distinguir bloques, sino que también mantienen la transparencia y fluidez entre bloques, evitando la concentración en un punto.
Elliot Jay Stock
Creo que mucha gente está familiarizada con el diseño detrás de este sitio web, porque utiliza un espacio asimétrico para diseñar un efecto muy dinámico.
La imagen grande en la parte superior de esta página proporciona acceso al siguiente contenido como módulo temporal. Además, hay suficiente espacio alrededor de la imagen grande para que las personas estén cómodas y respirables. Si usa el mismo fondo en la barra lateral izquierda, es fácil hacer que el ojo se mueva entre los dos y el cambio de color será más difícil.
Además, al igual que en el sitio web anterior, se puede utilizar el espacio para reunir y distinguir diferentes información y grupos, y cada grupo se puede separar de él, de modo que haya suficiente espacio en blanco en el proceso de búsqueda. Información. Espacio para relajarse visualmente.
Phil Coffman
Este sitio web parece un formulario único que utiliza mucho espacio en blanco. Aunque carece de algunos efectos positivos que resalten la importancia de aquellos elementos originales.
Se utiliza un fondo rectangular colorido con suficiente espacio entre el texto para que sea fácil de leer sin confundirse con otro texto de la página.
Los elementos clave deben adaptarse al ancho de las diferentes ventanas del navegador, pero se mantiene la forma envolvente única.
Muchos sitios web como este se verán en la conferencia New Adventures in Web Design 2013. Los diferentes bloques de información en el espacio contienen información diferente, razón por la cual toda la página es tan animada.
Hay algunas cosas que vale la pena destacar. En la esquina superior izquierda de la imagen hay una flecha circular gris que apunta hacia la derecha. Las flechas no bloquean el flujo del espacio porque no lo tocan, y hay un espacio en cada línea de puntos, lo que enfatiza que esta área puede fluir y al mismo tiempo restringe el flujo de otras áreas. Utilice un color gris más claro para evitar que las flechas se vuelvan dominantes, mejorando así la fluidez.
En resumen, tomamos capturas de pantalla cuando navegamos por muchas páginas y las flechas no se superpondrán con el contenido principal. Pero el ancho de alrededor de 1280 px es el área de contenido principal. De todos modos, la forma en que funciona es en términos de si podemos tener una mejor movilidad, no flechas.
Utilizaré algunos logotipos como ejemplos clásicos de espacios en blanco. Al mismo tiempo, señalaron el espacio negativo utilizado por cada uno y dieron algunas orientaciones para pensar en la aplicación del espacio en blanco.
Algunas de estas banderas se basan en principios de cierre. Verás que realmente no están ahí, pero aún puedes verlos. Estos logotipos simplemente explotan la relación entre figura y fondo. Vea cómo se verá el fondo y todo el logotipo cambiará. El núcleo de este logo, que utiliza mucho espacio negativo, es hacer que el público piense en algo.
Varios logotipos, incluyendo combinación de nube y cama, gato negro, deformación, delfín, odontología, bosque, etc.
Espero que pueda comprender los dos puntos más importantes de este artículo: primero, utilice gráficos y fondos para diseñar y establezca la conexión entre ellos según el principio Gestalt. Esta también es la responsabilidad del diseñador.
En segundo lugar, y quizás más importante, está la necesidad de observar y dedicar tiempo a estudiar cómo se utiliza el espacio en el diseño. No permita que el espacio se convierta en una posición auxiliar para un diseño excelente. 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 de áreas en blanco. Capacidad para analizar conscientemente las brechas para crear un mejor entorno para el diseño. No lo conviertas en un accesorio, sino en un elemento importante, y luego piensa y moldea la relación positiva entre el elemento y el espacio en blanco.
A continuación, agregaremos una serie de principios Gestalt relacionados y, lo que es más importante, nos guiaremos sobre cómo aplicarlos al diseño, como el peso visual y el equilibrio.
/2065 438 04/05/Diseño-Principio-Espacio-Relación-Fondo-Gráfico/