Aproveche al máximo el equilibrio simétrico y asimétrico en su diseño web


El equilibrio visual de un sitio web tiene un impacto instantáneo (y generalmente instintivo) en la experiencia del usuario. Una composición equilibrada siente derecho y los usuarios tienden a captarlo de inmediato. El uso de simetría y asimetría son la base de un gran equilibrio visual.

Lograr un 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, analizaremos 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.

¡Vamos a entrar!

¿Qué es una composición equilibrada?

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 una sensación de aversión e incomodidad. Cuando algo tiene un buen equilibrio visual, tiene sentido instantáneamente. Da la sensación de que nada está fuera de lugar y que la composición es tal como se supone que debe ser.

La simetría y la asimetría son dos técnicas de diseño que los diseñadores utilizan 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 horizontalmente, verticalmente o diagonalmente, por lo tanto, conduce a simetría horizontal, simetría vertical y simetría diagonal. Estos tres se consideran "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 de reflexión. Puede usar 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 de reflexión. 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.

Reflectional-Symmetry "width =" 880 "height =" 600 "class =" size-full with-border wp-image-112523 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/ 2019/09 / Reflectional-Symmetry.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/09/Reflectional-Symmetry-300x205.jpg 300w, https: //www.elegantthemes. com / blog / wp-content / uploads / 2019/09 / Reflectional-Symmetry-768x524.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/09/Reflectional-Symmetry-610x416 .jpg 610w "tamaños =" (ancho máximo: 880px) 100vw, 880px ">

<p id=imagen a través de korkeng / shutterstock.com

Simetría radial

La simetría radial se repite alrededor de una forma circular o radial. Por ejemplo, mandalas e insignias circulares.

Simetría radial "ancho =" 880 "altura =" 600 "clase =" tamaño completo con borde wp-image-112526 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/ 2019/09 / Radial-Symmetry.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/09/Radial-Symmetry-300x205.jpg 300w, https: //www.elegantthemes. com / blog / wp-content / uploads / 2019/09 / Radial-Symmetry-768x524.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/09/Radial-Symmetry-610x416 .jpg 610w "tamaños =" (ancho máximo: 880px) 100vw, 880px ">

<p id=imagen a través de 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.

Simetría traslacional "ancho =" 880 "altura =" 600 "clase =" tamaño completo con borde wp-image-112530 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/ 2019/09 / Translational-Symmetry.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/09/Translational-Symmetry-300x205.jpg 300w, https: //www.elegantthemes. com / blog / wp-content / uploads / 2019/09 / Translational-Symmetry-768x524.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/09/Translational-Symmetry-610x416 .jpg 610w "tamaños =" (ancho máximo: 880px) 100vw, 880px ">

<p id=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.

Guide-Reflectional-Symmetry "width =" 880 "height =" 600 "class =" size-full with-border wp-image-112534 "srcset =" https://www.elegantthemes.com/blog/wp-content/ uploads / 2019/09 / Guide-Reflectional-Symmetry.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/09/Guide-Reflectional-Symmetry-300x205.jpg 300w, https: //www.elegantthemes.com/blog/wp-content/uploads/2019/09/Guide-Reflectional-Symmetry-768x524.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019 /09/Guide-Reflectional-Symmetry-610x416.jpg 610w "tamaños =" (ancho máximo: 880px) 100vw, 880px ">

<p id=imagen a través de Mark Rademaker / shutterstock.com

¿Qué es la asimetría?

La asimetría es esencialmente lo contrario de 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 aunque las rocas se vean perfectamente equilibradas. Incluso si los lados no son iguales entre sí, la composición aún evoca armonía y equilibrio visual.

asimetría "ancho =" 880 "altura =" 616 "clase =" tamaño completo con borde wp-image-112536 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/ 09 / asymmetry.jpg 880w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/09/asymmetry-300x210.jpg 300w, https://www.elegantthemes.com/blog/wp- content / uploads / 2019/09 / asymmetry-768x538.jpg 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/09/asymmetry-610x427.jpg 610w "tamaños =" (max- ancho: 880px) 100vw, 880px ">

