Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Guía de introducción exhaustiva al Diseño Visual

by
Length:LongLanguages:

Spanish (Español) translation by Marina Cardone (you can also view the original English article)

Esta guía exhaustiva cubrirá los principios fundamentales del diseño visual, demostrando con ilustraciones para profundizar tu comprensión. Ya seas un profesional experimentado, o nuevo en el mundo del diseño web, aprender los básicos desde suelo firme te ayudará enormemente a mejorar la calidad de tu trabajo de diseño.

Este artículo exhaustivo actuará como "lugar único de principios de diseño visual", con todo lo que necesitarás para comenzar.

Temas

Vamos a cubrir una gran cantidad de cosas en esta guía, incluyendo los siguientes principios:

  • Unidad
  • Alineación
  • Continuación
  • Énfasis
  • Relación Figura-Fondo
  • Jerarquía
  • Consistencia
  • Similitud
  • Espacio en blanco
  • Balance
  • Proximidad
  • Cierre

¿Qué es Diseño Visual?

Diseño Visual te ayuda a transmitir un mensaje a medida de una audiencia. Diseño es comunicación; a través del diseño visual te comunicas con un espectador. Las "palabras" de tu repertorio incluyen formas, textos, símbolos, imágenes, espacio en blanco, texturas, colores e incluso movimiento (animación o movimiento implícito). Tu objetivo es ser un guía que lleva a un usuario a través del diseño, dirigiéndolo donde tu quieres que vayan (¡también donde es mejor para ellos!). Una buena UI (Interfaz de Usuario) tomará esta preocupación seriamente y ofrecerá soluciones acordes.

A continuación encontrarás siete principio del diseño y puñado de útiles principios de la gestalt de los que deberías estar al tanto. Deben ser tomados como guías, no como algo escrito en piedra, y te ayudará a tomar decisiones que llevan a mayor cohesión y calidad.

Relaciones

Un tema común nos guiará a través de todos los principios de los que hablaremos hoy: relaciones. Buen diseño visual viene de crear de manera exitosa relaciones distintivas en tu trabajo. Ten en mente, de todas maneras, que el siguiente contenido es relativamente fácil de aprender y entender, pero lleva práctica reunir las piezas para obtener los resultados que crean estas relaciones exitosas.

Gestalt

Muchos de los principios que listamos (como "proximidad", y "relación de figura-fondo") se pueden categorizar como "Principios de la Gestalt". Estas leyes se enfocan en como nosotros, como el espectador, percibimos la suma de las pequeñas partes como un todo. Cómo buscamos patrones y, como ya mencionamos, relaciones. De manera similar a otros conceptos de diseño visual, se pueden aplicar a impresión, web, video y fotografía.

Una vez dicho esto, empecemos con nuestro primer principio Gestalt!

Unidad

El diseño funciona mejor como un todo cohesivo, apuntando a lograr unidad cuando todos los elementos se ponen juntos. Intenta construir estructuras unificadas. Proximidad, alineación, continuidad y repetición pueden ayudar a lograr percibir la unión de los elementos. Esto también ayuda a separar las piezas del puzzle sin utilizar bordes adicionales u otros elementos de diseño. Como espectadores, percibimos la estructura general primero y luego miramos las cosas nuevas.

Dropbox unity
Unidad en Dropbox

Dropbox hace muchas cosas bien, haciendo uso de cada principio de diseño en el libro. La página "acerca de" es un buen ejemplo de unidad. Puedes notar como se logra la unidad visual con poco esfuerzo con solo unos pocos elementos en la página. Incluso pueden perder los bordes y seguiría funcionando.

La unidad necesita ser construida continuamente -no es algo que pase en un instante. Piensa en ella como la combinación de unidades macro y micro; los elementos más pequeños necesitan transmitir cohesión cuando construyes una impresión de unidad mayor.

GitHub unity
Unidad en GitHub

