Equilibrio asimétrico en diseño web
Cuando primero cubrí la idea de patrones de diseño simétrico aquí en Webdesigner Depot no tenía intención de profundizar en la noción de diseño asimétrico.
Sin embargo, cuanto más lo pensaba, más me obligaba a cubrir el tema para contrastar algunas de las ideas que giran en torno a los patrones de diseño simétrico.
En el diseño asimétrico encontramos diseños que contienen elementos que no crean una imagen especular. Muy a menudo, estos diseños asimétricos están de hecho equilibrados, pero no a través de mitades perfectamente similares.
Este tipo de diseño en realidad es mucho más fácil de conseguir, teniendo en cuenta que la mayoría del contenido no se presta a la simetría perfecta.
Consideremos una variedad de sitios que ponen en práctica este enfoque de diseño y quizás descubran algunas ideas que pueden afectar su propio trabajo de diseño.
Introducción al uso de la asimetría
Bully Entertainment
Como introducción a la noción de diseño asimétrico, este diseño espectacular proporciona un punto de partida bastante agradable. Si bien no hay realmente ninguna razón para que este diseño no pueda reconfigurarse para producir una simetría perfecta, simplemente no funcionaría tan bien. Los diseños grandes y ricamente ilustrados compensan el texto de la página de inicio maravillosamente. Su tamaño asegura que sean extremadamente visibles y que sean la principal fuerza visual del diseño. Este equilibrio natural entre un solo elemento grande y una alternativa más compacta es un enfoque muy común.
Jorge Rigabert
Este diseño presenta un diseño web bastante estándar. Una pequeña columna lateral que contiene navegación de teclas, junto con una columna mucho más grande para el contenido de los sitios. Este es quizás uno de los pocos diseños estándar que utilizan los diseñadores a diario. Creo que gran parte del proceso de diseño en este caso ocurre de manera semi automática. Considere la barra lateral en este caso que equilibra asimétricamente la columna de contenido. La barra lateral tiene un color más oscuro, lo que le ayuda a compensar el canal de contenido más claro. Sin el fondo más oscuro, la barra lateral probablemente se perderá y no se destacará casi tan bien.
Imágenes para equilibrar el texto
Otro enfoque bastante estándar del diseño web que termina siendo un elemento de diseño asimétrico es el emparejamiento de texto con imágenes. Como verá en las muestras a continuación, cada una tiene una imagen grande. Esta imagen está emparejada de alguna manera con un bloque de texto. Esta combinación es extremadamente común.
El truco es bastante obvio, solo asegúrate de que los dos se complementen de alguna manera. Dado que estos dos elementos generalmente crearán un bucle para los ojos, es importante que de alguna manera funcionen juntos. El enfoque más obvio es hacer que la imagen literalmente ilustre o muestre de qué está hablando el texto. Otra táctica común es hacer que la imagen amplíe la idea presentada en el texto.
Aquí hay algunas muestras para considerar.
Pastel dulce pastel
Este diseño está muy bien equilibrado, pero utiliza varios elementos asimétricos para lograrlo. Observe la imagen grande de un pastel combinado con el texto. Las imágenes son bastante obvias, pero fundamentalmente importantes. En este caso, el pastel no solo nos informa que se trata de una pastelería, sino de qué estilo particular podrían ofrecer. Combina esto con el texto esclarecedor asociado y tienes un tono de venta bastante claro. Esto es todo por no mencionar el increíblemente sabroso diseño en el que está envuelto este sitio.
Más Soda
Este ejemplo también hace uso de elementos de diseño asimétricos basados en una imagen grande combinada con un bloque de texto. En este caso, la conexión no es tan clara. No hay un elemento de venta obvio involucrado. En cambio, la imagen se vuelve más decorativa y crea un sentido general de estilo para el sitio. En mi opinión, es un poco menos funcional, pero es realmente difícil de decir sin saber exactamente cuán efectivo es el sitio. Parecería que un visual como este tiene un objetivo singular de incitarlo a profundizar un poco más para ver de qué se trata. Una especie de reclamo, si se quiere.
Diseño web adaptativo
Como probablemente ya hayas descubierto, este patrón es tan común como el color azul. Me atrevo a especular que casi todos los sitios terminan poniendo una herramienta visual como esta para que funcione en algún momento. Creo que esta naturaleza de lugar común lo convierte en un tema que vale la pena discutir. Muchas veces encuentro la mayor inspiración e ideas frescas al reconsiderar las cosas que hago una y otra vez sin pensar.
Este sitio simple promueve un libro. Y, por supuesto, el elemento principal cuando aterrizas es una gran imagen del libro. Combine esto con el gran bloque de texto y tendrá un área bien equilibrada que contenga todos los elementos críticos. Lo más importante es que termina con un llamativo llamado a la acción. La continuidad de esta área es simple y perfecta. Los ojos fluyen fácilmente a través de él y consumen la información crítica. No es confuso, ni complicado, ni inteligente ni complicado. El enfoque es simple y claro.
Elementos de primer plano y fondo
Un nuevo enfoque para el diseño asimétrico es hacer uso de elementos de fondo que equilibren asimétricamente los de primer plano. Este tipo de enfoque crea una dinámica interesante en la que el fondo cumple una función más funcional como parte del contenido y, sin embargo, sigue siendo parte del telón de fondo del sitio. La mayoría de las veces esto se hace a través de solapamientos simples que crean la ilusión de profundidad. Aquí hay algunas muestras para considerar.
Galería Peter McLeavey
Los sitios web de esta galería son una demostración perfecta de esta idea. Aquí el elemento de fondo cumple muchos roles. Primero, al punto de esta sección crea un equilibrio asimétrico con el gran círculo gris en primer plano. Esta combinación visual crea dos áreas que hacen que los ojos rebote hacia adelante y hacia atrás. Esto, en mi opinión, es algo bueno.
El elemento de la izquierda contiene la marca principal y enlaces al contenido del sitio, mientras que el elemento de fondo le informa el contexto del sitio. Estás viendo un sitio de la galería, y esto se vuelve muy obvio a los pocos segundos de aterrizar en el sitio. Me encanta que un elemento tan informativo como el fondo también pueda jugar un papel importante en el diseño y el estilo general del sitio. Especialmente cuando se hace eco tan perfectamente con el contexto del producto que ofrece el sitio. Un enfoque tan simple, pero muy efectivo.
Aleksandar Grkinic
Este simple sobre mi La página también abarca esta idea simple en la que un elemento de fondo equilibra un primer plano asimétricamente. Sin embargo, en este caso, el fondo no está del todo claro. Y esto es lo que realmente amo de eso. La ilusión de profundidad está totalmente allí, y sin ningún tipo de solapamiento, es realmente difícil decidir qué es realmente el fondo. Supongo que podríamos argumentar que la persona que salta no está en absoluto en segundo plano. De todos modos, el equilibrio asimétrico es claro. Y sin la hermosa combinación de diferentes elementos, la página no existiría. El diseño está, en muchos sentidos, basado exclusivamente en el concepto de equilibrio asimétrico. Muchas veces parece que los diseños extremadamente simples pueden verse extraordinarios con bellos contrastes como este.
Robert Dabi
En este caso, el fondo juega un papel interesante en el diseño, pero no produce los elementos asimétricos que hemos visto hasta ahora. En mi opinión, el gran visual es claramente un elemento en primer plano del diseño. Lo que me encanta, sin embargo, es cómo borra sutilmente esta línea con algo tan simple como la sombra debajo de la imagen. Esto efectivamente lo fusiona con el fondo y crea una hermosa dinámica. Obviamente, la imagen grande está asimétricamente equilibrada con la copia al lado. Pase por las páginas del sitio y encontrará agradablemente que el fondo cambia y se fusiona con las imágenes de maneras muy interesantes. Un diseño impresionante que se siente fresco, limpio y súper suave. Parece una maldita buena presentación para un sitio de cartera para mí.
Diez diseños más
A continuación he proporcionado diez diseños adicionales que hacen uso de elementos asimétricos. Como ya mencioné, podría colocar muchos sitios web en esta categoría. Por lo tanto, para los fines de este artículo, he seleccionado cuidadosamente diseños que creo que utilizan el enfoque de maneras ligeramente atípicas y creativas. Considere cada diseño a la luz de este tema y espero que obtenga algunas ideas nuevas para inspirar su próximo diseño.
Greenluv
Andersson sabio
Pronóstico
13 esposas
Raffles Institution
Urban Svensson
Carrusel
Purificar
Autobuses en la cervecería
Humaan
Conclusión
El equilibrio es una parte fundamental del proceso de diseño, y el uso de elementos asimétricos es igualmente básico. Siempre me gusta profundizar en los conceptos básicos del diseño, ya que siempre lo entiendo de una manera nueva que tiene un impacto en el trabajo que hago. Hay innumerables maneras de abordar las cosas y romper nuestros patrones a menudo puede conducir a diseños nuevos y frescos que rejuvenecen nuestra pasión por nuestros trabajos.
¿Cuáles son sus diseños de sitios web asimétricos favoritos? ¿Quién está haciendo algo diferente con asimetría? Háganos saber en los comentarios!