sobre el autor
Steven Bradley es el autor de fundamentos de diseño: elementos, atributos, & principios y animaciones CSS y transiciones para la web moderna., Cuando no …Más aboutSteven Bradley↬
- 10 min de lectura
- la Inspiración,el Diseño,la Creatividad,los Principios de Diseño
- Guardado para leer sin conexión
- Compartir en Twitter, LinkedIn
el Diseño es una disposición de ambas formas y el espacio. Para trabajar más eficazmente con el espacio, primero debes ser consciente de él y aprender a verlo: aprender a ver las formas que el espacio forma y cómo se comunica. Esta es la segunda parte de una serie sobre principios de diseño para principiantes. La primera parte cubrió una introducción a gestalt; el resto de la serie (incluido este post) se basará en esos principios gestalt y mostrará cuántos de los principios fundamentales con los que trabajamos como diseñadores tienen su origen allí.,
la relación figura-Tierra
el principio gestalt que se aplica más al espacio es el de figura-tierra. Todo en un diseño tuyo será visto como uno u otro, y la relación entre ellos es mutuamente excluyente. Ninguno de los dos puede ser percibido excepto en relación con el otro, y cambiar uno es imposible sin cambiar el otro también.
la relación figura-suelo también es complementaria. La figura y el suelo pueden mejorar o restar valor entre sí, y la organización de los dos en relación entre sí es uno de los aspectos más importantes del diseño., Establece un contexto para cómo se comunica su diseño y cómo se interpretará.
«el espacio en blanco debe considerarse un elemento activo, no un fondo pasivo.»
— Jan Tschichold
en el tercer panel, se han eliminado dos de las líneas negras. Esto activa el espacio, haciendo que parezca estar sentado en la parte superior del campo gris., El suelo se ha convertido en la figura y añade más profundidad al diseño.
hay tres tipos de relaciones figura-tierra:
- estable (arriba a la izquierda)
está claro qué es figura y qué es tierra. Uno u otro suele dominar la composición. - Reversible (arriba Centro)
tanto la figura como el suelo atraen la atención del espectador por igual., Esto crea tensión, por lo que cualquiera puede superar al otro, lo que conduce a un diseño dinámico. - Los elementos ambiguos (arriba a la derecha)
pueden parecer tanto figuras como tierra simultáneamente. Forman formas igualmente interesantes, y el espectador debe encontrar su propio punto de entrada en la composición.
dependiendo de la relación que establezcas y de cómo equilibras tanto la figura como el suelo, diriges a la audiencia a mirar diferentes partes del diseño e interpretar lo que ven en diferentes contextos.,
La Figura-tierra no es el único principio gestalt en el que el espacio juega un papel prominente. Otros dos son estos:
- Proximity
Proximity utiliza el espacio para conectar y separar elementos encerrando algunos elementos en el espacio. Un ejemplo que podríamos dar por sentado son los párrafos de texto en la página. El espacio entre párrafos es mayor que el espacio entre líneas de texto dentro de un párrafo. - Closure
Esto hace uso del espacio como espacios entre elementos. Los espectadores llenan los huecos con su propia información para completar un todo de las partes. Demasiado espacio y no se produce ningún cierre., Demasiado poco espacio y no se necesita cierre. Solo el equilibrio correcto entre el espacio y el espacio llenado activará el espacio y conducirá al cierre.
El espacio como elemento de diseño
piense en la música por un momento. Si cada nota o acorde se tocara al mismo tiempo, no tendrías música. Tendrías ruido. La música ocurre cuando los sonidos se contrastan con el silencio. Variar el patrón de sonido y silencio crea ritmo y melodía., Sin el silencio, no hay música.
el Espacio realiza la misma función visual. Da a los elementos positivos espacio para respirar. Le da al ojo libertad para moverse a través de un diseño y descubrir los elementos que está buscando. Lo positivo solo se ve en contraste con lo negativo. Sin espacio, no tienes diseño. Tienes ruido visual.
a menos que el ruido sea lo que estás tratando de comunicar, inclínate hacia el espacio. Las personas son menos propensas a quejarse de demasiado espacio que de demasiado poco.,
Space puede hacer lo siguiente:
- Establecer contraste, énfasis y jerarquía;
- Generar drama y tensión;
- proporcionar descanso visual entre grupos de elementos.
como la relación figura-suelo implica, tienes espacio solo cuando algo está presente dentro de él. Antes de la adición de elementos positivos, el espacio es indefinido. La relación figura-Tierra tiene que ser establecida antes de que el espacio pueda existir y comience su comunicación.
una de las funciones más importantes del espacio es mejorar la legibilidad y la legibilidad., El Espacio Macro hace que el texto sea más atractivo. El microespacio lo hace más legible.
- microespacio
Este es el espacio dentro de los elementos de un grupo. Es el espacio entre letras, palabras y párrafos. - Macro-espacio
Este es el espacio entre los elementos principales. Separa elementos o grupos de elementos y proporciona vías para que el ojo siga y lugares para descansar entre elementos.
El espacio se correlaciona con la calidad. Más espacio implica menos elementos o una rareza de elementos. Compare las tiendas minoristas de gama alta y de descuento., ¿Cuál tiene típicamente más espacio dentro, y cuál empaqueta productos en cada pedacito del espacio disponible? ¿Qué te comunica el espacio?
el espacio también puede transmitir atributos distintos de la calidad, como:
- sofisticación,
- simplicidad,
- lujo,
- limpieza,
- soledad,
- apertura.
pierdes espacio cuando no lo consideras. Puedes desperdiciar espacio llenándolo en exceso. Puede desperdiciar espacio atrapándolo dentro de elementos de un diseño y no permitiendo que se conecte a otro espacio en el diseño.,
El diseño es en última instancia una disposición de formas, y eso incluye las formas formadas por el espacio. No tengas miedo de usar el espacio. Véalo como un elemento de diseño importante bajo su control.
algunos ejemplos de espacio en sitios web
para utilizar mejor el espacio, primero debe ser consciente de él. Aprende a reconocer el espacio en diferentes diseños. Observe la forma que forma y piense en lo que el espacio está comunicando. Con ese fin, veamos el diseño de algunos sitios web, tomando nota de cómo se utiliza el espacio.,
Old Guard
El diseño de la Old Guard de Tom Johnson utiliza mucho espacio en blanco, dando espacio al texto y otros elementos para respirar. No hay duda de lo que es figura y lo que es tierra.
la información está contenida y separada por espacio (recordemos el principio de proximidad), distinguiendo grupos de elementos., Puedes saber fácilmente dónde termina un poste y comienza el siguiente, únicamente por el espacio entre ellos.
el contenido principal está ligeramente descentrado en la página, con un espacio generoso a cada lado. Este espacio es ocasionalmente interrumpido por elementos, activando tanto el espacio como los elementos de interrupción. Esto ayuda a llamar la atención sobre el área y especialmente los elementos dentro.
página de Staus de Heroku
la imagen de abajo muestra parte de la página de estado de Heroku como espacio en su mayoría., Me pasó a coger el sitio web en un día particularmente bueno, porque los elementos positivos adicionales significaría más incidentes reportados en la plataforma. Aquí, más espacio en blanco significa un mejor servicio.
observe cómo el espacio en blanco no necesita ser blanco. Si bien la página es demasiado generosa con el espacio, es poco probable que te quejes de que hay demasiado., Solo la información importante — en este caso, actualizaciones de Estado e informes de incidentes — interrumpe el espacio.
introduciendo la novela
el espacio en la parte superior de la introducción de la novela es asimétrico y activo. Observe cómo el gran bloque de espacio a la izquierda conduce su ojo directamente al contenido. Si haces clic en el sitio web y te desplazas hacia abajo desde la parte superior, verás que el espacio también se usa para separar y agrupar bloques de información.
las líneas de luz delgadas también se utilizan para agrupar y separar estos bloques. Al ver el sitio web, observe cómo las líneas no siempre se tocan, lo que permite que el espacio fluya a su alrededor y se conecte a otro espacio. Esto evita que el espacio quede atrapado.
Elliot Jay Stocks
el sitio web de Elliot Jay Stocks debería ser familiar para todos ustedes, ya que él está detrás del diseño de este. El espacio asimétrico en el sitio web de Elliot nuevamente conduce al espacio activo.,
la imagen grande en la parte superior de esta página podría ser un bloqueo temporal para acceder al contenido de abajo; sin embargo, una generosa cantidad de espacio al lado de la imagen proporciona un espacio amplio y acogedor para que el ojo se mueva alrededor de ella., Si la barra lateral de la izquierda tuviera el mismo color de fondo que el contenido principal, entonces probablemente sería más fácil para el ojo moverse alrededor de la imagen, pero el cambio de color apenas lo hace difícil.
al igual que con los sitios web anteriores, el espacio se utiliza tanto para encerrar como para separar grupos de información distinta, lo que permite que cada grupo se destaque y permita que el ojo encuentre lo que quiere y descanse entre ellos.
Phil Coffman
El contenido en el sitio web de Phil Coffman forma una sola forma que se encuentra en un espacio mayormente vacío., La ausencia de muchos elementos positivos aumenta la importancia de los que están presentes.
incluso dentro de los fondos rectangulares de colores, el texto tiene suficiente espacio a su alrededor para ser fácilmente leído y no ser confundido con otra categoría de texto en la página.,
la forma positiva (y la forma del espacio) se ajusta responsablemente a los diferentes anchos del navegador, pero el patrón de una sola forma grande rodeada de espacio permanece.
New Adventures in Web Design
Al igual que muchos de los sitios web aquí, el sitio web de 2013 para la conferencia New Adventures in Web Design deja un amplio espacio en torno a los elementos. Distintos grupos de información están contenidos por el espacio, y el espacio está activo a lo largo del diseño.
algo interesante a tener en cuenta son las flechas circulares grises entre la imagen en la parte superior izquierda y el contenido principal a la derecha.
¿bloquean estas flechas el flujo del espacio? Debido a que no se tocan y debido a que cada uno está salpicado donde interrumpe el espacio, el espacio puede fluir a través, aunque está claramente más restringido en ese flujo.
El color gris claro ayuda. Evita que las flechas dominen, y no es difícil imaginar el espacio que fluye sobre las líneas.,
para ser justos, si mi navegador fuera más ancho cuando tomé la captura de pantalla, las flechas no se superpondrían con el contenido principal. Sin embargo, alrededor de 1280 píxeles hasta donde el diseño se convierte en una sola columna, lo hacen. En general, funciona, aunque me pregunto si el espacio fluiría mejor sin las flechas presentes.
algunos ejemplos de logotipos
os dejo algunos logotipos en los que el espacio se incorpora como parte integral del diseño. En lugar de señalar el uso del espacio en cada uno, haré algunos comentarios generales y luego te dejaré explorar los espacios por ti mismo.,
observe cómo los logotipos de abajo hacen uso de la relación figura-suelo. Con algunos, hasta que vea tanto la figura como el suelo, no verá el logotipo completo. Ambos son contribuyentes necesarios a lo que se está comunicando.
Varios de estos logotipos se basan en el principio de cierre. Lo que estás destinado a ver no está realmente ahí, pero lo ves de todos modos. Algunos de estos logotipos también juegan con la figura y el suelo. Lo que es la figura cuando se toma en todo el logotipo contra su fondo se convierte en tierra para una figura más pequeña dentro., Esta relación reversible figura-suelo es central para lo que se está comunicando.
- Cloud Bed
- Black Cat Lounge
- Shift
- Dolphin & Seal Logo Designer
- Dental Implants Guide
- Wineforest
Summary
espero que quites dos cosas principales de este post., La primera es la conexión entre el uso del espacio en el diseño y el principio gestalt de figura-tierra. Los principios de Gestalt subyacen mucho de lo que hacemos como diseñadores.
en segundo lugar, y quizás lo más importante, hacer un esfuerzo para pasar tiempo observando cómo se utiliza el espacio en el diseño. No dejes que el espacio sea un subproducto de tus elementos positivos. Aprende a diseñar espacios tanto como, si no más, elementos positivos. El diseño de cualquier página es en última instancia una organización del espacio.
analiza conscientemente ese espacio y úsalo deliberadamente para crear un mejor diseño. No permitas que sea lo que sobra., Véalo como un elemento de diseño esencial y, a continuación, vea la relación entre el espacio y los elementos positivos como un elemento de diseño que le da forma.
la próxima vez, agregaremos más principios gestalt a la mezcla y exploraremos cómo los puntos focales, la continuación y el destino común nos llevan a ideas como el peso visual y el equilibrio compositivo.
- Cuida tus guiones En Y Em: etiqueta tipográfica
- principios de diseño: peso Visual y dirección
- Cómo influye la geometría en el diseño del logotipo
- Sobre el arte
(al, ml, il)