GitHub también hace un buen trabajo estableciendo unidad. Todas las pequeñas consideraciones en una página rica en contenido como esta agregan a un todo consistente donde todas las piezas encajan entre sí y nada sobresale negativamente.

La unidad y la cohesión hacen a los espectadores más confortables. Estableciendo confianza y comprendiendo cómo los usuarios deben seguir el contenido es libre según el producto. Si nada sobresale en el camino que pueda bloquear la atención del usuario, la experiencia del usuario será con menos fricción.

More unity on Github
Más unidad en Github 

La siguiente ilustración es otro ejemplo de excelente utilización de los principios de unidad. El bloque que muestra la lista de integraciones no necesita nada más para establecer unidad.

Alineación

La alineación reduce el ruido visual. Piensa en un escritorio desordenado versus un escritorio ordenado. Incluso si te gustan los escritorios que lucen como desorden-creativo, tu audiencia o clientes no familiarizados con tu escritorio apreciarían más una apariencia ordenada que una caótica. Es más fácil de navegar y encontrar piezas relevantes de información si puedes establecer cierta clase de flujo a través de la alineación. Como efecto colateral, la jerarquía (algo que todos buscamos enseguida) es más fácil de establecer sin elementos flotando por todo el lugar.

Alignment by Dropbox
Alineación en Dropbox

Este screenshot del centro de ayuda de Dropbox muestra un agradable uso de una grilla clara para alinear correctamente los elementos.

themanyfacesofcom a fun side project from Paravel
themanyfacesof.com, un divertido proyecto lateral de Paravel

themanyfacesof.com incluye un un gran sitio con un poco de temática de Burt Reynolds que tiene toneladas de ejemplos de buena alineación en acción. La alineación es muy sutil y principalmente lograda a través de tipografía y grillas limpias -y rompiendo hábilmente la alineación de vez en cuando.

The Dropbox feature list
La lista de características de Dropbox

La lista de características de Dropbox es otro ejemplo que vale la pena estudiar. Diseño simple, no pretencioso y efectivo trabaja para estructurar el contenido utilizando la alineación para maximizar el efecto.

Continuación

La alienación visual funciona de la mano con el principio de continuación de la Gestalt. Veremos más acerca de cómo puedes utilizar esto en tu trabajo cuando cubramos las grillas en esta serie. Los objetos que siguen una dirección común, por ejemplo a través de estar alineados entre ellos, crean la impresión de estar más relacionados entre ellos que aquellos que no tienen este lineamiento. Siguiendo estas líneas organizadas de contenido crea orden y fluyo en un diseño.

LOL Colors
LOL Colors

LOL Colors es un gran ejemplo de alineación y continuación. Sin siquiera utilizar bordes que segregan, puedes ver claramente una grilla en funcionamiento, y la forma en que las gotas de color implican la continuación hacia abajo de la página.

En un nivel macro, debes trabajar en alinear las cosas que se relacionan entre sí y posicionarlas en un borde común. De esa manera, los elemenots flujen más fácilmente en la composición general y dejan a los usuarios navegar con menor esfuerzo. Esta conexión visual puede ayudar a formar una unidad general entre los elementos grandes y pequeños. Es como un margen invisible que sostiene las piezas mayores juntas en tu diseño y le da al ojo pocas razones para frenarse.

Los objetos se pueden alinear a un borde, pero igualmente a través de un eje central que generalmente se define con menor claridad.  Alinear el contenido a los bordes es definitivamente lo más básico cuando diseñas para la web. La alineación central puede utilizarse para dar énfasis a elementos particulares o call to actions.

Énfasis

El énfasis se trata de puntos focales. Cuantos menos tengas, más fuerte su énfasis. La clave aquí es hacer que no todo parezca importante -si se enfatiza todo, nada sobresale y con lo único que terminas es con ruido. Estoy seguro que haz visto sitios que ignoran este principio y ponen toneladas de botones coloridos por todo el espacio. Te deja un gusto raro, ¿cierto? Eso es lo que la falta de énfasis puede dejar tras de sí. Más importante, la mala utilización del énfasis confunde la jerarquía.

