El equilibrio visual de un sitio web tiene un impacto instantáneo (y generalmente instintivo) en la experiencia del usuario. Una composición equilibrada se siente bien y los usuarios tienden a captarla de inmediato. El uso de la simetría y la asimetría son la base de un gran equilibrio visual.
Lograr el equilibrio simétrico y asimétrico en su diseño web es bastante simple, en teoría, pero hacerlo bien siempre viene con la práctica. En esta publicación, veremos los principios de simetría y asimetría en el diseño para tener una mejor idea de cómo funcionan juntos para lograr el equilibrio visual.
¡Entremos en ello!
El equilibrio visual hace que las personas se sientan bien cuando lo ven. La diferencia entre el equilibrio visual y el desequilibrio visual es la sensación de comodidad y satisfacción frente a la sensación de aversión e incomodidad. Cuando algo tiene un buen equilibrio visual, instantáneamente tiene sentido. Da la sensación de que nada está fuera de lugar y que la composición es tal como debe ser.
La simetría y la asimetría son dos técnicas de diseño que utilizan los diseñadores para lograr el equilibrio visual en una composición. La simetría y la asimetría son antónimos, por lo tanto, el equilibrio simétrico y asimétrico son opuestos entre sí.
Echemos un vistazo más profundo a la definición de cada término.
¿Qué es la simetría?
La simetría es una regla matemática visual que establece que si se dibuja una línea a través del centro de una imagen, ambos lados serán muy similares, si no idénticos. Esta línea se puede dibujar horizontal, vertical o diagonalmente, lo que lleva a la simetría horizontal, la simetría vertical y la simetría diagonal. Estos tres se consideran como ‘simetría de reflexión’ porque es como si la imagen se reflejara a sí misma.
Además, hay otros tres tipos de simetría; radial, transracional y guía reflexiva. Puede utilizar cualquiera de estos cuatro estilos de simetría para lograr una composición equilibrada.
simetría reflexiva
El tipo más común de simetría es la simetría reflexiva. La idea es que cada lado de la línea divisoria sea casi idéntico al otro. Por ejemplo, una manzana cortada por la mitad o una mariposa con las alas abiertas.
imagen vía korkeng / shutterstock.com
Simetría radial
La simetría radial se repite alrededor de una forma circular o radial. Por ejemplo, mandalas y chapas circulares.
imagen vía Devi108 / shutterstock.com
simetría traslacional
La simetría traslacional es cuando una forma se repite una y otra vez en un espacio visual. Por ejemplo, un patrón sin costuras.
Imagen vía andrykay / shutterstock.com
Guía de simetría reflexiva
La simetría de reflexión de la guía es similar a la simetría de reflexión, pero se desliza sobre un eje. Por ejemplo, huellas.
imagen a través de Mark Rademaker / shutterstock.com
¿Qué es la asimetría?
La asimetría es esencialmente lo opuesto a la simetría. Visualmente, cada lado de la composición es diferente del otro. A diferencia de la simetría, que es una técnica visual equilibrada desde el principio, la asimetría es más difícil de equilibrar. La mejor manera de entender cómo funciona el equilibrio asimétrico es con el arte del equilibrio de rocas. En la imagen de abajo puedes ver un grupo de rocas en equilibrio. La composición no es simétrica a pesar de que las rocas parecen perfectamente equilibradas. Incluso si los lados no son iguales entre sí, la composición aún evoca armonía y equilibrio visual.
imagen vía Vladnik / shutterstock.com
Debido a que el equilibrio asimétrico es más difícil de lograr, también es mucho más agradable que un equilibrio simétrico normal. Por eso no sorprende que tantos sitios web y revistas utilicen un diseño asimétrico para crear una composición equilibrada.
Ejemplos de Equilibrio Simétrico en Diseño Web
Ahora sabemos qué son la simetría y la asimetría, y cómo estas técnicas pueden ayudarte a lograr un equilibrio visual. Transportemos este conocimiento al diseño web y veamos algunos ejemplos para inspirar tus propias creaciones.
Polugar Ruso Pan Vino
El sitio web de aterrizaje de Polugar utiliza simetría de reflexión para presentar sus productos con estilo. Aparece una botella en el centro y se forman remolinos a cada lado. Más tarde, cuando te desplazas, la simetría se expande a medida que tres botellas llenan la pantalla y tres anuncios publicitarios en la parte inferior te ayudan a navegar. Las páginas de productos siguen una cuadrícula simétrica con tres columnas y son muy agradables a la vista.
Portafolio del artista Max Shkret
Este sitio web de cartera de diseño de Max Shkret también tiene simetría de reflexión de una manera ligeramente diferente. La simetría se expande hasta los bordes. El resto del sitio web es simétrico pero no tan perfecto como la página de carga.
Portafolio de diseño web de Olivier Ouendeno
Este sitio web de cartera del diseñador Olivier Ouendeno es un gran ejemplo de simetría de reflexión de guía. Es tanto horizontal como vertical, logrando un equilibrio visual único que casi parece un caos ordenado.
Ejemplos de Equilibrio Asimétrico en Diseño Web
Como mencioné anteriormente, el equilibrio asimétrico no es tan fácil de lograr como el equilibrio simétrico. Sin embargo, cuando un diseñador web logra un equilibrio asimétrico, los resultados son gloriosos. Echemos un vistazo a algunos ejemplos de equilibrio asimétrico en el diseño web. Estos definitivamente inspirarán el flujo de tu mente creativa.
Inicio Sociētē Sitio web del diseñador
Cuando ingresa por primera vez al sitio web de Home Sociētē , lo recibe lo que parece ser parte de una revista. Una imagen de altura completa a la izquierda enmarca un menú vertical. A la derecha hay partes de una frase del tipo skinny serif. Este sitio web parece agradable a primera vista, pero luego, cuando usa el desplazamiento horizontal, cobra vida. Todo el sitio tiene un equilibrio asimétrico impecable en todas partes.
Aceite de CBD de cabecera
Este sitio para Headery CBD Oil puede parecer simétrico a primera vista, pero en realidad es el equilibrio asimétrico más sutil posible. El título del producto está centrado en la pantalla creando una simetría inicial pero los frascos cuentagotas están a la izquierda. Esto deja más espacio vacío a la derecha. Curiosamente, el botón de chat amarillo es el que crea el equilibrio.
Sitio web de capital adyuvante
El sitio web de Adjuvant Capital utiliza un equilibrio asimétrico diagonal que se ve aún mejor cuando la pantalla es más pequeña. El triángulo a la derecha es un video y equilibra el bloque de texto en la parte superior izquierda.
Diseños Divi con balance simétrico y asimétrico
¿Qué opinas? ¿Qué técnica es mejor para un equilibrio visual, simétrica o asimétrica? Creo que ambos son bastante sorprendentes. Después de buscar algo de inspiración, debe querer probar estas técnicas de equilibrio visual usted mismo. Afortunadamente, la biblioteca Divi tiene muchos diseños para que comiences.
Vamos a ver.
Diseño de criptomonedas: equilibrio simétrico
El diseño de Cryptocurrency Consulting tiene un buen equilibrio simétrico reflexivo. El botón blanco de la derecha se destaca muy bien sobre el fondo azul porque fuerza una asimetría visual en la simetría general.
Tienda de jugos Okape – Equilibrio simétrico
Otro diseño bellamente simétrico de Divi es el diseño de la tienda de jugos Okape . Tres botellas están centradas en la pantalla para crear la simetría principal. El resto del diseño mantiene una sutil simetría de reflexión de la guía.
Servicios quiroprácticos: equilibrio asimétrico
El nuevo diseño quiropráctico tiene un hermoso equilibrio asimétrico. Tiene una imagen grande a la izquierda y un botón naranja a la derecha que se equilibra con la sombra del cuadro de la imagen naranja. Cada sección del diseño está configurada con un equilibrio asimétrico, pero cuando se desplaza por todo el conjunto, también se siente como una guía de simetría reflejada.
Visitas turísticas – Equilibrio asimétrico
Este diseño para Sightseeing Tours es el tipo de equilibrio asimétrico que parece un hermoso caos. El equilibrio visual es atractivo debido a las líneas rectas de las cajas entrelazadas con los bordes borrosos y entrecortados de las fotos.
Tu turno de diseñar con Visual Balance
Con toda esta inspiración visual, es tu turno de aplicar simetría y asimetría a tus diseños. Recuerda las reglas de simetría y asimetría y cómo se puede lograr una composición equilibrada. Asegúrese de que sus usuarios quieran permanecer en su sitio y naveguen con estas técnicas.
Imagen destacada a través de Flat art / shutterstock.com