<p id=imagen a través de 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 regular. Por eso no es sorprendente 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 ayudarlo a lograr un equilibrio visual. Transmitamos este conocimiento al diseño web y veamos algunos ejemplos para inspirar sus propias creaciones.

Vino de pan ruso Polugar

El aterrizaje para Polugar El sitio web utiliza simetría reflexiva para presentar sus productos con estilo. Aparece una botella en el centro y se forman formas en espiral a cada lado. Más tarde, cuando te desplazas, la simetría se expande cuando tres botellas llenan la pantalla y tres desenfoques en la parte inferior te ayudan a navegar. Las páginas del producto siguen una cuadrícula simétrica con tres columnas y son muy agradables a la vista.

Sitio web simétrico de Polugar

Portafolio de artistas Max Shkret

Este sitio web de cartera de diseño por 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.

sitio web max shrekt

Portafolio de diseño web Olivier Ouendeno

Este sitio web de cartera del diseñador Olivier Ouendeno es un gran ejemplo de guía de simetría reflexiva. Es horizontal y vertical, logrando un equilibrio visual único que casi parece un caos ordenado.

sitio web olivier ouendeno

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 maneja un equilibrio asimétrico, los resultados son gloriosos. Echemos un vistazo a algunos ejemplos de equilibrio asimétrico en diseño web. Estos definitivamente inspirarán tu flujo creativo de mente.

Home Sociētē Designer Website

Cuando aterrizas por primera vez en el Home Sociētē sitio web, usted es recibido por lo que parece ser parte de una revista extendida. Una imagen de altura completa a la izquierda enmarca un menú vertical. A la derecha hay partes de una frase del tipo serif flaco. Este sitio web parece agradable a primera vista, pero luego, cuando utiliza el desplazamiento horizontal, cobra vida. Todo el sitio tiene un equilibrio asimétrico perfecto en todo momento.

Captura de pantalla de Home Societe: equilibrio asimétrico en diseño web

Headery CBD Oil

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 se centra en la pantalla creando una simetría inicial, pero las botellas cuentagotas están a la izquierda. Esto deja más espacio vacío a la derecha. Curiosamente, el botón de chat amarillo es lo que crea el equilibrio.

Headery CBD

Sitio web de capital adyuvante

El sitio web para Capital adyuvante 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 esquina superior izquierda.

sitio receptivo de capital adyuvante

Diseños Divi con equilibrio simétrico y asimétrico

¿Qué piensas? ¿Qué técnica es mejor para un equilibrio visual, simétrico o asimétrico? Creo que ambos son bastante asombrosos. Después de buscar un poco de inspiración, debes probar estas técnicas de equilibrio visual. Afortunadamente, la biblioteca Divi tiene muchos diseños para comenzar.

Vamos a ver.

Diseño de criptomonedas: equilibrio simétrico

los Diseño de consultoría de criptomonedas Tiene un bonito equilibrio simétrico reflectante. El botón blanco de la derecha se destaca muy bien sobre el fondo azul porque obliga a una asimetría visual a la simetría general.

diseño de simetría Divi de criptomoneda

Okape Juice Shop – Balance simétrico

Otro diseño bellamente simétrico de Divi es el Tienda de jugos Okape diseño. Tres botellas se centran en la pantalla para crear la simetría principal. El resto del diseño mantiene una simetría reflexiva de guía sutil.

equilibrio simétrico okape

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 el cuadro naranja de sombra de imagen. Cada sección del diseño está configurada con un equilibrio asimétrico, pero cuando se desplaza todo, también se siente como una simetría reflexiva guía.

quiropráctica asimétrica

Rutas 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 los cuadros entrelazados con los bordes borrosos y entrecortados de las fotos.

recorridos turísticos asimetría

Tu turno para diseñar con equilibrio visual

Con toda esta inspiración visual, es tu turno de aplicar simetría y asimetría a tus diseños. Recuerde 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 navegar con estas técnicas.

Imagen destacada a través de Flat art / shutterstock.com