Tu elección de herramientas son los sospechosos de siempre, pero el tamaño y el color pueden ser los más efectivos para crear énfasis.

Dropbox CTA
CTA de Dropbox

Dropbox hace un gran trabajo destacando la acción que se supone que el usuario debe realizar a través del énfasis. Visualmente, no hay nada en el medio que bloquee al usuario de enfocarse en registrarse. El énfasis más fuerte está en los botones azules que claramente se destacan del resto de la pantalla. Este diseño tiene buen balance visual -y puede ser mejor si fueran con un solo botón azul.

Uno o dos elementos con énfasis en una pantalla particular deben ser necesarios para guiar la atención del usuario a los elementos más importantes en la pantalla. Decidir qué elementos es quizás más difícil de lo que suena. Pregúntate, que es lo más crucial que debe llamar la atención del usuario primero. ¡Escoje sabiamente!

El teclado de madera Orée

El énfasis en el producto es excelente en este diseño. Ni la descripción ni el fondo bloquean de ninguna manera el énfasis del teclado de madera Orée. ¡Hermoso! La simetría también funciona agradablemente aquí.

The VIVE
The VIVE

No hay mucho para decir acerca de la forma en que HTC presentó el VIVE. El énfasis en su esplendor. Buen diseño como este definitivamente vende.

Craft de Invision

Craft de Invision es una landing page sorprendente donde el campo del formulario para la dirección de email está elegantemente enfatizado. Es difícil perderse en esta página. El nombre del producto también se destaca efectivamente. La distinción entre el frente y el fondo está especialmente bien lograda y es divertida.

Relación Figura-Fondo

Este principio es tan poderoso y tan fundamental que deberías dominarlo tan pronto como sea posible. Trabajando en tus diseños, deberías preguntarte a menudo la siguiente pregunta: ¿qué elementos están en el fondo, y cuáles en el frente?

Cayenne
Cayenne

En este ejemplo puedes ver que el contenido y el botón para tomar acción se despegan claramente del fondo. Una distinción clara es muy importante para jugar con el foco del usuario. Aquí las lineas son un poco borrosas y entretenidas, pero se sigue prestando una clara distinción entre figura-fondo.

Cuando nuestros antepasados estaban muy ocupados cazando y recolectando, a menudo era de vital importancia discernir lo que podría ser una amenaza inminente o una ventaja frente a ellos. Distinguir las cosas rápidamente entre lo que simplemente es "ruido" de fondo parece seguir siendo parte de nuestras conexiones para "supervivencia". Piensa en un tigre detrás de un arbusto en la selva en oposición a lluvia en el horizonte. Neurológicamente, esta estrategia visual de supervivencia ha dejado una huella tan profunda que es muy poco probable que vayamos a cambiar este simple mecanismo de percepción. Esto puede sonar gracioso y mayormente obsoleto para las personas digitales, pero saber esto hace más simple las decisiones de cuando acentuar información importante para los usuarios y como "esconder" los detalles menos relevantes en el fondo.

Zappka
Zappka

Aquí tenemos una imagen de fondo muy prominente la que absorbe mucha de la atención -es útil ya que transmite emoción en la forma de una conexión personal. Sin embargo, el botón para tomar acción está inteligentemente ubicado y el color lo trae al frente.

Otro problema puede ser que nuestros ojos y cerebros no son super rápidos para procesar mucha información al mismo tiempo, lo que nos lleva a priorizar aquello en lo que nos tenemos que enfocar primero. Entender esto te ayudará a ubicar las piezas del puzzle del diseño más efectivamente.

www.startupfuckingadvice.com

Este ejemplo funciona bien, la perspectiva provee distinción entre fondo y figura. Personalmente me hubiese gustado que el botón rojo estuviese ubicado al final de la tabla -donde el ojo naturalmente se ubica como resultado de las líneas.

La Samsung Gear 360

Este ejemplo del nuevo Samsung Gear 360 es tan bueno como se puede; el fondo y la figura funcionan juntos extremadamente bien. Hay una clara distinción y el fondo acentúa la cámara en el frente de manera elegante. Bastante inteligente y entretenido.

A continuación hay un par más de ejemplos de buen énfasis en la relación de figura-fondo en el mercado:

Go Cubes
Go Cubes
Go Cubes
Gear 360

Jerarquía

La jerarquía se trata de asignar importancia visual; una especie de primo del énfasis en lo que respecta a reducir el desorden visual. Es una guía a nivel macro respecto a qué enfocarse primero y como seguir subliminales migas de pan visuales -como contar una historia visual a la que el usuario pueda apegare cuando está navegando el contenido de tu sitio. Aproxímate a los elementos de diseño como "capas de importancia" que necesitan ser acomodadas efectivamente. Con solo algunas piezas fuertemente enfatizadas, estás llevando la vista del espectador suavemente de la mano y moviéndola a través del sitio con intensión.

The Reddit index page
La página de inicio de Reddit

Este screenshot de la página de índice de Reddit quizás no es el mejor ejemplo de un diseño bien logrado -especialmente en el sentido de crear una jerarquía clara y fuerte. Reddit es uno de esos casos en los que el éxito del sitio y el diseño no están fuertemente relacionados, creo. Tiene una llamada auténtica, me refiero a lo desordenado, pero no necesitaría mucho para establecer una jerarquía visual más clara.

Como hemos cubierto anteriormente, no quieres que todo parezca igual de importante. Si ese fuera el caso, tu espectador tendría más dificultad para digerir tu contenido. En cambio, crea varios niveles de importancia los que enfaticen la estructura genera de tu composición. Una estrategia que funciona generalmente como una regla de oro: el mayor tamaño, la mayor importancia. Una vez que se logra una jerarquía básica a través del tamaño y el espacio, puedes incluir el color en la mezcla, ayudando a enfatizar todavía más algunos elementos. Trabajando al revés, comenzando con el color, harás el trabajo innecesariamente dificil -o al menos menos efectivo.

The Explore page at GitHub
La página de exploración en Github

Me gusta como la página de Exploración de Github maneja la tipografía para crear una jerarquía clara y sutil. Es muy fácil para el ojo escanear y seguir el contenido. El color también se utilizó bien para crear anclajes visuales, y lo mismo va para sus resultados de búsqueda:

Color form white space size and alignment work together and create a solid hierarchy
Color, forma, espacio en blanco, tamaño y alineación trabajan juntos para crear una jerarquía sólida.

Una jerarquía clara distingue rápidamente una solución de diseño buena de una mediocre.

Jerarquía visual en Dropbox

El screenshot anterior es otro gran ejemplo de como los diseñadores talentosos de Dropbox ejecutan su trabajo. Hay mucho más contenido con el que trabajar, pero sigue guiando exitosamente al ojo a través del texto.

Consistencia

Si sigues los principios discutidos hasta ahora pero te flata consistencia debilitarás cualquier progreso hecho aplicando los otros principios de diseño. La consistencia ayuda a crear un modelo mental del diseño, sitio o imagen que estás buscando. Los elementos similares deben ser visualmente similares. También, una vez que empiezas a codear tus diseños, hacer tus diseños más DRY (Don't Repeat Yourself - No Te Repitas) es mucho más simple con eso en mente.

Another eye pleasing design from the Dropbox team
Otro diseño atractivo del equipo Dropbox

El ejemplo anterior muestra consistencia en varios niveles. El estilo y el tamaño de las ilustraciones son consistentes. Los botones lucen de la misma manera. El peso visual de las tres columnas es parejo y alineado. Cada columna comparte la misma estructura interna. Además, es simple, considerado y efectivo.

La consistencia establece las expectativas de que lo que vayas a encontrar a continuación será similar, reduciendo de este modo el procesamiento cognitivo.

UX Timeline
UX Timeline

Evitar el uso de muchas tipografías y tamaños diferentes es uno de los caminos más importantes para la consistencia. Dentro de un ambiente los usuarios se acostumbran a leer en un estilo particular o tipografía y no deberías modificar eso.

Whiplash
Whiplash
SoundCloud Charts
SoundCloud Charts

¿Recientemente has visto sitios que usan muchos botones diferentes en lugar de unos pocos que crearían mucha mejor consistencia? Te apuesto a que lo has visto y me juego que no te gustó. Los botones a continuación pertenecen al inventario de interfaz de un solo sitio. Como se puede observar a continuacion, es impresionante que tan lejos puedes ir en la dirección equivocada.

A screenshot from Brad Frosts excellent book about Atomic Design
Un screenshot del excelente libro de Brad Frost sobre Atomic Design

La usabilidad de un sistema se puede mejorar de forma masiva cuando los elementos similares como estos comparten la misma estética. ¿Por qué hacer a los usuarios aprender diversos lenguajes visuales cuando navegan tu página? ¡No tiene sentido!

Similitud

Lo adivinaste, "consistencia" tiene sus raíces en este principio de la Gestalt, el que declara que cosas similares crean una forma de una unidad que puedes utilizar en tus diseños. Los elementos que comparten características similares parecen estar más relacionados entre si -más que las cosas disímiles.

Que los elementos sean similares sugiere una relación, creando fuerte contraste entre ellos y otros elementos alrededor de ellos.

The user list on Dribbble
La lista de usuarios en Dribbble,

Esta es la lista de usuarios en Dribbble, muestra diseñadores y sus trabajos. Es un excelente ejemplo de cómo la similaridad puede dar soporte a una lista de diferentes elementos de diseño para crear relaciones y que de esa manera aparezcan más unificados. El movimiento se sugiere a través de la página por la proximidad horizontal de las miniaturas y la similitud de cada fila repetida.

Reddit
Reddit

Reddit no logra gran consistencia aplicando la similitud tan bien. Esta lista de posts tiene títulos tanto largos como cortos, algunos encabezados están indentados mientras que otros no. Parece confuso, pero no requiere mucho crear más cohesión a través de la similitud.

Puedes lograr similitud entre elementos utilizando en común:

  • color
  • disposición
  • tamaño
  • forma
  • textura
  • orientación
  • dimensión
  • consistencia de tamaño

Todos estos pueden sugerir relaciones. El color y la forma son grandes ejemplos para enfatizar estas relaciones. A pesar de que la similitud es un arma poderosa, es una herramienta para reforzar jerarquías, no una que que las cree facilmente por si misma.

Trending Open Source repos on GitHub
Trending Open Source repos on GitHub

Esta lista de tendencias de repositorios Open Source en Github es realmente fuerte. Muy simple, fácil de leer y digerir, así como también cohesiva por repetición de similitud. Es exitoso creando bloques de contenido discreto que argumento ni siquiera necesitan bordes:

El mapa mental sutil que, como usuarios, podemos crear no debe ser subestimado. Ayuda a establecer un patrón para organizar contenido. El caos está del otro lado del espectro y no es a lo que, como diseñadores, apuntamos. Imagina una página de texto donde las letras no están dispuestas consistentemente en una base de línea-a-línea, sino flotando aleatoriamente por la página. No invita mucho a leer, ¿eh?

The Explore section on GitHub
La sección de Explorar en Github

Esta es la landing de la sección Explore de Github. Aquí, un uso más consistente de tamaño y apariencia podría haber sido más efectivo. El tamaño incrementado de algunos elementos no es, de hecho, una decisión "editorial" para resaltar ciertas categorías; es aleatorio. Sin una buena razón para jugar con el tamaño, la unidad debería haberse hecho más fuerte apoyándose en la consistencia. También, tienes dos tipos de cartas, una con solo un título para la categoría y otra con texto descriptivo adicional. Encima de todo, los efectos hover son diferentes para las tres variaciones. Todo esto crea interés visual, pero la página no es tan fuerte como muestra la lista de la misma sección a continuación:

El mismo contenido que antes pero el resultado es mucho más fuerte.

En términos de funcionalidad, elementos con apariencia similar deberían cumplir tareas similares para el usuario. Cuando el usuario innecesariamente necesita volver a aprender los diferentes comportamientos para elementos de la interfaz de apariencia similar, aparece la frustración. La similitud ayuda a manejar las expectativas -eso en si mismo es una herramienta muy fuerte en tu arsenal.

Espacio en blanco

¿Qué se considera exactamente "espacio en blanco"? El espacio en blanco es el que no tiene marcas, negativo y vacío entre elementos en una composición. Efectivamente enmarca el contenido. El espacio en blanco macro es para las piezas principales de tu diseño -que crean los efectos más obvios. El espacio en blanco micro, por el otro lado, es para los detalles minuciosos, como todos los espacios para los elementos tipográficos.

Aquí el excelente uso del espacio en blanco crea un énfasis fuerte y elegante en un nuevo producto. ay un par de principios puestos a trabajar exitosamente, pero el espacio en blanco está jugando el rol principal en hacer que este diseño funcione tan bien.

Foundersuite
Foundersuite

Echa un vistazo al ejemplo anterior. Cuando investigamos los tamaños utilizados para establecer los espacios en blanco en Foundersuite, vemos las medidas utilizadas juegan entre sí. Estas medidas comunes crean espacio en blanco "activo", que dirigen la atención deliberadamente. Echemos un vistazo:

Espacio en blanco "activo" es una descripción confusa, pero la utilizamos cuando el espacio en blanco muestra relaciones con los elementos a su alrededor. El espacio en blanco activo ayuda a enfatizar la composición o la estructura de tu contenido y por lo tanto impacta positivamente en la jerarquía. El espacio en blanco "pasivo" no es tan divisivo, pero es igualmente importante ya que puede crear pequeñas cantidades de espacio respirable. Sin embargo, demasiado espacio en blanco inactivo, sin relaciones con los elementos que lo rodean, hará que tu trabajo parezca desconsiderado e incluso desordenado.

ionicio
ionic.io

Excelente aplicación del espacio en blanco en ionic.io. Aquí hay una relación entre el tamaño así como también el espacio en blanco macro y micro juegan bien entre ellos.

Cada día, cuando lees texto, eres testigo de la aplicación útil del espacio en blanco sin pensar demasiado acerca de ello. El espacio en blanco entre palabras, oraciones y párrafos es todo espacio en blanco y nos ayuda a digerir visualmente el significado de las letras que se escriben. Guía el ojo a través del contenido y nos da pistas para movernos efectivamente a través del texto. Tanto el espacio en blanco macro como micro le dan a los ojos la oportunidad de descansar y equilibrar el balance general.

Ten en mente que apuntamos a lograr una diferenciación a través del espacio. Esto nos permite recortar otros elementos y crear distinciones. Si te gusta ese estilo "limpio" de tus diseños web favoritos entonces la aplicación consciente del espacio en blanco seguramente era un componente principal. Nada habla mejor de elegancia y sofisticación que el uso apropiado del espacio en blanco.

Equlibrio

El balance se trata de mantener el peso visual, equilibrio óptico en su lugar. Instintivamente nos gusta mirar las cosas que están balanceadas alrededor de un eje vertical -es parte de tener visión binocular. El balance alrededor de un eje vertical es un patrón seguro para seguir -muy formal y ordenado. Si puedes romper ese balance lo suficientemente bien, creando una pequeña tensión o sorpresa, quizás para resaltar algún aspecto de la composición, tu diseño parecerá más dinámico e interesante.

The Blockhead adapter
El adaptador Blockhead

El sitio para el adaptador Blockhead tiene unos cuantos bonitos ejemplos de como ellos lograron aplicar el balance en sus diseños. A continuación, la imagen de la derecha con su texto acompañante logran un buen equilibrio visual. Lo mismo va para la imagen de abajo. Balance, jerarquía, espacio en blanco y énfasis están bien aplicados.

El balance simétrico no es difícil de lograr y es una manera segura de hacer una composición visualmente agradable. El acercamiento asimétrico es menos rígido o estático pero requiere más habilidad para lograrlo exitosamente. Para el balance asimétrico necesitamos trabajar para mantener las varias partes no-espejadas en un balance percibido.

The Dropbox landing page
La landing page de Dropbox

La landing page de Dropbox hace un excelente uso del balance visual por todos lados. Puedes ver que las imágenes y el texto logran un lindo balance asimétrico -especialmente en relación a otras secciones alrededor. Y no me dejen empezar con como ellos utilizaron el pez carpa para implicar la responsividad y la operatividad multi-dispositivo. ¡Genial!

Cuando juegas con el balance visual, todas las herramientas de diseño están a tu disposición: tamaño, color, posición, forma, repetición, textura, y pueden influenciar el peso percibido individualmente y combinarse entre sí.

El balance asimétrico se puede considerar más amigable e implica un diseño de apariencia más divertida y dinámica. No es que sea un fanático de Dropbox o algo, pero en términos de diseño el sitio de Dropbox hace un uso habilidoso de cada principio de diseño que discutimos hoy, logrando una calidad general admirable.

Dropboxs asymmetric about page Good balance
Página asimétrica de acerca de de Dropbox Buen balance.

Proximidad

Los elementos de diseño que se ubican con relativa proximidad entre ellos naturalmente forman una relación implicada. El manejo de la proximidad puede impactar positivamente en tus diseños, permitiendo dejar afuera otros elementos que de otra manera necesitarían lograr unidad visual -bordes por ejemplo. De nuevo, la unidad es el corazón de eso, y todas las herramientas que discutimos hasta ahora pueden ser utilizadas en distintos grados para lograrla.

En el sitio para YoGrow puedes ver como se utiliza la proximidad. Sugeriría que podrían haber utilizado menos color de fondo y bordes, y dejar en su lugar que la proximidad haga su magia.

En el ejemplo de abajo, el cual vimos antes, la proximidad es todo lo que se necesita para implicar las relaciones entre estas paletas de colores. Los bordes o colores de fondo se pueden omitir, generando un look elegante.

Cierre

El cierre es una técnica de composición donde el usuario completa los espacios en blanco de tus diseños -espacios en blanco que se pusieron adrede. Esta es una forma de sugerencia, una ilusión que completa la imagen que el diseñador quiere que veas. El cierre es lo que permite que los lectores puedan interpretar las tiras cómicas, tomando la sugerencia de lo que sucede en el espacio entre los cuadros. El cierre es algo que nos permite interpretar el espacio negativo en los logos, por ejemplo.

El sistema de búsqueda de patrones del cerebro humano opera completando las piezas faltantes en formas familiares.

Tomemos por ejemplo Github. El logo que utilizan en la página es un círculo negro, con una impresión negativa de su Octocat. Incluso en un pequeño tamaño, puedes identificar su mascota fácilmente, y ubicarlas en la barra de navegación, sirve como un anclaje visual que aparece no pretencioso y contenido.

¿Entonces cómo se vincula todo esto en diseñar interfaces para la web? Bueno, raras veces lo hace para ser franco. Probablemente estos conceptos te sean más divertidos si diseñas iconos y logos.

Pensamientos finales

¡Cubrimos mucho aquí! De ahora en adelante, intenta considerar estos principios cuando mires cualquier diseño o pieza de arte. Intenta entender si los creadores tomaron en cuenta relaciones visuales, aplicándolas activa y constructivamente. Recuerda que para ser efectivo utilizando estas ideas necesitas practicar! Mientras lo haces, estos principios ciertamente te ayudarán a disfrutar más de diseñar.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.